Manual de Dreamweaver CS5 E-Book

MEDIAactive

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Serie: Manuales
• Sprache: Spanisch
• Veröffentlichungsjahr: 2012

Seitenzahl: 724

Beschreibung

Este manual dedicado a Dreamweaver CS5, el conocido programa de creación y edición de sitios y páginas web de la compañía Adobe, se estudia en profundidad el uso de prácticamente todos los comandos de esta aplicación para elaborar sitios web tanto a nivel profesional como particular. Mediante sencillos y a la vez elaborados ejemplos prácticos se describen detalladamente las herramientas del programa. La versión más reciente de Dreamweaver presenta novedades que podrían considerarse indispensables, así como ciertas mejoras que consiguen una vez más la complicidad entre el usuario y la aplicación gracias a un uso cada vez más intuitivo y al alcance de prácticamente todos. De este modo, Dreamweaver presenta entre sus novedades una simplificación en la configuración del sitio web, que consiste sencillamente en la inserción de un nombre y una ruta en la cual se almacenarán los archivos. Sólo con estos datos el programa ya permite empezar a trabajar con la elaboración de las páginas que formarán el sitio web. Entre otras novedades, el usuario encontrará y podrá practicar con los diseños de inicio de CSS, los archivos relacionados dinámicamente o la magnífica navegación de Vista en Vivo, que activa vínculos para poder interactuar con aplicaciones del lado del servidor y con datos dinámicos. Garantizamos que si el lector realiza correctamente todos los ejercicios que componen los 10 apartados de este volumen, se convertirá en un experto en creación y diseño de sitios y páginas web y podrá aplicar los conocimientos avanzados adquiridos sobre sus propias creaciones personales o profesionales, aprovechando así al máximo las principales utilidades que ofrece el programa. Este libro pertenece a la colección Manuales, la cual ofrece cursos prácticos de los más importantes programas del sector informático dirigidos tanto a usuarios noveles como a usuarios que trabajan habitualmente con esos programas y desean ampliar sus conocimientos.

Leseprobe

Manual de

Dreamweaver CS5

Manual de

Dreamweaver CS5

MEDIAactive

Manual de Dreamweaver CS5

© MEDIAactive

Primera edición, abril 2011

© 2011 MARCOMBO, S.A.   Gran Via de les Corts Catalanes, 594   08007 Barcelona (España)   www.marcombo.com

en coedición con:

© 2011 ALFAOMEGA GRUPO EDITOR, S.A. de C.V.   C/ Pitágoras 1139 - Colonia del Valle   03100 – México D.F. (México)   www.alfaomega.com.mx

Diseño de la cubierta: NDNU DISSENY GRÀFIC

Con la colaboración de:

«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».

ISBN por Marcombo: 978-84-267-1860-0

ISBN por Alfaomega: 978-60-770-7141-9

ISBN (obra completa): 978-84-267-1674-3

D.L.:

Printed in Spain

Índice

Presentación

Espacio de trabajo y gestión de archivos

Introducción

Lección 1. Acceder a Dreamweaver: la Ventana de bienvenida

Lección 2. Conocer la interfaz de usuario del programa

Lección 3. Gestionar los conjuntos de paneles

Lección 4. Crear nuevos documentos

Lección 5. Ver distintos archivos a la vez

Lección 6. Alternar entre las vistas de diseño y de código

Lección 7. Elementos básicos de una página web

Lección 8. Uso de comandos básicos en Dreamweaver

Gestión de sitios y páginas

Introducción

Lección 9. Creación de un sitio web local

Lección 10. Administración de un sitio local

Lección 11. Aplicar un color de fondo a una página

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

Lección 13. Insertar una imagen de rastreo

Lección 14. Insertar notas de diseño

Lección 15. Exportar y eliminar un sitio local

Lección 16. Importar un sitio local a Dreamweaver

Lección 17. Duplicar y editar un sitio local

El texto en Dreamweaver

Introducción

Lección 18. Insertar texto

Lección 19. Seleccionar, copiar y pegar texto

Lección 20. Modificar el formato de un párrafo

Lección 21. Cambiar el tipo y el tamaño de la fuente

Lección 22. Aplicar un estilo al texto

Lección 23. Aplicar color al texto

Lección 24. Trabajar con colores personalizados y seguros

Lección 25. Cambiar márgenes y alineación

Lección 26. Aplicar sangrías y crear lista de elementos

Lección 27. Cambiar el formato de una lista

Lección 28. Insertar caracteres especiales

Lección 29. Insertar reglas horizontales

Lección 30. Crear archivos de InContext Editing

Lección 31. Revisar la ortografía de un documento

Lección 32. Buscar y reemplazar texto

Gestión de imágenes

Introducción

Lección 33. Insertar una imagen en una página

Lección 34. Cargar y copiar imágenes

Lección 35. Redimensionar y recortar imágenes

Lección 36. Alinear imágenes

Lección 37. Editar una imagen para modificarla

Lección 38. Trabajar con editores externos

Lección 39. Insertar una instancia de imagen

Lección 40. Insertar una imagen desde Photoshop

Gestión de enlaces y previsualización

Introducción

Lección 41. Insertar un enlace

Lección 42. Crear enlaces a correo electrónico y a imágenes

Lección 43. Comprobar la previsualización en un navegador

Lección 44. Previsualizar una página web

Lección 45. Modificar las propiedades de los enlaces

Lección 46. Aplicar formato a los hipertextos

Lección 47. Navegar en la Vista en vivo

El trabajo con tablas

Introducción

Lección 48. Insertar una tabla

Lección 49. Gestionar filas, columnas y celdas

Lección 50. Cambiar el tamaño de la tabla, las columnas y las filas

Lección 51. Consultar y modificar las propiedades de una tabla

Lección 52. Modificar las propiedades de columnas y filas

Lección 53. División y combinación de celdas

Lección 54. La interacción de Dreamweaver con Word

Lección 55. La interacción de Dreamweaver con Excel

Lección 56. Limpieza de código HTML

Lección 57. Crear tablas anidadas

Lección 58. Ordenar las tablas existentes

Lección 59. Exportar e importar datos de una tabla

Lección 60. Conocer los modos de trabajo con tablas

Lección 61. Utilizar la cuadrícula y las reglas

Etiquetas HTML y estilos

Introducción

Lección 62. Configurar los estilos CSS

Lección 63. Aplicar estilos CSS

Lección 64. Trabajar con hojas de estilos de muestra

Lección 65. Definir estilos para etiquetas HTML

Lección 66. Los archivos relacionados

Lección 67. Editar una hoja de estilos

Lección 68. Definición de nuevas reglas de estilo

Lección 69. Incrustar, importar y vincular hojas de estilo

Lección 70. Utilizar un diseño de inicio CSS

Lección 71. El Navegador de código

Lección 72. Crear un estilo de clase

Lección 73. Duplicar y aplicar un estilo de clase

Lección 74. Combinación de hojas de estilo

Lección 75. Conocer las categorías de definición de estilos

Lección 76. Reglas de estilo avanzadas

Lección 77. Trabajar con el nuevo modo de inspección CSS

Uso de marcos y multimedia

Introducción

Lección 78. Crear conjuntos de marcos

Lección 79. Cambiar el origen de los marcos

Lección 80. Insertar un marco

Lección 81. Modificar las propiedades de un marco

