- -
- 100%
- +
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 pestaña del archivo index.htm y pulse Sí en el cuadro de advertencia
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.
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.
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í
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.
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.
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.
3 El documento .ste conserva la información relativa a la situación de la carpeta raíz anterior por lo que el programa no puede localizarla en el directorio que ocupaba en el momento de ser exportado el sitio y muestra el cuadro de diálogo que permite seleccionar la carpeta que va a ser utilizada como raíz. Abra la carpeta sitios con un doble clic y repita la acción con la carpeta elemental.
4 Pulse el botón Seleccionar para que la carpeta elemental pase a ser la raíz del sitio importado.
5 La pérdida de la referencia de la carpeta raíz del sitio conlleva la de la carpeta de imágenes. Aparece, por tanto, el cuadro de diálogo que permite seleccionarla. Abra la carpeta imagenes con un doble clic y pulse el botón Seleccionar.
6 El programa carga la configuración del nuevo sitio. Pulse el botón Listo.
7 El cambio de directorio de la carpeta raíz también implica que el programa deba generar de nuevo la información relativa a su estructura para mostrarla correctamente en el panel Archivos. Expanda la carpeta raíz del sitio pulsando el signo + que la precede.
8 Se muestra todo su contenido con el color verde identificativo de la pertenencia a un sitio
9 Con el sitio elemental seleccionado, pulse el botón Editar.
10 Acceda a la categoría Design Notes y, tras comprobar que se encuentra seleccionada la opción que indica que éstas se deben conservar pese a no estar activas, pulse en la casilla de verificación de la opción Mantener Design Notes.
11 Pulse el botón Limpiar, haga clic en el botón Sí y, en el cuadro de confirmación que aparece, pulse sobre el botón Sí a todo.
12 Haga clic en Aceptar y, en el cuadro de diálogo Administrar sitios, pulse el botón Listo.
EL DUPLICADO DE SITIOS NO DEBE CONFUNDIRSE con el de los documentos que lo componen. Duplicando un sitio conseguimos una copia de la configuración del original que posteriormente podemos editar. También se puede adaptar el duplicado para configurar un sitio similar al original. El panel Archivos posibilita el duplicado directo de los archivos de un sitio, mediante el arrastre. Para que la operación se complete correctamente, la carpeta de destino del duplicado debe pertenecer a su vez a un sitio.
IMPORTANTE
La ficha Datos locales del cuadro de diálogo Definición del sitio para estilos presenta opciones adicionales en su parte inferior. La última de ellas, seleccionada por defecto, indica la creación de un caché local para mejorar la velocidad de las tareas de administración del sitio.
1 En este ejercicio comprobaremos la diferencia entre la duplicación de la configuración de un sitio y la de su contenido. Para empezar, pulse en el enlace Administrar sitios del panel Archivos, seleccione el sitio elemental y pulse el botón Duplicar.
2 El duplicado, al que el programa atribuye el nombre elemental copia
3 En el campo Nombre del sitio escriba la palabra estilos y pulse el icono de carpeta situado junto al campo Carpeta raíz local.
4 Asociaremos la configuración a una carpeta raíz local diferente a la actual para evitar conflictos en la gestión de los sitios. Haga clic en el botón Subir un nivel y, en el carpeta sitios, pulse el botón Nueva carpeta.
5 Le daremos el mismo nombre que hemos asignado al sitio duplicado. Escriba la palabra estilos
6 Por último eliminaremos la referencia a la carpeta de imágenes, ya que nos interesa ver cómo actúa el programa cuando carece de este parámetro de configuración. Haga doble clic en el campo Carpeta predeterminada de imágenes para seleccionar todo su contenido
7 Pulse el botón Aceptar del cuadro Definición del sitio para estilos y en el cuadro Administrar sitios, pulse el botón Listo.
8 Abra el cuadro Mostrar y seleccione la opción Escritorio.
9 Duplicaremos todos los archivos del sitio elemental en el interior de la carpeta estilos, conservando su estructura. En el panel Archivos, seleccione la carpeta documentos, pulse la tecla Mayúsculas y, sin liberarla, haga clic en la página index.htm.
10 Pulse en el icono de opciones del panel Archivos, haga clic sobre el comando Edición y elija la opción Copiar del submenú.
11 Haga clic con el botón derecho del ratón sobre el sitio estilos, pulse en el comando Edición y elija la opción Pegar.
12 Automáticamente el programa duplica los archivos originales. Despliegue el cuadro Mostrar y seleccione el sitio estilos.
13 Haga clic en el signo + situado a la izquierda del sitio para comprobar cuál es su estructura.
14 Para acabar, seleccione la carpeta imagenes, pulse la tecla Suprimir y haga clic en el botón Sí del cuadro de confirmación.
EL TEXTO ES EL PRINCIPAL COMPONENTE de una página web y su inclusión no repercute prácticamente en el tiempo de descarga. En Dreamweaver, en principio, no pueden ser insertados dos espacios en blanco seguidos. Los textos de una página quedan divididos en párrafos que se crean al pulsar la tecla Retorno. Los navegadores Web insertan automáticamente una línea en blanco de espacio entre los párrafos. El programa permite añadir una única línea de espacio entre los párrafos mediante un salto de línea que se añade con la combinación Mayúsculas + Retorno.
IMPORTANTE
El panel Insertar se sitúa por defecto a la derecha del área de trabajo, pero puede arrastrarlo hasta colocarlo donde más le convenga, por ejemplo, dispuesto horizontalmente debajo de la Barra de menús.
1 Para realizar las prácticas de texto utilizaremos las páginas del sitio elemental, creado anteriormente. Empezaremos editando su página principal. En el panel Archivos, active ese sitio y haga doble clic en el archivo index.htm para abrirlo.
2 En los documentos carentes de contenido el cursor de edición queda situado en la primera línea de la página. Escriba la palabra casa y pulse la barra espaciadora de su teclado.
3 Pulse nuevamente la barra espaciadora para comprobar que no se pueden insertar dos espacios seguidos, complete la frase escribiendo el término en venta y pulse la tecla Retorno.
.
4 Se crea así un segundo párrafo en la página. En la Barra de estado, aparece la etiqueta identificativa de este elemento,
. Teclee la frase visite nuestro sitio.
5 Entre los dos párrafos queda una línea en blanco, ya que los navegadores web la insertan automáticamente para espaciar los diferentes bloques de texto de una página. Pero el programa permite la inserción de los llamados saltos de línea. Abra el menú Insertar, pulse en la opción HTML, elija la opción Caracteres especiales y seleccione el comando Salto de línea.
6 La nueva línea forma parte del mismo párrafo que la anterior. De este modo no queda una línea en blanco entre las dos escritas. Pulse la tecla Retroceso.
7 Para introducir un salto de línea mediante el teclado, pulse la combinación de teclas Mayúsculas+Retorno y, en la nueva línea, escriba la frase de ejemplo ver foto ampliada.
8 La barra de herramientas Insertar permite la inserción de todo tipo de elementos. Para mostrarla, abra el menú Ventana y haga clic en Insertar.
9 Organizada por categorías, esta barra presenta una ficha dedicada a los elementos de texto. Haga clic en la pestaña Texto.
10 Sus opciones permiten la inserción directa de etiquetas HTML relacionadas con el texto. Haga clic en el último botón de esta pestaña, que engloba todos los caracteres especiales, y seleccione el comando Salto de línea.