Adobe Dreamweaver - MX2004 Manual de Consulta Rápida [es]

Primeros pasos con Dreamweaver

Marcas comerciales

Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware,
Authorware Star, Backstage, Bright Tiger, Clustercats, Cold Fusion, Contribute, Design in Motion, Director, Dream Templates,
Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite,
JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live
Effects, logotipo y diseño de MacRecorder, Macromedia, Macromedia Action!, Macromedia Flash, logotipo y diseño de
Macromedia M, Macromedia Spectra, logotipo y diseño de Macromedia xRes, MacroModel, Made with Macromedia, logotipo y
diseño de Made with Macromedia, logotipo y diseño de MAGIC, Mediamaker, Movie Critic, Open Sesame!, Roundtrip HTML,
Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be y Xtra son marcas comerciales o
marcas registradas de Macromedia, Inc. y pueden estar registradas en los Estados Unidos de América o en otras jurisdicciones.
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 terceros

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.

En www.macromedia.com/go/thirdparty_es/ encontrará avisos de software de terceros y/u otros términos y condiciones.

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

Advertencia de Apple
APPLE COMPUTER, INC. NO OFRECE GARANTÍAS DE NINGÚN TIPO, NI EXPRESAS NI IMPLÍCITAS, EN

RELACIÓN CON EL PAQUETE DE SOFTWARE INFORMÁTICO ADJUNTO, SU COMERCIABILIDAD O SU
ADECUACIÓN PARA UN PROPÓSITO ESPECÍFICO. ALGUNOS ESTADOS NO ADMITEN LA EXCLUSIÓN DE
GARANTÍAS IMPLÍCITAS. ES POSIBLE QUE LA EXCLUSIÓN ANTERIOR NO SE APLIQUE EN SU CASO. ESTA
GARANTÍA PROPORCIONA AL USUARIO DERECHOS LEGALES ESPECÍFICOS. OTROS DERECHOS QUE LE
PUEDAN CORRESPONDER VARÍAN DE UN ESTADO A OTRO.

Copyright © 1997-2003 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. Número de componente ZDW70M1AASP

Agradecimientos

Dirección principal: Sheila McGinn
Dirección del proyecto: Charles Nadeau
Redacción: Jed Hartman
Edición: Lisa Stanziano, Mary Ferguson
Administración de la producción: Patrice O’Neill
Producción y diseño multimedia: Adam Barnett, Chris Basmajian, Aaron Begley, John Francis, Jeff Harmon
Nuestro especial agradecimiento a Jay London, David Deming, Jennifer Taylor, Lori Hylan-Cho, Dominic Sagolla, Mary Ann

Walsh, Jennifer Rowe, Chris Bedford, Jon Varese, Rosana Francescato, Bonnie Loo, Liliana Ramirez-Cortes, Luciano Arruda,
Masayo Noda, Scott Richards, Seungmin Lee, Vincent Truong, Veronica Luongo y a los equipos de ingeniería y control de
calidad de Dreamweaver.

Primera edición: septiembre de 2003

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

CONTENIDO

INTRODUCCIÓN: Bienvenido a Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Aprendizaje de los fundamentos de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Cómo utilizar esta guía . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Otros recursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Convenciones tipográficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Instalación y ejecución de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Requisitos del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Instalación de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Activación de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Utilización de Dreamweaver en un entorno multiusuario . . . . . . . . . . . . . . . . . 10

Registro de Dreamweaver MX 2004. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Visualización del sitio de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

CAPÍTULO 1: Espacio de trabajo de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . 13

Selección de un diseño para el espacio de trabajo (sólo Windows) . . . . . . . . . . . . . 14

Introducción a las ventanas y los paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Introducción a los menús . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

CAPÍTULO 2: Configuración rápida de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Creación de un sitio: flujo de trabajo, introducción . . . . . . . . . . . . . . . . . . . . . . . . 18

Definir un sitio de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Copiar los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Definir una carpeta local mediante el asistente para la Definición del sitio . . . . 19

Definir una carpeta remota. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Cargar los archivos locales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

CAPÍTULO 3: Tutorial: Creación de una página estática . . . . . . . . . . . . . . . . . . . 27

Creación y almacenamiento de una página nueva . . . . . . . . . . . . . . . . . . . . . . . . . 27

Adición de un marcador de posición de imagen. . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Configuración del título de una página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Adición de texto con estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Adición de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Adición de estilos al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3

Adición de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Definición de los colores de fondo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Lecturas adicionales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

CAPÍTULO 4: Tutorial: Edición del código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Consulta del código. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Cambio al espacio de trabajo de edición de código (sólo Windows). . . . . . . . . . . . 41

Adición de una etiqueta con el Selector de etiquetas . . . . . . . . . . . . . . . . . . . . . . . 42

Edición de una etiqueta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Consulta de información sobre una etiqueta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Adición de una imagen con sugerencias para el código . . . . . . . . . . . . . . . . . . . . . 45

Comprobación de los cambios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Impresión del código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Lecturas adicionales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

CAPÍTULO 5: Tutorial: Vinculación y visualización previa de las páginas. . . . . . . 49

Creación de una segunda página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Adición de vínculos de texto entre las páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Creación de una barra de navegación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Copia de la barra de navegación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Vista previa en un navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Configuración de un sitio remoto y publicación . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Lecturas adicionales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

CAPÍTULO 6: Aspectos básicos de las aplicaciones Web . . . . . . . . . . . . . . . . . . 57

Aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Usos comunes de las aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Ejemplo de aplicación Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

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

Procesamiento de páginas Web estáticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Procesamiento de páginas dinámicas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Acceso a una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

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

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

Terminología de aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

CAPÍTULO 7: Tutorial: Desarrollo de una aplicación Web . . . . . . . . . . . . . . . . . . 69

Antes de comenzar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

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

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

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

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

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

Visualización de las páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

4 Contenido

Creación de un formulario de inserción de registros . . . . . . . . . . . . . . . . . . . . . . . 78

Adición de un objeto de aplicación Formulario de inserción de registro . . . . . . 78

Creación del formulario de inserción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

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

Lecturas adicionales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

CAPÍTULO 8: Instalación de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Instalación de Personal Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

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

Comprobación de PWS o IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Comprobación del servidor Web de Macintosh (desarrolladores PHP) . . . . . . . . . 86

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

CAPÍTULO 9: Configuración del sitio ColdFusion de muestra . . . . . . . . . . . . . . . 89