Lección 82. Insertar un marcador de posición de imagen

Lección 83. Crear una imagen de sustitución

Lección 84. Insertar un vídeo de Flash

Lección 85. Insertar un botón de Flash

Lección 86. Vincular e incrustar sonidos

Lección 87. Cambiar el destino de un enlace

Lección 88. Insertar anclajes con nombre

Conceptos avanzados

Introducción

Lección 89. Insertar elementos PA

Lección 90. Manipular las propiedades de los elementos PA

Lección 91. Convertir un elemento PA en tabla

Lección 92. Crear un formulario

Lección 93. Insertar objetos en el formulario

Lección 94. Agregar comportamientos

Lección 95. Asignar una acción a un formulario

Lección 96. Insertar funciones de Javascript

Lección 97. Definir comportamientos con JavaScript

Lección 98. Usar sugerencias para el código JavaScript

Lección 99. Plantillas y regiones editables

Lección 100. Crear un documento a partir de una plantilla

Lección 101. Automatizar tareas desde el panel Historial

Lección 102. Generar un conjunto de datos de Spry

Lección 103. Insertar tablas y regiones de Spry

Lección 104. Trabajar con widgets

Lección 105. Insertar barras de menús de Spry

Lección 106. Aplicar efectos Spry

Gestión avanzada de sitios

Introducción

Lección 107. Conocer el panel Activos

Lección 108. Elementos de biblioteca

Lección 109. Opciones de visualización del panel Archivos

Lección 110. Comprobar localmente un sitio

Lección 111. Configurar un servidor remoto

Lección 112. Colocar y obtener archivos

Lección 113. Proteger y desproteger archivos

Lección 114. Obtener ayuda en Dreamweaver CS5

Presentación

Dreamweaver CS5 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 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 las lecciones que componen este manual.

La versión CS5 de Dreamweaver no presenta muchas novedades, aunque las pocas existentes pueden calificarse de interesantes y necesarias. Así, el lector podrá activar y deshabilitar las propiedades de CSS directamente desde el panel Estilos CSS, acción ésta mucho más directa que antes; dispondrá del modo de inspección, gracias al cual podrá consultar visualmente las propiedades del modelo del cuadro CSS, incluidos el relleno, el borde y el margen de los elementos de las páginas, de forma detallada y sin necesidad de leer el código ni de utilizar ninguna utilidad independiente. Los diseños de inicio de CSS también han sido incorporados como novedad en esta versión del programa, concretamente actualizados y simplificados; cabe destacar que han sido eliminados los complejos selectores descendentes de los diseños incluidos en la versión CS4 y han sido reemplazados por clases simplificadas mucho más fáciles de comprender.

La función Archivos relacionados dinámicamente, la navegación en la denominada Vista en vivo, la configuración simplificada de sitios y las sugerencias para el código específicas de cada sitio son otras novedades que el usuario encontrará en la versión CS5 de Dreamweaver.

Nuestro método de aprendizaje

El método de aprendizaje en que se basa esta colección de manuales permite que el lector ejercite las funciones sobre el programa real desde el primer momento, pudiendo personalizar los ejercicios según sean sus necesidades o preferencias. Nuestro método se caracteriza por no dar nada por sabido guiando cuidadosamente al usuario desde los prime-ros pasos hasta el perfecto dominio del programa. Una serie de capturas de pantalla que acompañan a los ejercicios permiten asegurarse en todo momento de que el proceso se está ejecutando correctamente.

A lo largo de las lecciones que conforman el presente manual, no se trabajará con un único archivo sino que se utilizará más de uno, según la finalidad de las funciones presentadas. La continuidad en el proceso de creación que presentan muchas de las lecciones hacen que sea muy recomendable estudiarlas de forma ordenada y empezando por el principio, para así ir encontrando los documentos necesarios tal y como quedaron al ser manipulados por última vez. No obstante, con la finalidad de optimizar el curso y evitar la repetición innecesaria de procedimientos ya estudiados, algunos de los ejercicios parten de archivos de ejemplo ya creados. El lector puede optar en estos casos por realizar los ejercicios sobre un documento cualquiera creado y guardado por el alumno, o por descargar los archivos necesarios desde nuestra página Web. Es recomendable, a fin de no interrumpir el ritmo de estudio, descargarse todos los documentos necesarios y guardarlos en una carpeta del disco, antes de empezar la práctica.

En la confección de este manual, hemos tenido en cuenta que sea igualmente útil como curso completo de Dreamweaver CS5 y como libro de consulta complementario sobre este programa de creación y edición de sitios web. En cada una de las lecciones encontrará una breve descripción teórica del tema que se trata, a modo de introducción, y un ejercicio guiado paso a paso y pulsación a pulsación.

Espacio de trabajo y gestión de archivos

Introducción

Dreamweaver es el programa incluido en la suite de Adobe destinado a la creación y la gestión de sitios web. La versión CS5 del producto presenta interesantes novedades en cuanto a funciones y comandos se refiere, aunque no tantas respecto a su interfaz. En las primeras lecciones que conforman este manual, el lector tendrá una primera toma de contacto con esta interfaz y con los espacios de trabajo, así como con los elementos básicos que forman parte de una página web sencilla.

Dreamweaver cuenta con la denominada Ventana de bienvenida, que aparece por defecto al acceder al programa y que, como se verá en su momento, es posible activar y desactivar según las preferencias del usuario. Podría decirse que esta ventana de bienvenida es la puerta de entrada al trabajo más habitual con el programa, puesto que desde ella es posible abrir documentos existentes o iniciar el proceso de creación de otros nuevos. Además, dispone de vínculos de ayuda que puede proporcionarle confianza en sus primeros pasos con Dreamweaver.

La posibilidad de trabajar sobre distintos espacios de trabajo resulta una ventaja puesto que permite contar sólo con aquellos elementos de interfaz que más se utilizan.

La Ventana de bienvenida, antes denominada Página de inicio, es la puerta de entrada al trabajo con Dreamweaver.

La interfaz de Dreamweaver es bastante similar a la de otras aplicaciones de la suite de Adobe. Por ella, realizaremos un paseo en las primeras lecciones de este apartado, así como por los distintos espacios de trabajo disponibles. Los espacios de trabajo suponen la reorganización de los elementos de la interfaz de usuario basada en el tipo de documentos que se vaya a preparar. El espacio por defecto es el denominado Diseñador y ofrece una disposición de barras de herramientas y paneles muy intuitiva.

Sin ninguna duda, las primeras lecciones servirán para familiarizarse a un nivel general con la representación de los elementos contenidos en una página web en las líneas de programación de la misma.

La creación de un nuevo documento se lleva a cabo desde el cuadro de diálogo Nuevo documento, desde el cual es posible elegir entre diseños predeterminados para crear una página básica.

La creación de documentos básicos también se trata en este apartado, así como la visualización y la gestión de estos documentos. Además, en esta sección se aprovecha para mostrar las diferencias entre las vistas en que se puede mostrar un documento (Diseño, Código o ambas a la vez), conocer las distintas partes básicas de una página web (head y body) y aquellos elementos que se presentan casi como imprescindibles en una página web (imágenes, texto, vínculos, etc.).

El apartado concluye con una lección dedicada a los comandos más básicos de Dreamweaver, comandos propios de cualquier aplicación que se ejecute en un entorno Windows (Guardar, Copiar, Pegar, Deshacer...).

