Adobe Primeros Pasos User Manual [es]

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.

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

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

4Contenido

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

Añadir color a la página. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Capítulo 10: Tutorial: Visualización de datos XML . . . . . . . . . . . 183

Localización de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184

Repaso de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185

Más información sobre el uso de XML y XSL en páginas Web . . . . . 186

Más información sobre las páginas XSLT . . . . . . . . . . . . . . . . . . . . . . . 188

Conversión de una página HTML en una página XSLT . . . . . . . . . . .190

Adjuntar una fuente de datos XML a la página XSLT . . . . . . . . . . . . . 191

Modificación del diseño de la página XSLT . . . . . . . . . . . . . . . . . . . . . .193

Vinculación de datos XML a la página XSLT. . . . . . . . . . . . . . . . . . . . .195

Aplicación de estilos a los datos XML . . . . . . . . . . . . . . . . . . . . . . . . . . .196

Creación de un vínculo dinámico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198

Añadir un objeto XSLT Repetir región. . . . . . . . . . . . . . . . . . . . . . . . . . 200

Adjuntar la página XSLT a la página XML . . . . . . . . . . . . . . . . . . . . . . 203

Más información sobre otras opciones de implementación . . . . . . . 205

Capítulo 11: Tutorial: Desarrollo de una aplicación Web. . . . . . 207

Antes de comenzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Repaso de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Apertura de un documento para trabajar en él. . . . . . . . . . . . . . . . . . . .210

Definición de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Visualización de los registros de la base de datos . . . . . . . . . . . . . . . .215

Adición de campos dinámicos a la tabla . . . . . . . . . . . . . . . . . . . . . . . . .217

Definición de una región repetida. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218

Visualización de la página. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219

Creación de un formulario de inserción de registro . . . . . . . . . . . . . . 220

Copia de los archivos en el servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Contenido 5

Lecturas adicionales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226

PARTE 4: APÉNDICES

Apéndice A: Aspectos básicos de las aplicaciones Web . . . . . . 231

Aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Funcionamiento de una aplicación Web . . . . . . . . . . . . . . . . . . . . . . . .234

Creación de páginas dinámicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239

Elección de una tecnología de servidor . . . . . . . . . . . . . . . . . . . . . . . . . 241

Terminología de aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . .242

Apéndice B: Instalación de un servidor Web. . . . . . . . . . . . . . . 247

Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248

Instalación de Internet Information Server. . . . . . . . . . . . . . . . . . . . . . .248

Comprobación de IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Comprobación del servidor Web de Macintosh

