aspecto que presentaba antes de ser minimizada. Pulse ese botón.
11 Despliegue ahora el menú Ventana y haga clic sobre el comando Mosaico horizontal.
12 Compruebe la reorganización del área de trabajo; de esta forma, es posible visualizar parte del contenido de todas las ventanas abiertas. Dreamweaver permite aplicar ciertas acciones a la totalidad de documentos en uso. Despliegue el menú Archivo.
13 El menú Archivo presenta las opciones Cerrar todos y Guardar todo. La selección del primero de ellos implica el cierre de todos los documentos en uso manteniéndose abierto el programa. Seleccione con un clic este comando Cerrar todos.
14 Los tres documentos se han cerrado directamente, puesto que no habían sufrido cambios desde su apertura. Conoceremos los modos de almacenar diferentes tipos de archivo en las prácticas de este curso. En la parte final de la lección recuperaremos el documento muestra mediante la lista de archivos usados recientemente del programa. Para ello, despliegue de nuevo el menú Archivo, pulse sobre el comando Abrir reciente. (7)
15 Se despliega un submenú con el listado de los documentos que han sido editados con anterioridad. En él evidentemente sólo aparecen los archivos almacenados en disco y, por tanto, recuperables. Haga clic en el documento muestra.htm para abrir este documento.
16 El documento se presenta en el área de trabajo en la disposición que presentaba en el momento de ser cerrado, en forma de ventana de Windows. (8) Para concluir la práctica recuperaremos la disposición de fichas característica de Dreamweaver. Pulse el botón Maximizar de la ventana del documento muestra.
La opción Volver a abrir documentos al iniciar incluida en el comando Abrir reciente permite indicar que al volver a acceder al programa se abran los documentos actuales.
RECUERDE
El comando Mosaico vertical permite reorganizar verticalmente todos los documentos abiertos.
Lección 6. Alternar entre las vistas de diseño y de código
Dreamweaver es un editor visual de páginas Web, de manera que no es necesario conocer el lenguaje de programación de las mismas 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 edición visual más intuitiva posibilita la creación de vistosas páginas HTML sin necesidad de tener conocimientos previos de programación. 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 de la página). La primera contiene las etiquetas necesarias para que la página sea correctamente visualizada en Internet, y la sección body, los elementos que conforman propiamente la página.
RECUERDE
La ventana del documento presenta en su parte inferior la Barra de estado, que contiene el Selector de etiquetas y un área informativa desde la que es posible acceder a la categoría Barra de estado del cuadro de diálogo Preferencias. En éste 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 En la lección anterior abrimos el documento de ejemplo muestra.htm, una página Web con formato HTML. Con él practicaremos con las vistas Diseño y Código. Los documentos HTML pueden ser visualizados de tres modos. La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada. El espacio de trabajo predeterminado Diseñador presenta en la vista Diseño todos los documentos que permiten este modo de visualización. Para cambiar esta vista, pulse el botón Código en la barra de herramientas Documento.
2 El documento pasa a mostrarse en forma de código. (1) De este modo, los desarrolladores experimentados pueden modificarlo directamente. Algunos tipos de archivos, los estilos CSS por ejemplo, no pueden ser editados de forma visual ya que sólo es posible editarlos tecleando el código correspondiente. Pero los documentos HTML pueden ser editados de forma visual, es decir, controlando en todo momento el aspecto que presentará el documento editado. La barra de herramientas Documento contiene botones que permiten cambiar las vistas de modo directo. Las páginas HTML pueden ser visualizadas de tres modos. Haga clic de nuevo en el botón Diseño de la barra de herramientas Documento.
El menú Ver también permite alternar entre las vistas del documento disponibles.
3 En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa, definiendo el aspecto que deben presentar. Pulse sobre la imagen que aparece en la página. (2)
4 Y si dominamos el lenguaje de programación podemos acceder a la vista Código y modificar los elementos directamente cambiando las etiquetas de programación. Con la imagen seleccionada, pulse el botón Código de la barra Documento.
5 El lenguaje HTML se basa en la introducción de las llamadas etiquetas (tags en inglés). Si seleccionamos un elemento de la página en la vista Diseño, la etiqueta correspondiente queda resaltada de color azul en la vista Código. Para comprobarlo, pulse el botón Dividir de la barra de herramientas Documento.
6 Este modo de visualización divide la ventana del documento en dos partes. (3) A diferencia de versiones anteriores del programa, la división de las áreas de diseño y código se realiza verticalmente, siendo la parte izquierda la reservada al código y la derecha, al diseño. Haga doble clic sobre la palabra Imagen en la ventana de diseño. (4)
Debe saber que toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación.
En la ventana de código, compruebe como, efectivamente, la palabra Imagen, actualmente resaltada de color gris, se encuentra entre el código strong.
7 En la parte inferior de la ventana del documento se sitúa la Barra de estado, que proporciona información adicional sobre el archivo que está siendo editado. La parte inicial de la mencionada barra queda reservada al Selector de etiquetas, que muestra la jerarquía de etiquetas que rodea a la selección actual. En el caso del texto Imagen, el cual se encuentra
