Aprender Dreamweaver CS4 con 100 ejercicios prácticos

009

          Administrar sitios locales

PARA FACILITAR SU GESTIÓN POSTERIOR, Dreamweaver permite estructurar un sitio antes de empezar a editar sus documentos. El panel Archivos permite visualizar archivos y carpetas, diferenciando los asociados a un determinado sitio. Un sitio puede contener distintos tipos de archivos, de formatos diferenciados. Las páginas web tradicionales, por ejemplo, vienen identificadas por la extensión htm. El panel Archivos permite su generación, así como el del resto de documentos que el programa permite editar. Además, posibilita la creación de subcarpetas dentro de la carpeta raíz del sitio.

IMPORTANTE

Tras la creación de un sitio local, el panel

Archivos

 muestra en su parte central el contenido de la carpeta definida como raíz del sitio.

1 Para empezar, pulse el botón de flecha de la palabra elemental, incluida en el desplegable Mostrar del panel Archivos.

El panel Archivos permite organizar y administrar los documentos y carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en una unidad local.

2 El desplegable Mostrar posibilita el acceso a todos los sitios configurados, al Escritorio, y a las unidades de almacenamiento del equipo. Seleccione la opción Escritorio y pulse en el signo + que precede a la carpeta Elementos de escritorio.

3 En el Escritorio colocamos la carpeta raíz, elemental, de nuestro sitio web local. Pulse el vínculo Administrar sitios

 y, en el cuadro del mismo nombre, seleccione el sitio elemental y haga clic en el botón Editar.

Los iconos de las carpetas y archivos pertenecientes a un sitio son verdes.En el cuadro Administrar sitios se listan todos los sitios creados hasta el momento.

4 En el cuadro de diálogo Definición del sitio para elemental active la ficha Avanzadas.

5 Los datos locales configurados en el asistente se muestran completados. Pulse el icono situado a la derecha del campo Carpeta predeterminada de imágenes.

6 Haga clic en el botón Escritorio del panel de accesos directos, abra la carpeta elemental con un doble clic sobre su icono y pulse el botón Nueva carpeta.

Es habitual reservar una carpeta del sitio para contener los archivos de imagen utilizados en las páginas y situarla un nivel por debajo de la carpeta raíz.

7 Escriba la palabra imágenes y pulse dos veces la tecla Retorno.

8 Una vez creada la carpeta que contendrá las imágenes del sitio elemental, pulse el botón Seleccionar. Después, pulse el botón Aceptar y, en el cuadro Administrar sitios, el botón Listo.

9 El panel Archivos se actualiza, pasando a mostrar el contenido del sitio elemental, una vez modificado. Haga clic en el icono de opciones del panel Archivos, abra el submenú Archivo y elija la opción Nuevo archivo.

Desde el panel Archivos puede crear nuevos archivos y nuevas carpetas.

10 Aparece un nuevo documento que usaremos como página inicial del sitio, la primera que se cargará en el navegador. Escriba la expresión index.htm y pulse Retorno.

Generalmente se usa el nombre index para identificar la página inicial del sitio.

11 Pulse con el botón derecho del ratón sobre el icono de la carpeta raíz del sitio elemental y elija la opción Nueva carpeta.

12 Cree una carpeta para los documentos dependientes de la página principal: escriba la palabra documentos y pulse Retorno.

13 De momento, incluiremos una página en blanco en esta nueva carpeta. Haga clic con el botón derecho del ratón en el icono de la carpeta documentos y seleccione la opción Nuevo archivo.

14 Escriba la expresión texto.htm como nombre del nuevo documento y pulse la tecla Retorno.

15 Ábralo con un doble clic y, para finalizar el ejercicio, abra el menú Archivo y seleccione el comando Cerrar todos.

Para cerrar a la vez todos los documentos abiertos use la opción Cerrar todos del menú Archivo.

          010

          Aplicar un fondo