Lección 1.Acceder a Dreamweaver: la Ventana de bienvenida

Al acceder a Dreamweaver CS5, se carga la denominada Ventana de bienvenida, ya presente en versiones precedentes. La Ventana de bienvenida permite el acceso a las acciones usadas con mayor frecuencia tanto al iniciar una sesión de trabajo como cuando la ventana del programa no tiene ningún documento abierto. Su uso resulta una alternativa al de los comandos tradicionales del programa 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, a fin de profundizar en los conocimientos sobre Dreamweaver.

RECUERDE

Un sitio Web es un conjunto de documentos vinculados con atributos compartidos. Dreamweaver es una herramienta de creación y administración de sitios, por lo que puede utilizarla para crear sitios Web completos, además de documentos por separado.

1 En esta primera lección del curso realizaremos una aproximación al espacio de trabajo de Dreamweaver CS5 y conoceremos la útil Ventana de bienvenida. La lección comienza en el Escritorio de Windows. Desde la Barra de tareas, haga clic en el botón Inicio y seleccione con un clic el directorio Todos los programas.

2 En principio, la práctica totalidad de los programas que instala en su ordenador quedan reflejados en el menú que se despliega. Haga clic en la carpeta Adobe Master Collection CS5 y, por último, pulse en la opción Adobe Dreamweaver CS5 para que se ejecute el programa.

3 Previamente a su carga propiamente dicha, la primera vez que accede a Dreamweaver, aparece la ventana Editor predeterminado, que permite designar aquellos formatos de archivo para los cuales el programa se establecerá como editor preestablecido. En este caso, se encuentran marcados los formatos más habituales con los que se trabaja, por lo que pulse en Aceptar para confirmar esta designación y continuar con la carga. (1)

Dreamweaver forma parte de la suite programas Adobe Creative Suite, que contiene aplicaciones tan conocidas y utilizadas como Photoshop, InDesign, Illustrator o Flash.

La ventana de bienvenida también se conoce en Dreamweaver como Página de inicio.

4 Ahora sí, Dreamweaver se carga y se abre mostrando en su parte central la Ventana de bienvenida. (2) Esta pantalla permite el acceso a las acciones usadas con mayor frecuencia tanto al iniciar una sesión de trabajo como cuando la ventana del programa no tiene ningún documento abierto. Las opciones de la Ventana de bienvenida se dividen en cuatro bloques. Pulse el enlace Abrir del apartado Abrir un elemento reciente.

5 La acción nos conduce al cuadro de diálogo Abrir, que posibilita la selección y apertura de documentos previamente creados. Regresaremos a este cuadro de diálogo en una lección posterior, a fin de conocer su funcionamiento. De momento, pulse el botón Cancelar para salir de este cuadro.

6 El segundo bloque de la Ventana de bienvenida, 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. Éste es el formato tradicional de las páginas Web. Pulse sobre este enlace.

7 Automáticamente se crea un documento HTML en blanco. (3) Pulse sobre el icono del programa, situado en el extremo izquierdo de la barra superior del programa. (4)

El menú de control también es accesible mediante la pulsación del botón derecho sobre una zona libre de la barra superior del programa.

El comando Restaurar devuelve la ventana a las dimensiones originales.

8 La pulsación sobre el icono del programa nos conduce al menú de control. Sus opciones permiten gestionar la ventana de la aplicación y son las mismas que las situadas en el extremo derecho de la barra superior de la aplicación. Pulse sobre la opción Minimizar.

9 El programa queda reducido a un botón en la Barra de tareas de Windows. Haga clic en dicho botón para restaurar la ventana del programa.

10 Bajo la barra superior de aplicación se sitúa la Barra de menús, que contiene las diferentes opciones que componen el programa. Haga clic en el menú Archivo.

11 El primer grupo de comandos del menú Archivo se encuentra relacionado con la creación, apertura y cierre de documentos. Así, la selección del comando Cerrar y Cerrar todos comporta la clausura del o los documentos en uso. En cambio la del último de los comandos, Salir, implica el cierre de la aplicación. Pulse sobre la opción Cerrar. (5)

La combinación de teclas Ctrl + W también cierra el documento activo.

12 El cierre del documento comporta la reaparición de la Ventana de bienvenida. (6) Además en otros lenguajes de programación: XML, XSLT, PHP, entre otros. El listado del apartado Crear nuevo se cierra con dos enlaces especiales. El último, llamado Más, conduce al cuadro de diálogo Nuevo documento. Éste permite la creación de todos los tipos de documentos cuya edición es posible mediante el programa, no sólo de los listados en este apartado. El enlace Sitio de Dreamweaver, por su parte, conduce al cuadro de diálogo Configuración del sitio. Pulse sobre dicho enlace.

13 La versión CS5 de Dreamweaver ha mejorado notablemente el cuadro de diálogo Configuración del sitio, antes denominado Definición del sitio, renovando su diseño y facilitando la configuración de un sitio local. (7) Desde este cuadro, tal y como veremos más adelante, es posible crear páginas web de inmediato. En este caso, haga clic en el botón Cancelar sin realizar ningún cambio.

En la versión anterior de Dreamweaver, este cuadro se denominaba Definición del sitio.

También la combinación de teclas Ctrl + N permite acceder al cuadro de diálogo Nuevo documento.

14 El apartado Elementos destacados de la Ventana de bienvenida proporciona diferentes enlaces que nos conducen a completos tutoriales sobre las principales novedades de Dreamweaver CS5. También puede conocer las novedades del programa y sus funciones más comunes utilizando los enlaces de la parte inferior de la ventana. Haga clic sobre el vínculo Nuevas funciones del apartado inferior izquierdo de la Ventana de bienvenida. (8)

15 Se abre de este modo el navegador que tenga predeterminado en su equipo mostrando la sección de novedades de Dreamweaver CS5 de la página de ayuda del programa. (16) Más adelante veremos cómo buscar información en este completo sistema de ayuda. Cierre el navegador pulsando el botón de aspa de su Barra de título.

16 Observe que en la parte inferior de la Ventana de bienvenida se presenta la opción: No volver a mostrar esta Ventana de bienvenida. Su activación omite la Ventana de bienvenida, que no es más que una alternativa al uso de los comandos tradicionales para el acceso a determinadas funciones. Despliegue el menú Archivo y pulse sobre la opción Nuevo para comprobar que esta opción, al igual que el enlace Más de la Ventana de bienvenida, conduce al cuadro de diálogo Nuevo documento.

17 Estudiaremos con mayor detenimiento más adelante el funcionamiento del cuadro de diálogo Nuevo documento. De momento basta con saber que permite la creación de todos los tipos de documentos editables mediante el programa. Por defecto se encuentra seleccionada la creación de una página en blanco sobre un archivo del tipo XHTML Pulse el botón Crear

18 Dreamweaver CS5 cuenta con un cuadro de diálogo en el que se pueden determinar toda una serie de especificaciones relativas al entorno de trabajo. Para acceder a él, despliegue el menú Edición y pulse sobre el último de sus comandos, Preferencias. (9)

19 El cuadro de diálogo Preferencias distribuye sus funciones en diferentes categorías. La categoría General, seleccionada por defecto, presenta dos apartados. El primero de ellos, Opciones de documento, incluye algunas opciones correspondientes al diseño del espacio de trabajo. Pulse sobre la casilla de verificación Mostrar pantalla de bienvenida para deseleccionarla. (10)

