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

RECUERDE

La codificación, también incluida en el encabezado, adapta la página al idioma utilizado. En principio, los navegadores de Internet están configurados para el idioma del país al que pertenecen. Si la intención del usuario es que las páginas contengan caracteres específicos de un idioma, puede seleccionarlo en el campo Codificación de la categoría Título/ Codificación del cuadro de propiedades.

Lección 12. Insertar una imagen de fondo a una página

Dreamweaver permite el uso de imágenes como alternativa al color de fondo de las páginas. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo de imagen en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. En el caso de haber seleccionado una carpeta como predeterminada del sitio para el almacenado de imágenes, el programa automáticamente efectúa una copia del documento original en la mencionada carpeta. Si la imagen utilizada no ocupa toda la ventana del navegador, Dreamweaver forma un mosaico, a menos que sean utilizados estilos CSS. En todo caso debe seleccionar una imagen que se ajuste correctamente a esta función. Así deben evitarse los documentos de imagen de tamaño elevado, ya que aumentan el tiempo de descarga de la página, y es recomendable seleccionar fondos de imagen que permitan visualizar correctamente los contenidos de la página. Por último, debe saber que el uso de imágenes como fondo es incompatible con el coloreado del mismo.

1 En la práctica anterior cambiamos el color de fondo de los documentos index.html _y texto. html mediante las opciones del cuadro de diálogo Propiedades de la página. En esta lección aprenderemos a utilizar una imagen como fondo de un documento Web. Esta imagen puede descargarla desde nuestra página web, con el nombre fondo.jpg, y guardarla en la carpeta de imágenes en su equipo. Empezaremos la práctica creando una copia de la página texto.html, ya que nos interesa conservar este documento en su estado actual. Vamos allá. Muestre el panel Archivos y seleccione con un clic el archivo texto.htm.

2 Seguidamente, despliegue el menú de opciones del panel, haga clic sobre el comando Edición y seleccione la opción Duplicar. (1)

Si prefiere trabajar desde el teclado, pulse la combinación de teclas Ctrl D para obtener el duplicado de la página seleccionada.

El menú contextual que aparece el pulsar con el botón derecho del ratón sobre cualquier elemento del panel Archivos también contiene el comando Edición con la opción Duplicar.

3 La copia se sitúa en el mismo directorio que el original, es decir, en la carpeta documentos del sitio elemental, y el programa le asigna el nombre texto-Copia.html. Seleccione el nuevo archivo pulsando sobre su icono en el panel Archivos. (2)

4 Asignaremos un nombre a la página que describa mejor su contenido. Tenemos varias opciones para cambiar el nombre de un documento, tras su selección en el panel Archivos. Una opción consiste en seleccionar el comando Cambiar nombre, bien en el menú de opciones del panel, bien en el menú contextual del documento. La pulsación de la tecla F2 selecciona el nombre del documento de forma directa, posibilitando su variación, y lo mismo ocurre con la pulsación con el ratón sobre el nombre. Pulse de nuevo sobre el nombre del documento texto-Copia.html, escriba la palabra foto y pulse dos veces la tecla Retorno, la primera para confirmar el nombre y la segunda para abrir el archivo. (3)

Recuerde que también puede acceder al cuadro de diálogo Propiedades de la página mediante el comando del mismo nombre del menú Modificar.

5 Vamos a iniciar el proceso para suprimir el color de fondo y aplicar la imagen en cuestión. Pulse el botón Propiedades de la página del panel Propiedades.

6 Se abre el cuadro de diálogo Propiedades de la página, con el cual trabajamos en la lección anterior. En este cuadro, pulse sobre la categoría Apariencia (HTML).

7 Para utilizar una imagen como fondo es necesario indicar al programa la ubicación del documento en cuestión. Haga clic en el botón Examinar, situado a la derecha del campo Imagen de fondo. (4)

