Título de la obra:

Aprender Dreamweaver CS4 con 100 ejercicios prácticos

Primera edición, 2009

© 2009 MEDIAactive

Pallars, 141-143 5o B 08018 Barcelona www.mediaactive.es

© 2009 MARCOMBO, S.A.

Gran Via de les Corts Catalanes, 594

08007 Barcelona

www.marcombo.com

Diseño de la cubierta: OENE DISSENY

ISBN: 978-84-267-1615-6

Quedan rigurosamente prohibidas, sin la autorización escrita de los titulares del copyright, bajo las sanciones establecidas en las leyes, la reproducción total o parcial de esta obra por cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático, así como la distribución de ejemplares mediante alquiler o préstamo públicos.

Presentación

APRENDER DREAMWEAVER CS4 CON 100 EJERCICIOS PRÁCTICOS

100 ejercicios prácticos resueltos que conforman un recorrido por las principales funciones del programa. Si bien es imposible recoger en las páginas de este libro todas las prestaciones de Dreamweaver CS4, hemos escogido las más interesantes y utilizadas. Una vez realizados a conciencia los 100 ejercicios que componen este manual, el lector será capaz de manejar con soltura el programa y llevar a cabo todas aquellas tareas que se realizan normalmente para crear, editar y publicar una página web.

LA FORMA DE APRENDER

Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Dicho ejercicio se halla explicado paso a paso y pulsación a pulsación, a fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes o de los resultados que deberían obtenerse y con recuadros IMPORTANTE que ofrecen información complementaria sobre cada uno de los temas tratados en los ejercicios.

Gracias a este sistema se garantiza que una vez realizados los 100 ejercicios que componen el manual, el usuario será capaz de desenvolverse cómodamente con el programa y sacar el máximo partido de las múltiples prestaciones que ofrece Dreamweaver CS4.

LOS ARCHIVOS NECESARIOS

En el caso de que desee utilizar los archivos de ejemplo de este libro puede descargarlos desde la zona de descargas de la página de Marcombo (www.marcombo.com) y desde la página específica de este libro.

A QUIÉN VA DIRIGIDO EL MANUAL

Si se inicia usted en la práctica y el trabajo con Dreamweaver, encontrará en estas páginas un completo recorrido por sus principales funciones. Pero si es usted un experto en el programa, le resultará también muy útil para consultar determinados aspectos más avanzados o repasar funciones específicas que podrá localizar en el índice.

Cada ejercicio está tratado de forma independiente, por lo que no es necesario que los realice por orden (aunque así se lo recomendamos, puesto que hemos intentado agrupar aquellos ejercicios con temática común). De este modo, si necesita realizar una consulta puntual, podrá dirigirse al ejercicio en el que se trata el tema y llevarlo a cabo sobre su propio documento de Dreamweaver.

DREAMWEAVER CS4

Dreamweaver CS4 es uno de los programas más utilizados para el diseño, el desarrollo y el mantenimiento de aplicaciones y sitios web basados en estándares. Con las múltiples y avanzadas herramientas que ofrece es posible crear fácil y rápidamente sitios Web y aplicaciones con aspecto completamente profesional, por lo que es una de las aplicaciones preferidas de diseñadores gráficos y diseñadores y desarrolladores web.

Con este sencillo y a la vez completísimo editor de HTML visual resulta fácil crear complejas y sofisticadas páginas web dinámicas. Las robustas propiedades para la integración y el diseño basado en CSS, hojas de estilos en cascadas, hacen de Dreamweaver una estupenda aplicación que permite crear y manipular cualquier sitio web con enorme facilidad y precisión. La alta calidad de los diseños creados con Dreamweaver queda garantizada gracias a sus potentes y mejorados controles y herramientas, que irá conociendo a lo largo de los 100 ejercicios que componen este manual.

Cómo funcionan los libros “Aprender…”

Índice

001 La Ventana de bienvenida

002 La nueva interfaz de usuario

003 Crear documentos

004 Visualizar varios archivos simultáneamente

005 Diseño y código de páginas web

006 Conocer los elementos de una página web

007 Trabajar con los comandos básicos

008 Crear sitios locales

009 Administrar sitios locales

010 Aplicar un fondo

011 Aplicar una imagen de fondo

012 Imágenes de rastreo y notas de diseño

013 Exportar y eliminar sitios

014 importar sitios

015 Duplicar y editar sitios

016 introducir texto

017 Copiar y pegar texto

018 Cambiar el formato de párrafo

019 Modificar las propiedades de fuentes

020 Cambiar el color del texto

021 Crear archivos de InContext Editing

022 Establecer márgenes y alineación

023 Añadir sangrías y crear listas

024 Estilos y elementos de listas

025 Caracteres especiales y reglas horizontales

026 Insertar imágenes

027 Origen y copia de imágenes

028 Cambiar tamaño y dimensiones de imágenes

029 Alinear imágenes

030 Editar imágenes

031 Origen base, espaciado y zonas interactivas

032 Insertar documentos PSD de Photoshop

033 Insertar enlaces

034 Errores y navegadores

035 Vista previa y enlaces

036 Utilizar la nueva Vista en vivo

037 Enlaces y propiedades de las páginas

038 Insertar tablas

039 Trabajar con filas, columnas y celdas

040 Cambiar las propiedades de tabla

041 Propiedades de filas, columnas y celdas

042 Dividir y combinar celdas

043 Combinar Dreamweaver con Word y Excel