La combinación de teclas Ctrl + U también da acceso al cuadro de preferencias de Dreamweaver.

La opción Volver a abrir documentos al iniciar indica que el programa se abra cargando todos los documentos que estaban abiertos en el momento en que fue cerrado. Si esta opción no está seleccionada, Dreamweaver muestra la Ventana de bienvenida o, en su defecto, una pantalla vacía al iniciarse.

20 De este modo la Ventana de bienvenida queda desactivada, aunque esta preferencia no podremos comprobarla hasta que accedamos de nuevo a la aplicación. Haga clic sobre el botón Aceptar.

21 El conmutador de espacios de trabajo situado en la Barra superior de la aplicación permite cambiar el espacio de trabajo predeterminado. Haga clic sobre ese conmutador, que muestra el espacio de trabajo Diseñador.

22 Las primeras opciones corresponden a los espacios de trabajo disponibles. Haga clic sobre la opción Programador. (11)

23 Como puede comprobar, se trata del mismo espacio de trabajo integrado que el de Diseñador, pero con los grupos de paneles apilados a la izquierda. Despliegue ahora el menú Ventana, haga clic sobre el comando Diseño del espacio de trabajo y pulse esta vez sobre el espacio Pantalla doble. (12)

24 La pantalla doble permite organizar un diseño si dispone de un segundo monitor. (13) Este diseño coloca todos los paneles en el monitor secundario y mantiene la ventana de documento y el inspector de código en el principal. Cierre la ventana Inspector de código pulsando sobre el botón de aspa de su cabecera.

25 Terminaremos esta lección volviendo al espacio de trabajo predeterminado, saliendo del programa y volviendo a acceder a él para comprobar así que la Ventana de bienvenida no aparece, tal y como hemos marcado en el cuadro de preferencias. Pulse el conmutador de espacio de trabajo de la Barra superior de la aplicación y elija el espacio Diseñador.

26 Seguidamente, pulse el botón de aspa situado en el extremo derecho de la ventana del programa para cerrar Dreamweaver.

27 Por último, y como hemos indicado, accederemos de nuevo a Dreamweaver y comprobaremos que la Ventana de bienvenida ya no aparece. Despliegue el menú de Inicio, haga clic sobre el directorio Todos los programas, abra con un clic la carpeta Adobe Master Collection CS5 y pulse sobre el acceso Adobe Dreamweaver CS5. (14)

En versiones anteriores del programa, el espacio de trabajo Programador se denominaba Código.

En versiones anteriores de Dreamweaver el espacio de trabajo podía cambiarse desde el cuadro de preferencias o bien desde el menú Ventana.

Lección 2.Conocer la interfaz de usuario del programa

El diseño de la interfaz de los diferentes componentes de Adobe Creative Suite CS5, entre los que se encuentra Dreamweaver, es cómodo e intuitivo y permite trabajar de forma rápida y racional. El espacio de trabajo predeterminado de Dreamweaver, denominado Diseñador, 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. La Barra de aplicación, situada en la parte superior de la ventana de Dreamweaver, ha sido levemente retocada; en ella, se ubican los comandos que permiten cambiar el espacio de trabajo de Dreamweaver, un cuadro de búsqueda y un acceso a CS Live. Cuando se dispone de un documento abierto, aparece la barra de herramientas Documento, situada bajo la pestaña del documento, que presenta opciones relativas a su visualización y a la transferencia entre los sitios.

RECUERDE

Cabe destacar que según las dimensiones y la resolución de la pantalla con que se esté trabajando, la Barra de menús puede integrarse en la Barra de la aplicación, a continuación del icono del programa, o bien por debajo de la misma.

1 En esta lección, realizaremos una aproximación a la interfaz de usuario de Dreamweaver, en su espacio de trabajo predeterminado, el denominado Diseñador. Para ello, y para poder comprobar todos los elementos del área de trabajo, empezaremos creando un nuevo documento. Aunque trabajaremos la creación de sitios web más adelante, debe saber que el menú Sitio dispone del comando Nuevo sitio, que le permitirá crear un nuevo sitio de forma rápida y sencilla. Despliegue el menú Archivo y haga clic sobre el comando Nuevo.

2 Crearemos en este caso un documento HTML sencillo. En el cuadro de diálogo Nuevo documento, mantenga el tipo de página, el diseño y el tipo de documento que aparecen seleccionados por defecto y pulse el botón Crear.

3 Se abre el nuevo documento, denominado por defecto Untitled-1, como puede comprobar en la pestaña del documento. Debajo de la pestaña del documento 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. (1) Haga clic en el botón Código de esta barra y, tras comprobar cómo cambia el aspecto de la ventana, (2) acceda a la vista Diseño pulsando en ese botón.

La vista Código dividida, incluida en el botón Dividir de la barra de herramientas Documento, proporciona una versión dividida de la vista Código que permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez.

La disposición de los documentos en pestañas facilita la navegación por los mismos.

4 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. (3)

El Inspector de propiedades no se muestra expandido de forma predeterminada en el diseño del espacio de trabajo Programador.

Otra forma de acceder al cuadro de diálogo Propiedades de la página desde el menú Modificar o mediante la combinación de teclas Ctrl + J.

5 Desde el cuadro Propiedades de la página es posible modificar las características de la página. En lecciones posteriores, durante el desarrollo de nuestro sitio web, accederemos de nuevo a este cuadro y completaremos algunos de sus campos. Por el momento, ciérrelo pulsando el botón Cancelar. (4)

6 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. (5)

7 Nos ocuparemos de los elementos PA en la parte de conceptos avanzados de este curso. También puede activar los paneles desde el menú Ventana. Para mostrar de nuevo en primer plano el panel Estilos CSS, pulse sobre su pestaña.

8 Los grupos de paneles pueden contraerse de forma individual de manera que sólo muestren sus pestañas. Para contraer los paneles Estilos CSS y Elementos PA, haga doble clic sobre la pestaña del primero. (6)

El panel Elementos PA comparte espacio con el panel Estilos CSS.

Si desea cerrar un grupo de paneles, puede utilizar la opción Cerrar grupo de fichas del menú de opciones del grupo en cuestión.

9 Para volver a expandir un panel contraído, puede hacer doble clic de nuevo sobre su pestaña o bien utilizar el comando Expandir panel de su menú contextual. Para ello, haga clic con el botón derecho del ratón sobre la pestaña del panel Estilos CSS y, en el menú contextual que se despliega, pulse sobre el comando Expandir panel.

10 La barra de herramientas Estándar (que no aparece en el diseño de espacio de trabajo predeterminado) contiene botones para las operaciones más habituales de los menús Archivo y Edición, y queda situada bajo las barras de herramientas Documento, la cual contiene comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto. Para visualizar esta barra de herramientas, despliegue el menú Ver, pulse sobre el comando Barras de herramientas y elija la opción Estándar. (7)

Según las dimensiones y la resolución de su pantalla, el menú Ver no podrá mostrarse por completo a simple vista; puede desplazarse por él mediante las puntas de flecha situadas en la parte superior e inferior del mismo.

