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