ENTRE LOS ASPECTOS CONFIGURABLES mediante etiquetas se encuentran el color de fondo, el título y la codificación de las páginas. Estas propiedades se incluyen automáticamente en la cabecera de la página durante la generación de los documentos y pueden ser modificadas desde el cuadro Propiedades de la página.

IMPORTANTE

Como novedad en CS4, el panel Propiedades permite crear

nuevas reglas CSS

 obteniendo, como asistencia, sencillas explicaciones acerca del lugar que corresponde a las propiedades en la cascada de estilos y sin necesidad de escribir código.

1 En este ejercicio aprenderemos a definir las propiedades de las páginas web. En el panel Archivos, haga doble clic en el icono de la página index.htm.

2 Haga clic en el botón Propiedades de la página del Inspector de propiedades.

 Recuerde que puede acceder al cuadro Propiedades de la página usando el botón del mismo nombre del Inspector de propiedades, esa opción del menú Modificar o la combinacón de teclas Ctrl.+J.

3 Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la opción Apariencia HTML del panel de la izquierda.

4 El color de fondo de la página es una de las propiedades definidas mediante etiquetas HTML. Pulse en la punta de flecha del cuadro de color de la opción Fondo.

5 En Dreamweaver, muchos de los cuadros de diálogo contienen un cuadro que da paso a una paleta emergente. Elija la penúltima muestra de la última columna de la paleta, por ejemplo.

Pulse la rueda de color de la paleta para acceder al cuadro Color y poder agregar así muestras a los colores personalizados.

6 Haga clic en la opción Título/Codificación para acceder al contenido de esta categoría.

7 El título de una página queda definido mediante una etiqueta HTML de la cabecera. Pero, como sabe, no es necesario cambiar directamente la etiqueta desde la vista Código para variar el título que el programa preestablece para la página. En el campo Título escriba la palabra principal y pulse Aceptar.

Recuerde que puede cambiar el título de la página desde el cuadro de propiedades o desde la Barra de herramientas Documento.

8 En el panel Archivos, haga doble clic sobre el icono de la página texto.htm para abrirla.

9 Para armonizar el fondo con el del documento index.htm, acceda de nuevo al cuadro de diálogo Propiedades de la página pulsando en ese botón del Inspector de propiedades.

10 Seleccione la categoría Apariencia HTML

, pulse en la punta de flecha del cuadro de color de la opción Fondo y seleccione el mismo tono amarillo que en la ocasión anterior.

11 Haga clic en la opción Título/Codificación para acceder al contenido de esta categoría, en el campo Título, escriba la palabra secundaria y pulse el botón Aceptar.

12 El título y el color de fondo se aplican correctamente. En el próximo ejercicio veremos cómo aplicar una imagen como fondo de la página. Para acabar éste, guardaremos simultáneamente los cambios realizados en los documentos index.htm y texto.htm. En la barra de herramientas Estándar, pulse sobre el comando Guardar todo, que muestra la imagen de dos disquetes.

La opción Guardar todo permite almacenar en un solo paso los cambios realizados en todos los documentos abiertos. Puede encontrarla también en el menú Archivo.

IMPORTANTE

Los estilos CSS permiten definir gran número de aspectos. Así el cuadro de diálogo Propiedades de la página presenta una categoría específica para la definición del aspecto de los

enlaces

 y otra que permite la definición del formato que deben presentar los

encabezados

 de la página.

          011

          Aplicar una imagen de fondo

DREAMWEAVER PERMITE USAR IMÁGENES como fondo de las páginas. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si ha seleccionado una carpeta como predeterminada del sitio para el almacenado de imágenes, el programa automáticamente añade una copia del documento original en ella.

IMPORTANTE

Deben evitarse los documentos de imagen de gran tamaño, ya que aumentan el tiempo de descarga de la página y es recomendable seleccionar fondos de imagen de tamaño reducido que permitan visualizar correctamente los contenidos de la página.

1 En primer lugar realizaremos una copia de la página texto.htm, ya que nos interesa conservar este documento en su estado actual. Con ese archivo seleccionado en el panel Archivos, abra el menú de opciones del panel, haga clic sobre la opción Edición y seleccione el comando Duplicar.

