Aprender Dreamweaver CS4 con 100 ejercicios prácticos

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. El duplicado de los datos de configuración del sitio no supone el de los archivos que lo componen.

2 El duplicado, al que el programa atribuye el nombre elemental copia , queda seleccionado. Pulse el botón Editar. Por defecto, Dreamweaver asigna a los sitios duplicados el mismo nombre que el del original seguido de la palabra copia. Puede modificar el nombre desde el cuadro de definición de sitios.

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 , pulse la tecla Retorno y haga clic en Seleccionar.Cree una nueva carpeta raíz, selecciónela y borre la ruta de la carpeta predeterminada de imágenes para poder comprobar después cómo actúa el programa cuando carece de este parámetro.

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 y pulse la tecla Suprimir.

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. Para seleccionar varios elementos a la vez en el panel Archivos pulse la tecla Mayúsculas al hacer clic sobre ellos.

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

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. Dreamweaver pasa a la siguiente línea cuando el texto alcanza el margen derecho de la página.Compruebe que, al añadir un párrafo, aparece en la Barra de estado su etiqueta identificativa, <p>.

4 Se crea así un segundo párrafo en la página. En la Barra de estado, aparece la etiqueta identificativa de este elemento, <p>. 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. El programa permite definir el comportamiento de los saltos de línea en el cuadro de diálogo Preferencias.

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. El comando Salto de línea permite introducir un salto de carro sin cambiar de párrafo.

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. El último icono de la ficha Texto del panel Insertar incluye una lista de caracteres especiales que pueden insertarse en el documento.

11 Para acabar almacenaremos los cambios efectuados. Resulta conveniente hacerlo frecuentemente para evitar pérdidas accidentales. Recuerde que si quiere conservar el documento en su estado original puede utilizar el comando Guardar como para crear una copia. Pulse el comando Guardar, cuyo icono muestra un disquete en la barra de herramientas Estándar.

 

LA COPIA Y PEGADO DE TEXTO resultan una alternativa a su introducción directa con el teclado. Entre los tipos de documentos que los profesionales reciben con contenido de texto para incorporarlos en las páginas Web, se incluyen los archivos de texto ASCII, los archivos en formato de texto enriquecido y los documentos de Office.

IMPORTANTE

Copiando y pegando texto ahorramos tiempo en la edición de los documentos. Una vez seleccionado, el texto puede ser copiado mediante la combinación de teclas Control + C, el menú contextual de la selección o el menú de edición del programa.

1 Para realizar este ejercicio, copie en su carpeta de documentos los archivos de texto presentación y descripción que encontrará en nuestra página de descargas. (Por supuesto puede usar sus propios archivos de ejemplo si lo desea.) Minimice la ventana de Dreamweaver y abra la carpeta donde los ha almacenado.

2 Los archivos de ejemplo fueron creados con la aplicación WordPad, incluida en el sistema operativo Windows. Haga doble clic en el documento de texto presentación.

3 Abra el menú Edición y elija la opción Seleccionar todo. El programa asociado a los documentos de texto enriquecido es WordPad, un procesador de textos de sencillo manejo.

4 Pulse el botón Copiar, octavo de la barra de herramientas de WordPad y, una vez copiado el texto, haga clic en el botón de aspa de la Barra de título de la aplicación.

5 Pulse en el botón expandido de Dreamweaver situado en la Barra de tareas para restaurar el programa.

6 Pulse al inicio de la primera línea de texto, abra el menú Edición y seleccione el comando Pegar. El método abreviado de teclado correspondiente al pegado es Control +V.

7 Para separar el texto pegado del precedente, pulse Retorno. Después, haga doble clic sobre la primera palabra para seleccionarla y pulse el icono Copiar de la Barra de herramientas Estándar. Para seleccionar un fragmento de un párrafo pulse ante la primera letra y arrastre hasta situar el puntero sobre la última. Y para seleccionar un párrafo completo, pulse en la etiqueta <p> del selector de etiquetas.

8 Pulse al inicio de la línea y haga clic en el comando Pegar de la Barra de herramientas Estándar.

9 Para que la nueva palabra constituya un párrafo independiente, pulse la tecla Retorno.

10 Pulse el icono Guardar de la barra de herramientas Estándar.

11 En el panel Archivos, expanda la carpeta documentos pulsando en el signo + que precede a su nombre y haga doble clic en el documento texto.htm para abrirlo.

12 Pulse en el botón correspondiente a su carpeta de documentos situado en la Barra de tareas.

13 Haga doble clic en el documento de texto descripción para abrirlo con WordPad, abra el menú Edición y elija la opción Seleccionar todo.