8 Aparece el cuadro de diálogo Seleccionar origen de imagen. Sus opciones se dividen en diversos apartados. La parte superior queda reservada a la selección del tipo de archivo de imagen que va a ser utilizado. Esto es debido a que Dreamweaver permite la inserción de imágenes dinámicas, es decir, que cambian de contenido. De momento nos limitaremos a insertar documentos de imagen estáticos en nuestras páginas, por lo que dejaremos seleccionada la opción establecida por defecto, Sistema de archivos. De este modo el cuadro de diálogo muestra en su parte central las opciones relacionadas con la búsqueda y selección del documento de imagen. Lo que debemos hacer ahora es localizar la carpeta Imágenes del equipo, en la que usted habrá guardado el archivo de ejemplo fondo.jpg. Pulse el botón Subir un nivel, que muestra el dibujo de una carpeta y una flecha de color verde. (5)

9 La carpeta de imágenes se encuentra entre las bibliotecas del equipo. Localice el directorio Bibliotecas, haga doble clic sobre él y haga doble clic también en la biblioteca Imágenes. (6)

La opción Fuentes de datos, que permite la inserción de imágenes dinámicas, requiere la configuración de un sitio de prueba que utilice una tecnología que permita el control de datos.

10 En la carpeta de imágenes, seleccione con un clic el archivo fondo.jpg pulsando en su icono. (7)

El tamaño en disco de una imagen depende de diversos factores, siendo sus dimensiones uno de los principales. Debe saber que el tamaño en disco guarda relación directa con el tiempo de descarga de la imagen y, por tanto, siempre es aconsejable utilizar archivos de tamaño reducido.

11 En lecciones posteriores trataremos con mayor detenimiento las opciones que presenta la sección inferior del cuadro de diálogo. De momento cabe destacar que entre éstas se encuentra la que activa la vista previa del documento de imagen en la sección derecha del cuadro de diálogo. Bajo esta vista preliminar se muestran las propiedades básicas del archivo seleccionado: dimensiones, formato, tamaño en disco y tiempo de descarga estimado. Haga clic en Aceptar.

12 Tras la selección del archivo, el campo Imagen de fondo pasa a contener la ruta del mismo, su situación dentro del sistema de archivos empezando por el nivel jerárquico superior. Sin embargo, observe que no aparece la carpeta Imágenes, a la que hemos accedido para seleccionar el archivo, sino el nombre de la configurada como predeterminada en lecciones anteriores, images, para contener las imágenes del sitio local. Pulse el botón Aceptar del cuadro de diálogo Propiedades de la página para aplicar como fondo la imagen seleccionada. (8)

13 Al mismo tiempo que se inserta la imagen como fondo, Dreamweaver realiza automáticamente una copia del documento original en la carpeta images. El programa se asegura de este modo que el documento utilizado se encuentra dentro del sitio local y utiliza la carpeta predeterminada para ubicarlo. Muestre el panel Archivos y en él haga clic en el botón + que precede a la carpeta images para comprobarlo. (9)

14 Efectivamente la carpeta images del sitio contiene la imagen aplicada como fondo. Pulse el botón de aspa de la pestaña del documento foto.html y, en el cuadro de diálogo en el cual se solicita confirmación para almacenar los cambios, pulse en Sí para finalizar este ejemplo práctico. (10)

Debe saber que si decide no almacenar los cambios en la página actual, el archivo correspondiente a la imagen insertada como fondo permanecería en la carpeta images del sitio local.

Lección 13. Insertar una imagen de rastreo

Dreamweaver facilita la utilización de imágenes a modo de referencia de diseño de las páginas. La categoría Imagen de rastreo del cuadro de diálogo Propiedades de la página permite la selección del documento de imagen original. En el caso de haber seleccionado una carpeta como predeterminada del sitio para el almacenado de imágenes, el programa automáticamente efectúa una copia del documento original en la mencionada carpeta. Antes de su aplicación como imagen de rastreo, el programa permite la aplicación de un índice de transparencia, de manera que no obstaculice el correcto visionado de los elementos que componen la página realmente, los que serán mostrados al ser cargada en el navegador de Internet. Las imágenes de rastreo son meras guías de diseño, por lo que no aparecen en el navegador cuando se carga la página.

