Dreamweaver permite insertar y editar este tipo de objetos, entre otros (archivos multimedia, tablas, formularios), en los documentos y facilita su edición visual.
RECUERDE
No debe confundirse el título de la página con el nombre del archivo. El título, que también aparece en la Barra de título de la ventana del documento de Dreamweaver, se muestra en la Barra de título del navegador cuando se visualiza la página publicada, a diferencia del nombre del documento.
1 Las páginas web contienen elementos que describen la información de la página y que son utilizados por los navegadores de búsqueda. Ya en la lección anterior comentamos que una página HTML se divide principalmente en dos secciones: head y body. La primera de ellas por defecto no tiene representación visual en la vista Diseño; sin embargo, Dreamweaver permite definir las propiedades de elementos head para controlar cómo se identifican las páginas. Para consultar este contenido despliegue el menú Ver y seleccione la opción Contenido de Head. (1)
El comando Contenido de Head también puede ejecutarse mediante la combinación de teclas Ctrl + Mayús + H.
Debe saber que si la ventana de documento está configurada para mostrarse sólo en la vista Código, el comando Contenido de Head del menú Ver no se encontrará activo.
2 Aparece la representación visual de la sección head bajo la barra de herramientas Estándar. (2) Para mostrar el código correspondiente, haga clic en el botón Dividir de esta barra. (3)
3 Dreamweaver muestra un icono por cada uno de los elementos de la sección head, permitiendo de este modo su selección directa. Seleccione, con un clic de ratón sobre su icono, el primer elemento de dicha sección.
4 Compruebe el cambio tanto en la ventana de código como en el panel de propiedades y en el Selector de etiquetes. La etiqueta correspondiente, title, queda seleccionada. El primer elemento de la cabecera es, por tanto, el título del documento y consta de una sola propiedad, la que se refleja en el campo Título. Desde el panel de propiedades podemos modificar el texto del título. Seleccione el contenido del campo Título, escriba la palabra muestra y pulse la tecla retorno para confirmar el cambio.
5 El título también puede ser modificado en el campo Título de la barra de herramientas Documento, así como en la correspondiente línea de código. Compruebe como el nuevo título se refleja tanto en el inspector de propiedades como en el mencionado campo, así como en la línea de código correspondiente. (3) Haga clic en el segundo icono de la sección head. (4)
Al mostrar el código y el diseño de la página, el contenido de head se sitúa siempre en la parte superior de la ventana del diseño.
El Inspector de propiedades presenta como principal característica su sensibilidad al contexto, cambia su contenido adaptándose a la herramienta o el elemento seleccionado.
6 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Una etiqueta meta es un elemento de head que contiene información sobre la página actual, como la codificación de caracteres, el autor, el copyright o las palabras clave; también pueden facilitar información al servidor, como la fecha de caducidad o el intervalo de actualización de la página. Toda esta información consta de tres propiedades y queda establecida automáticamente durante la generación del documento, en función del formato que éste presente. Seleccione el tercer y último elemento de la sección head. (5)
7 La sección head del documento se completa con un estilo CSS que define atributos de formato de los elementos contenidos en el cuerpo de la página. Puede consultar estos atributos en las líneas de código seleccionadas en este momento. Haga clic en el botón Diseño de la barra de herramientas Documento.
8 En la segunda parte de esta lección realizaremos un acercamiento a los contenidos más usuales de las páginas Web. Ocultaremos por tanto el contenido de la cabecera en la vista Diseño. Para ello, despliegue el menú Ver y pulse sobre el comando Contenido de Head. (6)
Es posible insertar y editar cualquiera nuevos componentes de head. Para agregar un componente de head, es preciso dirigirse al menú Insertar, desplegar el comando HTML y seleccionar la opción Etiquetas head.
9 Nuestra página de ejemplo cuenta con algunos de los elementos clásicos que conforman una página Web. Haga doble clic, en la ventana del documento, sobre la palabra Página.
10 El texto es un componente básico de las páginas Web, ya que resulta fundamental para transmitir la información. Dreamweaver permite introducir y editar el texto de las páginas, así como configurar su aspecto. El panel Propiedades, sensible al contexto, presenta los atributos del texto que encabeza la página, actualmente seleccionado. Haga doble clic sobre la palabra Texto, en la primera celda de la tabla.
11 La información contenida en el Inspector de propiedades se actualiza automáticamente, mostrando los atributos de la selección. De este modo, por ejemplo, el panel muestra activo el botón B, indicativo de la aplicación del atributo negrita al texto seleccionado. Haga doble clic en la palabra Bienvenido, en la primera celda de la segunda columna de la tabla.
12 En cambio, este texto no presenta el atributo negrita y, por tanto, el botón B del Inspector de propiedades se muestra desactivado. Los enlaces son otros elementos importantes de las páginas web. Seleccione con un doble clic la palabra Pulse.
13 Los enlaces permiten la navegación, conectan las páginas con otras y suelen presentarse con aspecto de texto subrayado. Pero la única propiedad fundamental que diferencia un enlace de un texto normal puede apreciarse en el Inspector de propiedades. El texto definido como enlace se muestra en el cuadro Vínculo de este panel. En este caso, el texto seleccionado enlaza con la página principal del sitio de la empresa desarrolladora de este curso, MEDIAactive. Seleccione la imagen con un clic de ratón. (7)
14 Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo visual. Para distribuir los diferentes elementos de forma ordenada suelen utilizarse tablas. Nuestra página de ejemplo cuenta con una. Tras la selección de los elementos contenidos en ella han aparecido en su parte superior unas ayudas visuales, de color verde. Haga clic en la punta de flecha que aparece a la derecha de la cifra 175 de la ayuda visual.
Los enlaces también pueden ser incluidos en imágenes.
15 Las ayudas visuales, activas por