Listas de comprobación de la configuración para desarrolladores de ColdFusion . . 89

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

Instalación de ColdFusion MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Creación de una carpeta raíz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

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

Copia de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Definición de una carpeta local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Definición de una carpeta remota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Especificación de la ubicación de procesamiento de páginas dinámicas. . . . . . . 94

Carga de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

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

Configuración de la base de datos (servidor en el equipo remoto) . . . . . . . . . . . 95

Creación de una fuente de datos ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Conexión con la base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

CAPÍTULO 10: Configuración del sitio ASP.NET de muestra. . . . . . . . . . . . . . . . 99

Listas de comprobación de la configuración para desarrolladores de ASP.NET . . . 99

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

Comprobación de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Instalación de .NET Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Creación de una carpeta raíz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

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

Copia de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Definición de una carpeta local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Definición de una carpeta remota. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Especificación de la ubicación de procesamiento de páginas dinámicas. . . . . . 104

Carga de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

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

Configuración de la base de datos (servidor en el equipo remoto). . . . . . . . . . 106

Creación de una conexión de base de datos. . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Contenido 5

CAPÍTULO 11: Configuración del sitio ASP de muestra . . . . . . . . . . . . . . . . . . . 109

Listas de comprobación de la configuración para desarrolladores de ASP. . . . . . . 109

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

Comprobación de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Instalación de un servidor de aplicaciones ASP . . . . . . . . . . . . . . . . . . . . . . . . 111

Comprobación de la instalación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Creación de una carpeta raíz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

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

Copia de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Definición de una carpeta local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Definición de una carpeta remota. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Especificación de la ubicación de procesamiento de páginas dinámicas. . . . . . 116

Carga de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

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

Configuración de la base de datos (servidor en el equipo remoto) . . . . . . . . . . 118

Creación de una conexión de base de datos. . . . . . . . . . . . . . . . . . . . . . . . . . . 119

CAPÍTULO 12: Configuración del sitio JSP de muestra . . . . . . . . . . . . . . . . . . . 121

Listas de comprobación de la configuración para desarrolladores de JSP . . . . . . . 121

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

Comprobación de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Instalación de un servidor de aplicaciones JSP . . . . . . . . . . . . . . . . . . . . . . . . 123

Creación de una carpeta raíz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

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

Copia de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Definición de una carpeta local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Definición de una carpeta remota. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Especificación de la ubicación de procesamiento de páginas dinámicas. . . . . . 127

Carga de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

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

Instalación del controlador puente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Configuración de la base de datos (servidor en el equipo remoto) . . . . . . . . . . 129

Creación de una conexión de base de datos. . . . . . . . . . . . . . . . . . . . . . . . . . . 130

CAPÍTULO 13: Configuración del sitio PHP de muestra . . . . . . . . . . . . . . . . . . . 133

Listas de comprobación de la configuración para desarrolladores de PHP . . . . . . 134

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

