Aprender Dreamweaver CS4 con 100 ejercicios prácticos

DREAMWEAVER MUESTRA LOS DIFERENTES documentos abiertos distribuidos en fichas. Sus pestañas los identifican y permiten activarlos fácilmente. De forma predeterminada, las fichas se muestran en el orden de creación o apertura de los archivos pero se pueden arrastrar para cambiarlas de posición. Las fichas sólo se muestran cuando la ventana del archivo se encuentra maximizada; en caso contrario, las ventanas funcionan como las tradicionales de Windows. Dreamweaver también permite disponer los archivos en forma de Cascada y Mosaico, opciones clásicas de distribución de ventanas del sistema operativo de Microsoft.

IMPORTANTE

Dreamweaver ofrece una posibilidad de recuperación directa de los archivos de uso reciente. Se trata de la opción Abrir reciente del menú Archivo, que contiene un submenú con el listado de los documentos que han sido editados y almacenados con anterioridad.

1 Contamos al inicio de la lección con varios documentos en pantalla creados en las prácticas anteriores. Para realizar este ejercicio, debe disponer de una página HTML de ejemplo almacenada en su equipo. Abra el menú Archivo y pulse en la opción Abrir.

2 La acción nos conduce al cuadro de diálogo Abrir. Localice y seleccione su archivo de ejemplo y pulse el botón Abrir.

3 Abra el menú Ventana y pulse sobre uno de los documentos sin título para mostrarlo en primer plano.

4 El archivo de ejemplo sigue abierto, pero permanece inactivo. Haga clic en la pestaña de ese archivo para activarlo.

5 Esta disposición en forma de fichas facilita la selección de los archivos para su edición. Pero el programa permite distribuirlos de otras maneras. Dreamweaver conserva las disposiciones de ventana clásicas de Windows, accesibles desde el menú Ventana. Ábralo y seleccione la opción Cascada.

6 Cada uno de los archivos se muestra en una ventana independiente, al estilo clásico de Windows

7 El documento queda ubicado en la esquina inferior izquierda del área de trabajo. Pulse el botón Maximizar del siguiente archivo.

8 El área de trabajo recupera su distribución inicial, distribuyendo los diferentes documentos en fichas. Abra el menú Ventana y seleccione la opción Mosaico horizontal.

9 El documento de ejemplo sigue minimizado. En su Barra de título, el primero de los botones de control muestra el icono identificativo del comando Restaurar

10 Además el programa permite aplicar ciertas acciones a la totalidad de documentos en uso. Abra el menú Archivo y pulse en la opción Cerrar todos.

11 Aparece un cuadro de advertencia que propone almacenar los cambios en los documentos que han sido modificados. Si los documentos no se guardan será imposible recuperarlos. Pulse el botón No para dar por acabado el ejercicio.

DREAMWEAVER ES UN EDITOR VISUAL de páginas web, por lo que no es necesario conocer el lenguaje de programación para editarlas. Pero el programa también permite la edición directa del código, de modo que los programadores experimentados pueden introducir directamente las instrucciones. La codificación de los documentos HTML se basa en una estructura de etiquetas. Las páginas cuentan con dos secciones de código: head (cabecera) y body (cuerpo). La primera contiene las etiquetas necesarias para que la página se vea correctamente en Internet, y la segunda, los elementos que conforman la página.

IMPORTANTE

En la categoría Barra de estado del cuadro de diálogo Preferencias se pueden determinar tamaños preestablecidos de ventana y ajustar la velocidad de conexión para facilitar la valoración de la relación calidad/tamaño de las páginas durante su edición.

1 Toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación. Con su documento de ejemplo abierto en Dreamweaver, despliegue el menú Ver.

2 La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada. En el espacio de trabajo Diseñador, Dreamweaver presenta en la vista Diseño todos los documentos que permiten este modo de visualización. Seleccione la opción Código.

3 El documento pasa a mostrarse en forma de código.

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 una imagen de su página y haga clic en el botón Código de la barra Documento.

5 El lenguaje HTML se basa en la introducción de 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

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

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.

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. (Puede encontrar este archivo en nuestra página de descargas).

2 Aparece la representación visual de la sección head bajo la barra de herramientas Documento

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

5 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. Escriba la palabra prueba y pulse la tecla Retorno para confirmar el cambio.

6 Haga clic en el segundo icono de la sección head.

7 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento

8 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, pulse el icono Ver opciones, el cuarto empezando por la derecha, y haga clic en la opción Contenido de 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 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.

11 El texto definido como enlace aparece en el campo Vínculo.

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, vídeos y diversos tipos de elementos multimedia.

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.

PUEDE GUARDAR LOS DOCUMENTOS de Dreamweaver con el nombre y ubicación predefinidos por el programa o modificarlos desde el cuadro de diálogo Guardar como. Los comandos relativos al almacenado de documentos son accesibles desde el menú Archivo y las funciones habituales de copia, pegado, etc., se encuentran en el menú Edición.

IMPORTANTE

El comando Deshacer anula la última acción realizada y el comando Rehacer la recupera. Ambos se encuentran en el menú Edición y en la Barra de herramientas Estándar de Dreamweaver.

1 En el ejercicio anterior hemos utilizado el documento HTML muestra, que ha sido modificado. Por eso aparece un asterisco en su pestaña. El método más sencillo para almacenar los cambios efectuados en un documento consiste en la ejecución del comando Guardar desde el menú Archivo. Este comando puede ser ejecutado directamente mediante la combinación de teclas Ctrl.+S. Abra el menú Archivo y pulse en el comando Guardar.

2 El programa guarda los cambios efectuados, conservando la ubicación original y el nombre del documento. La opción Guardar se ve complementada por los comandos Guardar como, Guardar todo, Guardar en servidor remoto y Guardar como plantilla. Abra el menú Archivo y elija la opción Guardar como.

3 La utilización de este comando está indicada para almacenar los documentos editados como copia de los originales. Su ejecución conduce al cuadro de diálogo Guardar como

4 Ahora contamos con dos documentos iguales, siendo la copia, muestra2, la que se muestra activada para su edición