Para conservar el documento original sin cambios, cree un duplicado a través de las opciones del panel Archivos.

2 La copia aparece en el mismo directorio que el original con el nombre Copia de texto.htm. Haga clic dos veces sobre el documento Copia de texto.htm, escriba foto.htm

 y pulse dos veces Retorno, una para confirmar el nombre y otra para abrir el archivo.Para cambiar el nombre de un documento puede usar la función Cambiar nombre de las opciones del panel Archivos o del menú contextual del documento o pulsar la tecla F2 o dos veces sobre él para mostrarlo en modo de edición.

3 Haga clic en el botón Propiedades de la página del Inspector de propiedades y pulse en la categoría Apariencia HTML.

4 Para usar una imagen como fondo es necesario indicar al programa la ubicación del documento en cuestión. Pulse el botón Examinar, situado a la derecha del campo Imagen de fondo.

El uso de imágenes como fondo es incompatible con el coloreado del mismo.

5 Aparece el cuadro Seleccionar origen de imagen. Mantenga seleccionada la opción Sistema de archivos y pulse el botón Subir un nivel, que muestra una carpeta y una flecha verde.

La opción Fuentes de datos, requiere la configuración de un sitio de prueba que utilice una tecnología que permita el control de datos.

6 Le recomendamos que cree una carpeta en el Escritorio que contenga todos los documentos e imágenes con los que va a trabajar en estos ejercicios. Puede llamarla Dreamweaver CS4 y almacenar en ella los documentos necesarios que encontrará en nuestra página de descargas. Abra la carpeta en cuestión con un doble clic, seleccione el archivo Roca verde y pulse Aceptar.

7 El campo Imagen de fondo pasa a contener la ruta de la misma. Pulse el botón Aceptar del cuadro Propiedades de la página.

8 El segundo icono del panel Archivos, Actualizar

, permite actualizar su contenido. Púlselo y, para acceder al contenido de la carpeta imágenes, pulse el signo + situado a su izquierda.Dreamweaver crea automáticamente una copia de las imágenes en la carpeta del sitio correspondiente.

9 Esta carpeta contiene la imagen aplicada como fondo, Roca verde. jpg. Ésta se presenta en la página en forma de mosaico, repitiéndose las veces necesarias para ocupar todo el fondo. Utilizaremos otro archivo que nos permita diferenciar el efecto de mosaico con más claridad. Pulse el botón Propiedades de la página, active la categoría Apariencia HTML y pulse el botón Examinar.

10 Seleccione esta vez el documento casa.jpg, pulse el botón Aceptar y repita la acción para cambiar la imagen de fondo.

11 Pulse la tecla F5 para actualizar el panel Archivos y compruebe que la nueva imagen se ha guardado correctamente en el sitio.

12 Abra el menú Archivo, seleccione el comando Restituir y, en el cuadro de confirmación que advierte que se perderán los cambios realizados, pulse el botón Sí para recuperar el aspecto inicial del documento.

          012

          Imágenes de rastreo y notas de diseño

LA CATEGORÍA IMAGEN DE RASTREO del cuadro Propiedades de la página permite seleccionar el documento de imagen original. Antes de su aplicación como imagen de rastreo el programa permite asignarle un porcentaje de transparencia para que no obstaculice el correcto visionado de los elementos de la página. Las Design notes, por su parte, facilitan la conservación de información adicional asociada a documentos. Son notas que el desarrollador del sitio crea para un archivo, asociándolas a éste pero guardándolas en un documento aparte.

IMPORTANTE

No es conveniente dejar elementos sobrantes en los sitios por lo que le recomendamos que vaya eliminando del panel Archivos las imágenes que deja de utilizar.

1 Ponga en primer plano el documento index.htm haciendo clic en su pestaña, acceda al cuadro Propiedades de la página y active la categoría Imagen de rastreo.