RECUERDE

En lugar de trabajar desde el cuadro de diálogo Propiedades de la página para insertar una imagen de rastreo en una página web, también puede dirigirse al menú Ver, seleccionar el comando Imagen de rastreo y del submenú que contiene elegir la opción Cargar. Tras esta acción, se abrirá el cuadro de diálogo Seleccionar origen de imagen, en el cual deberá localizar y seleccionar la imagen que desea utilizar como guía para el documento.

1 Tras conocer en la lección anterior el modo de utilizar una imagen como fondo de una página Web, insertaremos en la presente práctica una imagen de rastreo, la cual podría servir de guía de diseño para la posterior elaboración de nuestro sitio web. Para ello utilizaremos la página principal de nuestro sitio elemental, index.html, que se encuentra abierta en segundo plano, así como un nuevo archivo de ejemplo que puede descargar desde nuestra página web con el nombre rastreo.jpg. Cuando disponga de esta nueva imagen almacenada en la carpeta de imágenes de su equipo, ponga en primer plano el documento index.html haciendo clic en su pestaña.

2 El proceso para insertar una imagen de rastreo es prácticamente el mismo que el que utilizamos para insertar una imagen de fondo a una página. Por lo tanto, despliegue el menú Modificar y haga clic sobre el comando Propiedades de la página. (1)

Las imágenes de rastreo pueden encontrarse en formato JPEG, GIF o PNG.

La combinación de teclas Ctrl + J también abre el cuadro de diálogo Propiedades de la página.

3 El cuadro de diálogo Propiedades de la página cuenta con una categoría dedicada específicamente a la inserción de imágenes de rastreo. Haga clic en dicha categoría, denominada precisamente Imagen de rastreo. (2)

4 Como en el caso anterior, cuando utilizamos las imágenes como fondo de las páginas, en primer lugar deberemos especificar el directorio en el que se encuentra el documento que va a ser utilizado como imagen de rastreo. Pulse el botón Examinar situado a la derecha del campo Imagen de rastreo.

5 Aparece el cuadro de diálogo Seleccionar origen de imagen, que nos permite seleccionar directamente el documento que va a ser utilizado como imagen de rastreo. Este cuadro se abre mostrando la última ubicación con la que ha trabajado, en este caso, la carpeta de imágenes del equipo, en la que precisamente se encontrará la imagen que necesitamos. Seleccione el documento rastreo.jpg y pulse el botón Aceptar. (3)

Al seleccionar un archivo en el cuadro Seleccionar origen de imagen, se muestra la vista previa del mismo en la parte derecha de este cuadro, siempre y cuando la opción Vista previa de imagen se encuentre activada.

Si pulsa el botón Aplicar en el cuadro Propiedades de la página podrá comprobar el resultado sobre la página activa antes de aceptar los cambios definitivamente.

6 También como en el caso de las imágenes de fondo, el programa determina realizar una copia del archivo seleccionado en el directorio preestablecido para albergar este tipo de archivos dentro del sitio, la carpeta images. Pulse el botón Aceptar.

7 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. (4) A diferencia de la utilizada como fondo de la página, la imagen de rastreo sólo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador de Internet. Es por ello que el programa permite aplicar un índice de transparencia a este tipo de imágenes. Vamos a comprobarlo. Pulse sobre el botón Propiedades de la página del panel Propiedades.

8 En el cuadro Propiedades de la página, seleccione de nuevo la categoría Imagen de rastreo. (5)

9 Por defecto las imágenes se muestran completamente opacas. La barra deslizante del campo Transparencia permite determinar el índice de opacidad de la imagen de rastreo. Así el 100% actual indica la opacidad absoluta de la imagen. Haga clic en la parte izquierda de la barra Transparencia para establecer una opacidad del 20%. (6)

En lugar de trabajar mediante clics, puede arrastrar el botón deslizante del parámetro Transparencia hasta el punto que necesite.