044 Limpiar HTML

045 Anidar tablas

046 Ordenar tablas

047 Exportar e importar datos de tablas

048 Modos de trabajo con tablas

049 Propiedades de la página y estilos CSS

050 Aplicar estilos CSS

051 Aplicar hojas de estilos de muestra

052 Definir estilos de etiquetas HTML

053 Trabajar con archivos relacionados

054 Editar hojas de estilos

055 Definir nuevas reglas de estilos

056 Importar y vincular hojas de estilos

057 Navegar al código relacionado

058 Crear estilos de clase

059 Duplicar y aplicar estilos de clase

060 Combinar hojas de estilos

061 Categorías de definición de estilos

062 Identificadores y estilos

063 Conjuntos de marcos

064 Cambiar el origen de los marcos

065 Insertar marcos

066 Propiedades de marcos

067 Marcadores de posición de imagen

068 Crear imágenes de sustitución

069 Insertar barras de navegación

070 Editar barras de navegación

071 Insertar películas Flash

072 Insertar vídeos Flash

073 Vincular sonidos

074 Incrustar sonidos

075 Enlaces, marcos y destinos

076 Anclajes con nombre

077 Insertar elementos PA

078 Propiedades de elementos PA

079 Elementos PA y tablas

080 Crear formularios

081 Objetos de formularios

082 Añadir comportamientos

083 Acciones de formulario

084 Funciones de JavaScript

085 Llamar JavaScript

086 Utilizar sugerencias para el código JavaScript

087 Crear plantillas y regiones editables

088 Crear documentos a partir de plantillas

089 El panel Historial y los comandos personalizados

090 Crear un conjunto de datos con Spry

091 Insertar tablas y regiones Spry

092 Insertar widgets

093 Aplicar efectos Spry

094 El panel Activos

095 Elementos de Biblioteca

096 Comprobar un sitio

097 Configurar un sitio remoto

098 Colocar y obtener archivos

099 Actualizar con Subversion

100 Utilizar la ayuda de Dreamweaver

001
La Ventana de bienvenida

AL ACCEDER A DREAMWEAVER CS4, aparece la Ventana de bienvenida, que permite el acceso a las acciones usadas con mayor frecuencia tanto al iniciar una sesión de trabajo como cuando el programa no tiene ningún documento abierto. Su uso resulta una alternativa al de los comandos tradicionales para la creación y apertura de documentos. Además, desde la Ventana de bienvenida también se puede acceder a una visita guiada o a un tutorial del producto, con el fin de profundizar en los conocimientos sobre el programa.

IMPORTANTE

Active la opción No volver a mostrar este mensaje de la parte inferior de la Ventana de bienvenida o bien desactive la opción Mostrar pantalla de bienvenida en el apartado General del cuadro de preferencias de Dreamweaver para que dicha ventana no aparezca cada vez que acceda al programa.

1 En el Escritorio, haga clic en el botón Iniciar de la Barra de tareas, pulse en la opción Todos los programas, haga clic en la carpeta de la suite de Adobe y elija Dreamweaver CS4. Después de abrir Dreamweaver por primera vez, dispondrá de un acceso directo al programa en el menú Inicio.

2 Se abre la aplicación mostrando en su parte central la Ventana de bienvenida. Por defecto, Dreamweaver utiliza el espacio de trabajo Diseñador. Los grupos de paneles se pueden ocultar y mostrar según las preferencias del usuario. Pulse el enlace Abrir, el único del apartado Abrir un elemento reciente.

3 La acción nos conduce al cuadro de diálogo Abrir, que posibilita la selección y apertura de documentos previamente creados. Pulse el botón Cancelar para salir de él.

4 El segundo bloque, Crear nuevo, ofrece una lista de tipos de archivo más usuales que puede seleccionar para crear un documento rápidamente. La lista se ve encabezada por la opción HTML, formato tradicional de las páginas web. Pulse sobre ella.

5 Automáticamente se crea un documento HTML en blanco. Pulse sobre el icono del programa, situado en el extremo izquierdo de la Barra de la aplicación, novedad en Dreamweaver CS4 y, del menú de control que aparece, elija la opción Minimizar. También puede encontrar estas opciones de control en forma de botones en el extremo derecho de la Barra de la aplicación.

6 El programa queda reducido a un botón en la Barra de tareas. Haga clic en él, abra el menú Archivo y elija la opción Cerrar.

7 El cierre del documento comporta la reaparición de la Ventana de bienvenida. Además de las tradicionales páginas web HTML, Dreamweaver permite crear y editar documentos basados en otros lenguajes de programación. Haga clic en el enlace PHP y después pulse el botón de aspa de la pestaña del documento.

8 El enlace Más del apartado Crear nuevo conduce al cuadro Nuevo documento que permite crear todo tipo de documentos editables con el programa. El enlace Sitio de Dreamweaver, por su parte, conduce al cuadro de diálogo Definición del sitio . Compruébelo y salga del asistente pulsando el botón Cancelar.El botón Sitio de Dreamweaver abre un asistente para la creación de un sitio.

En el apartado Elementos destacados, la Ventana de bienvenida ofrece diferentes enlaces que nos conducen a completos tutoriales sobre las principales novedades de Dreamweaver CS4. También puede conocer las novedades del programa y sus funciones más comunes utilizando los enlaces de la parte inferior de la ventana.

IMPORTANTE

