Aprender Dreamweaver CS6 con 100 ejercicios prácticos. MEDIAactiveЧитать онлайн книгу.

Haga clic en el botón Código de la barra de herramientas Documento. Para cambiar de una vista a otra también puede utilizar las opciones disponibles en el menú Ver.

3 El documento pasa a mostrarse en forma de código. De este modo, los desarrolladores experimentados pueden modificarlo directamente. Algunos tipos de archivos, como los estilos CSS, no pueden ser editados de forma visual y sólo es posible editarlos tecleando el código. Pero los documentos HTML pueden ser editados de forma visual. Vuelva a la vista Diseño.

4 En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa, definiendo su aspecto. Pulse sobre la imagen de la página y pase a la vista Código.

5 El lenguaje HTML está basado en etiquetas. Si seleccionamos un elemento de la página en la vista Diseño, su etiqueta quedará seleccionada en la vista Código. Compruébelo pulsando el botón Dividir de la barra de herramientas Documento.

6 Este modo de visualización divide la ventana del documento en dos partes. En la izquierda se muestra el código y en la derecha se ve la representación visual del archivo. Haga doble clic sobre una de las palabras de la página en la ventana de diseño.

7 En la parte inferior de la ventana del documento se sitúa la Barra de estado, donde se encuentra el Selector de etiquetas, que muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en una de las etiquetas y compruebe que se selecciona el elemento definido por ésta en la vista Diseño y el correspondiente fragmento de programación en la vista Código.

8 Pulse el botón Código de la barra de herramientas Documento y haga clic en la etiqueta body de la Barra de estado.

9 La selección de esta etiqueta comporta la de todos los elementos contenidos en la página. Cambie a la vista Diseño pulsando este botón de la barra Documento para dar por acabado el ejercicio.

IMPORTANTE

Los tamaños de ventana predefinidos, establecidos en píxeles, tienen en cuenta la visualización final del documento. Las páginas web una vez publicadas son reproducidas mediante un navegador de Internet. La ventana del navegador presenta un determinado tamaño en función de la resolución de pantalla (píxeles por pulgada) seleccionada. Dreamweaver propone tamaños de ventana indicando las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Los tamaños preestablecidos sólo podrán ser aplicados si trabajamos con la disposición de ventanas clásica, siendo imposible aplicarlos si los documentos quedan dispuestos en forma de fichas.

006	Conocer los elementos de una página web

LA VISTA DISEÑO SÓLO MUESTRA por defecto el contenido del cuerpo de la página, pero Dreamweaver permite editar su cabecera también de forma visual. Para ello, debe mostrarse el Contenido de head. Cada una de las etiquetas de esta sección puede ser modificada a través del Inspector de propiedades. El usuario puede definir fácilmente propiedades como el título, las etiquetas meta o los estilos de color empleados. El panel de propiedades también se usa para modificar los elementos contenidos en el cuerpo de la página.

IMPORTANTE

Los enlaces permiten la navegación, conectan las páginas con otras, y suelen presentarse con aspecto de texto subrayado.

1 Con el documento muestra.html abierto en Dreamweaver, despliegue el menú Ver y seleccione la opción Contenido de Head.

2 Aparece la representación visual de la sección head bajo la barra de herramientas Documento. Para mostrar el código correspondiente, haga clic en el botón Dividir de esa barra.Cuando divida el área de trabajo en las dos vistas, los elementos de head continuarán en la parte superior de la vista Diseño.

3 Dreamweaver muestra un icono por cada uno de los elementos de la sección head. Seleccione el primero.

4 La etiqueta correspondiente, title, se selecciona. El primer elemento de la cabecera es, por tanto, el título del documento y consta de una sola propiedad, Título, que se muestra ya en el panel de propiedades. No debe confundirse el título de la página con el nombre del archivo: el título se muestra en la Barra de título del navegador cuando se visualiza la página publicada. Seleccione el texto del campo Título de la Barra de herramientas Documento, escriba la palabra muestra y pulse la tecla Retorno para confirmar el cambio. También puede cambiar el título de su página escribiéndolo directamente en la etiqueta del código o bien en el campo Título del Inspector de propiedades.

5 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Para comprobarlo, haga clic en el segundo icono de la sección head. Esta información, que consta de tres propiedades, queda establecida automáticamente durante la generación del documento, en función del formato que éste presente.

6 Esta etiqueta indica al navegador cómo se debe descodificar el documento y qué fuentes se deben utilizar para mostrar el texto descodificado. Seleccione el tercer elemento de la sección head.

7 Esta sección se completa con un estilo CSS que define atributos de formato de los elementos contenidos en el cuerpo de la página. Haga clic en el botón Diseño de la Barra de herramientas Documento.

8 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.

9 El panel Propiedades presenta los atributos del texto actualmente seleccionado. Los enlaces son otro de los elementos principales de las páginas. Seleccione con un doble clic la palabra Pulse.

10 El texto definido como enlace aparece en el campo Vínculo. Los enlaces también pueden añadirse a imágenes. Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo. Otros componentes pueden ser tablas, sonidos, videos y diversos tipos de elementos multimedia. Seleccione la imagen para ver sus propiedades y dar por acabado el ejercicio.

IMPORTANTE

Las ayudas visuales, activas por defecto, facilitan la realización de algunas acciones. Para desactivarlas puede optar por utilizar el comando Ocultar todo del submenú Ayudas visuales del menú Ver o acudir al menú emergente del botón Ayudas visuales y activar la opción Ocultar todas las ayudas visuales.

Скачать книгу