11 Como puede comprobar, la barra de herramientas Estándar contiene los comandos Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. (8) Ya conocemos el modo de visualizar y ocultar las diferentes barras de herramientas. En la parte final de esta práctica nos centraremos en el panel Insertar, que colocaremos a modo de barra de herramientas sobre la ficha del documento abierto. Haga clic sobre el botón contraído del panel Insertar (9) y, sin soltar el botón del ratón, arrástrelo hasta situarlo encima de la pestaña del documento. (10)

Una línea de color azul le indicará el punto en que puede soltar el botón del ratón para que el panel quede perfectamente encajado a modo de barra de herramientas.

12 Desde la barra Insertar es posible añadir a un documento diferentes tipos de elementos, que se distribuyen en fichas. La primera de ellas, Común, facilita la inserción de los objetos más habituales en la composición de las páginas Web. (11) El resto de categorías, predefinidas por el programa, agrupan objetos relacionados con su epígrafe, excepto la última de ellas, Favoritos, personalizable por el usuario. En este caso, le mostraremos como ejemplo cómo funciona la categoría Favoritos. Seleccione con un clic dicha categoría. (12)

13 Haga clic con el botón derecho del ratón en la barra de herramientas Insertar y, en el menú contextual que se despliega, seleccione la opción Personalizar favoritos. (13)

14 El comando Personalizar favoritos da acceso al cuadro de diálogo Personalizar objetos favoritos que presenta dos apartados. (14) El situado a la izquierda, Objetos disponibles, va encabezado por un cuadro desplegable mediante el cual es posible discriminar el tipo de objetos que van a ser incluidos en esta categoría. Pulse en el botón de flecha del desplegable del apartado Objetos disponibles, que presenta seleccionada por defecto la opción Todo, y tras comprobar las opciones que contiene, pulse nuevamente sobre el botón de flecha para cerrar el cuadro sin modificar la opción preseleccionada.

15 Bajo el desplegable se listan los objetos que es posible incorporar a la categoría. Al haber dejado seleccionada la opción Todo, se muestran la totalidad de objetos disponibles. Para incluir un objeto en la categoría Favoritos deberemos seleccionarlo en la lista Objetos disponibles y pulsar el botón situado entre este listado y el apartado Objetos favoritos. Seleccione con un clic la opción Hipervínculo y haga clic en este, el que presenta una doble punta de flecha apuntando a la derecha. (15)

16 Inmediatamente, el objeto Hipervínculo se incorpora a la lista Objetos favoritos. Para incorporar un segundo objeto utilizaremos otro método. Haga doble clic en el objeto Imagen del panel Objetos disponibles. (16)

La doble pulsación sobre un objeto disponible lo incorpora automáticamente a la lista de favoritos, justo por debajo del que se encontraba seleccionado.

17 La doble pulsación sobre un objeto disponible lo incorpora automáticamente a la lista de favoritos, justo por debajo del que se encontraba seleccionado, Hipervínculo, añadido anteriormente. El apartado Objetos favoritos presenta una serie de botones. El situado en la parte inferior, Añadir separador, posibilita la diferenciación de grupos de objetos dentro de la categoría Favoritos. Pulse dicho botón.

18 El separador queda situado por debajo del objeto favorito que se encontraba seleccionado en el momento de su inclusión. (17) El orden del listado determina la aparición de los diferentes botones, representativos de los objetos, en la barra Insertar. Pero éste puede ser alterado mediante los botones de flecha situados en la parte superior del apartado Objetos disponibles. Con el separador seleccionado en el listado, haga clic en el botón de flecha que apunta hacia arriba. (18)

La inclusión de separadores en la barra de herramientas Insertar permite organizar con claridad el contenido de la misma.

19 El separador sube una posición dentro del listado, quedando situado bajo el objeto añadido en primer lugar, Hipervínculo. Incluiremos un tercer objeto. Para que quede situado en la última posición de la lista Objetos favoritos, deberemos seleccionar el objeto que la ocupa actualmente. Haga clic sobre el objeto Imagen y haga doble clic sobre el objeto Imagen de sustitución en el otro panel. (19)

20 Por último, el apartado Objetos favoritos cuenta con un botón que permite la supresión de los objetos sobrantes. Pulse el botón Eliminar objeto favorito seleccionado, representado por el icono de un cubo de basura.

21 La pulsación del botón conlleva la eliminación del objeto favorito que se encontraba seleccionado. Haga clic en el botón Aceptar.

22 Tras la aceptación de la configuración, en la barra de herramientas Insertar se sitúan los botones correspondientes a los objetos favoritos seleccionados, con el separador entre ellos tal y como establecimos en el cuadro de diálogo. (20) Haga clic sobre la palabra Común en la barra de herramientas Insertar para acceder a esta categoría y finalizar de este modo la presente práctica.

RECUERDE

La categoría Spry incluida en la barra de herramientas Insertar consiste en una biblioteca JavaScript y CSS que permite crear páginas Web más completas. Puede utilizar este framework para visualizar datos XML y crear elementos de página interactivos que muestren datos dinámicos sin necesidad de actualizar la página entera.

Lección 3.Gestionar los conjuntos de paneles

Los paneles, accesibles desde el menú Ventana, contienen las opciones y los comandos que permiten modificar el comportamiento de los documentos y de los elementos que los componen. Adobe, en su suite de programas, ha desarrollado una interfaz común para todos sus productos, cambiando el sistema de mostrar los diferentes paneles, reduciéndolos al mínimo y agrupándolos en conjuntos. En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de paneles aparece como una ficha. El programa, además, permite disponer de ellos de la manera que el usuario desee. Mediante la técnica de arrastre se pueden situar los diferentes grupos en el lugar elegido de la pantalla, bloqueándolos en alguno de los laterales (bien acoplándolos en algún grupo existente, bien conformando uno nuevo) o ubicándolos como flotantes. Los paneles incluyen un menú emergente con opciones adicionales al que se accede mediante el icono que aparece en su esquina superior derecha.

1 El panel Propiedades, conocido más usualmente como Inspector de propiedades, es uno de los principales de la aplicación y, por defecto, se encuentra acoplado en la parte inferior de la pantalla. Cada panel presenta en su parte superior una pestaña con su título seguida de una barra con el botón de opciones. Como ya vimos en la lección anterior, para contraer un panel es posible hacer doble clic sobre su pestaña, aunque también puede utilizar el menú contextual de la misma. En este caso y a modo de ejemplo, haga clic con el botón derecho del ratón sobre la pestaña del panel Propiedades y, en el menú contextual que se despliega, pulse sobre el comando Minimizar. (1)

En versiones anteriores del programa, era posible contraer un panel con un único clic en su cabecera.

2 Efectivamente, de este modo el panel queda contraído en este caso en la parte inferior de la pantalla, mostrando sólo la pestaña que lo encabeza. (2) Para mostrarlo nuevamente expandido, haga doble clic sobre dicha pestaña.

3 Dada la complejidad de sus funciones, Dreamweaver cuenta con un gran número de paneles. La mayoría de ellos se encuentran apilados en el lateral derecho de la pantalla en el espacio de trabajo predeterminado Diseñador. Algunos de estos paneles se presentan de forma independiente, aunque la mayoría se ven agrupados con paneles relacionados, como el panel Archivos y el panel Activos. Esto no significa que no puedan gestionarse por separado. Abra el menú Ventana y seleccione la opción Activos.