Utilice el nuevo conmutador de espacios de trabajo para cambiar el espacio de trabajo. Elija la opción Programador y vea que se trata del mismo espacio de trabajo integrado que el de Diseñador, pero con los grupos de paneles apilados a la izquierda y mostrando de forma predeterminada la vista Código. Después elija Pantalla doble, espacio de trabajo que permite organizar un diseño si dispone de un segundo monitor. Este diseño coloca todos los paneles en el monitor secundario y mantiene la ventana de documento y el inspector de propiedades en el principal. Por último, vuelva al espacio de trabajo Diseñador.

002
La nueva interfaz de usuario

EL DISEÑO DE LA INTERFAZ de los diferentes componentes de Adobe Creative Suite CS4, entre los que se encuentra Dreamweaver, es ahora más cómodo e intuitivo y permite trabajar de forma más rápida y racional. El nuevo espacio de trabajo de Dreamweaver permite ver en todo momento las propiedades de los documentos y de los objetos y muestra todas las ventanas y los paneles integrados en una única ventana. Además, los documentos abiertos aparecen distribuidos en fichas independientes por las que se puede navegar fácilmente.

IMPORTANTE

Usando el botón de doble punta de flecha que aparece en la cabecera de los paneles puede contraerlos para mostrarlos en forma de iconos y ahorrar así espacio.

1 En la parte superior de la interfaz de Dreamweaver CS4 se ubica la nueva Barra de la aplicación, que contiene un conmutador de espacios de trabajo, los menús y otros controles de la aplicación. Haga clic en el tercer icono de esa barra y pulse sobre la opción Nuevo sitio. La nueva Barra de la aplicación ofrece acceso directo a las operaciones más comunes que se llevan a cabo con Dreamweaver, como la creación de un sitio web.

2 Puede acceder así fácil y rápidamente al asistente para la creación de un nuevo sitio web. Ciérrelo pulsando el botón Cancelar.

3 Para seguir conociendo el entorno de Dreamweaver, cree un documento en blanco pulsando el botón HTML de la Ventana de bienvenida. Sepa que también puede acceder a las diferentes opciones de creación de documentos desde la opción Nuevo del menú Archivo.

4 Debajo de la Barra de la aplicación se ubica la Barra de herramientas Documento, que contiene los botones adecuados para cambiar las vistas de la ventana y las opciones de visualización, para obtener vistas previas y para dar nombre al documento, entre otras acciones habituales. Haga clic en el botón Código de esta barra y, tras comprobar cómo cambia el aspecto de la v entana , recupere la vista Diseño pulsando en ese botón. Compruebe cómo cambia el aspecto de la Ventana del documento al activar la vista Código y después vuelva a la predeterminada, la vista Diseño.

5 Ocupando la mayor parte del espacio de la interfaz se encuentra la Ventana del documento, donde se muestra el documento actual mientras lo está creando y editando. En la parte inferior de esta ventana se ubica la Barra de estado, que incluye un selector de etiquetas, botones para cambiar la visualización e información acerca del documento. Debajo de la Ventana del documento hallamos el Inspector de propiedades, un utilísimo panel que nos permite ver y modificar en cualquier momento las propiedades de la página, del objeto o del texto seleccionados. Pulse el botón Propiedades de la página del inspector. También puede acceder al cuadro Propiedades de la página desde el menú Modificar o pulsando la combinación de teclas Ctrl.+J

6 Desde el cuadro Propiedades de la página es posible modificar las características de la página. Ciérrelo pulsando Cancelar.

7 Por último, a la derecha de la interfaz se encuentran los paneles, que le ayudarán a supervisar y cambiar el trabajo realizado. Puede reducir y ampliar los paneles haciendo doble clic en sus pestañas, y pasar de uno a otro pulsando sobre ellas. Haga clic sobre la pestaña Elementos PA. Para poner en primer plano un panel basta con que pulse sobre su pestaña. Si hace doble clic, la minimizará.

8 También puede activar los paneles desde el menú Ventana. Para volver a mostrar en primer plano el panel Estilos CSS y acabar el ejercicio abra dicho menú y pulse sobre esa opción.

IMPORTANTE

Para cerrar un grupo de paneles, utilice la opción Cerrar grupo de fichas de su menú de opciones

003
Crear documentos