14 En la barra de herramientas de WordPad, pulse sobre el comando Copiar para copiar el texto seleccionado y, seguidamente, haga clic en el botón Cerrar de la Barra de título de la aplicación.

15 Cierre también la ventana de documentos haciendo clic en el botón de aspa de su Barra de título.

16 Abra de nuevo el menú Edición y elija la opción Pegar.

17 Dreamweaver no respeta el formato original del texto. El texto pegado presenta el mismo tipo de letra que el tecleado en el documento index.htm y el pegado posteriormente en él, procedente del archivo presentación. Para finalizar este ejercicio, guarde los cambios pulsando sobre el comando Guardar. Recuerde que el icono Guardar todo, situado a la derecha del icono Guardar, permite almacenar los cambios en todos los documentos abiertos.

IMPORTANTE

Para seleccionar todo el contenido de la página puede pulsar la etiqueta body o ejecutar el comando Seleccionar todo, cuyo método abreviado es Control + A.

LOS BLOQUES DE TEXTO DE UNA PÁGINA presentan el formato Párrafo y su correspondiente etiqueta, <p>, en el selector de la Barra de estado permite su selección directa. Este formato presenta un tamaño y un estilo de fuente predeterminados. Dreamweaver permite la definición de formatos relativos para los diferentes bloques de texto de una página: los encabezados. Un encabezado define una serie de parámetros, tamaño de letra y estilo, de un bloque de texto completo.

IMPORTANTE

Se pueden definir siete tipos de encabezados, siendo el Encabezado 1, el que aplica un tamaño de letra mayor a los textos. Cuando se aplica una etiqueta de encabezado a un párrafo, Dreamweaver añade automáticamente la siguiente línea de texto como un párrafo sencillo. Para cambiar esta configuración se debe acudir al cuadro de diálogo Preferencias, categoría General.

1 Para empezar, pulse en el margen izquierdo de la página a la altura de la primera línea.

2 Pulse en el icono Copiar de la barra de herramientas Estándar y active la página index.htm pulsando en su pestaña. Para seleccionar una línea de texto completa, haga clic en su margen izquierdo. Una vez seleccionada, cópiela en el Portapapeles y péguela en el otro documento abieto.

3 Pulse en el icono Pegar de la barra de herramientas Estándar.

4 Haga doble clic sobre la primera palabra de la página.

5 Dreamweaver permite aplicar opciones de formato a los diferentes párrafos de una página. Abra el menú Formato, pulse en la opción Formato de párrafo y elija Texto preformateado. El estilo aplicado al párrafo seleccionado se marca con un signo de verificación en este submenú.

6 Los formatos de párrafo definen diversas características del texto, como el estilo y el tamaño de la fuente. Pero estos parámetros son relativos, ya que el texto visualizado en Dreamweaver no siempre se corresponde con el que muestra el navegador. La barra de herramientas Insertar permite aplicar a un párrafo el formato de encabezado. Pulse el botón h1 de esta barra.A cada encabezado le corresponde una etiqueta HTML, que se identifica con la letra h seguida del número de encabezado correspondiente.

7 El texto seleccionado queda definido como un encabezado de Estilo 1 y aparece en la Barra de estado la etiqueta correspondiente, h1. Este tipo de encabezado define al tiempo el aumento de tamaño y la aplicación del estilo negrita al texto. Para ver mejor el resultado, pulse al final de la palabra seleccionada. Seleccionando la opción Texto con formato predeterminado en la barra Insertar aplicamos al texto la etiqueta pre y, por consiguiente, el tipo y tamaño de letra configurado en Dreamweaver como Fuente fija.

8 Pulse la tecla Retorno y compruebe que el programa crea los nuevos párrafos sin aplicar el formato anterior, según lo establecido en sus preferencias.

9 Seguidamente cambiaremos simultáneamente el formato de los dos párrafos siguientes de la página, pero antes, pulse la tecla Suprimir para eliminar un salto de carro.

10 Pulse tras la última letra de la palabra venta, en el tercer párrafo de la página, mientras mantiene pulsada la tecla Mayúsculas.

11 Para definir los párrafos seleccionados como encabezados, pulse esta vez el botón h2 de la barra de herramientas Insertar. Los encabezados de mayor numeración aplican tamaños de letra menores, además del estilo negrita común a todo este tipo de párrafos.

12 El encabezado 2 presenta un tamaño de letra menor al seleccionado para el primer párrafo, h1. Haga doble clic sobre la primera palabra de la selección y pulse en el botón h3 de la barra de herramientas Insertar.

13 La etiqueta h3 del selector de la barra de estado nos permite seleccionar de modo directo todo el párrafo que presenta este formato de encabezado. Púlsela.