2 Primero debemos especificar el directorio en el que se encuentra el documento que va a ser utilizado como imagen de rastreo. Pulse el botón Examinar.

 Una imagen de rastreo sólo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador de Internet.Pese a no ser mostradas durante la visualización de las páginas en el navegador de Internet, el programa sitúa automáticamente los archivos utilizados como imágenes de rastreo en la carpeta predeterminada del sitio.

3 En el cuadro Seleccionar origen de imagen localice y seleccione el documento referencia y pulse Aceptar.

4 El programa realizará una copia en el directorio destinado a albergar este tipo de archivos en el sitio. Pulse el botón Aceptar.

5 La imagen queda incrustada en el fondo como guía visual para facilitar la edición de la página y su correcta estructuración. Acceda de nuevo al cuadro Propiedades de la página y active la categoría Imagen de rastreo.

6 Por defecto las imágenes de rastreo se muestran completamente opacas. Haga clic en la parte izquierda de la barra Transparencia hasta establecer una opacidad del 20% y pulse Aceptar.

La barra deslizante Transparencia permite determinar el índice de opacidad de la imagen de rastreo.

7 De este modo la imagen podrá ser utilizada de guía, sin que moleste. Ahora veremos cómo introducir otro tipo de ayudas para facilitar el control del trabajo, las llamadas Design notes o Notas de diseño. Abra el menú Archivo y elija la opción Design Notes.

8 Las notas de diseño pueden ser utilizadas para mantener información adicional asociada a los documentos, como comentarios sobre el estado del archivo. Haga clic en el campo de texto Nota y escriba la frase de ejemplo Borrar referencia.

También se puede acceder al cuadro Design Notes desde el menú contextual del documento al que queremos asociar la nota.

9 Y también pueden ser usadas para realizar el seguimiento de la información confidencial que no puede introducir por motivos de seguridad. Active la opción Mostrar al abrir el archivo.

10 De este modo la nota pasa a estar activa y será mostrada antes de poder iniciar la edición del documento al que se encuentra asociada. Pulse el botón Aceptar.

11 Pulse el botón de aspa de la pestaña del archivo index.htm y pulse Sí en el cuadro de advertencia

 para guardar los cambios.Cierre el archivo guardando los cambios y ábralo de nuevo para ver cómo actúan las notas.

12 Vuelva a abrir la página index.htm con un doble clic sobre su icono en el panel Archivos, compruebe que, efectivamente, el programa antes de cargar la página para su edición muestra la nota asociada al archivo, desactive la opción Mostrar al abrir el archivo y haga clic en Aceptar.

13 Acceda de nuevo al cuadro Propiedades de la página, active la categoría Imagen de rastreo, seleccione la ruta en ese campo, pulse la tecla Suprimir para eliminarla y haga clic en Aceptar.

IMPORTANTE

La ficha

Toda la información

 del cuadro Design Notes muestra el nombre y la ubicación del archivo al que la nota quedará asociada. El botón con el signo + permite la introducción de nuevos elementos en la nota, los parámetros de los cuales pueden ser definidos en los cuadros

Nombre

 y

Valor.

 El botón con el signo –, por su parte, elimina de la nota el elemento seleccionado en el cuadro central, llamado

Información.

          013

          Exportar y eliminar sitios

DREAMWEAVER GUARDA LAS CONFIGURACIONES establecidas para los sitios creados en una de las carpetas que el sistema destina a almacenar los datos de cada usuario. Pero cada vez resulta más habitual trasladar la información para realizar el trabajo en equipo o por necesidad. Dreamweaver permite exportar la configuración de cada uno de los sitios en archivos de extensión .ste que almacenan únicamente la configuración del sitio, nunca los archivos que lo componen. Del mismo modo, la eliminación de uno de los sitios definidos sólo conlleva la supresión de su configuración.

IMPORTANTE

Resulta conveniente exportar los sitios con regularidad, de modo que siempre se disponga de una copia de seguridad por si ocurre algún problema, evitando de este modo la pérdida accidental de información.

1 Pulse el botón de flecha del cuadro Mostrar del panel Archivos y seleccione la opción Escritorio.

