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