4 La ficha Activos pasa a primer plano dentro del grupo llamado Archivos. No es necesario utilizar el menú Ventana cada vez que se quiera alternar la ficha del grupo de paneles activa. Como ya sabe, para acceder a un panel activo basta con pulsar sobre su pestaña. Haga clic en la pestaña Archivos para visualizar de nuevo su contenido.

5 Los grupos pueden ser desacoplados mediante la técnica de arrastre y situados como flotantes en el lugar elegido del área de trabajo. Además de esta reubicación, los paneles pueden ser expandidos de manera que ocupen toda la pantalla, opción muy útil en aquellos casos en que la estructura del sitio Web creado sea muy amplia. Haga clic sobre el botón de opciones del panel Archivos y, del menú que se despliega, pulse sobre el comando Expandir panel de archivos. (3)

6 El panel Archivos adquiere el aspecto de ventana independiente. (4) Para contraer de nuevo el panel, pulse sobre el primer icono empezando por la derecha de la barra de herramientas de esta ventana.

Una vez contraído un panel, puede volver a expandirlo desplegando el menú contextual del panel contraído y pulsando sobre el comando Expandir panel.

Algunos paneles pueden mostrarse y ocultarse mediante la pulsación de una tecla o una combinación de teclas; en el caso del panel Archivos, esta tecla es la de función F8.

7 Despliegue de nuevo el menú Ventana y haga clic sobre el nombre del panel Inspector de etiquetas.

8 Se abre el panel Inspector de etiquetas compartiendo espacio con el conjunto de paneles Estilos CSS y Elementos PA. (5) El inspector de etiquetas permite ver y editar cada atributo asociado a una determinada etiqueta. Este panel contiene los subpaneles Atributos y Comportamientos. Despliegue el menú de opciones del panel.

9 El menú de opciones, pese a contener comandos diferenciados en su parte superior referidos a las funciones específicas del panel, presenta en la inferior una serie de opciones comunes. La primera abre la ayuda del programa en el punto en que ofrece información relativa al funcionamiento del panel. Las últimas opciones del menú posibilitan el cierre del panel o del grupo entero. En el menú emergente, pulse sobre la opción Cerrar grupo de fichas. (6)

El panel Inspector de etiquetas puede mostrarse y ocultarse mediante la pulsación de la tecla de función F9.

El comando Cerrar del menú de opciones de un conjunto de paneles permite ocultar sólo el panel activo.

10 El conjunto de paneles se oculta. No todos los paneles se presentan por defecto integrados El panel o ventana Inspector en la ventana de la aplicación. Despliegue de nuevo el menú Ventana y seleccione la opción Ins-de código puede mostrarse

El panel o ventana Inspector de código puede mostrarse pulsando la tecla de función F10.

11 El panel Inspector de código se dispone de manera independiente en forma de ventana flotante. (8) La disposición de grupos y paneles inicial viene configurada por la elección del espacio de trabajo. Sabemos que podemos resituar los paneles mediante la técnica de arrastre. Para añadir un panel a un grupo, basta con arrastrarlo hasta situarlo dentro del grupo deseado. Haga clic en la cabecera del panel Inspector de código y arrástrelo hasta situarlo dentro del grupo de paneles Archivos y Activos. (9)

Al situar el elemento arrastrado sobre la ubicación de destino, aparece un marco azul que indica si se encuentra dentro o fuera del grupo y, por tanto, el momento idóneo para soltar el botón del ratón.

12 De este modo, el panel Inspector de código pasa a formar parte del conjunto encabezado por el panel Archivos. (10) El programa permite contraer en iconos todos los conjuntos de paneles a la vez, liberando el espacio de trabajo. Para ello, pulse sobre la doble punta de flecha situada en la parte superior derecha del espacio de paneles. (11)

Encontrará el comando Contraer en iconos también en el menú contextual de la cabecera de los conjuntos de paneles.

13 De esta forma los paneles se muestran en forma de iconos (12) Como novedad en la versión CS5 de Dreamweaver, entre los paneles predeterminados se incluyen los denominados Adobe BrowserLab y Business Catalyst. El programa se integra con Adobe BrowserLab, uno de los nuevos servicios en línea de CS Live, que proporciona una solución rápida y precisa para realizar pruebas de compatibilidad con múltiples navegadores. Por su parte, Business Catalyst es una aplicación alojada que sustituye las herramientas de escritorio tradicionales por una plataforma central para diseñadores web. Además de efectuar la contracción de los paneles, también puede ocultarlos por completo para conseguir así todavía más espacio en el área de trabajo. Para ello, despliegue el menú Ventana y haga clic sobre el comando Mostrar paneles. (13)

14 Efectivamente, los conjuntos de paneles han desaparecido y ahora dispone de toda la ventana central del programa para trabajar. (14) Para dar por acabado este ejercicio, despliegue de nuevo el menú Ventana y pulse sobre el comando Mostrar paneles.

La tecla de función F4 también permite mostrar y ocultar los conjuntos de paneles.

Debe saber que puede encontrar el comando Mostrar paneles del menú Ventana también en el menú Ver.

RECUERDE

Los accesos a los paneles Insertar y Propiedades componen el primer grupo de comandos del menú Ventana . Esto es debido a que se trata de los paneles de mayor importancia de la aplicación.

Lección 4. Crear nuevos documentos