2 Tras definir su configuración, creamos la estructura básica del sitio: la página principal y dos carpetas que contienen documentos e imágenes. Haga clic en el enlace Administrar sitios del panel Archivos.

 La exportación e importación de sitios web se lleva a cabo desde el cuadro de diálogo Administrar sitios.Los archivos de definición de sitios presentan la extensión .ste. Al exportar un sitio, el programa conserva su nombre original que puede ser sustituido por otro.

3 Dreamweaver permite almacenar la configuración establecida para definir un sitio, de forma que pueda ser utilizada con posterioridad en el equipo original o en otros. Seleccione el sitio elemental y pulse el botón Exportar.

4 En el cuadro Exportar sitio sólo debemos seleccionar el directorio en el que deseamos almacenar el archivo de definición del sitio. Pulse el botón Escritorio del panel de accesos directos y haga clic en el botón Guardar.

5 Una vez exportada la configuración, eliminaremos el sitio elemental. Pulse el botón Quitar del cuadro Administrar sitios.

6 La configuración del sitio no podrá ser recuperada si se elimina. Haga clic en el botón Sí

 para eliminarlo definitivamente y pulse el botón Listo del cuadro Administrar sitios.Al eliminar un sitio sólo eliminamos la configuración que lo define, conservándose toda la estructura de carpetas y archivos que lo componían.

7 Para acabar, cambiaremos de ubicación la carpeta que contiene la estructura de nuestro sitio. Para ello debemos antes cerrar sus documentos, que permanecen cargados en Dreamweaver. Abra el menú Archivo y seleccione el comando Cerrar todos.

8 Haga clic con el botón derecho del ratón sobre la carpeta elemental en el panel Archivos, pulse sobre el comando Edición y elija la opción Cortar del menú contextual.

Debe tener precaución al utilizar el comando Cortar, ya que una segunda aplicación del mismo borra del Portapapeles la información del primer elemento cortado. Además puede conllevar la perdida del elemento original, en función de la versión de su sistema operativo.

9 Situaremos esta carpeta dentro de una nueva carpeta que crearemos en el Escritorio. Pulse con el botón derecho del ratón en el icono de la carpeta Elementos de escritorio y, en el menú contextual, seleccione el comando Nueva carpeta.

10 En esta carpeta almacenaremos los diferentes sitios creados en estos ejercicios. Escriba la palabra sitios y pulse Retorno.

11 Haga clic con el botón derecho del ratón sobre la carpeta sitios, pulse de nuevo sobre el menú Edición y elija la opción Pegar. Puede comprobar que el contenido de la carpeta elemental ha sido trasladado correctamente.

Pulse el signo + situado a la izquierda del sitio pegado para comprobar que sus carpetas se han pegado con él.

          014

          Importar sitios

LOS ARCHIVOS DE DEFINICIÓN pueden ser importados desde Dreamweaver para recuperar la información de configuración, en el equipo del desarrollador o en cualquier otro. Para facilitar la importación, los documentos contenidos en el sitio definido en el archivo .ste deben estar estructurados como los del equipo de origen en el que se realiza la importación. Si la carpeta raíz del sitio no se encuentra en el mismo directorio en el que se encontraba cuando se creó el archivo de definición, se debe indicar la carpeta raíz y la carpeta de imágenes (en caso de querer utilizar este recurso).

IMPORTANTE

Las

Design notes,

 aunque están asociadas a un documento, se guardan como archivos independientes en la carpeta

_notes,

 generada automáticamente por el programa dentro del sitio. En el panel Archivos no se muestra esta carpeta puesto que su contenido no es utilizado para la visualización de las páginas en el navegador, sino que sólo se trata de notas de interés para los desarrolladores.

1 En este ejercicio importaremos la configuración guardada. En el panel Archivos, haga clic en el enlace Administrar sitios y, en ese cuadro, pulse el botón Importar.

2 En el cuadro Importar sitio, haga doble clic en el icono del archivo de definición del sitio elemental. <img alt="" src="fb3