Kitabı oku: «Manual de Dreamweaver CS5», sayfa 3

Al crear un documento basado en un archivo de muestra, Dreamweaver crea una copia del archivo.

8 Mediante los estilos se pueden controlar el aspecto y los colores del texto y de otros elementos de las páginas, como el fondo y las tablas. Pulse el botón Crear.

9 Automáticamente aparece en el área de trabajo el nuevo documento CSS, mostrando el código del contenido de partida, que define los diferentes parámetros del estilo. (7) De momento, regresaremos al cuadro de diálogo Nuevo documento para seguir conociendo sus opciones. En este caso, pulse la combinación de teclas Ctrl + N.

10 En el panel Carpeta de muestra, seleccione en esta ocasión el directorio Conjunto de marcos. (8)

El cuadro de diálogo Nuevo documento recuerda los parámetros utilizados en el último uso.

11 Los marcos se utilizan para distribuir los elementos de una página, dividiéndola en diferentes archivos HTML integrados en un documento principal. Pulse ahora sobre la categoría Página en blanco para seleccionarla.

12 Mantenga seleccionada como tipo de documento la opción HTML y haga clic sobre el primer diseño de página de 2 columnas, denominado 2 columnas fijas, barra lateral derecha. (9)

13 El cuadro de diálogo se completa con un enlace y una serie de botones en su parte inferior. Además de los botones que permiten la creación del documento seleccionado y la cancelación de la operación, aparecen los encargados de conducir a la ayuda del programa y al cuadro de diálogo Preferencias. Pulse el botón Preferencias.

14 El acceso al cuadro de diálogo Preferencias desde el cuadro de diálogo Nuevo documento comporta que se muestre directamente la categoría del mismo nombre. Pulse el botón de flecha del cuadro desplegable Documento predeterminado para acceder a sus opciones. (10)

Es posible crear páginas con una diseño CSS prediseñado o bien crear completamente en blanco y realizar su propio diseño.

Estas opciones permiten establecer un tipo de documento como predeterminado.

15 Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. En este curso trabajaremos principalmente con documentos HTML, de modo que no cambiaremos la opción configurada por defecto. Haga clic nuevamente sobre el botón flecha del desplegable Documento predeterminado para ocultar la lista de opciones.

16 La desactivación de la casilla de verificación Mostrar el cuadro de diálogo Nuevo documento con Control + N permite omitir la aparición del mencionado cuadro para acceder a la creación de documentos a través del método abreviado de teclado correspondiente. Haga clic en Aceptar. (11)

17 Por último, el enlace Obtener más contenido inicia Dreamweaver Exchange, que permite descargar más contenido de diseño de páginas. Pulse el botón Crear para crear el nuevo documento (12) y dar por terminado este ejercicio.

Además de acceder al cuadro de Preferencias desde el cuadro de diálogo Nuevo documento, también dispone de un acceso en el menú Edición del programa.

La disposición en pestañas de los documentos abiertos en Dreamweaver permite una fácil navegación por los mismos.

RECUERDE

Los archivos de Hojas de estilos en cascada tienen la extensión .css y se utilizan para aplicar formato al contenido HTML y controlar la posición de los distintos elementos de la página.

Lección 5. Ver distintos archivos a la vez

Dreamweaver, al igual que la práctica totalidad de los programas creados para Windows, permite visualizar varios archivos simultáneamente, si bien sólo es posible manipular uno de ellos cada vez. La versión CS5 de Dreamweaver presenta la disposición en forma de fichas de los diferentes documentos abiertos. Las pestañas identifican cada uno de los documentos 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. 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.

RECUERDE

La disposición en forma de fichas facilita la selección de los diferentes archivos para su edición; sin embargo, el programa permite distribuirlos del modo que el usuario considere más oportuno.

1 Contamos al inicio de la lección con dos documentos en pantalla, creados en las prácticas anteriores. En la primera parte de esta lección conoceremos el modo de abrir archivos en Dreamweaver. Para ello, vamos a utilizar un archivo de muestra, denominado precisamente muestra.htm, que puede descargar desde nuestra página web junto con la imagen foto-flor.jpg y guardarlas ambas en la carpeta de documentos de su equipo. Una vez disponga de él, despliegue el menú Archivo y pulse sobre la opción Abrir.

2 El cuadro de diálogo Abrir se abre por defecto mostrando el contenido de la carpeta de documentos del equipo. Seleccione el documento muestra.htm y pulse sobre el botón Abrir para ejecutarlo en Dreamweaver.

3 El nuevo documento abierto se sitúa en primer plano, pero los otros continúan abiertos, como podemos comprobar viendo sus pestañas. A continuación, despliegue el menú Ventana.

4 En la parte inferior del menú Ventana se listan los documentos en uso. Pulse sobre el nombre del documento Untitled-2. (1)

La combinación de teclas Ctrl + O también nos conduce al cuadro de diálogo Abrir.

5 El documento seleccionado pasa a estar en primer plano. (2) Como hemos dicho, en la parte superior de la ventana del documento los archivos quedan representados por pestañas. Haga clic en la pestaña del documento muestra.htm para poner este documento en primer plano.

6 Dreamweaver conserva las disposiciones de ventana clásicas de Windows, accesibles desde el menú Ventana. Despliegue de nuevo este menú y seleccione con un clic el comando Cascada.