En los inicios de Internet las páginas Web eran creadas con simples editores de texto. En ellos se introducía el código HTML necesario, por lo que era imprescindible conocer los comandos y sintaxis propios de este lenguaje. Actualmente, el código HTML se ha visto complementado por otros de mayor complejidad. Dreamweaver CS5 ofrece un entorno flexible para trabajar con una gran variedad de documentos de diseño y desarrollo de páginas Web. Además de documentos HTML, es posible crear una gran variedad de documentos basados en texto (CFML, ASP, CSS) y archivos de código fuente (Visual Basic, .NET, C# y Java). El cuadro de diálogo Nuevo documento ordena en categorías los diferentes tipos de archivo con los que se puede trabajar con el programa. Evidentemente, con algunos de ellos sólo se podrá trabajar editando el código directamente, siendo imposible la edición visual, una de las grandes ventajas del trabajo con Dreamweaver. Los archivos generados, documentos y plantillas, pueden ser creados en blanco, sin contenido, o basados en los diseños de página preestablecidos ofrecidos por el programa.

RECUERDE

Dreamweaver permite trabajar con una gran variedad de tipos de archivos, siendo el tipo de archivo principal el archivo HTML. Estos archivos HTML —o archivos en lenguaje de formato de hipertexto— incluyen un lenguaje basado en etiquetas que es el responsable de mostrar la página Web a través del navegador. Los archivos HTML se pueden almacenar con la extensión .html o .htm.

1 En esta lección conoceremos el modo de crear diferentes tipos de archivo mediante el cuadro de diálogo Nuevo documento. Sin embargo, antes cerraremos el documento que creamos a modo de ejemplo en lecciones anteriores. Pulse en el botón de aspa situado en la pestaña de este documento.

2 El área de trabajo se muestra ahora vacía. Para acceder al cuadro de diálogo Nuevo documento, despliegue el menú Archivo y pulse sobre la opción Nuevo. (1)

3 Como ya vimos en una lección anterior, el cuadro de diálogo Nuevo documento está formado principalmente por tres columnas. La primera de ellas 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. En este caso, y estando seleccionado el tipo Página en blanco, se encuentra marcada la opción HTML, aunque esta categoría nos permite generar documentos basados en lenguajes tales como ActionScript, propio de Flash, CSS o JavaScript. Seleccione la categoría Plantilla en blanco con un clic de ratón. (2)

También puede acceder al cuadro de diálogo Nuevo documento pulsando la combinación de teclas Ctrl + N.

4 Las opciones de esta categoría permiten crear una plantilla que presente uno de los formatos seleccionables en el listado central. Una vez almacenado como plantilla, un documento podrá ser utilizado como base para la creación de otras páginas. De momento no contamos con ninguna plantilla almacenada. Vamos a comprobarlo. Pulse sobre la categoría Página de plantilla. (3)

5 Efectivamente, el panel central nos indica que no existen sitios almacenados. Seleccione la categoría Otro con un clic de ratón. (4)

Desde el cuadro de diálogo Nuevo documento puede seleccionar una plantilla de cualquiera de los sitios definidos de Dreamweaver, aunque también puede utilizar el panel Activos para crear un documento nuevo a partir de una plantilla existente.

Al elegir la categoría Otro, deberá seleccionar el tipo de página que desea crear en la columna Tipo de página y pulsar en el botón Crear.

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

7 Dreamweaver cuenta con distintos archivos de marcos de página (carpeta Conjunto de marcos) y de diseño CSS (carpeta Hojas de estilo CSS) desarrollados por profesionales que pueden ser utilizados como punto de partida para el diseño de páginas propias. 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. La columna Página de muestra que aparece al pulsar sobre la categoría del mismo nombre proporciona todas las características de estos estilos, así como una vista previa y una descripción del estilo seleccionado. En este caso, y como ejemplo, haga clic sobre la opción Colores: Azul de este panel. (6)

Al crear un documento basado en un archivo de muestra, Dreamweaver crea una copia del archivo.

8 Mediante los estilos se pueden controlar el aspecto y los colores del texto y de otros elementos de las páginas, como el fondo y las tablas. Pulse el botón Crear.

9 Automáticamente aparece en el área de trabajo el nuevo documento CSS, mostrando el código del contenido de partida, que define los diferentes parámetros del estilo. (7) De momento, regresaremos al cuadro de diálogo Nuevo documento para seguir conociendo sus opciones. En este caso, pulse la combinación de teclas Ctrl + N.

10 En el panel Carpeta de muestra, seleccione en esta ocasión el directorio Conjunto de marcos. (8)

El cuadro de diálogo Nuevo documento recuerda los parámetros utilizados en el último uso.

11 Los marcos se utilizan para distribuir los elementos de una página, dividiéndola en diferentes archivos HTML integrados en un documento principal. Pulse ahora sobre la categoría Página en blanco para seleccionarla.

12 Mantenga seleccionada como tipo de documento la opción HTML y haga clic sobre el primer diseño de página de 2 columnas, denominado 2 columnas fijas, barra lateral derecha. (9)

13 El cuadro de diálogo se completa con un enlace y una serie de botones en su parte inferior. Además de los botones que permiten la creación del documento seleccionado y la cancelación de la operación, aparecen los encargados de conducir a la ayuda del programa y al cuadro de diálogo Preferencias. Pulse el botón Preferencias.

14 El acceso al cuadro de diálogo Preferencias desde el cuadro de diálogo Nuevo documento comporta que se muestre directamente la categoría del mismo nombre. Pulse el botón de flecha del cuadro desplegable Documento predeterminado para acceder a sus opciones. (10)

Es posible crear páginas con una diseño CSS prediseñado o bien crear completamente en blanco y realizar su propio diseño.

Estas opciones permiten establecer un tipo de documento como predeterminado.

15 Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. En este curso trabajaremos principalmente con documentos HTML, de modo que no cambiaremos la opción configurada por defecto. Haga clic nuevamente sobre el botón flecha del desplegable Documento predeterminado para ocultar la lista de opciones.

16 La desactivación de la casilla de verificación Mostrar el cuadro de diálogo Nuevo documento con Control + N permite omitir la aparición del mencionado cuadro para acceder a la creación de documentos a través del método abreviado de teclado correspondiente. Haga clic en Aceptar. (11)

17 Por último, 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 el nuevo documento (12) y dar por terminado este ejercicio.

Además de acceder al cuadro de Preferencias desde el cuadro de diálogo Nuevo documento, también dispone de un acceso en el menú Edición del programa.

La disposición en pestañas de los documentos abiertos en Dreamweaver permite una fácil navegación por los mismos.

RECUERDE

Los archivos de Hojas de estilos en cascada tienen la extensión .css y se utilizan para aplicar formato al contenido HTML y controlar la posición de los distintos elementos de la página.

Lección 5. Ver distintos archivos a la vez

Dreamweaver, al igual que la práctica totalidad de los programas creados para Windows, permite visualizar varios archivos simultáneamente, si bien sólo es posible manipular uno de ellos cada vez. La versión CS5 de Dreamweaver presenta la disposición en forma de fichas de los diferentes documentos abiertos. Las pestañas identifican cada uno de los documentos 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. 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.

RECUERDE

La disposición en forma de fichas facilita la selección de los diferentes archivos para su edición; sin embargo, el programa permite distribuirlos del modo que el usuario considere más oportuno.

1 Contamos al inicio de la lección con dos documentos en pantalla, creados en las prácticas anteriores. En la primera parte de esta lección conoceremos el modo de abrir archivos en Dreamweaver. Para ello, vamos a utilizar un archivo de muestra, denominado precisamente muestra.htm, que puede descargar desde nuestra página web junto con la imagen foto-flor.jpg y guardarlas ambas en la carpeta de documentos de su equipo. Una vez disponga de él, despliegue el menú Archivo y pulse sobre la opción Abrir.

2 El cuadro de diálogo Abrir se abre por defecto mostrando el contenido de la carpeta de documentos del equipo. Seleccione el documento muestra.htm y pulse sobre el botón Abrir para ejecutarlo en Dreamweaver.

3 El nuevo documento abierto se sitúa en primer plano, pero los otros continúan abiertos, como podemos comprobar viendo sus pestañas. A continuación, despliegue el menú Ventana.

4 En la parte inferior del menú Ventana se listan los documentos en uso. Pulse sobre el nombre del documento Untitled-2. (1)

La combinación de teclas Ctrl + O también nos conduce al cuadro de diálogo Abrir.

5 El documento seleccionado pasa a estar en primer plano. (2) Como hemos dicho, en la parte superior de la ventana del documento los archivos quedan representados por pestañas. Haga clic en la pestaña del documento muestra.htm para poner este documento en primer plano.

6 Dreamweaver conserva las disposiciones de ventana clásicas de Windows, accesibles desde el menú Ventana. Despliegue de nuevo este menú y seleccione con un clic el comando Cascada.

7 Cada uno de los archivos se muestra en una ventana independiente, al estilo clásico de Windows. Para activar un documento (es decir, para que las acciones y modificaciones que se realicen se apliquen en él), basta con hacer clic dentro de la ventana que contiene dicho archivo. 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 muestra.htm, situada en primer plano. (3)

El menú contextual de las ventanas dispuestas en cascada también contiene las opciones de minimizar/ restaurar, maximizar y cerrar.

8 El documento queda ubicado en la esquina inferior izquierda del área de trabajo. (4) Pulse el botón Maximizar del archivo Untitled-3. (5)

9 El área de trabajo recupera su distribución inicial, representando los diferentes documentos en forma de fichas y recuperando incluso la ventana que habíamos minimizado. El icono situado en el extremo derecho de la barra de pestañas permite recuperar la última organización en ventanas. Compruébelo pulsando en dicho icono. (6)

10 Efectivamente, ahora disponemos de dos ventanas y el documento muestra minimizado. En la Barra de título de este documento, el primero de los botones de control muestra el icono identificativo del comando Restaurar tamaño, con lo que su pulsación devolverá a la ventana el aspecto que presentaba antes de ser minimizada. Pulse ese botón.

11 Despliegue ahora el menú Ventana y haga clic sobre el comando Mosaico horizontal.

12 Compruebe la reorganización del área de trabajo; de esta forma, es posible visualizar parte del contenido de todas las ventanas abiertas. Dreamweaver permite aplicar ciertas acciones a la totalidad de documentos en uso. Despliegue el menú Archivo.

13 El menú Archivo presenta las opciones Cerrar todos y Guardar todo. La selección del primero de ellos implica el cierre de todos los documentos en uso manteniéndose abierto el programa. Seleccione con un clic este comando Cerrar todos.

14 Los tres documentos se han cerrado directamente, puesto que no habían sufrido cambios desde su apertura. Conoceremos los modos de almacenar diferentes tipos de archivo en las prácticas de este curso. En la parte final de la lección recuperaremos el documento muestra mediante la lista de archivos usados recientemente del programa. Para ello, despliegue de nuevo el menú Archivo, pulse sobre el comando Abrir reciente. (7)

15 Se despliega un submenú con el listado de los documentos que han sido editados con anterioridad. En él evidentemente sólo aparecen los archivos almacenados en disco y, por tanto, recuperables. Haga clic en el documento muestra.htm para abrir este documento.

16 El documento se presenta en el área de trabajo en la disposición que presentaba en el momento de ser cerrado, en forma de ventana de Windows. (8) Para concluir la práctica recuperaremos la disposición de fichas característica de Dreamweaver. Pulse el botón Maximizar de la ventana del documento muestra.

La opción Volver a abrir documentosal iniciar incluida en el comando Abrir reciente permite indicar que al volver a acceder al programa se abran los documentos actuales.

RECUERDE

El comando Mosaico vertical permite reorganizar verticalmente todos los documentos abiertos.

Lección 6. Alternar entre las vistas de diseño y de código

Dreamweaver es un editor visual de páginas Web, de manera que no es necesario conocer el lenguaje de programación de las mismas 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 edición visual más intuitiva posibilita la creación de vistosas páginas HTML sin necesidad de tener conocimientos previos de programación. 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 de la página). La primera contiene las etiquetas necesarias para que la página sea correctamente visualizada en Internet, y la sección body, los elementos que conforman propiamente la página.

