Czytaj książkę: «Manual de Dreamweaver CS5»
Manual de
Manual de
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)
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)
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.