7 Cada uno de los archivos se muestra en una ventana independiente, al estilo clásico de Windows. Para activar un documento (es decir, para que las acciones y modificaciones que se realicen se apliquen en él), basta con hacer clic dentro de la ventana que contiene dicho archivo. Los botones de control de la ventana, en el extremo derecho de su Barra de título, permiten controlar su estado de modo directo. Pulse el botón Minimizar de la ventana del documento muestra.htm, situada en primer plano. (3)

El menú contextual de las ventanas dispuestas en cascada también contiene las opciones de minimizar/ restaurar, maximizar y cerrar.

8 El documento queda ubicado en la esquina inferior izquierda del área de trabajo. (4) Pulse el botón Maximizar del archivo Untitled-3. (5)

9 El área de trabajo recupera su distribución inicial, representando los diferentes documentos en forma de fichas y recuperando incluso la ventana que habíamos minimizado. El icono situado en el extremo derecho de la barra de pestañas permite recuperar la última organización en ventanas. Compruébelo pulsando en dicho icono. (6)

10 Efectivamente, ahora disponemos de dos ventanas y el documento muestra minimizado. En la Barra de título de este documento, el primero de los botones de control muestra el icono identificativo del comando Restaurar tamaño, con lo que su pulsación devolverá a la ventana el 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 seleccionado, muestra la etiqueta strong, debido al estilo aplicado, el estilo negrita. Este texto se encuentra en el interior de una tabla. Haga clic en la etiqueta <table> de la Barra de estado. (5)

8 La pulsación sobre la etiqueta en la Barra de estado implica la selección del elemento definido por ésta en la vista Diseño, en este caso la tabla, y el correspondiente fragmento de programación en la vista Código. Pulse el botón Código de la barra de herramientas Documento. (6)

9 Así la etiqueta table contiene toda la programación correspondiente a los elementos incluidos en la tabla. Y a su vez la tabla pertenece al cuerpo de la página. Haga clic en la etiqueta body de la Barra de estado.

10 Una página Web se compone de dos secciones diferenciadas. La primera se denomina head (cabecera) y contiene las instrucciones genéricas que definen el documento y posibilitan su posterior visualización en Internet. La segunda se denomina body y contiene el cuerpo de la página, es decir, el código necesario para representar los diferentes elementos que la componen. La selección de la etiqueta body comporta por tanto la de todos los elementos contenidos en la página. Cambie a la vista Diseño pulsando este botón de la barra Documento.

11 La Barra de estado se completa con la zona informativa. Ésta ocupa el extremo derecho de la barra y presenta el campo Tamaño de descarga/Tiempo de descarga, situada junto al porcentaje de zoom, que sólo aparece en la vista Diseño, que muestra una estimación del tamaño del documento y del tiempo de descarga de la página. Este campo permite cambiar el tamaño de la ventana del documento para que adopte dimensiones predeterminadas o personalizadas. Despliegue este campo para ver su contenido. (7)

La selección de la etiqueta body comporta la selección de todo el contenido de la página en la vista Diseño.

12 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. Pero los tamaños preestablecidos tan 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. Seleccione con un clic la única opción activa del menú, Editar tamaños.

13 Se abre así el cuadro de preferencias del programa mostrando la categoría Barra de estado. (8) En ella podemos variar alguno de los tamaños preestablecidos, a fin de personalizarlos, o crear un tamaño nuevo propio. Los diferentes tamaños predefinidos quedan listados en el cuadro Tamaños de ventana, que presenta tres columnas. El primer tamaño permanece incompleto, quedando establecido únicamente el valor correspondiente a la anchura. El valor de la columna Ancho determina la cantidad de píxeles, puntos de información de color, que presentará horizontalmente la ventana del documento. Haga clic sobre el valor 592, en la primera posición de la columna Ancho, para seleccionarlo, introduzca el número 300 y pulse la tecla Retorno.

14 El valor Alto, por tanto, determina la cantidad de píxeles verticales de la ventana. Haga clic en el espacio en blanco de la columna Alto, inserte la cifra 100 y pulse la tecla Retorno.

15 El valor incluido en el campo Descripción también aparece en el campo Tamaño de descarga/Tiempo de descarga, facilitando la selección de la opción adecuada. Haga clic en el espacio en blanco de la columna Descripción para situar el cursor de edición en este punto, escriba la palabra publicidad y pulse la tecla Retorno. (9)

16 La categoría Barra de estado se completa con el campo Velocidad de conexión. Para calcular este dato, el programa realiza una estimación de la velocidad de transmisión de datos. Pero el tiempo de descarga real dependerá de las condiciones generales de Internet y principalmente de la velocidad de conexión del usuario. El programa permite seleccionar una de las velocidades de conexión predeterminadas. La velocidad de descarga de las páginas es primordial, ya que los usuarios no acostumbran a tener paciencia. Resulta en todo caso aconsejable utilizar un valor de descarga bajo, en previsión de usuarios que no dispongan de buenas conexiones a Internet, de modo que la descarga de nuestras páginas no sea lenta ni en estos casos. Mientras que los tamaños de ventana preestablecidos sólo pueden ser aplicados en la disposición clásica de ventanas, la información del tiempo de descarga de la Barra de estado resulta de gran ayuda para valorar la relación calidad/tamaño de nuestros documentos durante su edición. Haga clic en Aceptar para abandonar el cuadro de diálogo Preferencias.

17 Para terminar la presente práctica, haga clic en una zona libre de la página para eliminar la selección actual del contenido. (10)

Si no se encuentra ningún elemento de la página seleccionado, tampoco ninguna etiqueta del Selector de etiquetas se encuentra activada.