14 El Inspector de propiedades también permite la aplicación de formatos de párrafo a los textos. Pulse el botón de flecha del campo Formato del inspector y elija el Encabezado 4. La opción Ninguno permite desactivar todas las opciones de formato aplicadas a un párrafo.

15 Haga clic al final de la selección y pulse el comando Guardar de la barra de herramientas Estándar.

DREAMWEAVER PRESENTA LOS TEXTOS por defecto con la fuente Times New Roman. Este tipo viene definido como fuente proporcional en el cuadro Preferencias de la aplicación. Esta fuente es la utilizada para mostrar los textos a los que no les ha sido aplicado formato alguno. El programa permite cambiar las combinaciones de fuente así como el tamaño, el estilo y el color de las fuentes.

IMPORTANTE

El desarrollador de las páginas puede crear sus propias listas de fuentes personalizadas. El cuadro de diálogo Editar lista de fuentes permite crear listas añadiendo las fuentes y familias de fuentes disponibles en el sistema.

1 Para empezar este ejercicio, despliegue el menú Edición, haga clic sobre el comando Preferencias y, en el cuadro del mismo nombre, active la categoría Fuentes. Si un usuario carece en su sistema de la fuente empleada en las páginas, el navegador la sustituirá por otra, lo que puede hacer variar ostensiblemente el aspecto de las páginas.

 

2 La parte superior de este cuadro queda reservada a la Configuración de fuentes, que permite especificar el conjunto de fuentes que se emplea en Dreamweaver para documentos que utilizan un determinado tipo de codificación. Despliegue el cuadro Fuente proporcional pulsando en su botón de flecha.

3 La fuente proporcional es la utilizada por Dreamweaver para mostrar texto normal de las páginas. Dreamweaver predetermina representar los textos bajo un aspecto seguro, por lo que se encuentra seleccionada una de las fuentes clásicas, Times New Roman, disponible en la práctica totalidad de sistemas. Teclee la letra C para mostrar las fuentes que empiezan por dicha letra, seleccione la fuente Courier New y pulse el botón Aceptar.Los navegadores utilizan la primera fuente de la combinación que se localice en el sistema. Si ésta no está instalada, el navegador pasa a utilizar la segunda, y así sucesivamente.

4 Dreamweaver aplica el tipo de letra elegido a todos los textos. También puede cambiar las fuentes desde el cuadro Propiedades de la página. Pulse ese botón del inspector de propiedades.

5 Pulse en el botón de flecha del campo Fuente de página, seleccione la opción Arial, Helvética, sans-serif y pulse Aceptar. El campo Fuente fija del cuadro de preferencias permite seleccionar la fuente y el tamaño de los textos con formato de párrafo Texto preformateado. Nos aseguramos así de que el visionado final de la página se ajuste al mostrado por Dreamweaver durante la edición del documento.

6 Se aplica la primera de las fuentes de la lista seleccionada. Pulse el icono Guardar de la barra de herramientas Estándar para guardar los cambios realizados en la página index.htm y ponga en primer plano la página texto.htm pulsando en su pestaña.

7 Acceda de nuevo al cuadro Propiedades de la página, haga clic en el botón de punta de flecha del campo Tamaño y seleccione, por ejemplo, el valor 14. Después, pulse los botones Aplicar y Aceptar para aplicar el cambio.

8 Por último, veremos cómo aplicar diferentes estilos a un texto seleccionado. Abra el menú Formato, pulse sobre la opción Estilo y elija el estilo Subrayado. Habitualmente se reserva el subrayado para los textos que funcionan como enlaces por lo que ni el Inspector de propiedades ni la ficha Texto de la barra Insertar muestran esa opción.

9 Deseleccione el texto pulsando al final de la línea para comprobar el resultado y pulse la combinación de teclas Ctrl.+Z para deshacer la aplicación del estilo Subrayado.

10 Seleccione nuevamente la primera línea de texto y pulse el botón Negrita del Inspector de propiedades. Dreamweaver utiliza por defecto la etiqueta strong, en lugar de la tradicional b, para el estilo negrita y la etiqueta em para el estilo cursiva, tradicionalmente aplicado mediante la etiqueta i.

Desde el panel Propiedades y también desde la ficha Texto de la Barra Insertar puede seguir modificando las caracteristicas de un texto creando listas numeradas, añadiendo sangrías, etc. Acabe el ejercicio guardando los cambios.

IMPORTANTE

En Dreamweaver CS4 los cambios de combinaciones de fuentes y de colores de fuentes deben realizarse definiendo reglas para los estilos CSS, con los que trabajaremos más adelante.