10 La imagen de rastreo será por tanto un 80% transparente. Para comprobarlo, pulse el botón Aceptar.

11 De este modo la imagen podrá ser utilizada de guía, sin que resulte visualmente molesta, para situar los diferentes elementos que compondrán la página. (7) Muestre el panel Archivos y compruebe como el programa ha situado automáticamente el archivo utilizado como imagen de rastreo en la carpeta predeterminada del sitio. (8)

Una vez insertada la imagen de rastreo, ésta puede ser modificada, además de respecto a su transparencia, ajustando su posición y la alineación en la página. Para ello, es preciso dirigirse al comando Imagen de rastreo del menú Ver.

Lección 14. Insertar notas de diseño

Las notas de diseño, denominadas en Dreamweaver Design Notes, facilitan la conservación de información adicional asociada a los documentos, como los nombres de los archivos de imagen y comentarios sobre el estado del archivo. Se trata de notas que el desarrollador del sitio crea para un archivo, asociándose a éste pero almacenándose en un documento aparte. También es posible utilizar las notas de diseño para realizar el seguimiento de información confidencial que no puede introducir en un documento por motivos de seguridad. El cuadro de diálogo Design Notes permite su introducción y activación. Dreamweaver permite crear notas de diseño para cada documento o plantilla del sitio, así como para applets, controles ActiveX, imágenes, contenido Flash, objetos Shockwave y campos de imagen en los documentos.

RECUERDE

Tenga en cuenta que si el archivo al que desea asociar la nota de diseño se encuentra en un sitio remoto, primero debe proteger u obtener el documento en cuestión y, a continuación, seleccionarlo en la carpeta local.

1 En esta lección conoceremos el modo de introducir un tipo de ayudas que proporciona el programa para facilitar el control del trabajo realizado, las llamadas Design Notes o notas de diseño. Despliegue el menú Archivo y seleccione el comando Design Notes. (1)

2 Las Design Notes son notas de diseño que el usuario crea para un archivo, las cuales se asocian al archivo que describen, pero se guardan en un archivo aparte. El cuadro de diálogo Design Notes, el cual consta de dos pestañas (Información básica y Toda la información), presenta en su parte superior un desplegable que permite designar el estado para la nota de diseño. Despliegue el campo Estado y, tras comprobar las opciones que contiene, mantenga seleccionada la opción Borrador. (2)

También es posible acceder al cuadro de diálogo Design Notes desde el menú contextual del documento al que deseemos asociar la nota.

3 Seguidamente, haga clic en el icono situado en la parte superior derecha del cuadro de texto Nota para que aparezca la fecha local actual en la nota.

4 Efectivamente, la fecha actual se inserta al inicio del espacio reservado para el texto de la nota. (3) Las notas de diseño pueden ser utilizadas para mantener información adicional asociada a los documentos, como comentarios sobre el estado del archivo. En el campo Nota, haga clic por debajo de la fecha actual, escriba la frase borrar referencia y pulse la tecla Retorno. (4)

5 Las notas de diseño también pueden ser empleadas para realizar el seguimiento de la información confidencial que no puede introducir en un documento por motivos de seguridad. Active con un clic la casilla de verificación de la opción Mostrar al abrir el archivo para activarla.

6 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. Haga clic en la pestaña Toda la información para acceder a esta ficha.

7 La ficha Toda la información muestra en la parte superior el nombre y la ubicación del archivo al que la nota quedará asociada, en este caso la página principal, index.html, del sitio elemental. El botón que muestra 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. Vamos a comprobarlo. Haga clic sobre el signo +. (5)

8 El cursor de edición se sitúa en el campo Nombre, lo que significa que podemos insertar la nueva nota. Como ejemplo, en este campo escriba la palabra Autor.

9 Haga clic en el campo Valor y escriba el nombre Sonia. (6)

El botón que muestra el signo – elimina de la nota el elemento seleccionado en el campo Información.

Si necesita información acerca de la creación y el uso de las notas de diseño, pulse el botón Ayuda.