RECUERDE

La ventana del documento presenta en su parte inferior la Barra de estado, que contiene el Selector de etiquetas y un área informativa desde la que es posible acceder a la categoría Barra de estado del cuadro de diálogo Preferencias. En éste 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 En la lección anterior abrimos el documento de ejemplo muestra.htm, una página Web con formato HTML. Con él practicaremos con las vistas Diseño y Código. Los documentos HTML pueden ser visualizados de tres modos. La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada. El espacio de trabajo predeterminado Diseñador presenta en la vista Diseño todos los documentos que permiten este modo de visualización. Para cambiar esta vista, pulse el botón Código en la barra de herramientas Documento.

2 El documento pasa a mostrarse en forma de código. (1) De este modo, los desarrolladores experimentados pueden modificarlo directamente. Algunos tipos de archivos, los estilos CSS por ejemplo, no pueden ser editados de forma visual ya que sólo es posible editarlos tecleando el código correspondiente. Pero los documentos HTML pueden ser editados de forma visual, es decir, controlando en todo momento el aspecto que presentará el documento editado. La barra de herramientas Documento contiene botones que permiten cambiar las vistas de modo directo. Las páginas HTML pueden ser visualizadas de tres modos. Haga clic de nuevo en el botón Diseño de la barra de herramientas Documento.

El menú Ver también permite alternar entre las vistas del documento disponibles.

3 En la vista Diseño podemos seleccionar los elementos que conforman la página y trabajar con las herramientas del programa, definiendo el aspecto que deben presentar. Pulse sobre la imagen que aparece en la página. (2)

4 Y si dominamos el lenguaje de programación podemos acceder a la vista Código y modificar los elementos directamente cambiando las etiquetas de programación. Con la imagen seleccionada, pulse el botón Código de la barra Documento.

5 El lenguaje HTML se basa en la introducción de las llamadas etiquetas (tags en inglés). Si seleccionamos un elemento de la página en la vista Diseño, la etiqueta correspondiente queda resaltada de color azul en la vista Código. Para comprobarlo, pulse el botón Dividir de la barra de herramientas Documento.

6 Este modo de visualización divide la ventana del documento en dos partes. (3) A diferencia de versiones anteriores del programa, la división de las áreas de diseño y código se realiza verticalmente, siendo la parte izquierda la reservada al código y la derecha, al diseño. Haga doble clic sobre la palabra Imagen en la ventana de diseño. (4)

Debe saber que toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación.

En la ventana de código, compruebe como, efectivamente, la palabra Imagen, actualmente resaltada de color gris, se encuentra entre el código strong.

7 En la parte inferior de la ventana del documento se sitúa la Barra de estado, que proporciona información adicional sobre el archivo que está siendo editado. La parte inicial de la mencionada barra queda reservada al Selector de etiquetas, que muestra la jerarquía de etiquetas que rodea a la selección actual. En el caso del texto Imagen, el cual se encuentra seleccionado, muestra la etiqueta strong, debido al estilo aplicado, el estilo negrita. Este texto se encuentra en el interior de una tabla. Haga clic en la etiqueta <table> de la Barra de estado. (5)

8 La pulsación sobre la etiqueta en la Barra de estado implica la selección del elemento definido por ésta en la vista Diseño, en este caso la tabla, y el correspondiente fragmento de programación en la vista Código. Pulse el botón Código de la barra de herramientas Documento. (6)

9 Así la etiqueta table contiene toda la programación correspondiente a los elementos incluidos en la tabla. Y a su vez la tabla pertenece al cuerpo de la página. Haga clic en la etiqueta body de la Barra de estado.

10 Una página Web se compone de dos secciones diferenciadas. La primera se denomina head (cabecera) y contiene las instrucciones genéricas que definen el documento y posibilitan su posterior visualización en Internet. La segunda se denomina body y contiene el cuerpo de la página, es decir, el código necesario para representar los diferentes elementos que la componen. La selección de la etiqueta body comporta por tanto la de todos los elementos contenidos en la página. Cambie a la vista Diseño pulsando este botón de la barra Documento.

11 La Barra de estado se completa con la zona informativa. Ésta ocupa el extremo derecho de la barra y presenta el campo Tamaño de descarga/Tiempo de descarga, situada junto al porcentaje de zoom, que sólo aparece en la vista Diseño, que muestra una estimación del tamaño del documento y del tiempo de descarga de la página. Este campo permite cambiar el tamaño de la ventana del documento para que adopte dimensiones predeterminadas o personalizadas. Despliegue este campo para ver su contenido. (7)

La selección de la etiqueta body comporta la selección de todo el contenido de la página en la vista Diseño.

12