ADEMÁS DE DOCUMENTOS HTML, Dreamweaver permite crear documentos basados en texto (CFML, ASP, CSS) y archivos de código fuente (Visual Basic, .NET, C# y Java). El cuadro Nuevo documento ordena en categorías los diferentes tipos de archivo que se pueden obtener. Los archivos pueden ser creados en blanco o basados en los diseños de página preestablecidos. La categoría Nuevo documento del cuadro Preferencias permite establecer un tipo de documento como predeterminado y ordenar la generación automática de un documento nuevo basado en el tipo predeterminado definido.

IMPORTANTE

La desactivación de la casilla de verificación Mostrar el cuadro de diálogo Nuevo documento con Control + N en el cuadro Preferencias permite omitir la aparición del cuadro de diálogo Nuevo documento para acceder a la creación de documentos al utilizar el método abreviado de teclado Control + N.

1 Para empezar, haga clic en el enlace HTML de la Ventana de bienvenida. Después, en el nuevo documento en blanco que se ha creado, abra el menú Archivo y elija la opción Nuevo. Puede acceder al cuadro de diálogo Nuevo documento usando la opción Nuevo del menú Archivo o bien pulsando la combinación de teclas Ctrl.+N. En ese cuadro deberá elegir el tipo de documento que va a crear con Dreamweaver.

2 La primera columna de opciones del cuadro Nuevo documento permite la creación de una página en blanco, una plantilla en blanco, una página de plantilla, una página de muestra u otro tipo de documento. En el panel de la derecha se muestran los tipos de página, que varían según el tipo de documento seleccionado. La segunda parte de este panel incluye los tipos de páginas dinámicas. Seleccione la categoría Plantilla en blanco.

3 Las opciones de esta categoría permiten crear una plantilla que presente uno de los formatos del listado central. Una vez almacenado como plantilla, un documento podrá ser utilizado como base para la creación de otras páginas. Pulse sobre la categoría Página de plantilla.

4 El panel central nos indica que no existen sitios almacenados. Seleccione la categoría Otro. Los tipos de archivo de la categoría Otro están destinados a programadores experimentados.

5 Los tipos de archivo listados en esta categoría están destinados a programadores experimentados en estos lenguajes, basados en texto, con los que no es posible trabajar de forma visual mediante el programa. Pulse sobre la categoría Página de muestra.

6 Haga clic sobre la opción Colores: Rojo del panel Página de muestra y pulse el botón Crear.

7 Aparece el nuevo documento CSS modificado en su creación, como indica el asterisco junto al nombre del archivo en su pestaña. Pulse la combinación de teclas Ctrl.+N.

8 Pulse sobre la categoría Página en blanco, mantenga seleccionada la opción HTML y haga clic sobre el primer diseño de página de 2 columnas elásticas para ver su aspecto.

9 Pulse el botón Preferencias y, en el cuadro Preferencias, haga clic en el botón de flecha de la opción Documento predeterminado para acceder a sus opciones.

10 Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. Mantenga seleccionada la opción HTML y haga clic en Aceptar.Desde el cuadro de preferencias de Dreamweaver puede indicar qué tipo de documento será el documento predeterminado.

11 El enlace Obtener más contenido inicia Dreamweaver Exchange, que permite descargar más contenido de diseño de páginas. Pulse el botón Crear para crear un nuevo documento.

IMPORTANTE

Los estilos CSS permiten dotar de unas características comunes a las páginas, controlando parámetros relacionados con el aspecto que deben presentar los diferentes elementos que las componen, como el fondo y las tablas. El cuadro de diálogo Nuevo documento de la versión CS4 de Dreamweaver ofrece el panel Página de muestra, con todas las características de estos estilos y una vista previa y una descripción del estilo seleccionado.

004
Visualizar varios archivos simultáneamente

DREAMWEAVER MUESTRA LOS DIFERENTES documentos abiertos distribuidos en fichas. Sus pestañas los identifican y permiten activarlos fácilmente. De forma predeterminada, las fichas se muestran en el orden de creación o apertura de los archivos pero se pueden arrastrar para cambiarlas de posición. Las fichas sólo se muestran cuando la ventana del archivo se encuentra maximizada; en caso contrario, las ventanas funcionan como las tradicionales de Windows. Dreamweaver también permite disponer los archivos en forma de Cascada y Mosaico, opciones clásicas de distribución de ventanas del sistema operativo de Microsoft.

IMPORTANTE

Dreamweaver ofrece una posibilidad de recuperación directa de los archivos de uso reciente. Se trata de la opción Abrir reciente del menú Archivo, que contiene un submenú con el listado de los documentos que han sido editados y almacenados con anterioridad.

1 Contamos al inicio de la lección con varios documentos en pantalla creados en las prácticas anteriores. Para realizar este ejercicio, debe disponer de una página HTML de ejemplo almacenada en su equipo. Abra el menú Archivo y pulse en la opción Abrir. Puede acceder al cuadro de diálogo Abrir usando esa opción del menú Archivo o bien la combinación de teclas Ctrl.+O.

2 La acción nos conduce al cuadro de diálogo Abrir. Localice y seleccione su archivo de ejemplo y pulse el botón Abrir.

3 Abra el menú Ventana y pulse sobre uno de los documentos sin título para mostrarlo en primer plano. En la parte final del menú Ventana puede ver la lista de todos los documentos abiertos en estos momentos. Puede activarlos pulsando sobre ellos.

4 El archivo de ejemplo sigue abierto, pero permanece inactivo. Haga clic en la pestaña de ese archivo para activarlo.

5 Esta disposición en forma de fichas facilita la selección de los archivos para su edición. Pero el programa permite distribuirlos de otras maneras. Dreamweaver conserva las disposiciones de ventana clásicas de Windows, accesibles desde el menú Ventana. Ábralo y seleccione la opción Cascada. Dreamweaver permite mostrar las ventanas de los diferentes documentos abiertos en forma de cascada, de mosaico horizontal o de mosaico vertical.

6 Cada uno de los archivos se muestra en una ventana independiente, al estilo clásico de Windows . Para activar un documento, basta con hacer clic sobre su ventana. Los botones de control de la ventana, en el extremo derecho de su Barra de título, permiten controlar su estado de modo directo. Pulse el botón Minimizar de la ventana del documento de ejemplo.

7 El documento queda ubicado en la esquina inferior izquierda del área de trabajo. Pulse el botón Maximizar del siguiente archivo.

8 El área de trabajo recupera su distribución inicial, distribuyendo los diferentes documentos en fichas. Abra el menú Ventana y seleccione la opción Mosaico horizontal.

9 El documento de ejemplo sigue minimizado. En su Barra de título, el primero de los botones de control muestra el icono identificativo del comando Restaurar , que devolverá a la ventana el aspecto que presentaba antes de ser minimizada. Púlselo.Utilice los botones Restaurar, Maximizar y Minimizar de las Barras de título de las ventanas de los documentos para cambiar el tamaño de las mismas.

10 Además el programa permite aplicar ciertas acciones a la totalidad de documentos en uso. Abra el menú Archivo y pulse en la opción Cerrar todos.

11 Aparece un cuadro de advertencia que propone almacenar los cambios en los documentos que han sido modificados. Si los documentos no se guardan será imposible recuperarlos. Pulse el botón No para dar por acabado el ejercicio. Si va a cerrar un documento que ha sido modificado, el programa le pregunta antes si desea almacenar esas modificaciones.

005
Diseño y código de páginas web

DREAMWEAVER ES UN EDITOR VISUAL de páginas web, por lo que no es necesario conocer el lenguaje de programación para editarlas. Pero el programa también permite la edición directa del código, de modo que los programadores experimentados pueden introducir directamente las instrucciones. La codificación de los documentos HTML se basa en una estructura de etiquetas. Las páginas cuentan con dos secciones de código: head (cabecera) y body (cuerpo). La primera contiene las etiquetas necesarias para que la página se vea correctamente en Internet, y la segunda, los elementos que conforman la página.

IMPORTANTE

En la categoría Barra de estado del cuadro de diálogo Preferencias se pueden determinar tamaños preestablecidos de ventana y ajustar la velocidad de conexión para facilitar la valoración de la relación calidad/tamaño de las páginas durante su edición.

1 Toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación. Con su documento de ejemplo abierto en Dreamweaver, despliegue el menú Ver.

2 La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada. En el espacio de trabajo Diseñador, Dreamweaver presenta en la vista Diseño todos los documentos que permiten este modo de visualización. Seleccione la opción Código. Para cambiar de una vista a otra utilice las opciones disponibles en el menú Ver o bien los botones de la Barra de herramientas Documentos. Recuerde que puede mostrar esta barra seleccionándola en la opción Barras de herramientas del menú Ver.

3 El documento pasa a mostrarse en forma de código. De este modo, los desarrolladores experimentados pueden modificarlo directamente. Algunos tipos de archivos, como los estilos CSS, no pueden ser editados de forma visual y sólo es posible editarlos tecleando el código. Pero los documentos HTML pueden ser editados de forma visual. Haga clic en el botón Diseño de la barra de herramientas Documento. En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa para modificar su aspecto.

4 En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa, definiendo su aspecto. Pulse sobre una imagen de su página y haga clic en el botón Código de la barra Documento.

5 El lenguaje HTML se basa en la introducción de etiquetas. Si seleccionamos un elemento de la página en la vista Diseño, su etiqueta quedará seleccionada en la vista Código. Compruébelo pulsando el botón Dividir de la barra de herramientas Documento.

6 Este modo de visualización divide la ventana del documento en dos partes . En la superior se muestra el código y en la inferior se ve la representación visual del archivo. Haga doble clic sobre una de las palabras de la página en la ventana de diseño.Para trabajar conjuntamente con el código y con el diseño de una página, active la vista Dividir, que divide en dos partes el área de trabajo.

7 En la parte inferior de la ventana del documento se sitúa la Barra de estado, donde se encuentra el Selector de etiquetas, que muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en una de las etiquetas y compruebe que se selecciona el elemento definido por ésta en la vista Diseño y el correspondiente fragmento de programación en la vista Código.En la Barra de estado se encuentra el Selector de etiquetas, que permite seleccionarlas para modificarlas.

8 Pulse el botón Código de la barra de herramientas Documento y haga clic en la etiqueta body de la Barra de estado.

9 La selección de esta etiqueta comporta la de todos los elementos contenidos en la página. Cambie a la vista Diseño pulsando este botón de la barra Documento para dar por acabado el ejercicio.

IMPORTANTE

Los tamaños de ventana predefinidos, establecidos en píxeles, tienen en cuenta la visualización final del documento. Las páginas web una vez publicadas son reproducidas mediante un navegador de Internet. La ventana del navegador presenta un determinado tamaño en función de la resolución de pantalla (píxeles por pulgada) seleccionada. Dreamweaver propone tamaños de ventana indicando las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Los tamaños preestablecidos sólo podrán ser aplicados si trabajamos con la disposición de ventanas clásica, siendo imposible aplicarlos si los documentos quedan dispuestos en forma de fichas.

006
Conocer los elementos de una página web

LA VISTA DISEÑO SÓLO MUESTRA por defecto el contenido del cuerpo de la página, pero Dreamweaver permite editar su cabecera también de forma visual. Para ello, debe mostrarse el Contenido de head. Cada una de las etiquetas de esta sección puede ser modificada a través del Inspector de propiedades. El usuario puede definir fácilmente propiedades como el título, las etiquetas meta o los estilos de color empleados. El panel de propiedades también se usa para modificar los elementos contenidos en el cuerpo de la página.

IMPORTANTE

Los enlaces permiten la navegación, conectan las páginas con otras, y suelen presentarse con aspecto de texto subrayado.

1 Con el documento muestra.html abierto en Dreamweaver, despliegue el menú Ver y seleccione la opción Contenido de Head. (Puede encontrar este archivo en nuestra página de descargas).

2 Aparece la representación visual de la sección head bajo la barra de herramientas Documento . Para mostrar el código correspondiente, haga clic en el botón Dividir de esa barra.Los iconos para acceder al contenido de Head aparecen bajo la Barra de herramientas Documento.

3 Dreamweaver muestra un icono por cada uno de los elementos de la sección head. Seleccione el primero.

4 La etiqueta correspondiente, title, se selecciona . El primer elemento de la cabecera es, por tanto, el título del documento y consta de una sola propiedad, Título, que se muestra ya en el Inspector de propiedades. Seleccione mediante el arrastre la expresión Documento sin título, que aparece en el cuadro Título de la barra de herramientas Documento. Puede cambiar el título de su página escribiéndolo directamente en la etiqueta del código o bien en el campo Título de la Barra de herramientas Documento o del Inspector de propiedades.

5 No debe confundirse el título de la página con el nombre del archivo. El título se muestra en la Barra de título del navegador cuando se visualiza la página publicada. Escriba la palabra prueba y pulse la tecla Retorno para confirmar el cambio.

6 Haga clic en el segundo icono de la sección head. La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento. Esta información, que consta de tres propiedades, queda establecida automáticamente durante la generación del documento, en función del formato que éste presente.

7 La codificación del documento se almacena en una etiqueta meta en el área de encabezado del documento . Indica al navegador cómo se debe descodificar el documento y qué fuentes se deben utilizar para mostrar el texto descodificado. Seleccione el tercer elemento de la sección head.

8 Esta sección se completa con un estilo CSS que define atributos de formato de los elementos contenidos en el cuerpo de la página. Haga clic en el botón Diseño de la barra de herramientas Documento, pulse el icono Ver opciones, el cuarto empezando por la derecha, y haga clic en la opción Contenido de Head. Para ocultar el Contenido de Head, desactive esa opción en el menú de opciones de la Barra de herramientas Documento.

9 Nuestra página de ejemplo cuenta con algunos de los elementos clásicos que conforman una página web. Haga doble clic, en la ventana del documento, sobre la palabra Página.

10 El panel Propiedades presenta los atributos del texto actualmente seleccionado. Los enlaces son otro de los elementos principales de las páginas. Seleccione con un doble clic la palabra Pulse.

11 El texto definido como enlace aparece en el campo Vínculo. Los enlaces también pueden añadirse a imágenes. Seleccione la imagen para ver sus propiedades y dar por acabado el ejercicio.En este caso, el texto seleccionado enlaza con la página principal del sitio de la empresa desarrolladora de este manual, MEDIAactive.

Las imágenes también son un componente fundamental de las páginas, ya que las dotan de un mayor atractivo. Otros componentes pueden ser tablas, sonidos, vídeos y diversos tipos de elementos multimedia.

IMPORTANTE

Las ayudas visuales, activas por defecto, facilitan la realización de algunas acciones. Para desactivarlas puede optar por utilizar el comando Ocultar todo del submenú Ayudas visuales del menú Ver o acudir al menú emergente del botón Ayudas visuales y activar la opción Ocultar todas las ayudas visuales.

007
Trabajar con los comandos básicos

PUEDE GUARDAR LOS DOCUMENTOS de Dreamweaver con el nombre y ubicación predefinidos por el programa o modificarlos desde el cuadro de diálogo Guardar como. Los comandos relativos al almacenado de documentos son accesibles desde el menú Archivo y las funciones habituales de copia, pegado, etc., se encuentran en el menú Edición.

IMPORTANTE

El comando Deshacer anula la última acción realizada y el comando Rehacer la recupera. Ambos se encuentran en el menú Edición y en la Barra de herramientas Estándar de Dreamweaver.

1 En el ejercicio anterior hemos utilizado el documento HTML muestra, que ha sido modificado. Por eso aparece un asterisco en su pestaña. El método más sencillo para almacenar los cambios efectuados en un documento consiste en la ejecución del comando Guardar desde el menú Archivo. Este comando puede ser ejecutado directamente mediante la combinación de teclas Ctrl.+S. Abra el menú Archivo y pulse en el comando Guardar.

2 El programa guarda los cambios efectuados, conservando la ubicación original y el nombre del documento. La opción Guardar se ve complementada por los comandos Guardar como, Guardar todo, Guardar en servidor remoto y Guardar como plantilla. Abra el menú Archivo y elija la opción Guardar como. El cuadro Guardar como, al que se accede usando esa opción del menú Archivo, es similar al cuadro Abrir y permite seleccionar el directorio en el que se almacenará el archivo. Para ello presenta el cuadro desplegable Guardar en y el panel de accesos directos. Además permite el cambio del nombre del documento.

3 La utilización de este comando está indicada para almacenar los documentos editados como copia de los originales. Su ejecución conduce al cuadro de diálogo Guardar como , que también se muestra al almacenar un documento por primera vez. Este cuadro, similar al cuadro Abrir, permite seleccionar el directorio en el que se almacenará el archivo y cambiar su nombre. En el campo Nombre, pulse tras la última letra de la palabra muestra, inserte un número 2 y haga clic en el botón Guardar para almacenar el archivo con el nuevo nombre. Al guardar una copia de un documento a través del cuadro Guardar como, tanto ésta como el original continúan abiertas en el programa.

4 Ahora contamos con dos documentos iguales, siendo la copia, muestra2, la que se muestra activada para su edición . El comando Guardar todo ordena el almacenado simultáneo de los documentos en uso. La selección del comando Guardar en servidor remoto, por su parte, conduce al cuadro de diálogo Guardar archivo que permite almacenar los documentos en los equipos remotos utilizados para publicar los sitios. Abra el menú Archivo y seleccione el comando Guardar como plantilla.

5 El uso de plantillas sólo es posible si previamente se ha creado un sitio. Pulse el botón Cancelar del cuadro informativo. Para poder guardar plantillas, debe existir un sitio.

6 La barra de herramientas Estándar proporciona acceso directo a las funciones más utilizadas de los menús Archivo y Edición. Por defecto se encuentra oculta. Para mostrarla, abra el menú Ver, pulse sobre la opción Barras de herramientas y haga clic en Estándar. La Barra de herramientas Estándar puede visualizarse desde el comando Barras de herramientas del menú Ver.

7 Seleccione la imagen situada en el centro de la página.

8 Los seis primeros botones de la barra Estándar dan acceso a las funciones Nuevo, Abrir, Examinar en Bridge, Guardar, Guardar todo e Imprimir código, todas ellas incluidas en el menú Archivo. El siguiente grupo de botones se corresponde con comandos del menú Edición. Haga clic en el botón Cortar, cuyo icono muestra unas tijeras.

9 Abra el menú Edición y seleccione el comando Pegar.

10 En el cuadro de diálogo que aparece puede añadir si lo desea una descripción de la imagen. Pulse Aceptar.

IMPORTANTE

La principal diferencia entre los comandos Cortar y Copiar reside en que mientras el primero elimina el elemento seleccionado del documento, el segundo lo mantiene. Ambos envían el elemento al Portapapeles de Windows, una memoria temporal del sistema que guarda la información necesaria para utilizarla con posterioridad.

008
Crear sitios locales

UN SITIO WEB ES UN CONJUNTO DE ARCHIVOS enlazados con atributos compartidos: temas relacionados, diseño similar u objetivo común. Dreamweaver es una herramienta de creación y gestión de sitios Web completos, además de un editor visual de páginas. Para crear un sitio Web local tan sólo es necesario determinar el directorio del equipo que se convertirá en la carpeta raíz del sitio. En la carpeta local se almacenan los archivos con los que está trabajando en un sitio de Dreamweaver.

IMPORTANTE

Para desarrolladores experimentados, el programa posibilita la introducción directa de los datos de configuración del sitio en la ficha Avanzadas del cuadro de diálogo Definición del sitio para.

1 La aplicación cuenta con un menú que contiene los comandos relacionados con la creación y gestión de sitios. También puede acceder a algunos de esos comandos utilizando el botón Sitio de la nueva Barra de la aplicación. Pulse ese botón, el tercero de dicha barra, y seleccione la opción Administrar sitios. El icono Sitio de la nueva Barra de la aplicación contiene dos opciones que permiten acceder directamente al asistente para la creación de un nuevo sitio y al administrador de sitios.Configurar un sitio de Dreamweaver permite organizar los documentos asociados. Los sitios se pueden gestionar y crear desde el cuadro Administrar sitios. Al seleccionar la opción Nuevo sitio de este cuadro se accede al asistente para la creación de sitios.

2 Haga clic en el botón Nuevo y seleccione la opción Sitio.

3 El asistente para la definición del sitio presenta tres secciones: Editando archivos, Comprobando archivos y Compartiendo archivos. El primer paso consiste en asignar un nombre al sitio. Pulse la tecla Suprimir para eliminar el nombre propuesto por el programa, escriba la palabra elemental y pulse el botón Siguiente.

4 El segundo paso permite indicar si está creando una aplicación Web. Mantenga seleccionada la opción No, no deseo utilizar una tecnología de servidor y pulse en Siguiente.

5 Un sitio consta de un máximo de tres partes o carpetas, según el entorno de desarrollo y el tipo de sitio Web seleccionado. La carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como sitio local y puede estar tanto en el equipo local como en un servidor de red. El campo ¿En qué lugar desea almacenar los archivos? presenta como ubicación provisional la carpeta elemental contenida en el directorio Documentos. Para cambiarla, pulse en el icono de la carpeta. Utilice el icono de carpeta del campo ¿En qué lugar del equipo desea almacenar los archivos? para localizar su carpeta raíz.

6 En el cuadro Elegir carpeta raíz local para el sitio elemental. pulse el botón Escritorio del panel de accesos directos y haga clic en el botón Nueva carpeta, el tercero del grupo de botones de la parte superior.

7 Esta carpeta será la raíz de nuestro sitio local. Escriba la palabra elemental y pulse dos veces la tecla Retorno.

8 Pulse el botón Seleccionar para marcar la nueva carpeta como carpeta local raíz de nuestro sitio y haga clic en Siguiente.

9 Para transferir archivos a un servidor o desarrollar aplicaciones Web se deben añadir los datos de configuración de un sitio remoto y de un servidor de prueba. Pulse el botón de flecha del cuadro ¿Cómo conecta con su servidor remoto?

10 En la carpeta remota se almacenan los archivos, según el entorno de desarrollo, para fines de prueba, producción y colaboración. Seleccione la opción Ninguno y pulse el botón Siguiente.La carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web y en ella se guardan los archivos para fines de colaboración.

11 La pantalla final, llamada Resumen, muestra la configuración seleccionada para el sitio elemental. Pulse el botón Completado y, para crear definitivamente el sitio local, haga clic en el botón Listo del cuadro de diálogo Administrar sitios.

IMPORTANTE

Una aplicación Web es un conjunto de páginas que interactúan entre sí, con el usuario y con diversos recursos en un servidor Web, incluidas bases de datos. Haga clic en el botón de opción Sí, deseo utilizar una tecnología de servidor para activar el cuadro con las distintas tecnologías de servidor. Dreamweaver posibilita la creación de aplicaciones Web mediante las tecnologías de servidor ColdFusion, ASP.NET, ASP, JSP y PHP. Cada una corresponde a un tipo de documento en Dreamweaver. La elección de una tecnología de servidor para la aplicación Web depende de diversos factores, incluidos su grado de conocimiento de los lenguajes de programación y la configuración del servidor de aplicaciones que vaya a utilizar.

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. La exportación de un sitio conserva todos los datos configurados en las diversas categorías del cuadro de diálogo Definición del sitio para.

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. La información relativa a la estructura del sitio se guarda en una memoria, denominada caché, que facilita la rápida gestión de los documentos pertenecientes a los sitios.

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. Para modificar las propiedades de un sitio, selecciónelo en el cuadro Administrar sitios y pulse el botón Editar.

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 . Para acceder a los archivos contenidos en el sitio, pulse el botón de flecha del cuadro Mostrar del panel Archivos y seleccione la opción Administrar sitios.Al importar un sitio con todas sus carpetas, éstas muestran el identificativo color verde en el panel Archivos.

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. Una nota activa se muestra al abrir el documento al que está asociada. La pulsación del botón Limpiar activa la supresión de las notas contenidas en el sitio. Directamente elimina la carpeta _notes y todo su contenido.

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. Al pulsar el botón Sí a todo se eliminarán todas las notas incluidas en el sitio.

12 Haga clic en Aceptar y, en el cuadro de diálogo Administrar sitios, pulse el botón Listo.

015
Duplicar y editar sitios

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.

016
Introducir texto

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.

017
Copiar y pegar texto

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.

018
Cambiar el formato de párrafo

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.

019
Modificar las propiedades de fuentes

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.

020
Cambiar el color del texto

DREAMWEAVER PREDETERMINA la aplicación del color negro a los textos incluidos en las páginas. El programa permite cambiar esta configuración. Para ello se debe acceder a la categoría Apariencia del cuadro Propiedades de la página. El campo Texto da acceso a un selector de color, que permite elegir el tono entre las diferentes muestras propuestas en una paleta emergente, o directamente capturar el color de pantalla.

IMPORTANTE

Dreamweaver posibilita el cambio de color del texto seleccionado, de modo que el nuevo tono prevalezca sobre el preestablecido para la página, aunque para ello se debe definir una clase para el estilo CSS.

1 Por defecto los textos de Dreamweaver se presentan en color negro. Éste es el tono que presentaban todos los textos introducidos en nuestras páginas hasta ahora. Pulse el botón Propiedades de la página del Inspector de propiedades.

2 El programa permite predeterminar un color para los textos de cada uno de los documentos. De este modo, el cuadro de diálogo Propiedades de la página, en su categoría Apariencia, presenta un cuadro de color referido al texto del documento. Active la categoría Apariencia (HTML). Seleccione siempre colores de texto que contrasten con el fondo de la página, de manera que puedan ser leídos con facilidad.

3 Pulse en la punta de flecha del cuadro de color de la opción Texto y, en la paleta emergente, seleccione un tono azul.

4 Haga clic en Aceptar y compruebe que todo el texto adopta el color elegido.

5 Pulse de nuevo sobre el botón Propiedades de la página del Inspector de propiedades. El color seleccionado como color de texto se aplica al texto de toda la página. Puede cambiar el color del texto, el de los vínculos, el de los vínculos visitados y el de los vínculos activos.

6 Recuperaremos el tono negro como color predeterminado de los textos de la página. Active la categoría Apariencia (HTML), despliegue la paleta emergente del campo Texto y pulse en la muestra de color negro de la paleta.

7 Si bien el color dota de atractivo a las páginas, debe tener en cuenta que la principal función del texto es la transmisión de información. El color negro resulta especialmente indicado en páginas de fondos claros. Pulse el botón Aceptar del cuadro de diálogo Propiedades de la página y guarde los cambios pulsando el icono Guardar de la Barra de herramientas Estándar.

En HTML, los colores se expresan en forma de valores hexacesimales. El programa permite la definición directa de un tono mediante estos valores. Por ejemplo, el valor que define un tono de azul sería #0000FF . Puede comprobar el código en valores hexacesimales en el campo Color del texto del cuadro de propiedades de página.

Todos los colores de las paletas Cubos de color y Tono continuo son seguros para la Web.

IMPORTANTE

Las paletas de Dreamweaver presentan una serie de botones en su parte superior. El botón de flecha del extremo derecho da paso a un menú de opciones que permite cargar diferentes paletas de color. La pulsación del botón Color predeterminado devuelve al texto el color establecido en las propiedades de la página. El botón Colores del sistema conduce al cuadro de diálogo Color, que posibilita la personalización de los tonos a través de seis parámetros. Tres hacen referencia a los colores primarios utilizados en la mezcla y los otros tres son los correspondientes al matiz, la saturación y el brillo.

Конец ознакомительного фрагмента.

Текст предоставлен ООО «ЛитРес».

Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.