Configuración del sistema Windows (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Configuración del sistema Macintosh (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . 139

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

Copia de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Definición de una carpeta local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Definición de una carpeta remota. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Especificación de dónde pueden procesarse las páginas dinámicas (PHP) . . . . 142

Carga de los archivos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

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

Creación de la base de datos MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Creación de una conexión de base de datos. . . . . . . . . . . . . . . . . . . . . . . . . . . 145

6 Contenido

INTRODUCCIÓN

Bienvenido a Dreamweaver

Esta guía es una introducción para utilizar Macromedia Dreamweaver MX 2004 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.

Dreamweaver MX 2004 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.

Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin
escribir una sola línea de código. No obstante, si prefiere crear el código manualmente,
Dreamweaver también incluye numerosas herramientas y funciones relacionadas con la
codificación. Además, Dreamweaver le ayuda a crear aplicaciones Web dinámicas basadas en bases
de datos empleando lenguajes de servidor como ASP, ASP.NET, ColdFusion Markup Language
(CFML), JSP y PHP.

Nota: esta guía no está pensada como manual completo en el que se describen todas las funciones
de Dreamweaver MX 2004 ni como introducción al diseño Web. Para más información sobre
Dreamweaver, consulte la Ayuda de Dreamweaver (seleccione Utilización de Dreamweaver en el
menú Ayuda).

Este capítulo contiene las siguientes secciones:

• “Aprendizaje de los fundamentos de Dreamweaver” en la página 8

• “Instalación y ejecución de Dreamweaver” en la página 9

• “Visualización del sitio de muestra” en la página 11

7

Aprendizaje de los fundamentos de Dreamweaver

Para aprender a utilizar Dreamweaver, comience por esta guía de Primeros pasos. Después,
continúe con otros recursos como el sistema de ayuda y el Centro de soporte de Macromedia.

Cómo utilizar esta guía

La presente guía está dividida en varios capítulos. Le aconsejamos que los lea en el orden
siguiente:

1 En esta introducción se proporciona información básica acerca de cómo instalar y utilizar

Dreamweaver.

2 “Espacio de trabajo de Dreamweaver” en la página 13 proporciona una introducción al espacio

de trabajo de Dreamweaver MX 2004.

3 “Configuración rápida de sitios” en la página 17 explica cómo configurar un sitio. Después de

leer este capítulo sobre la configuración, si lo prefiere, puede practicar con el producto en lugar
de leer el resto de la guía.

4 Si ya ha creado páginas Web, pero no ha utilizado nunca Dreamweaver, lea los tutoriales para

sitios estáticos: el “Tutorial: Creación de una página estática” en la página 27, “Tutorial: Edición

del código” en la página 39 y el “Tutorial: Vinculación y visualización previa de las páginas” en
la página 49. En estos tutoriales se describen los fundamentos para crear un pequeño sitio Web

estático y funcional mediante las herramientas de creación visual de Dreamweaver. También se
describen los fundamentos básicos para utilizar las herramientas de edición manual de código
en Dreamweaver.

5 Si no está familiarizado con los conceptos relacionados con las aplicaciones Web, lea “Aspectos

básicos de las aplicaciones Web” en la página 57.

6 Si está interesado en aprender a desarrollar aplicaciones Web, empiece por elegir la tecnología

de servidor (ColdFusion, ASP.NET, ASP, JSP o PHP) y lea el capítulo de configuración
correspondiente: “Configuración del sitio ColdFusion de muestra” en la página 89,

“Configuración del sitio ASP.NET de muestra” en la página 99, “Configuración del sitio ASP
de muestra” en la página 109, “Configuración del sitio JSP de muestra” en la página 121 o
“Configuración del sitio PHP de muestra” en la página 133.

7 Si es necesario, instale un servidor Web, según las instrucciones facilitadas en “Instalación de un

servidor Web” en la página 83.

8 Si quiere utilizar Dreamweaver para desarrollar una aplicación Web sencilla orientada a bases de

datos, lea el tutorial para aplicaciones Web: “Tutorial: Desarrollo de una aplicación Web” en

la página 69.

Lea cada capítulo desde el principio hasta el final.
En las lecciones de esta guía se emplean diseños de página y contenido de muestra suministrados

con Dreamweaver. Si prefiere crear su primer sitio Dreamweaver empleando sus propios diseños y
contenido, puede hacerlo, aunque las lecciones son más fáciles de seguir si utiliza el contenido de
muestra proporcionado.

Otros recursos

Dreamweaver incluye diversos recursos para ayudarle a aprender rápidamente el funcionamiento
del programa y a dominar la creación de sitios y páginas Web.

La

Ayuda de Dreamweaver incluye información completa acerca de todos los aspectos de

Dreamweaver. La Ayuda de Dreamweaver se muestra en el visor de la ayuda de su sistema
operativo: Microsoft HTML Help (Windows) o Apple Help (Macintosh).

8 Introducción: Bienvenido a Dreamweaver

Utilización de Dreamweaver es una versión en formato PDF del contenido de la Ayuda de

Dreamweaver, en la que se ofrece información sobre la utilización de los comandos y las funciones
de Dreamweaver. Algunos temas de consulta no se incluyen en la versión PDF; para más
información sobre dichos temas, consulte la Ayuda de Dreamweaver. El archivo PDF se encuentra
disponible en el CD de Dreamweaver.

El sitio Web del Centro de soporte de Dreamweaver en www.macromedia.com/go/

dreamweaver_support_es/ se actualiza de forma periódica con la información más reciente sobre

Dreamweaver, así como con sugerencias de usuarios expertos, ejemplos, consejos, actualizaciones
e información sobre temas avanzados.

Macromedia DevNet en www.macromedia.com/go/developer_es/ proporciona herramientas y

tutoriales, entre otras cosas, para todos los productos Macromedia.
Para más información sobre los recursos informativos y de formación sobre Dreamweaver, véase la

“Guía de medios educativos de Dreamweaver” en la Ayuda de Dreamweaver (Ayuda > Utilización
de Dreamweaver).

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.

Instalación y ejecución de Dreamweaver

En esta sección se indican los requisitos del sistema para ejecutar Dreamweavery se explica cómo
instalarlo. En ella también se explica cómo personalizar Dreamweaver para adaptarlo a sus
preferencias en un entorno operativo multiusuario como Windows XP o Mac OS X.

Requisitos del sistema

Para ejecutar Dreamweaver, es preciso disponer del hardware y el software siguientes.

Requisitos del sistema para Microsoft Windows:

• Un procesador Intel Pentium III o equivalente a 600 MHz o más rápido

• Windows 98 SE, Windows 2000, Windows XP o Windows .NET Server 2003

• Al menos 128 MB de memoria RAM (se recomiendan 256 MB)

• Al menos 275 MB de espacio en disco disponibles

• Un monitor de 16 bits (miles de colores) que admita una resolución de 1024 x 768 píxeles o

más (se recomienda una resolución de millones de colores)

Requisitos del sistema para Apple Macintosh:

• Power Macintosh G3 o posterior a 500 MHz o más rápido

Instalación y ejecución de Dreamweaver 9

• Mac OS X 10.2.6

• Al menos 128 MB de memoria RAM (se recomiendan 256 MB)

• Al menos 275 MB de espacio en disco disponibles

• Un monitor de 16 bits (miles de colores) que admita una resolución de 1024 x 768 píxeles o

más (se recomienda una resolución de millones de colores)

Instalación de Dreamweaver

Siga estos pasos para instalar Dreamweaver en un sistema Windows o Macintosh.

Nota: en determinados sistemas operativos, sólo podrá instalar o desinstalar Dreamweaver si
dispone de privilegios administrativos en el sistema. Para más información, consulte “Utilización de

Dreamweaver en un entorno multiusuario” en la página 10.

Para instalar Dreamweaver:

1 Introduzca el CD de Dreamweaver en la unidad de CD-ROM del sistema.
2 Haga doble clic en el icono del instalador de Dreamweaver MX 2004.
3 Siga las instrucciones que aparecen en pantalla.
4 Si el sistema lo solicita, reinicie el sistema.

Activación de Dreamweaver

Si es un usuario con una sola licencia, debe activar la licencia dentro de los 30 días siguientes a la
instalación. Puede activarla mediante una conexión a Internet o por teléfono en un sencillo
proceso que sólo le ocupará unos minutos. Para activar el producto, no es necesario que envíe
información personal, sino únicamente el número de serie del producto. Para más información,
visite el Centro de activación de productos de Macromedia en www.macromedia.com/go/

activation_es.

Utilización de Dreamweaver en un entorno multiusuario

En un sistema operativo multiusuario, como Windows 2000, Windows XP o Mac OS X, las
aplicaciones se instalan generalmente en una carpeta desde la que todos los usuarios pueden
ejecutarlas, como, por ejemplo, C:\Program Files (Windows) o la carpeta /Applications
(Macintosh). Sólo los usuarios que dispongan de privilegios administrativos pueden instalar
aplicaciones en dichas carpetas en un sistema operativo multiusuario.

Puede personalizar Dreamweaver de muchas formas. Dreamweaver impide que la configuración
personalizada de un usuario afecte a la configuración personalizada de otro usuario. Para evitar
que sus personalizaciones afecten a otros usuarios, la primera vez que ejecute Dreamweaver en
uno de los sistemas multiusuario que reconoce, la aplicación crea automáticamente copias de
diversos archivos de configuración. Estos archivos de configuración se almacenan en una carpeta
de su propiedad.

Nota: en sistemas operativos más antiguos (como Windows 98), todos los usuarios comparten un
mismo conjunto de archivos de configuración de Dreamweaver, aunque el sistema operativo esté
configurado para múltiples usuarios.

10 Introducción: Bienvenido a Dreamweaver

Si reinstala o actualiza Dreamweaver después de instalar Dreamweaver MX 2004, Dreamweaver
creará automáticamente copias de seguridad de los archivos de configuración de usuario existentes
para que, en el caso de que haya personalizado dichos archivos manualmente, continúe teniendo
acceso a los cambios realizados. Para más información acerca de la personalización manual de los
archivos de configuración, consulte “Personalización de Dreamweaver” en el apartado Ampliación
de Dreamweaver de la Ayuda (Ayuda > Extensiones> Ampliación de Dreamweaver).

Al desinstalar Dreamweaver de un sistema multiusuario, Dreamweaver elimina automáticamente
cada carpeta de configuración de usuario.

Registro de Dreamweaver MX 2004

Para obtener soporte adicional de Macromedia, es conveniente que registre su copia de
Macromedia Dreamweaver MX 2004 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 MX 2004, siga uno de estos procedimientos:

• Seleccione Ayuda > Activación > Registro en línea y complete el formulario electrónico.

• Seleccione Ayuda > Activación > Imprimir registro, imprima el formulario y envíelo por correo

a la dirección que figura en el formulario.

Visualización del sitio de muestra

Los ejemplos utilizados en esta guía se han extraído de un pequeño sitio de muestra para una
empresa ficticia denominada Trio Motors. Antes de comenzar los tutoriales, vea el sitio de
muestra en un navegador para hacerse una idea de lo que va a crear conforme vaya realizando los
tutoriales.

Para ver el sitio de muestra en un navegador:

1 Abra la carpeta Samples, incluida en la carpeta de aplicación de Dreamweaver. Luego abra la

carpeta GettingStarted y, seguidamente, la carpeta FinalSite.

2 Abra el archivo index.html (en la carpeta FinalSite) en un navegador.
3 Cuando haya acabado de ver el sitio de muestra, continúe con el capítulo siguiente de esta guía.

Visualización del sitio de muestra 11

12 Introducción: Bienvenido a Dreamweaver

CAPÍTULO 1

Espacio de trabajo de Dreamweaver

En Windows, Dreamweaver MX 2004 proporciona un espacio de trabajo integrado en una sola
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. Puede elegir entre un diseño orientado al
diseñador y un diseño orientado a las necesidades de los usuarios que crean código manualmente.

En Macintosh, Dreamweaver proporciona un diseño flotante del espacio de trabajo, donde cada
documento aparece en una ventana distinta. Los grupos de paneles aparecen apilados en
principio, pero pueden separarse en sus propias ventanas. Las ventanas se ajustan
automáticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar
su tamaño.

Nota: puede personalizar su espacio de trabajo cambiando el diseño de los paneles y los grupos de
paneles; para más información, consulte el apartado Utilización de Dreamweaver de la Ayuda.

Este capítulo contiene las secciones siguientes:

• “Selección de un diseño para el espacio de trabajo (sólo Windows)” en la página 14

• “Introducción a las ventanas y los paneles” en la página 15

• “Introducción a los menús” en la página 16

13

Selección de un diseño para el espacio de trabajo (sólo Windows)

En Windows, la primera vez que inicie Dreamweaver aparecerá un cuadro de diálogo que le
permitirá elegir un diseño para el espacio de trabajo. Si cambia de idea posteriormente, podrá
cambiar a otro espacio de trabajo distinto a través del cuadro de diálogo Preferencias.

Para elegir un diseño del espacio de trabajo:

• Seleccione uno de los siguientes diseños:

El

espacio de trabajo de diseñador es un espacio de trabajo integrado que utiliza MDI (Interfaz

para múltiples documentos, Multiple Document Interface) en el que todas las ventanas de
documentos y todos los paneles están integrados en una ventana de aplicación de mayor tamaño,
con los grupos de paneles acoplados a la derecha. Este diseño es el recomendado para la mayoría
de usuarios.

Nota: en la mayoría de las instrucciones que se facilitan en esta guía se presupone que está utilizando
el espacio de trabajo de diseñador.

El espacio de trabajo del codificador es el mismo espacio de trabajo integrado, pero con los
grupos de paneles acoplados a la izquierda; es un diseño similar al que utilizan Macromedia
HomeSite y Macromedia ColdFusion Studio, en el que las ventanas de documentos muestran de
forma predeterminada la vista de código. Esta disposición es la recomendada para usuarios de
HomeSite o ColdFusion Studio y otras personas que escriban código manualmente que deseen
contar con una disposición del espacio de trabajo que les resulte familiar.

Nota: puede acoplar los grupos de paneles a ambos lados del espacio de trabajo en cualquiera de las
disposiciones del espacio de trabajo.

14 Capítulo 1: Espacio de trabajo de Dreamweaver

Introducción a las ventanas y los paneles

B

En esta sección se describen brevemente algunos elementos del espacio de trabajo de
Dreamweaver. Más adelante en esta guía se ofrece información acerca del uso de estas
herramientas; para más información, consulte el apartado Utilización de Dreamweaver de la
Ayuda.

arra Insertar

Barra de herramientas de documento

Ventana de documento

Grupos de paneles

Selector de

La

página de inicio (no se muestra) permite abrir un documento reciente o crear un documento

Inspector de propiedades

Panel Archivos

nuevo. Desde la página de inicio también puede profundizar sus conocimientos sobre
Dreamweaver mediante una visita guiada o un tutorial del producto.

La

barra Insertar contiene botones para la inserción de diversos tipos de “objeto”, como

imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML que
le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla
haciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos
utilizando el menú Insertar en lugar de la barra Insertar.

La

barra de herramientas de documento contiene botones y menús emergentes que

proporcionan diferentes vistas de la ventana de documento (como la vista Diseño y la vista
Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de
una vista previa en un navegador.

La ventana de documento muestra el documento actual mientras lo está creando y editando.

El

inspector de propiedades le permite ver y cambiar diversas propiedades del objeto o texto

seleccionado. Cada tipo de objeto tiene diferentes propiedades.
Los

grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado

común. Para ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a la
izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrástrelo por los puntos
situados en el borde izquierdo de la barra de título del grupo.

Introducción a las ventanas y los paneles 15

El panel de archivos permite gestionar los archivos y las carpetas, tanto si forman parte de un
sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel de archivos también
permite acceder a todos los archivos del disco local, como en el Explorador de Windows
(Windows) o en el Finder (Macintosh).

Dreamweaver proporciona una variedad de paneles, inspectores y ventanas que no se muestran
aquí, como el panel Estilos CSS y el inspector de etiquetas. Para abrir paneles, inspectores y
ventanas de Dreamweaver, utilice el menú Ventana.

Introducción a los menús

En esta sección se proporciona una breve introducción a los menús de Dreamweaver.
El

menú Archivo y el menú Edición contienen los elementos de menú estándar para estos menús,

como Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. El menú
Archivo también contiene otros comandos para la visualización o manipulación del documento
actual, como Vista previa en el navegador e Imprimir código. El menú Edición contiene los
comandos de selección y de búsqueda, como Seleccionar etiqueta padre y Buscar y reemplazar. En
Windows, el menú Edición también proporciona acceso a Preferencias; en Macintosh, utilice el
menú de Dreamweaver para abrir el cuadro de diálogo Preferencias.

El

menú Ver le permite obtener diversas vistas del documento (como la vista Diseño y la vista

Código), y mostrar y ocultar diversos tipos de elementos de página y herramientas de
Dreamweaver.

El

menú Insertar ofrece una alternativa a la barra Insertar para la inserción de objetos en el

documento.
El

menú Modificar le permite cambiar las propiedades del elemento de página seleccionado. A

través de este menú, puede editar los atributos de etiquetas, cambiar las tablas y elementos de
tablas y realizar diversas operaciones relacionadas con elementos de biblioteca y plantillas.

El

menú Texto le permite aplicar formato al texto fácilmente.

El

menú Comandos proporciona acceso a diversos comandos, entre otros, uno para aplicar

formato al código en función de las preferencias de formato, otro para crear un álbum de fotos y
otro para optimizar una imagen empleando Macromedia Fireworks.

El

menú Sitio ofrece elementos de menú para administrar sitios y cargar y descargar archivos.

Sugerencia: algunas de las funciones incluidas en el menú Sitio en versiones anteriores de
Dreamweaver se encuentran ahora en el menú Opciones del panel Archivos.

El menú Ventana proporciona acceso a todos los paneles, inspectores y ventanas de
Dreamweaver. (Para las barras de herramientas, véase el menú Ver.)

El

menú Ayuda proporciona acceso a la documentación de Dreamweaver, incluidos los sistemas

de ayuda para la utilización de Dreamweaver y la creación de extensiones para Dreamweaver,
además de información de referencia para diversos lenguajes.

Además de los menús de la barra de menús, Dreamweaver ofrece numerosos menús contextuales
que proporcionan acceso sencillo a útiles comandos relacionados con la selección o el área actual.
Para ver un menú contextual, haga clic con el botón derecho del ratón (Windows) o presione la
tecla Control (Macintosh) en un elemento de una ventana.

16 Capítulo 1: Espacio de trabajo de Dreamweaver

CAPÍTULO 2

Configuración rápida de sitios

En este capítulo se explica cómo configurar un sitio de Dreamweaver MX 2004. En
Dreamweaver, un sitio normalmente consta de dos partes: un conjunto de archivos situados en un
equipo local (el sitio local) y una ubicación en un servidor Web remoto donde cargará los archivos
cuando esté preparado para ponerlos a disposición pública (el sitio remoto).

Después de configurar un sitio podrá explorar Dreamweaver por sí mismo, utilizando sus propias
páginas Web existentes. Otra alternativa consiste en seguir los tutoriales del resto de esta guía para
saber cómo crear un sitio Web sencillo utilizando el contenido de muestra proporcionado con
Dreamweaver MX 2004.

El método más común para crear un sitio Web utilizando Dreamweaver consiste en crear y editar
páginas en el disco local y, a continuación, cargar copias de esas páginas en un servidor Web
remoto para ponerlas a disposición pública. Se puede utilizar Dreamweaver de otras formas (por
ejemplo, ejecutando un servidor Web en el sistema local, cargando archivos en un servidor para la
realización de pruebas, editando archivos sin definir un sitio o utilizando un disco montado como
si se tratara del disco local), pero en las lecciones de esta guía se da por sentado que se trabaja
localmente y que posteriormente se realiza la carga en un servidor remoto.

Este capítulo contiene las siguientes secciones:

• “Sitios” en la página 17

• “Creación de un sitio: flujo de trabajo, introducción” en la página 18

• “Definir un sitio de Dreamweaver” en la página 18

Sitios

En Dreamweaver, el término sitio se emplea para referirse a cualquiera de los siguientes conceptos:

• Un sitio Web: serie de páginas en un servidor que el visitante ve utilizando un navegador Web.

• Un sitio remoto: archivos del servidor que componen un sitio Web desde el punto de vista del

autor, no del visitante.

• Un sitio local: archivos del disco local que corresponden a los archivos del sitio remoto. En el

flujo de trabajo de Dreamweaver más habitual, los archivos se editan en el disco local y después
se cargan en el sitio remoto.

• Una definición de sitio de Dreamweaver: conjunto de características que definen un sitio local,

junto con información sobre la correspondencia entre el sitio local y el sitio remoto.

17

Creación de un sitio: flujo de trabajo, introducción

El orden de las lecciones de esta guía sigue un flujo de trabajo posible para crear un sitio. A la hora
de crear sus propios sitios puede seguir el flujo de trabajo que le resulte más cómodo.

Para crear un sitio Web estático:

1 Planificar y preparar, incluyendo la configuración de un sitio de Dreamweaver (véase “Definir

un sitio de Dreamweaver” en la página 18).

2 Crear páginas, ajustar el diseño y agregar contenido (véase “Tutorial: Creación de una página

estática” en la página 27).

3 Editar el código según sea necesario (véase “Tutorial: Edición del código” en la página 39).
4 Vincular las páginas entre sí (véase “Tutorial: Vinculación y visualización previa de las páginas”

en la página 49).

5 Obtener una vista previa del sitio y publicarlo (véase “Vista previa en un navegador” en

la página 56 y “Definir una carpeta remota” en la página 23).

6 (Opcional) Añadir páginas dinámicas que muestren información de las bases de datos (véase

“Aspectos básicos de las aplicaciones Web” en la página 57 y “Tutorial: Desarrollo de una
aplicación Web” en la página 69).

Definir un sitio de Dreamweaver

La creación de un sitio Web suele comenzar con la planificación: decidir cuántas páginas se
crearán, qué contenido aparecerá en cada página, el diseño que tendrán las páginas y cómo se
conectarán las páginas entre sí. Sin embargo, el sitio de muestra descrito en estos tutoriales es muy
sencillo, por lo que no necesita demasiada planificación; consta únicamente de unas pocas páginas
Web con vínculos entre ellas. Por lo tanto, para este sitio, puede continuar directamente con la
configuración del sitio local.

Para configurar un sitio local con los archivos de muestra, en primer lugar debe copiar estos
archivos en una carpeta local y después crear una definición del sitio de Dreamweaver para poder
administrar los archivos desde Dreamweaver.

Nota: los usuarios de Macromedia HomeSite y ColdFusion Studio pueden considerar un sitio de
Dreamweaver como un proyecto de HomeSite o Studio.

Para configurar un sitio local:

1 Copie los archivos de muestra en una carpeta del disco duro (véase “Copiar los archivos de

muestra” en la página 19).

2 Defina la carpeta como carpeta local de Dreamweaver (véase “Definir una carpeta local

mediante el asistente para la Definición del sitio” en la página 19).

3 Defina una carpeta en un servidor Web como carpeta remota de Dreamweaver (véase “Definir

una carpeta remota” en la página 23).

4 Cargue los archivos de muestra en el servidor Web (véase “Cargar los archivos locales” en

la página 25).

18 Capítulo 2: Configuración rápida de sitios

Copiar los archivos de muestra

Cuando cree un sitio local, puede colocar los activos existentes (imágenes u otro tipo de
contenido) en una carpeta dentro de la carpeta raíz del sitio local. Posteriormente, cuando esté
listo para añadir contenido a las páginas, tendrá los activos listos para utilizar.

Los archivos de muestra incluidos con Dreamweaver contienen activos para el sitio que creará con
estos tutoriales de Primeros pasos. El primer paso en la creación del sitio es copiar los archivos de
muestra de la carpeta de aplicación de Dreamweaver en la carpeta adecuada del disco duro.

Nota: se han elegido la estructura y la ubicación recomendadas de las carpetas del sitio local para
que resulte más sencillo seguir los tutoriales. Sin embargo, si los archivos de muestra están en la
ubicación recomendada, no podrá utilizar los vínculos relativos a la raíz del sitio en el sitio de muestra.
Por lo tanto, en estos tutoriales se utilizan únicamente vínculos relativos al documento. Para más
información acerca de los vínculos relativos a la raíz y al documento, consulte el apartado Utilización
de Dreamweaverde la Ayuda.

Para copiar los archivos de muestra:

1 Cree una carpeta nueva y asígnele el nombre Sites-Local en la carpeta de usuario de su disco

duro.
Por ejemplo, cree una de las carpetas siguientes, según el sistema operativo que utilice:

■ C:\Documents and Settings\su_nombre_de_usuario\Mis documentos\Sites-Local

(Windows)

■ /Users/su_nombre_de_usuario/Documents/Sites-Local (Macintosh).

Nota: en Macintosh hay una carpeta llamada Sites ya creada en su carpeta de usuario. No
utilice la carpeta Sites como carpeta local, ya que dicha carpeta le servirá para colocar sus
páginas con el fin de hacerlas accesibles al público cuando utilice Macintosh como servidor
Web.

2 Localice la carpeta GettingStarted en la carpeta de la aplicación de Dreamweaver en el disco

duro.
Si ha instalado Dreamweaver en su ubicación predeterminada, la ruta de la carpeta será ésta:

■ C:\Program Files\Macromedia\Dreamweaver MX2004\Samples\GettingStarted\

(Windows)

■ /Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted (Macintosh)

3 Copie la carpeta GettingStarted en la carpeta Sites-Local.

Una vez que haya copiado la carpeta GettingStarted, defina la carpeta como carpeta local de
Dreamweaver.

Definir una carpeta local mediante el asistente para la Definición del sitio

Creará una definición del sitio y definirá una carpeta local mediante el cuadro de diálogo
Definición del sitio. Puede usar este cuadro de diálogo en una de estas dos vistas: Básicas o
Avanzadas. El método Básico le orientará paso a paso a lo largo del proceso de configuración del
sitio. Si prefiere editar información del sitio sin esta orientación, puede hacer clic en la ficha
Avanzadas en cualquier momento.

El procedimiento siguiente describe cómo configurar las opciones de la versión Básica del cuadro
de diálogo, que también se denomina asistente para la Definición del sitio. Para información
sobre la definición de las opciones de la versión Avanzada, haga clic en la ficha Avanzadas y, a
continuación, en el botón Ayuda.

Definir un sitio de Dreamweaver 19

Si ya dispone de un sitio Web en un servidor remoto y desea editarlo en lugar de utilizar los
archivos de muestra, véase “Edición de sitios Web existentes con Dreamweaver” en el apartado
Utilización de Dreamweaver de la Ayuda (Ayuda > Utilización de Dreamweaver).

Para definir un sitio:

1 Inicie Dreamweaver.
2 Seleccione Sitio > Administrar sitios (es decir, seleccione Administrar sitios en el menú Sitio).

Aparece el cuadro de diálogo Administrar sitios.

3 En el cuadro de diálogo Administrar sitios, haga clic en Nuevo y seleccione Sitio en el menú

emergente.
Aparecerá el cuadro de diálogo Definición del sitio.

4 Si el cuadro de diálogo muestra la ficha Avanzadas, haga clic en Básicas.

Aparecerá la primera pantalla del asistente para la Definición del sitio solicitándole que
introduzca un nombre para el sitio.

5 En el cuadro de texto, introduzca un nombre que identifique el sitio en Dreamweaver. Puede

elegir el nombre que desee. Por ejemplo, Trio Motors.

6 Haga clic en Siguiente para continuar con el paso siguiente.

Aparecerá la siguiente pantalla del Asistente preguntándole si desea trabajar con una tecnología
de servidor.

20 Capítulo 2: Configuración rápida de sitios

7 Seleccione la opción No para indicar que el sitio es estático por el momento, sin páginas

dinámicas.

Para configurar un sitio para crear una aplicación Web, deberá elegir un tipo de documento
dinámico, como Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft
ASP.NET, Sun JavaServer Pages (JSP) o PHP: Hypertext Preprocessor, es decir, preprocesador
de hipertexto y, a continuación, facilitar información sobre su servidor de aplicaciones. Para
más información, consulte el Capítulo 7, “Tutorial: Desarrollo de una aplicación Web”, en

la página 69.

8 Haga clic en Siguiente para continuar con el paso siguiente.

Aparecerá la siguiente pantalla del Asistente preguntándole cómo desea trabajar con los
archivos.

9 Seleccione la opción con la etiqueta “Editar localmente y luego cargar al servidor de prueba

remoto”.
Puede trabajar con los archivos de varias formas durante el desarrollo del sitio, pero a los efectos

de esta lección, elija esta opción.

Definir un sitio de Dreamweaver 21

10 Haga clic en el icono de carpeta situado junto al cuadro de texto. El cuadro de texto permite

especificar la carpeta del disco local en la que Dreamweaver debe almacenar la versión local de
los archivos del sitio, pero es más sencillo especificar un nombre de carpeta exacto utilizando
Examinar en lugar de escribir la ruta.

Aparecerá el cuadro de diálogo Elegir la carpeta raíz local para el sitio.

11 En el cuadro de diálogo Elegir la carpeta raíz local para el sitio, colóquese en la carpeta Sites-

Local del disco local, que es la carpeta en la que ha copiado los archivos de muestra en “Copiar

los archivos de muestra” en la página 19. Seleccione la carpeta GettingStarted dentro de la

carpeta Sites-Local. Abra la carpeta GettingStarted y haga clic en Seleccionar (Windows) o en
Escoger (Macintosh).

12 Haga clic en Siguiente para continuar con el paso siguiente.

Aparecerá la siguiente pantalla del Asistente preguntándole cómo se conecta al servidor remoto.

13 Por ahora, elija Ninguno en el menú emergente.

Posteriormente podrá configurar información sobre el sitio remoto (véase “Definir una carpeta

remota” en la página 23). Por el momento lo único que necesita para comenzar a crear una

página es la información del sitio local.

14 Haga clic en Siguiente para continuar con el paso siguiente.

Aparecerá la siguiente pantalla del asistente mostrando un resumen de la configuración.

22 Capítulo 2: Configuración rápida de sitios

15 Haga clic en Listo para terminar.

Aparecerá el cuadro de diálogo Administrar sitios, en el que se muestra el nuevo sitio.

16 Haga clic en Listo para cerrar el cuadro de diálogo Administrar sitios.

El panel Archivos mostrará ahora la nueva carpeta raíz local correspondiente al sitio actual. La lista
de archivos del panel Archivos actúa como administrador de archivos, ya que permite copiar,
pegar, eliminar, mover y abrir archivos como si se tratara del escritorio del PC.

Ya ha definido una carpeta raíz local para el sitio. Puede seguir el resto de los tutoriales de esta guía
para crear el sitio de muestra de Trio Motors, o bien puede trabajar en sus propias páginas.
Cuando acabe de crear y editar las páginas, continúe con la definición de una carpeta remota en
un servidor y con la publicación de las páginas..

Definir una carpeta remota

Después de crear un sitio Web, el paso siguiente es publicarlo cargando los archivos en un servidor
Web remoto.

Antes de continuar, deberá disponer de acceso a un servidor Web remoto (como, por ejemplo, el
servidor de su ISP, un servidor propiedad del cliente para el que trabaja, un servidor de intranet
dentro de su empresa o un servidor IIS o PWS en un sistema Windows). Si aún no tiene acceso a
dicho servidor, póngase en contacto con su ISP, su cliente o el administrador del sistema.

También puede ejecutar un servidor Web en su equipo local, como IIS (Windows) o Apache
(Macintosh). Para más información sobre la configuración de un servidor Web en el equipo local,
consulte “Instalación de un servidor Web” en la página 83.

El procedimiento siguiente funciona más correctamente si la carpeta raíz remota está vacía. Si el
sitio remoto ya contiene archivos, cree una carpeta vacía en el sitio remoto (en el servidor) y utilice
esa carpeta vacía como carpeta raíz remota.

En el procedimiento siguiente se da por sentado que ha configurado un sitio local. Para más
información, consulte “Definir una carpeta local mediante el asistente para la Definición del sitio”

en la página 19.

Definir un sitio de Dreamweaver 23

Para conectar con un sitio remoto:

1 En el sitio remoto (en el servidor), cree una carpeta vacía dentro de la carpeta raíz Web del

servidor. Asigne a esta carpeta vacía el mismo nombre que el de la carpeta raíz local; por ejemplo,
en el caso del sitio del tutorial, puede asignarle el nombre GettingStarted para que coincida con
el nombre de la carpeta raíz local.

2 En Dreamweaver, seleccione Sitio > Administrar sitios.
3 Seleccione un sitio (por ejemplo, Trio Motors) y haga clic en Editar.
4 Haga clic en la ficha Básicas en la parte superior del cuadro de diálogo.
5 Cuando configuró el sitio local dio los primeros pasos de la ficha Básicas. Por tanto, haga clic

en Siguiente varias veces hasta que se resalte el paso Compartiendo archivos en la parte superior
del asistente.

6 En el menú emergente "¿Cómo conecta con su servidor remoto?", elija un método para conectar

con el sitio remoto.
Los métodos más habituales para conectarse a un servidor en Internet son FTP y SFTP; el

método más habitual para conectarse a un servidor de la intranet o al equipo local si lo utiliza
como servidor Web es Local/red. Si no está seguro de qué opción debe elegir, consulte con el
administrador del sistema del servidor.

7 Si elige FTP, introduzca las opciones siguientes:

■ Introduzca el nombre del host del servidor (como ftp.macromedia.com).

■ En el cuadro de texto donde se le pregunta qué carpeta contiene los archivos, introduzca la

ruta del servidor desde la carpeta raíz FTP hasta la carpeta raíz del sitio remoto. Si no está
seguro, consulte con el administrador del sistema.

En muchos casos, este cuadro de texto deberá quedar en blanco.

■ Introduzca su nombre de usuario y contraseña en los cuadros de texto correspondientes.

■ Si el servidor admite SFTP, seleccione la opción Utilizar FTP seguro (SFTP).

■ Haga clic en Conexión de prueba.

■ Si no consigue establecer conexión, consulte con el administrador del sistema.

24 Capítulo 2: Configuración rápida de sitios

8 Si elige Local/red, haga clic en el icono de carpeta situado junto al cuadro de texto y acceda a la

carpeta raíz del sitio remoto. Si lo desea, puede desactivar la opción Actualizar lista de archivos
remotos automáticamente para aumentar la velocidad.

9 Una vez introducida la información adecuada, haga clic en Siguiente.
10 No active la protección y la desprotección de archivos para el sitio de Trio Motors.

Si usted y sus compañeros están trabajando juntos en un sitio grande, la desprotección y la
protección les ayudarán a evitar que se sobrescriban los archivos. Además, si usted o sus
compañeros de trabajo utilizan Macromedia Contribute, debe activar la función de protección
y desprotección de archivos. Para el sitio de muestra de Trio Motors, sin embargo, esta función
no es necesaria.

11 Haga clic en Siguiente.
12 Haga clic en Listo para terminar de configurar el sitio remoto.
13 Haga clic en Listo para cerrar el cuadro de diálogo Administrar sitios.

Cargar los archivos locales

Después de configurar las carpetas local y remota, puede cargar los archivos de la carpeta local al
servidor Web. Para que las páginas sean accesibles públicamente, debe cargarlas incluso aunque el
servidor Web se ejecute en el equipo local.

Para cargar las páginas en un sitio remoto:

1 En el panel Archivos (Ventana > Archivos), seleccione la carpeta raíz local del sitio.
2 Haga clic en el icono de flecha azul Colocar archivos de la barra de herramientas del panel

Archivos.
Dreamweaver copia todos los archivos en la carpeta remota definida en “Definir una carpeta

remota” en la página 23. Esta operación puede ocupar cierto tiempo, ya que Dreamweaver

debe cargar todos los archivos en el sitio, incluidas las diferentes versiones de algunos archivos,
para utilizarlos con distintos tutoriales.

3 Abra el sitio remoto en un navegador para comprobar que todo se ha cargado correctamente.

Definir un sitio de Dreamweaver 25

26 Capítulo 2: Configuración rápida de sitios

CAPÍTULO 3

Tutorial: Creación de una página estática

En este tutorial se explica cómo crear y guardar una página en Macromedia Dreamweaver MX
2004 y cómo añadir a continuación texto, imágenes y colores a la página.

Antes de comenzar este tutorial, configure el sitio siguiendo las instrucciones de “Configuración

rápida de sitios” en la página 17.

Este tutorial contiene las lecciones siguientes:

• “Creación y almacenamiento de una página nueva” en la página 27

• “Adición de un marcador de posición de imagen” en la página 29

• “Configuración del título de una página” en la página 31

• “Adición de texto con estilo” en la página 31

• “Adición de imágenes” en la página 35

• “Definición de los colores de fondo” en la página 36

• “Lecturas adicionales” en la página 37

Creación y almacenamiento de una página nueva

Después de configurar un sitio, puede crear páginas Web para llenarlo.
Si crea sus propias páginas desde cero, puede utilizar la página de inicio de Dreamweaver para

crear una página nueva o bien puede seleccionar Archivo > Nuevo para elegir entre una amplia
variedad de disposiciones de página predefinidas.

En este tutorial, sin embargo, se presupone que utiliza el diseño de página layout.html
proporcionado como parte del contenido de muestra de Dreamweaver.

27

Para abrir una página:

1 En el panel Archivos, amplíe la carpeta 1-Design y haga doble clic en el archivo layout.html.

La página layout.html aparecerá en una nueva ventana de documento. La página contiene el
texto marcador de posición “Lorem ipsum” para mostrar qué apariencia tendrá el diseño de la
página cuando se le añada texto.

2 Guarde la página con un nombre de archivo nuevo.

Para guardar la página:

1 Seleccione Archivo > Guardar como.
2 En el cuadro de diálogo Guardar como, busque y abra la carpeta 1-Design dentro de la carpeta

raíz local del sitio.
Recuerde que la carpeta raíz del sitio es la que ha creado al configurar el sitio en “Definir una

carpeta local mediante el asistente para la Definición del sitio” en la página 19.

3 Introduzca el nombre de archivo index.html.
4 Haga clic en Guardar para guardar el archivo en la carpeta 1-Design.

El nombre de archivo aparecerá ahora en la barra de título de la ventana, entre paréntesis,
después de las palabras “Documento sin título”.

28 Capítulo 3: Tutorial: Creación de una página estática

Adición de un marcador de posición de imagen

Ahora cree un marcador de posición que represente las imágenes que añadirá posteriormente.

Para añadir un marcador de posición de imagen:

1 Haga clic al principio de la columna de texto principal, justo antes de la palabra “Título” y

presione Intro (Windows) o Retorno (Macintosh) para crear una línea en blanco antes del título.
Seguidamente, haga clic en la nueva línea en blanco.

El punto de inserción deberá encontrarse ahora en una línea independiente. Si no es así, sitúe el
punto de inserción en la línea en blanco.

2 Seleccione Insertar > Objetos de imagen > Marcador de posición de imagen.
3 En el cuadro de diálogo Marcador de posición de imagen, introduzca un nombre para el

marcador de posición (por ejemplo, SplashImage).

Nota: los nombres de los marcadores de posición deberán comenzar con una letra y sólo podrán
contener letras y números.

4 Sin salir del cuadro de diálogo Marcador de posición de imagen, introduzca el ancho y el alto.

Para la página de Trio Motors, introduzca 176 para el ancho y 190 para el alto.

5 Deje en blanco los cuadros de texto Color y Texto alternativo.

Nota: es importante proporcionar texto alternativo para determinados tipos de imagen, con el fin
de ofrecer la información proporcionada por la imagen a los visitantes del sitio que utilicen lectores
de pantalla o navegadores que sólo admiten texto. Sin embargo, en el caso de las imágenes que
no proporcionan información, debe utilizar un atributo alt vacío. Si deja el cuadro de texto Texto
alternativo en blanco, Dreamweaver añade un atributo alt="" a la etiqueta img.

Adición de un marcador de posición de imagen 29

6 Haga clic en Aceptar.

Aparecerá un cuadro gris con las dimensiones especificadas. Se trata de un marcador de
posición para una imagen, utilizado a menudo para que resulte más fácil diseñar las páginas
cuando las imágenes finales todavía no están listas.

7 Haga clic en el encabezado “Lorem Ipsum Dolor” del principio de la página. En el selector de

etiquetas de la parte inferior de la ventana de documento, seleccione la etiqueta <h1 > y presione
Retroceso (Windows) o Eliminar (Macintosh).

El texto y la etiqueta h1 se eliminan.

8 Deje el punto de inserción donde está y repita los pasos del 2 al 6 para insertar otro marcador

de posición de imagen. En esta ocasión, asigne el nombre Banner al marcador de posición e
introduzca un ancho de 600 y un alto de 41. Posteriormente sustituirá este marcador de
posición por una imagen de rótulo en la parte superior de la página.

9 Guarde la página.

30 Capítulo 3: Tutorial: Creación de una página estática