CONCEPTOS BÁSICOS DE DREAMWEAVER CS6

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando nuestras páginas, habitualmente en una sub_carpeta dedicada a las imágenes.

Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas publicar la página en Internet, hay que respetar los derechos de autor de la imagen.

Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas de crear.

Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar, situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter). Después nos dirigimos al menú Insertar, opción Imagen.

                                      

En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, seleccionarla y pulsar Aceptar.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:

                                      
                                     

Si no te aparece, puedes mostrarlo a través del menú Ventana, opción Propiedades.

Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.

Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando el valor Encabezado 1 del cuadro Formato.

                                                  

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a la izquierda.

Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades de CSS como a las propiedades de HTML.

                                          

Podemos decir que en una página web, HTML se encarga de estructurar el contenido, la información, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la página Web y reducen el tamaño del archivo.

Selecciona la primera línea. En Regla de destino selecciona <Nuevo estilo en línea>, para aplicar el formato solo al texto seleccionado. También aplica el estilo de FuenteArial, Helvetica, sans-serif, color azul #009 y centra el texto con el segundo botón de la parte derecha , tal y como muestra la imagen siguiente:

 

Selecciona la segunda línea de texto, y seleccionando como antes <Nuevo estilo en línea>, marca los botones para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre propiedades.   

Ahora, en Regla de destino selecciona <Nuevo estilo en línea> y centra el párrafo como hemos visto hasta ahora, pulsando en .

Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las propiedades de HTML.

En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:

                                             

                                             

Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.

Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html. Por ejemplo, lo hemos llamadomiprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen descargada.

Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.