10 De esta forma hemos agregado un nuevo par de elementos en la misma nota de diseño. Pulse el botón Aceptar.

11 Para comprobar que la nota ha quedado activada y asociada correctamente al archivo index.html, en primer lugar deberemos cerrarlo. Pulse el botón de aspa de la pestaña del documento y haga clic en el botón Sí del cuadro de advertencia para almacenar las modificaciones.

12 Dreamweaver guarda las notas de diseño en una carpeta llamada _notes en la misma ubicación que el archivo actual. El nombre de archivo será el nombre del documento más la extensión .mno. A continuación, despliegue el panel Archivos y haga doble clic sobre la página index.html para abrirla de nuevo en el área de trabajo.

13 Efectivamente, el programa, antes de cargar la página para su edición, muestra la nota asociada al archivo en el mismo cuadro de diálogo Design Notes. En este cuadro, pulse en la casilla de verificación de la opción Mostrar al abrir el archivo para desactivarla y, seguidamente, haga clic en Aceptar.

14 Automáticamente el programa carga la página index.html, posibilitando su edición. La nota sigue asociada al documento, pese a que no volverá a ser mostrada a menos que sea activada de nuevo. ¿Cómo podemos saber si una página en un sitio web cuenta con notas de diseño asociadas? Dreamweaver permite añadir una columna en el panel Archivos denominada Notas que indica la existencia o no de este tipo de notas. Por defecto, esta columna se encuentra oculta. Veamos cómo mostrarla. Despliegue el menú Sitio y haga clic sobre el comando Administrar sitios. (7)

Si necesita recordar algún aspecto acerca de la creación de un sitio local, no dude en consultar las lecciones 9 y 10 de este manual.

Mediante el botón + situado debajo del cuadro de columnas puede insertar columnas personalizadas en el panel Archivos.

15 En el cuadro de diálogo Administrar sitios, con el sitio elemental seleccionado, haga clic en el botón Editar para acceder al cuadro de configuración del sitio.

16 Se abre así el cuadro de diálogo Configuración del sitio para elemental, en el cual debemos acceder a las opciones de configuración avanzadas. Para ello, haga clic sobre la categoría Configuración avanzada y muestre la sección Columnas vista archivo. (8)

17 En esta sección se muestran todas las columnas que aparecen en el panel Archivos con la información referente a las páginas y los elementos de un sitio web. En este caso, compruebe que todas las columnas se encuentran activas (con el estado Mostrar en la columna del mismo nombre), excepto la de las notas (con el estado Ocultar). Haga doble clic sobre el nombre de la columna Nota para editarla.

18 A continuación, marque la opción Mostrar en el apartado Opciones para cambiar el estado de la columna de notas y haga clic en Guardar para confirmar el cambio. (9)

19 Efectivamente, el cambio se refleja ahora en el cuadro de columnas. Pulse en Guardar en el cuadro de configuración del sitio. (10)

La opción Activar columnas compartidas, desactivada por defecto en el cuadro de configuración del sitio, permite compartir las notas de diseño con el resto de los documentos del sitio. La activación de esta opción requiere, sin embargo, activar las Design Notes, así como la carga de las mismas.

20 De vuelta al cuadro Administrar sitios, pulse el botón Listo para confirmar los cambios realizados.

21 Efectivamente, en el panel Archivos ya puede comprobar la aparición de la columna Nota y del icono de color amarillo que indica que la página index.html cuenta con una nota de diseño asociada. (11) Ahora puede consultar la nota de diseño directamente desde el panel Archivos. Para ello, haga doble clic sobre el icono de color amarillo.

22 Efectivamente, se abre el cuadro de diálogo Design notes mostrando los datos de la nota asociada. (12) Pulse el botón Aceptar para salir de este cuadro y dar así por terminada esta lección.

Si desea eliminar todos los archivos locales de Design Notes del sitio, acceda al cuadro de configuración del sitio, concretamente a las opciones de configuración avanzada, y en la sección Design Notes, haga clic en Limpiar, confirmando la operación de eliminación cuando el programa lo solicite.