PDF de programación - Primeros pasos con Dreamweaver 8

Primeros pasos con Dreamweaver

Marcas comerciales
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML,
RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev y
WebHelp son marcas registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en los Estados Unidos o en
otras jurisdicciones internacionales. Otros nombres de productos, logotipos, diseños, títulos, palabras o frases mencionados en
esta publicación pueden ser marcas comerciales, marcas de servicio o nombres comerciales de Macromedia, Inc. u otras entidades
y pueden estar registrados en determinadas jurisdicciones.

Información de otros proveedores
Este manual contiene vínculos con sitios Web de terceros que no están bajo el control de Macromedia, por lo que Macromedia
no es responsable del contenido de ninguno de los sitios vinculados. Si obtiene acceso a un sitio Web de terceros mencionado en
este manual, lo hará por su cuenta y riesgo. Macromedia proporciona estos vínculos exclusivamente para su comodidad, por lo
que la inclusión del vínculo no implica la aceptación de responsabilidad alguna por parte de Macromedia por el contenido de
dichos sitios de terceros.

Navegador Opera® Copyright © 1995-2002 Opera Software ASA y sus proveedores. Todos los derechos reservados.

Copyright © 1997-2005 Macromedia, Inc. Todos los derechos reservados. Este manual no se puede copiar, fotocopiar,
reproducir, traducir ni convertir a ningún formato electrónico o legible por máquina, en parte o en su totalidad, sin el
permiso previo y por escrito de Macromedia, Inc. No obstante, el propietario o usuario autorizado de una copia válida del
software que acompaña a este manual podrá imprimir una copia de este manual a partir de la versión electrónica con el
único objetivo de que dicho propietario o usuario autorizado pueda aprender a utilizar el software, y siempre que no se
impriman, reproduzcan, distribuyan, revendan o transmitan copias de este manual para ningún otro fin, incluyendo pero
no limitado a fines comerciales, como la venta de copias de esta documentación o la oferta de servicios de soporte
remunerados. Número de componente ZDW80M100L

Agradecimientos
Administración: Charles Nadeau
Redacción: Jon Michael Varese
Edición: Rosana Francescato, Lisa Stanziano, Evelyn Eldridge, Mark Nigara
Administración de la producción y la edición: Patrice O’Neill y Rosana Francescato
Producción y diseño multimedia: Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel,
Arena Reed, Mario Reynoso
Administración de la localización: Melissa Baerwald
Garantía de calidad de la localización: Sandra Kane
Agradecimientos especiales a Sheila McGinn, Jennifer Rowe, Jay Armstrong, Sally Sadosky, Jennifer Taylor, Paul
Gubbay,Melissa Baerwald, Masayo Noda, Kristin Conradi, Yuko Yagi, Sami Kaied, Jung Choi y a los equipos de ingeniería y
control de calidad de Dreamweaver.
Primera edición: septiembre de 2005

Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103

Contenido

PARTE 1: INTRODUCCIÓN A DREAMWEAVER

Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Lo que puede hacer con Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . .11
Novedades en Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Instalación de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Registro de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Convenciones tipográficas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Capítulo 1: Conocer Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 15
Dónde comenzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Cómo sacarle el máximo provecho a la documentación de
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Utilización del sistema de ayuda de Dreamweaver. . . . . . . . . . . . . . . . 24

Capítulo 2: Aspectos básicos de Dreamweaver . . . . . . . . . . . . . 29
Conocer el espacio de trabajo de Dreamweaver 8 . . . . . . . . . . . . . . . . 29
Personalización del espacio de trabajo de Dreamweaver 8 . . . . . . . . 42
Realización de tareas básicas con Dreamweaver 8 . . . . . . . . . . . . . . . 45

PARTE 2: TUTORIALES

Capítulo 3: Tutorial: Configuración del sitio y de los
archivos del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Conozca los sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Configuración de los archivos del proyecto . . . . . . . . . . . . . . . . . . . . . . 53
Defina una carpeta local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Capítulo 4: Tutorial: Crear un diseño de página basado
en tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Examen de la maqueta de diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Creación y almacenamiento de una página nueva . . . . . . . . . . . . . . . . . 61

3

Inserción de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Establecimiento de las propiedades de una tabla . . . . . . . . . . . . . . . . . 66
Inserción de un marcador de posición de imagen . . . . . . . . . . . . . . . . . 72
Adición de color a la página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Capítulo 5: Tutorial: Adición de contenido a las páginas . . . . . . . 79
Localización de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Repaso de la tarea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Inserción de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Inserción y reproducción de un archivo Flash . . . . . . . . . . . . . . . . . . . . . 90
Inserción de Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Inserción de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Creación de vínculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Vista previa de la página en un navegador. . . . . . . . . . . . . . . . . . . . . . . 103

Capítulo 6: Tutorial: Formatear la página con CSS . . . . . . . . . . 107
Localización de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Repaso de la tarea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Conocer las CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Crear una nueva hoja de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Adjuntar una hoja de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Explorar el panel Estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Crear una nueva regla CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
Aplicar un estilo de clase al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
Formatear el texto de la barra de navegación . . . . . . . . . . . . . . . . . . . . 122
(Opcional) Centrar el contenido de la página . . . . . . . . . . . . . . . . . . . . .131

Capítulo 7: Tutorial: Publicación del sitio. . . . . . . . . . . . . . . . . . . 135
Los sitios remotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Definir una carpeta remota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Cargar los archivos locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Solución de problemas de configuración de carpetas remotas
(opcional). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

PARTE 3: TUTORIALES AVANZADOS

Capítulo 8: Tutorial: Utilización de código . . . . . . . . . . . . . . . . . . 145
Consulta del código. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Cambio al espacio de trabajo de edición de código (sólo
Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

4

Contenido

Añadir una etiqueta con el Selector de etiquetas . . . . . . . . . . . . . . . . .148
Edición de una etiqueta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Consulta de información sobre una etiqueta . . . . . . . . . . . . . . . . . . . . .153
Añadir una imagen con sugerencias para el código . . . . . . . . . . . . . . .154
Comprobación de los cambios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158
Imprimir el código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158

Capítulo 9: Tutorial: Crear un diseño de página basado
en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Diseño de página basado en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
Examen de la maqueta de diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Creación y almacenamiento de una página nueva . . . . . . . . . . . . . . . .163
Insertar ca