(desarrolladores PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

Aspectos básicos de los servidores Web. . . . . . . . . . . . . . . . . . . . . . . . 251

Apéndice C: Configuración del sitio ColdFusion de

muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Listas de comprobación de la configuración para

desarrolladores de ColdFusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253

Configuración del sistema (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . 254

Definición de un sitio de Dreamweaver (ColdFusion) . . . . . . . . . . . . 260

Conexión con la base de datos de muestra (ColdFusion) . . . . . . . . .266

Apéndice D: Configuración del sitio ASP.NET de muestra . . . . 271

Listas de comprobación de la configuración para

desarrolladores de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Configuración del sistema (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . .272

Definición de un sitio de Dreamweaver (ASP.NET) . . . . . . . . . . . . . . 276

Conexión con la base de datos de muestra (ASP.NET) . . . . . . . . . . .282

Apéndice E: Configuración del sitio ASP de muestra . . . . . . . 285

Listas de comprobación de la configuración para

desarrolladores de ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286

Configuración del sistema (ASP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287

Definición de un sitio de Dreamweaver (ASP) . . . . . . . . . . . . . . . . . . .292

Conexión con la base de datos de muestra (ASP). . . . . . . . . . . . . . . .298

6Contenido

Apéndice F: Configuración del sitio JSP de muestra . . . . . . . . 303

Listas de comprobación de la configuración para

desarrolladores de JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Configuración del sistema (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Definición de un sitio de Dreamweaver (JSP) . . . . . . . . . . . . . . . . . . . 309

Conexión con la base de datos de muestra (JSP) . . . . . . . . . . . . . . . .314

Apéndice G: Configuración del sitio PHP de muestra . . . . . . . . 321

Listas de comprobación de la configuración para

desarrolladores de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

Configuración del sistema (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

Definición de un sitio de Dreamweaver (PHP) . . . . . . . . . . . . . . . . . . 332

Conexión con la base de datos de muestra (PHP) . . . . . . . . . . . . . . . 338

Índice alfabético. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

Contenido 7

8Contenido

PARTE 1

Introducción a Dreamweaver

La Parte Uno de este libro ofrece una introducción a Macromedia Dreamweaver 8 e incluye información de instalación y una breve descripción del espacio de trabajo. En ella también se ofrece una lista de recursos disponibles para aprender a utilizar Dreamweaver.

Esta parte contiene las siguientes secciones:

Introducción. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Conocer Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Aspectos básicos de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . .29

Introducción

Macromedia Dreamweaver 8 es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web.

Esta guía es una introducción para utilizar Macromedia Dreamweaver 8 dirigida a los usuarios que no están familiarizados con algún aspecto fundamental de esta aplicación. Los tutoriales de que consta le guían a través del proceso de creación de un sitio Web sencillo pero funcional.

Este capítulo trata los siguientes temas:

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

Lo que puede hacer con Dreamweaver 8

Las funciones de edición visual de Dreamweaver permiten crear páginas Web de forma rápida, sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks o en otra aplicación de gráficos y su posterior importación directa a Dreamweaver. Dreamweaver también contiene herramientas que facilitan la adición de activos de Flash a las páginas web.

Además de las funciones de arrastrar y soltar que le ayudan a crear páginas web, Dreamweaver le ofrece un entorno de codificación con todas las funciones, que incluye herramientas para la edición de código (tales como coloreado de código, terminación automática de etiquetas, barra de herramientas para codificación y contracción de código) y material de referencia para lenguajes sobre hojas de estilos en cascada (CSS), JavaScript y ColdFusion Markup Language (CFML) entre otros. La tecnología Roundtrip HTML de Macromedia importa los documentos con código manual HTML sin modificar el formato del código. Posteriormente, si lo desea, puede formatear el código con el estilo que prefiera.

Además, Dreamweaver le permite crear aplicaciones Web dinámicas basadas en bases de datos empleando tecnologías de servidor como CFML, ASP.NET, ASP, JSP y PHP. Si prefiere trabajar con datos en XML, Dreamweaver incorpora herramientas que le permiten crear fácilmente páginas XSLT, adjuntar archivos XML y mostrar datos XML en sus páginas.

Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar métodos abreviados de teclado e incluso escribir código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades e informes de sitios.

Para más información sobre los recursos disponibles para el aprendizaje de Dreamweaver, consulte Capítulo 1, “Conocer Dreamweaver”, en la página

15.

12 Introducción

Novedades en Dreamweaver 8

Dreamweaver 8 incorpora muchas funciones nuevas que le ayudarán a diseñar páginas Web y aplicaciones con un mínimo de tiempo y esfuerzo. Dreamweaver simplifica las tecnologías más complejas y las hace accesibles, ayudándole a conseguir más en menos tiempo.

Éstas son algunas de las nuevas funciones de Dreamweaver 8:

■ Herramienta Zoom y guías

■ Vinculación de datos visual de XML

■ Nuevo panel de estilos CSS

■ Visualización de diseño CSS

■ Contracción de código

■ Barra de herramientas de codificación

■ Transferencia de archivos en segundo plano

■ Inserción de comando de Flash Video

Para una lista completa y una descripción de las nuevas funciones de Dreamweaver 8, consulte “Novedades de Dreamweaver 8” en Utilización de Dreamweaver (Ayuda> Utilización de Dreamweaver).

Instalación de Dreamweaver 8

En esta sección se explica cómo instalar Dreamweaver. Asegúrese de que ha leído las notas de la versión en el sitio web de

Macromedia en www.macromedia.com/go/dw_documentation_es, donde encontrará la información o instrucciones más recientes.

Para instalar Dreamweaver:

1. Introduzca el CD de Dreamweaver en la unidad de CD-ROM de su

sistema.

2. Siga uno de estos procedimientos:

■ En Windows, se iniciará automáticamente el programa de

instalación de Dreamweaver.

■ En Macintosh, haga doble clic en el icono del instalador de

Dreamweaver que aparece en el escritorio.

3. Siga las instrucciones que aparecen en pantalla.

El programa de instalación le indicará que introduzca la información necesaria.

4. Si el sistema lo solicita, reinicie el sistema.

Instalación de Dreamweaver 8 13

Registro de Dreamweaver 8

Para obtener soporte adicional de Macromedia, es conveniente que registre su copia de Macromedia Dreamweaver 8 electrónicamente o por correo.

Al registrarse, podrá suscribirse para recibir información de última hora sobre actualizaciones y nuevos productos de Macromedia. También puede suscribirse a los boletines de correo electrónico regulares sobre actualizaciones de productos y nuevos contenidos publicados en los sitios Web www.macromedia.com y www-euro.macromedia.com.

Para registrar Macromedia Dreamweaver 8, siga uno de estos procedimientos:

■ Seleccione Ayuda > Registro en línea y complete el formulario

electrónico.

■ Seleccione Ayuda > Imprimir registro, imprima el formulario y envíelo

por correo a la dirección que figura en el formulario.

Convenciones tipográficas

En esta guía se utilizan las convenciones tipográficas siguientes:

■ Los elementos de los menús se muestran en este formato: nombre del

menú > nombre del elemento del menú. Los elementos de los submenús se muestran en este formato: nombre del menú nombre del submenú > nombre del elemento del menú.

■ La fuente de código indica nombres de etiquetas y atributos

HTML, así como el texto literal empleado en los ejemplos.

■ La fuente de código en cursiva indica elementos reemplazables

(también denominados metasímbolos) en el código.

■ El texto Roman en negrita permite distinguir el texto que debe

introducirse literalmente.

14 Introducción

CAPÍTULO 1

Conocer Dreamweaver

Macromedia Dreamweaver 8 incluye diversos recursos para ayudarle a aprender rápidamente el funcionamiento del programa y a dominar la creación de sus propias páginas Web. Toda la documentación de Dreamweaver está disponible en formatos de ayuda electrónica y PDF.

Este capítulo contiene los siguientes temas:

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

Dónde comenzar

La documentación de Dreamweaver contiene información para usuarios de distintos niveles. Esta sección le ayudará a aprender a utilizar la documentación, dependiendo de sus conocimientos anteriores y de lo que quiera conseguir con Dreamweaver.

Esta sección trata sobre los siguientes temas:

■ “Principiantes en el diseño Web” en la página 15

■ “Diseñadores de sitios Web con experiencia” en la página 17

■ “Usuarios con experiencia en codificación manual” en la página 18

■ “Diseñadores de aplicaciones Web” en la página 19

Principiantes en el diseño Web

Si usted es un principiante en el diseño Web, esta sección le informará de las secciones de la documentación de Dreamweaver más adecuadas para su nivel.

Para principiantes en el diseño Web:

1. Para empezar, consulte Capítulo 2, “Aspectos básicos de Dreamweaver”,

en la página 29. Después continúe con los tutoriales de este libro. Los

tutoriales se dividen en dos secciones. Los primeros cinco tutoriales son para principiantes, y le guiarán a lo largo del proceso de desarrollo de un sitio Web pequeño pero funcional de principio a fin. La segunda sección de los tutoriales se abordan conceptos más avanzados. Es aconsejable que no trate de abordar los tutoriales más avanzados hasta que se haya familiarizado con la creación de páginas Web.

2. En Utilización de Dreamweaver (Ayuda > Utilización de Dreamweaver),

encontrará una idea más completa de lo aprendido en esta guía de Primeros pasos con Dreamweaver consultando Capítulo 1, “Exploración del espacio de trabajo” Capítulo 2, “Configuración de un sitio de Dreamweaver” Capítulo 4, “Administración de archivos” y Capítulo 3, “Cómo crear y abrir documentos”.

3. Para aprender sobre el diseño de las páginas, consulte Capítulo 7,

“Diseño de páginas con CSS” y Capítulo 8, “Presentación de contenido en tablas” en Utilización de Dreamweaver.

4. Para obtener información sobre la aplicación de formato al texto y la

inserción de imágenes en las páginas, consulte Capítulo 13, “Inserción y formato de texto” y Capítulo 14, “Inserción de imágenes” en

Utilización de Dreamweaver.

5. Eso es todo lo que necesita para comenzar a crear sitios Web de gran

calidad. Cuando esté preparado para aprender a utilizar herramientas más avanzadas, podrá continuar con el resto de los capítulos sobre páginas estáticas en el apartado Utilización de Dreamweaver. Es aconsejable que lea los capítulos de páginas dinámicas sólo cuando se haya familiarizado con la creación de páginas Web.

16 Conocer Dreamweaver

Diseñadores de sitios Web con experiencia

Si usted es un diseñador de sitios Web con experiencia, esta sección le informará de las secciones de la documentación de Dreamweaver más adecuadas para su nivel. Existen dos métodos distintos: uno para diseñadores sin experiencia en Dreamweaver y otro para diseñadores que están familiarizados con Dreamweaver pero que desean obtener más información sobre la creación de páginas dinámicas.

Para diseñadores de sitios Web con experiencia que empiezan a usar Dreamweaver:

1. Comience leyendo los tutoriales de esta guía de Primeros pasos con

Dreamweaver.

2. En el apartado Utilización de Dreamweaver (Ayuda> Utilización de

Dreamweaver), consulte Capítulo 1, “Exploración del espacio de trabajo” para más información sobre la interfaz de usuario de Dreamweaver.

3. Aunque probablemente ya conoce una buena parte del material del

Capítulo 2, “Configuración de un sitio de Dreamweaver” y el Capítulo 4, “Administración de archivos”, puede hojear estos capítulos para ver cómo se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones que tratan sobre la configuración de un sitio de Dreamweaver.

4. Para información útil y detallada sobre el uso de Dreamweaver para

crear páginas HTML básicas, consulte Capítulo 13, “Inserción y formato de texto” y Capítulo 14, “Inserción de imágenes”.

5. Para información sobre la codificación en Dreamweaver, véase Capítulo

19, “Configuración del entorno de codificación” Capítulo 20, “Codificación en Dreamweaver” Capítulo 21, “Optimización y depuración del código” y Capítulo 22, “Edición de código en la vista Diseño”.

6. Lea la introducción que aparece al comienzo de los demás capítulos del

apartado Utilización de Dreamweaver para determinar si le interesan los temas que se abordan en ellos.

Dónde comenzar 17

Para diseñadores de sitios Web con experiencia, familiarizados con Dreamweaver, que deseen obtener información sobre la creación de páginas dinámicas:

1. Comience leyendo el Apéndice A, “Aspectos básicos de las aplicaciones

Web”, en la página 231 y el Capítulo 11, “Tutorial: Desarrollo de una aplicación Web”, en la página 207.

2. En Utilización de Dreamweaver (Ayuda> Utilización de Dreamweaver),

consulte por encima el Capítulo 1, “Exploración del espacio de trabajo” para conocer nuevos aspectos sobre la interfaz de usuario de Dreamweaver y lea después el Capítulo 30, “Optimización del espacio de trabajo para desarrollo visual”.

3. Familiarícese con el flujo de trabajo de Dreamweaver en las páginas

dinámicas leyendo Capítulo 31, “Flujo de trabajo para el diseño de páginas dinámicas”.

4. Configure un servidor Web y un servidor de aplicaciones. (Véase

Capítulo 23, “Configuración de una aplicación Web”.)

5. Conecte con una base de datos. (Véase “Conexión con una base de

datos” en Capítulo 23, “Configuración de una aplicación Web”.)

6. Lea la introducción que aparece al comienzo de cada uno de los

capítulos de Utilización de Dreamweaver para determinar si le interesan los temas que se abordan en ellos.

18 Conocer Dreamweaver

Usuarios con experiencia en codificación manual

Si usted es un usuario con experiencia en codificación manual, esta sección le informará de las secciones de la documentación de Dreamweaver más adecuadas para su nivel.

Para usuarios con experiencia en codificación manual:

1. Comience leyendo Capítulo 8, “Tutorial: Utilización de código” en esta

guía de Primeros pasos con Dreamweaver.

2. En el apartado Utilización de Dreamweaver (Ayuda> Utilización de

Dreamweaver), consulte Capítulo 1, “Exploración del espacio de trabajo” para más información sobre la interfaz de usuario de Dreamweaver.

3. Aunque probablemente ya conoce una buena parte del material del

Capítulo 2, “Configuración de un sitio de Dreamweaver” y el Capítulo 4, “Administración de archivos”, puede hojear estos capítulos para ver cómo se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones sobre la configuración de un sitio de Dreamweaver.

4. Encontrará más información sobre codificación con Dreamweaver en el

Capítulo 19, “Configuración del entorno de codificación”, Capítulo 20, “Codificación en Dreamweaver”, Capítulo 21, “Optimización y depuración del código” y Capítulo 22, “Edición de código en la vista Diseño”.

5. Lea la introducción que aparece al comienzo de cada uno de los

capítulos de Utilización de Dreamweaver para determinar si le interesan los temas que se abordan en ellos.

Diseñadores de aplicaciones Web

Si es un diseñador de aplicaciones Web con experiencia, esta sección le informará de las secciones de la documentación de Dreamweaver más adecuadas para su nivel. Hay dos métodos distintos, dependiendo de si ha usado Dreamweaver con anterioridad.

Para los diseñadores de aplicaciones Web que no hayan utilizado Dreamweaver:

1. Comience con una lectura rápida de esta guía de Primeros pasos con

Dreamweaver para familiarizarse con los aspectos básicos del uso de Dreamweaver.

2. En Utilización de Dreamweaver (Ayuda> Utilización de Dreamweaver),

consulte el Capítulo 1, “Exploración del espacio de trabajo” para más información sobre la interfaz de usuario de Dreamweaver.

3. Aunque probablemente ya conoce una buena parte del material del

Capítulo 2, “Configuración de un sitio de Dreamweaver” y el Capítulo 4, “Administración de archivos”, puede hojear estos capítulos para ver cómo se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones sobre la configuración de un sitio de Dreamweaver.

Dónde comenzar 19

4. Configure un servidor Web y un servidor de aplicaciones utilizando

Dreamweaver. (Véase Capítulo 23, “Configuración de una aplicación Web”.)

5. Conecte con una base de datos. (Véase “Conexión con una base de

datos” en Capítulo 23, “Configuración de una aplicación Web”.)

6. Lea la introducción que aparece al comienzo de cada capítulo de

Utilización de Dreamweaver para determinar si le interesan los temas que se abordan en ellos.

Para diseñadores de aplicaciones Web con experiencia que hayan utilizado Dreamweaver:

1. Comience leyendo “Novedades de Dreamweaver 8” en Utilización de

Dreamweaver (Ayuda > Utilización de Dreamweaver). La sección “Novedades” está en “Introducción”.

2. Lea por encima el Capítulo 1, “Exploración del espacio de trabajo” para

conocer nuevos aspectos de la interfaz de usuario de Dreamweaver.

Cómo sacarle el máximo provecho a la documentación de Dreamweaver

20 Conocer Dreamweaver

Dreamweaver incluye diversos medios para ayudarle a aprender rápidamente el funcionamiento del programa y a dominar la creación de

páginas Web. El sistema de Ayuda de Dreamweaver contiene diversos documentos que le ayudarán a aprender a utilizar Dreamweaver, Dreamweaver Extensibility y ColdFusion. También hay recursos en línea adicionales que puede consultar para crear páginas Web.

Acceso a la documentación de Dreamweaver

En la siguiente tabla se resume la documentación que contiene el sistema de Ayuda de Dreamweaver.

Puede comprar versiones impresas de títulos específicos. Para más información, consulte www.macromedia.com/go/buy_books (en inglés).

Título Descripción/

Audiencia

Primeros pasos con Dreamweaver

Utilización de Dreamweaver

Ampliación de Dreamweaver

Le ofrece una introducción básica a los conceptos de Dreamweaver y a la interfaz, con detallados tutoriales para principiantes. Dirigido a usuarios principiantes, y también para usuarios con nivel intermedio y avanzado que quieran conocer las nuevas funciones.

Información completa sobre todas las funciones de Dreamweaver. Dirigida a todos los usuarios de Dreamweaver.

Describe el marco de trabajo de Dreamweaver y la interfaz de programación de la aplicación (API). Destinado a usuarios avanzados que quieren crear extensiones o personalizar la interfaz de Dreamweaver.

Dónde encontrarlo

• Ver en Dreamweaver: Seleccione Ayuda > Primeros pasos con Dreamweaver

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_dreamweaver_es/

• Descargar el PDF:

www.macromedia.com/go/ dw_documentation_es

• Ver en Dreamweaver: Seleccione Ayuda > Ayuda de Dreamweaver o Ayuda > Utilización de Dreamweaver

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_dreamweaver_es/

• Descargar el PDF:

www.macromedia.com/go/ dw_documentation_es

• Ver en Dreamweaver: Seleccione Ayuda > Ampliación de Dreamweaver

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_dreamweaver_es/

• Descargar el PDF:

www.macromedia.com/go/ dw_documentation_es

Cómo sacarle el máximo provecho a la documentación de Dreamweaver 21

Título Descripción/

Audiencia

Referencia API de Dreamweaver

Utilización de ColdFusion

Referencia Contiene muchos tipos

Describe la utilidad API y el JavaScript API, que le permiten realizar diversas tareas de apoyo al desarrollar extensiones de Dreamweaver. Destinado a usuarios avanzados que quieren crear extensiones o personalizar la interfaz de Dreamweaver.

Contiene una selección de los libros más importantes con documentación sobre ColdFusion. (La lista completa está disponible en LiveDocs.) Dirigido a todo aquel que esté interesado en ColdFusion, desde principiantes hasta desarrolladores avanzados.

de manual de referencia sobre HTML, modelos de servidores y otros temas, casi todos publicados por O’Reilly. Destinado a todo aquel que necesite más información sobre sintaxis de códigos, conceptos, etc.

Dónde encontrarlo

• Ver en Dreamweaver: Seleccione Ayuda > Referencia API de Dreamweaver

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_dreamweaver_es/

• Descargar el PDF:

www.macromedia.com/go/ dw_documentation_es

• Ver en Dreamweaver: Seleccione Ayuda > Utilización de ColdFusion

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_coldfusion/

• Descargar el PDF:

www.macromedia.com/go/ cf_documentation

• Ver en Dreamweaver: Seleccione Ayuda > Referencia. Para una lista completa de manuales, haga clic en el menú emergente Libro en el panel Referencia.

22 Conocer Dreamweaver

Acceso a recursos en línea adicionales de Dreamweaver

En la siguiente tabla se resumen los recursos en línea adicionales para el aprendizaje de Dreamweaver.

Recurso Descripción/

Audiencia

Centro de soporte de Dreamweaver

Centro de desarrollo de Dreamweaver

Centro de recursos de documentación de Dreamweaver

Foros en línea de Macromedia

Formación de Macromedia

Notas técnicas, soporte e información sobre la resolución de problemas para usuarios de Dreamweaver.

Artículos y tutoriales que le ayudarán a mejorar sus conocimientos y a adquirir otros nuevos.

Manuales del producto en formato PDF, fe de errores, tutoriales y notas de la versión.

Debates e información sobre resolución de problemas proporcionada por usuarios de Dreamweaver, representantes del servicio técnico y el equipo de desarrollo de Dreamweaver.

Cursos que ofrecen ejercicios prácticos y situaciones del mundo real.

Dónde encontrarlo

www.macromedia.com/go/ dreamweaver_support_es

www.macromedia.com/go/ developer_dw_es

www.macromedia.com/go/ dw_documentation_es

www.macromedia.com/go/ dreamweaver_newsgroup

www.macromedia.com/go/ dreamweaver_training_es

Cómo sacarle el máximo provecho a la documentación de Dreamweaver 23

Utilización del sistema de ayuda de Dreamweaver

El sistema de ayuda en línea disponible a través del menú de Ayuda contiene información detallada sobre todas las operaciones que puede realizar con Dreamweaver. Para ver una lista de los documentos disponibles en Ayuda, consulte “Acceso a la documentación de Dreamweaver” en

la página 20.

Esta sección trata sobre los siguientes temas:

■ “Cómo abrir la Ayuda” en la página 24

■ “Búsqueda de ayuda” en la página 25

■ “Utilización del índice” en la página 25

■ “Cambio del tamaño de la fuente” en la página 26

■ “Utilización de la página de inicio” en la página 26

■ “Impresión de la documentación de Dreamweaver” en la página 27

■ “Introducción de comentarios en la documentación de Dreamweaver

con LiveDocs” en la página 27

Cómo abrir la Ayuda

Puede acceder a la ayuda sobre el producto mientras utiliza Dreamweaver.

24 Conocer Dreamweaver

Para abrir la Ayuda de Dreamweaver:

■ Seleccione Ayuda > Ayuda de Dreamweaver

Búsqueda de ayuda

Puede realizar una búsqueda de texto completa en la Ayuda de Dreamweaver.

Para buscar ayuda sobre el producto (Windows):

1. En Ayuda de Dreamweaver, haga clic en la ficha Buscar.

2. Escriba una palabra o frase en el cuadro de texto, y a continuación haga

clic en Lista de temas.

3. Haga doble clic sobre un tema de la lista de resultados para abrirlo.

Para buscar ayuda sobre el producto (Macintosh):

1. En la Ayuda de Dreamweaver, escriba una palabra o frase en el cuadro

de texto Preguntar y pulse Retorno.

2. Haga doble clic sobre un tema de la lista de resultados para abrirlo.

Utilización del índice

El índice le permite encontrar información rápidamente.

Para utilizar el índice (Windows):

1. En Ayuda de Dreamweaver, haga clic en la ficha Índice.

2. Desplácese hasta una entrada del índice dentro de la lista por orden

alfabético y haga doble clic sobre ella para que aparezca la información correspondiente.

Para utilizar el índice (Macintosh):

1. En Ayuda de Dreamweaver, haga clic en el vínculo Índice de la tabla de

contenidos.

2. Haga clic en una letra y desplácese a una entrada del índice dentro de la

lista.

3. Haga clic sobre un número junto a la entrada para que aparezca la

información correspondiente.

SUGERENCIA

Para buscar una frase específica, utilice comillas.

SUGERENCIA

Puede empezar a escribir una palabra clave en el cuadro de texto para desplazarse rápidamente a una entrada del índice.

Utilización del sistema de ayuda de Dreamweaver 25

Cambio del tamaño de la fuente

Puede cambiar el tamaño de la fuente del sistema de ayuda.

Para cambiar el tamaño de la fuente en el visor de la ayuda de Windows:

1. Abra Internet Explorer.

El tamaño de la fuente del visor de la ayuda de Windows se configura en Internet Explorer.

2. Seleccione Ver > Tamaño de texto y seleccione un tamaño.

Para cambiar el tamaño de la fuente en el visor de la ayuda de Apple:

■ En la ayuda, seleccione Edición > Reducir tamaño de fuente o Edición >

Aumentar tamaño de fuente.

Utilización de la página de inicio

Al iniciar Dreamweaver sin abrir un documento, aparecerá la página de inicio de Dreamweaver en el entorno de trabajo. La página de inicio le permite acceder rápidamente a los tutoriales de Dreamweaver, a archivos recientes y a Dreamweaver Exchange, donde podrá agregar nuevas opciones a algunas funciones de Dreamweaver. Utilice la página de inicio como si se tratara de una página Web. Haga clic en cualquiera de las funciones que aparecen para utilizarla.

26 Conocer Dreamweaver

Para desactivar la página de inicio:

1. Ejecute Dreamweaver sin abrir un documento.

Aparecerá la página de inicio.

2. Haga clic en No volver a mostrar.

Impresión de la documentación de Dreamweaver

Los libros siguientes están disponibles en formato PDF en el sitio Web de Macromedia en www.macromedia.com/go/dw_documentation_es:

■ Utilización de Dreamweaver

■ Primeros pasos con Dreamweaver

■ Ampliación de Dreamweaver

■ Referencia API de Dreamweaver

Puede imprimir el PDF parcial o completamente en su impresora, o si lo desea puede llevar el PDF a un centro copista.

Introducción de comentarios en la documentación de Dreamweaver con LiveDocs

La documentación de Dreamweaver también está disponible en línea en formato LiveDocs. La versión de LiveDocs de la ayuda de Dreamweaver se parece mucho a la ayuda incorporada en el producto, pero además le permite comentar el contenido de páginas de ayuda específicas. Puede agregar información útil sobre un tema de Dreamweaver específico según su experiencia particular, o pedir consejo a otros diseñadores y desarrolladores de Dreamweaver.

Los LiveDocs de Dreamweaver están disponibles en

http://livedocs.macromedia.com/go/livedocs_dreamweaver_es/

Utilización del sistema de ayuda de Dreamweaver 27

28 Conocer Dreamweaver

CAPÍTULO 2

Aspectos básicos de Dreamweaver

Para sacar el máximo provecho de Macromedia Dreamweaver 8, deberá conocer cuáles son los conceptos que subyacen al espacio de trabajo de Dreamweaver. En capítulo presenta los elementos más importantes y utilizados del espacio de trabajo y explica cómo realizar algunas tareas básicas con Dreamweaver.

Este capítulo contiene las secciones siguientes:

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

Conocer el espacio de trabajo de Dreamweaver 8

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente.

Esta sección le proporciona una visión general del espacio de trabajo de Dreamweaver 8. Si desea obtener información detallada sobre cualquiera de los elementos del espacio de trabajo presentados en esta sección, consulte Capítulo 1, “Exploración del espacio de trabajo” en Utilización de Dreamweaver.

Esta sección contiene los siguientes temas:

■ “Diseño del espacio de trabajo” en la página 30

■ “Ventana de documento” en la página 32

■ “Barra de herramientas de Documento” en la página 33

■ “Barra de estado” en la página 34

■ “Barra Insertar” en la página 36

■ “Barra de herramientas de Codificación” en la página 38

■ “El Inspector de propiedades” en la página 39

■ “El panel Archivos” en la página 40

■ “El panel Estilos CSS” en la página 41

Diseño del espacio de trabajo

En Windows, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño.

Barra Insertar

Barra de herramientas de documento

Ventana de documento

Grupos de paneles

Selector de etiquetas

30 Aspectos básicos de Dreamweaver

Inspector de propiedades

Panel Archivos

+ 318 hidden pages