Manual dreamweaver 8 spanish

Primeros pasos con Dreamweaver

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

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

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

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

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

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

Contenido

PARTE 1: INTRODUCCIÓN A DREAMWEAVER

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

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

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

PARTE 2: TUTORIALES

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

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

3

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

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

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

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

PARTE 3: TUTORIALES AVANZADOS

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

4 Contenido

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

Capítulo 9: Tutorial: Crear un diseño de página basado
en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Diseño de página basado en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
Examen de la maqueta de diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Creación y almacenamiento de una página nueva . . . . . . . . . . . . . . . .163
Insertar 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
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
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

6 Contenido

Apéndice F: Configuración del sitio JSP de muestra . . . . . . . . 303
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
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

1
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

9

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.

11

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.

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

12 Introducción

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

15

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.

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.


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.
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
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/ Dónde encontrarlo
Audiencia
Primeros Le ofrece una • Ver en Dreamweaver:
pasos con introducción básica a Seleccione Ayuda > Primeros
Dreamweaver los conceptos de pasos con Dreamweaver
Dreamweaver y a la • Ver en línea: http://
interfaz, con detallados livedocs.macromedia.com/go/
livedocs_dreamweaver_es/
tutoriales para
• Descargar el PDF:
principiantes. Dirigido a
www.macromedia.com/go/
usuarios principiantes, y
dw_documentation_es
también para usuarios
con nivel intermedio y
avanzado que quieran
conocer las nuevas
funciones.

Utilización de Información completa • Ver en Dreamweaver:
Dreamweaver sobre todas las Seleccione Ayuda > Ayuda de
funciones de Dreamweaver o Ayuda >
Dreamweaver. Dirigida Utilización de Dreamweaver
a todos los usuarios de • Ver en línea: http://
livedocs.macromedia.com/go/
Dreamweaver.
dw_documentation_es

Ampliación de Describe el marco de • Ver en Dreamweaver:
Dreamweaver trabajo de Seleccione Ayuda > Ampliación
Dreamweaver y la de Dreamweaver
interfaz de • Ver en línea: http://
programación de la livedocs.macromedia.com/go/
aplicación (API).
Destinado a usuarios
avanzados que quieren
dw_documentation_es
crear extensiones o
personalizar la interfaz
de Dreamweaver.

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

Título Descripción/ Dónde encontrarlo
Audiencia
Referencia Describe la utilidad API • Ver en Dreamweaver:
API de y el JavaScript API, que Seleccione Ayuda > Referencia
Dreamweaver le permiten realizar API de Dreamweaver
diversas tareas de • Ver en línea: http://
apoyo al desarrollar livedocs.macromedia.com/go/
extensiones de livedocs_dreamweaver_es/
Dreamweaver.
Destinado a usuarios
dw_documentation_es
avanzados que quieren
crear extensiones o
personalizar la interfaz
de Dreamweaver.

Utilización de Contiene una selección • Ver en Dreamweaver:
ColdFusion de los libros más Seleccione Ayuda > Utilización
importantes con de ColdFusion
documentación sobre • Ver en línea: http://
ColdFusion. (La lista livedocs.macromedia.com/go/
livedocs_coldfusion/
completa está
disponible en • Descargar el PDF:
LiveDocs.) Dirigido a
cf_documentation
todo aquel que esté
interesado en
ColdFusion, desde
principiantes hasta
desarrolladores
avanzados.
Referencia Contiene muchos tipos • Ver en Dreamweaver:
de manual de referencia Seleccione Ayuda > Referencia.
sobre HTML, modelos Para una lista completa de
de servidores y otros manuales, haga clic en el menú
emergente Libro en el panel
temas, casi todos
Referencia.
publicados por O’Reilly.
Destinado a todo aquel
que necesite más
información sobre
sintaxis de códigos,
conceptos, etc.


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/ Dónde encontrarlo
Audiencia
Centro de Notas técnicas, soporte www.macromedia.com/go/
soporte de e información sobre la dreamweaver_support_es
Dreamweaver resolución de
problemas para
usuarios de
Dreamweaver.

Centro de Artículos y tutoriales www.macromedia.com/go/
desarrollo de que le ayudarán a developer_dw_es
Dreamweaver mejorar sus
conocimientos y a
adquirir otros nuevos.
Centro de Manuales del producto www.macromedia.com/go/
recursos de en formato PDF, fe de dw_documentation_es
documenta- errores, tutoriales y
ción de notas de la versión.
Dreamweaver

Foros en Debates e información www.macromedia.com/go/
línea de sobre resolución de dreamweaver_newsgroup
Macromedia problemas
proporcionada por
usuarios de
Dreamweaver,
representantes del
servicio técnico y el
equipo de desarrollo de
Dreamweaver.

Formación de Cursos que ofrecen www.macromedia.com/go/
Macromedia ejercicios prácticos y dreamweaver_training_es
situaciones del mundo
real.

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.

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):

S U G ER E N C I A
Para buscar una
1. En la Ayuda de Dreamweaver, escriba una palabra o frase en el cuadro
frase específica,
de texto Preguntar y pulse Retorno. utilice comillas.
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):
B
SUGERENCIA

Puede empezar a
1. En Ayuda de Dreamweaver, haga clic en el vínculo Índice de la tabla de
escribir una palabra
contenidos. clave en el cuadro de
2. Haga clic en una letra y desplácese a una entrada del índice dentro de la texto para
lista. desplazarse
rápidamente a una
3. Haga clic sobre un número junto a la entrada para que aparezca la entrada del índice.
información correspondiente.

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.

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

CAPÍTULO 2

Aspectos básicos de
Dreamweaver
2
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

29

■ “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 Inspector de propiedades Panel Archivos

30 Aspectos básicos de Dreamweaver

N O TA

El espacio de trabajo de Windows también dispone de la opción
Codificador, que acopla los grupos de paneles en la parte izquierda y
muestra la ventana de documento en la vista Código de forma
predeterminada. Para más información, consulte “Utilización del espacio
de trabajo orientado al codificador (sólo en Windows)” en Utilización de
Dreamweaver. Para utilizar esta opción, consulte “Selección del diseño
del espacio de trabajo (sólo en Windows)” en la página 43.

En Macintosh, Dreamweaver puede mostrar varios documentos en una
sola ventana con fichas que identifican a cada uno de ellos. Dreamweaver
también puede aparecer como parte de un espacio de trabajo flotante en el
que cada documento aparece en su propia ventana individual. 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.

Barra de herramientas de documento
Ventana de documento Grupos de paneles
Barra Insertar

Selector de Inspector de propiedades Panel Archivos
etiquetas

Conocer el espacio de trabajo de Dreamweaver 8 31

Puede alternar entre diferentes diseños tanto en Windows como en
Macintosh. Para más información, consulte “Selección del diseño del
espacio de trabajo (sólo en Windows)” en la página 43 y “Visualización de
documentos en fichas (Macintosh)” en la página 44.

Ventana de documento
La ventana de documento muestra el documento actual. Puede elegir entre
una de las vistas siguientes:
La vista Diseño es un entorno de diseño para el diseño visual de la página,
la edición visual y el desarrollo rápido de aplicaciones. En esta vista,
Dreamweaver muestra una representación visual del documento
completamente editable, similar a la que aparecería en un navegador.
La vista Código es un entorno de codificación manual para escribir y
editar código HTML, JavaScript, código de lenguaje de servidor, como por
ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de
código. Para más información, consulte Capítulo 20, “Codificación en
Dreamweaver” en Utilización de Dreamweaver.
Es posible ver el mismo documento en las dos vistas, Código y Diseño, en
una sola ventana de documento.
Cuando la ventana de documento tiene una barra de título, ésta muestra el
título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se
han realizado cambios que aún no se han guardado, después del nombre
del archivo Dreamweaver incluye un asterisco.
Cuando se maximiza la ventana de documento en el diseño integrado de
espacio de trabajo (sólo Windows), no aparece la barra de título; en este
caso, el título de la página y el nombre y la ruta del archivo aparecen en la
barra de título de la ventana principal del espacio de trabajo.
Además, cuando una ventana de documento está maximizada, aparecen
fichas en la parte superior de la misma con los nombres de archivo de todos
los documentos abiertos. Para cambiar a un documento, haga clic en su
ficha.
Para más información sobre cómo utilizar la ventana de documento,
consulte Capítulo 1, “Exploración del espacio de trabajo” en Utilización de
Dreamweaver.


Barra de herramientas de Documento
La barra de herramientas de Documento contiene botones que permiten
alternar entre diferentes vistas del documento rápidamente: vista Código,
vista Diseño y una vista dividida que muestra las vistas Código y Diseño.
La barra de herramientas contiene también algunos comandos y opciones
relativos a la visualización del documento y a su transferencia entre los
sitios local y remoto.

Mostrar vista de código No hay errores de comprobación de navegador
Mostrar vistas de código y diseño Validar formato
Mostrar vista de diseño Administración de archivos

Ayudas visuales
Depuración del servidor Título del documento
Ver opciones
Actualizar vista de diseño
Vista previa/Depurar en explorador

En la barra de herramientas de Documento, aparecen las siguientes
opciones:
Mostrar vista de código sólo muestra la vista Código en la ventana de
documento.
Mostrar vistas de código y diseño muestra la vista Código en una parte
de la ventana de documento y la vista Diseño en la otra parte. Cuando
seleccione esta vista combinada, se encontrará disponible la opción Vista de
diseño encima del menú Ver. Utilice esta opción para especificar qué vista
debe aparecer en la parte superior de la ventana de documento.
Mostrar vista de diseño sólo muestra la vista Diseño en la ventana de
documento.
Depuración del servidor muestra un informe que le ayudará a depurar la
página de ColdFusion actual. El informe contiene los errores de la página,
si los hay.
Título del documento permite introducir un título para el documento, que
aparecerá en la barra de título del navegador. Si el documento ya tiene
título, éste aparecerá en dicho campo.
No hay errores de comprobación de navegador permite comprobar la
compatibilidad con distintos navegadores.


Validar formato permite validar el documento actual o una etiqueta
seleccionada.
Administración de archivos muestra el menú emergente Administración
de archivos.
Vista previa/Depurar en exploradorpermite ver una vista previa del
documento o depurarlo en un navegador. Seleccione un navegador en el
menú emergente.
Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios
en la vista Código. Los cambios realizados en la vista Código no aparecerán
de forma automática en la vista Diseño hasta que se efectúen determinadas
acciones, como guardar el archivo o hacer clic en este botón.
Ver opciones permite definir las opciones de las vistas Código y Diseño, y
establecer qué vista va a aparecer en la parte superior de la ventana. Las
opciones del menú corresponden a la vista actual: la vista Diseño, la vista
Código o ambas.
Ayudas visuales permite utilizar distintas ayudas visuales para el diseño de
las páginas.
Para más información sobre cómo utilizar la barra de herramientas de
Documento, consulte Capítulo 1, “Exploración del espacio de trabajo” en

Barra de estado
La barra de estado, situada en la parte inferior de la ventana de documento,
proporciona información adicional sobre el documento que está creando.

Tamaño del documento y
tiempo de descarga estimado

Menú emergente Tamaño de ventana
Selector de etiquetas Establecer nivel de aumento
Herramienta Zoom
Herramienta
Herramient Mano
Herramienta Seleccionar


El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la
selección actual. Haga clic en cualquier etiqueta de la jerarquía para
seleccionar la etiqueta y todo su contenido. Haga clic en <body> para
seleccionar todo el cuerpo del documento. Para definir los atributos class
o id para una etiqueta en el selector de etiquetas, haga clic con el botón de
derecho del ratón (Windows) o mantenga presionada la tecla Control y
haga clic (Macintosh) en la etiqueta y elija una clase o un ID del menú
contextual. El selector de etiquetas es el método más adecuado para
seleccionar etiquetas, porque le garantiza que siempre se está seleccionado
la etiqueta de manera precisa.
La herramienta Mano permite hacer clic en el documento y arrastrarlo
hasta la ventana de documento. Haga clic en la herramienta Seleccionar
para desactivar la herramienta Mano.
La herramienta Zoom y el menú emergente Establecer nivel de aumento
permiten establecer el nivel de ampliación del documento. Para más
información, consulte “Utilización de Acercar y Alejar” en Utilización de
Dreamweaver.
El menú emergente Tamaño de ventana (que sólo aparece en la vista
Diseño) permite cambiar el tamaño de la ventana de documento para que
adopte dimensiones predeterminadas o personalizadas. Para más
información, consulte “Cambio del tamaño de la ventana de documento”
en Utilización de Dreamweaver.
A la derecha del menú emergente Tamaño de ventana aparecen la
estimación del tamaño del documento y del tiempo de descarga de la
página, incluidos todos los archivos dependientes, como imágenes y otros
archivos multimedia. Para más información, consulte “Configuración de
las preferencias de tiempo de descarga y tamaño” en Utilización de
Dreamweaver.
Para más información sobre cómo utilizar la barra de estado, consulte
Capítulo 1, “Exploración del espacio de trabajo” en Utilización de
Dreamweaver.


Barra Insertar
La barra Insertar contiene botones para la creación e inserción de diversos
tipos de objetos, como tablas, capas e imágenes. Al pasar el puntero sobre
un botón, aparece una descripción de la herramienta con el nombre del
botón.
Los botones están organizados en categorías, a las que puede cambiar en la
parte izquierda de la barra Insertar. Si el documento actual contiene código
de servidor, como los documentos ASP o CFML, aparecen también otras
categorías. Cuando se inicia Dreamweaver, se abre la última categoría con
la que ha trabajado.

Algunas categorías tienen botones con menús emergentes. Al seleccionar
una opción de un menú emergente, dicha opción se convierte en la acción
predeterminada del botón. Por ejemplo, si selecciona Marcador de posición
de imagen en el menú emergente del botón Imagen, la siguiente vez que
haga clic en el botón Imagen, Dreamweaver insertará un marcador de
posición de imagen. Siempre que seleccione una nueva opción del menú
emergente cambiará la acción predeterminada del botón.
La barra Insertar está organizada en las categorías siguientes:
La categoría Común permite crear e insertar los objetos que se utilizan con
más frecuencia, como las imágenes y las tablas.
La categoría Diseño permite insertar tablas, etiquetas div, capas y marcos.
También puede elegir entre las tres vistas de las tablas: Estándar (valor
predeterminado), Tablas expandidas y Diseño. Si se selecciona el modo de
diseño, se pueden utilizar las herramientas de diseño de Dreamweaver:
Dibujar celda de diseño y Dibujar tabla de diseño.
La categoría Formularios contiene botones que permiten crear
formularios e insertar elementos de formulario.
La categoría Texto permite insertar diversas etiquetas de formato de texto
y listas, como b, em, p, h1 y ul.
La categoría HTML permite insertar etiquetas HTML para las reglas
horizontales, el contenido de la sección head, las tablas, los marcos y los
scripts.


Las categorías de código de servidor sólo están disponibles para las
páginas que emplean un lenguaje de servidor determinado, como ASP,
ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada
una de estas categorías contiene objetos de código de servidor que pueden
insertarse en la vista Código.
La categoría Aplicación permite insertar elementos dinámicos como
juegos de registros, regiones repetidas y grabar formularios de inserción y
actualización.
La categoría Elementos Flash permite insertar elementos de Macromedia
Flash.
La categoría Favoritos le permite agrupar y organizar los botones de la
barra Insertar que utiliza con más frecuencia en un lugar común.
Para más información sobre cómo utilizar la barra Insertar, consulte
Capítulo 1, “Exploración del espacio de trabajo” en Utilización de
Dreamweaver.


Barra de herramientas de Codificación
La barra de herramientas de Codificación contiene botones que le permiten
realizar numerosas operaciones de codificación estándar, como ampliar y
contraer las selecciones de código, resaltar código no válido, insertar o
eliminar comentarios, aplicar sangría al código e insertar fragmentos de
código utilizados recientemente. La barra de herramientas de Codificación
sólo está visible en la vista Código y aparece verticalmente en el lado
izquierdo de la ventana de documento.

No puede desacoplar ni mover la barra de herramientas de Codificación,
pero sí puede ocultarla. Para más información, consulte “Visualización de
barras de herramientas” en Utilización de Dreamweaver.
Para más información sobre cómo utilizar la barra de herramientas de
Codificación, consulte “Inserción rápida de código con la barra de
herramientas Codificación” en Utilización de Dreamweaver.


El Inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades más
comunes del elemento de página seleccionado actualmente, como texto o
un objeto insertado. El contenido del inspector de propiedades es distinto
en función del elemento seleccionado. Por ejemplo, si selecciona una
imagen en la página, el inspector de propiedades cambiará para mostrar las
propiedades de la imagen (como la ruta del archivo de imagen, el ancho y
alto de la imagen, el borde que la rodea, etc.).

El inspector de propiedades se encuentra en la parte inferior del espacio de
trabajo de forma predeterminada, pero puede colocarlo en la parte superior
si lo desea. También puede convertirlo en un panel flotante en el espacio de
trabajo. Para más información sobre cómo mover el Inspector de
propiedades, consulte “Acoplamiento y desacoplamiento de paneles y
grupos de paneles” en Utilización de Dreamweaver.
Para más información sobre cómo utilizar el Inspector de propiedades,
consulte “Utilización del inspector de propiedades” en Utilización de
Dreamweaver.


El panel Archivos
El panel Archivos se utiliza para ver y administrar los archivos del sitio de
Dreamweaver.

Al visualizar sitios, archivos o carpetas en el panel Archivos, puede cambiar
el tamaño del área de visualización y expandir o contraer el panel Archivos.
Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el
sitio remoto o el servidor de prueba como una lista de archivos. Cuando se
expande, muestra el sitio local, además del sitio remoto o el servidor de
prueba. El panel Archivos también puede mostrar un mapa visual del sitio
local.
Para sitios de Dreamweaver, también puede personalizar el panel Archivos
cambiando la vista (sitio local o sitio remoto) que aparece de forma
predeterminada en el panel contraído.
Para más información sobre cómo utilizar el panel Archivos para
administrar el sitio, consulte Capítulo 4, “Administración de archivos” en


El panel Estilos CSS
El panel Estilos CSS le permite supervisar las reglas y propiedades CSS que
afectan a un elemento de página actualmente seleccionado el modo Actual
o las reglas y propiedades que afectan a todo un documento, con el modo
Todo. Un botón situado en la parte superior del panel Estilos CSS le
permite cambiar entre estos dos modos. El panel Estilos CSS también le
permite modificar propiedades CSS tanto en modo Todo como en modo
Actual.

Puede cambiar el tamaño de cualquiera de los paneles arrastrando los
bordes que separan un panel de otro.
En modo Actual, el panel Estilos CSS muestra tres secciones: un resumen
del panel Selección que muestra las propiedades de CSS de la selección
actual del documento, un panel Reglas que muestra la ubicación de las
propiedades seleccionadas (o una cascada de reglas para la etiqueta
seleccionada, en función de la selección) y un panel Propiedades que le
permite editar las propiedades CSS al definir reglas para la selección.


En modo Todo, el panel Estilos CSS muestra tres secciones: un panel
Todas las reglas arriba y un panel Propiedades abajo. El panel Todas las
reglas muestra una lista de reglas definidas en el documento actual, así
como las reglas definidas en las hojas de estilo adjuntas al documento
actual. El panel Propiedades le permite editar propiedades CSS para
cualquier regla seleccionada en el panel Todas las reglas.
Todos los cambios que realice en el panel Propiedades se aplican de forma
inmediata; de este modo, puede previsualizar el trabajo a medida que lo
vaya llevando a cabo.
Para más información sobre el panel Estilos CSS, consulte “Acerca del
panel Estilos CSS” en Utilización de Dreamweaver.

Personalización del espacio de
trabajo de Dreamweaver 8
Existen algunas técnicas básicas que permiten personalizar Dreamweaver
para que se ajuste a sus necesidades sin necesidad de conocer código
complejo o editar archivos de texto.
■ “Selección del diseño del espacio de trabajo (sólo en Windows)” en
la página 43
■ “Visualización de documentos en fichas (Macintosh)” en la página 44
■ “Cómo ocultar y mostrar la página de inicio” en la página 45


Selección del diseño del espacio de
trabajo (sólo en Windows)
En Windows, puede escoger el diseño del espacio de trabajo del codificador
o el del diseñador. La primera vez que se inicia Dreamweaver, un cuadro de
diálogo le permite elegir un diseño para el espacio de trabajo. Puede pasar
de un espacio de trabajo a otro en cualquier momento.

Para elegir un diseño del espacio de trabajo la primera vez que
se inicia Dreamweaver:
1. Seleccione uno de los siguientes diseños:
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 más grande, con los grupos de paneles
apilados a la derecha.
Codificador es el mismo espacio de trabajo integrado, pero con los
grupos de paneles apilados a la izquierda; es un diseño similar al que
utiliza Macromedia HomeSite y Macromedia ColdFusion Studio, en el
que las ventanas de documentos muestran de forma predeterminada la
vista de código.
NO T A

Puede acoplar los grupos de paneles a ambos lados del espacio de
trabajo en cualquiera de los diseños del espacio de trabajo.

2. Haga clic en Aceptar.

Para cambiar a un espacio de trabajo distinto del que ha
elegido:
■ Seleccione Ventana > Diseño del espacio de trabajo y seleccione el
diseño del espacio de trabajo que prefiera.
Además de seleccionar Codificador y Diseñador, puede seleccionar Pantalla
doble. Si dispone de un monitor secundario, la opción Pantalla doble
coloca todos los paneles en el monitor y conserva la ventana de documento
en el monitor principal.

Personalización del espacio de trabajo de Dreamweaver 8 43

Visualización de documentos en fichas
(Macintosh)
En Macintosh, Dreamweaver puede mostrar varios documentos en una
sola ventana de documento mediante las fichas que identifican a cada uno
de ellos. Dreamweaver también puede mostrarlos como parte de un espacio
de trabajo flotante en el que cada documento aparece en su propia ventana.

Para abrir un documento que se encuentra en una ficha en una
ventana independiente:
■ Haga clic en la ficha con el botón derecho del ratón o haga clic
mientras presiona la tecla Control y seleccione Mover a nueva ventana
en el menú contextual.

Para combinar documentos independientes en ventanas con
fichas:
■ Seleccione Ventana > Combinar como fichas.

Para cambiar la configuración predeterminada de documento
en ficha:
1. Seleccione Dreamweaver > Preferencias y, posteriormente, seleccione la
categoría General.
2. Seleccione o anule la selección de Abrir documentos en fichas y haga clic
en Aceptar.
N OT A

Dreamweaver no modifica la visualización de documentos que están
actualmente abiertos al cambiar las preferencias. No obstante, los
documentos que se abran después de seleccionar una nueva preferencia
se mostrarán conforme a la preferencia seleccionada.


Cómo ocultar y mostrar la página de inicio
La página de inicio de Dreamweaver aparece al iniciar Dreamweaver y
siempre que no se tiene abierto ningún documento. Puede optar por
ocultar la página de inicio y volver a mostrarla posteriormente. Cuando la
página de inicio está oculta y no se tienen documentos abiertos, la ventana
de documento está en blanco.

Para ocultar la página de inicio:
■ Seleccione en la página de inicio la casilla de verificación No volver a
mostrar.
La página de inicio no aparecerá al iniciar Dreamweaver ni después de
abrir y cerrar un documento.

Para mostrar la página de inicio:
1. Seleccione Edición > Preferencias (Windows) o Dreamweaver >
Preferencias (Macintosh).
El cuadro de diálogo Preferencias aparece y muestra la categoría de
preferencias General.
2. Seleccione la casilla de verificación Mostrar página de inicio.
La página de inicio aparece al iniciar Dreamweaver o después de abrir y
cerrar un documento.

Realización de tareas básicas
con Dreamweaver 8
En esta sección se explica cómo realizar tareas básicas como crear, abrir y
guardar archivos. Para más información, consulte Capítulo 3, “Cómo crear
y abrir documentos” en Utilización de Dreamweaver.
■ “Archivos de Dreamweaver” en la página 46
■ “Crear nuevos archivos con Dreamweaver” en la página 47
■ “Guardar archivos con Dreamweaver” en la página 48
■ “Apertura de archivos en Dreamweaver” en la página 48

Realización de tareas básicas con Dreamweaver 8 45

Archivos de Dreamweaver
En Dreamweaver, puede trabajar con distintos tipos de archivo. El
principal tipo de archivo de trabajo es el archivo HTML. Los archivos
HTML — o archivos en Lenguaje de formato de hipertexto — incluyen
un lenguaje basado en etiquetas que es el responsable de mostrar la página
Web a través del navegador. Puede guardar archivos HTML con las
extensiones .html o .htm. Dreamweaver guarda los archivos utilizando por
defecto la extensión .html.
En Dreamweaver también se trabaja con los siguientes tipos de archivo:
CSS, o archivos de hojas de estilos en cascada, que tienen la extensión .css.
Se utilizan para dar formato al contenido HTML y para definir la situación
de diversos elementos de la página. Para más información sobre cómo
trabajar con estos tipos de archivos, consulte “Aspectos básicos de las hojas
de estilos en cascada” en Utilización de Dreamweaver.
GIF, o archivos de Formato de intercambio de gráficos, que tienen la
extensión .gif. El formato GIF es un formato gráfico popular en la Web
para cómics, logotipos, gráficos con zonas transparentes y animaciones. Los
GIFs tienen un máximo de 256.
JPEG, o archivos de Grupo conjunto de expertos fotográficos (bautizado
con el nombre de la organización que creó el formato), que tienen la
extensión .jpg y suelen ser fotografías o imágenes ricas en color. El formato
JPEG es más adecuado para fotografías digitales o escaneadas, imágenes
con texturas, imágenes con gradaciones de color y cualquier imagen que
necesite más de 256 colores.
XML, o archivos en lenguaje de formato ampliable, que tienen la extensión
.xml. Estos archivos contienen datos en su forma original que se pueden
formatear utilizando XSL (Lenguaje de hojas de estilo ampliable). Para más
información sobre cómo trabajar con estos tipos de archivos, consulte
Capítulo 36, “Visualización de datos XML en páginas Web” en Utilización
de Dreamweaver.
XML, o archivos de lenguaje de hojas de estilo ampliable, que tienen la
extensión .xslt. Se utilizan para dar estilo a los datos en formato XML que
se quieran visualizar en una página Web. Para más información sobre cómo
trabajar con estos tipos de archivos, consulte Capítulo 36, “Visualización
de datos XML en páginas Web” en Utilización de Dreamweaver.


CFML, o archivos en lenguaje de formato ColdFusion, que tienen la
extensión .cfm. Se utilizan para procesar páginas dinámicas. Para más
información sobre cómo trabajar con estos tipos de archivos, consulte
Capítulo 40, “Creación rápida de aplicaciones de ColdFusion” en
ASPX, o archivos ASP.NET, que tienen la extensión .aspx. Se utilizan para
procesar páginas dinámicas. Para más información sobre cómo trabajar con
estos tipos de archivos, consulte Capítulo 41, “Creación rápida de
aplicaciones ASP.NET” en Utilización de Dreamweaver.
PHP o PHP: archivos de procesador de hipertexto, que tienen la extensión
,
.php. Se utilizan para procesar páginas dinámicas. Para más información
sobre cómo trabajar con estos tipos de archivos, consulte Capítulo 43,
“Creación rápida de aplicaciones PHP” en Utilización de Dreamweaver.

Crear nuevos archivos con Dreamweaver
En esta sección se explica cómo crear un nuevo documento en blanco con
Dreamweaver.
También puede crear nuevos documentos con Dreamweaver basándose en
un archivo de diseño de Dreamweaver o en una plantilla ya existente. Para
más información, consulte “Creación de documentos nuevos” en

Para crear un documento nuevo en blanco:
1. Seleccione Archivo> Nuevo.
Aparecerá el cuadro de diálogo Nuevo documento. La ficha General ya
aparece seleccionada.
2. En la lista Categoría, seleccione Página básica, Página dinámica, Página
de plantilla, Otro o Conjuntos de marcos. A continuación, en la lista de
la derecha, seleccione el tipo de documento que desea crear.
Por ejemplo, seleccione Página básica para crear un documento HTML
o elija Página dinámica para crear un documento ColdFusion o ASP,
etc.
Para más información sobre las opciones de este cuadro de diálogo,
haga clic en el botón Ayuda del mismo.
3. Haga clic en el botón Crear.
El documento nuevo se abrirá en la ventana del documento.

Realización de tareas básicas con Dreamweaver 8 47

4. Guarde el documento (véase “Guardar archivos con Dreamweaver” en
la página 48).

Guardar archivos con Dreamweaver
Al crear un documento nuevo, es necesario guardarlo.

Para guardar un documento nuevo:
1. Seleccione Archivo > Guardar.
2. En el cuadro de diálogo que aparece a continuación, vaya hasta la
S U G E R E N CI A

Es recomendable
carpeta en la que desea guardar el archivo.
guardar el archivo en
un sitio de 3. En el cuadro de texto Nombre de archivo, introduzca un nombre para
Dreamweaver. Para el archivo.
más información,
Evite utilizar espacios y caracteres especiales en los nombres de archivos
consulte Capítulo 3,
“Tutorial: y carpetas. Asimismo, no comience los nombres de los archivos con
Configuración del números. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni
sitio y de los archivos signos de puntuación (como dos puntos, barras inclinadas o puntos) en
del proyecto”, en los nombres de archivos que desee colocar en un servidor remoto;
la página 51.
muchos servidores cambian estos caracteres durante la carga, lo que
provoca que se rompan los vínculos existentes con los archivos.
4. Haga clic en Guardar.

Apertura de archivos en Dreamweaver
En Dreamweaver, se puede abrir y editar documentos con gran facilidad.
Para abrir un archivo:
1. Seleccione Archivo > Abrir.
2. En el cuadro de diálogo Abrir, seleccione el archivo y haga clic en Abrir.


2
PARTE 2

Tutoriales

La Parte Dos de este libro contiene cinco tutoriales básicos que le ayudan a
realizar los distintos pasos de que consta la creación de una página Web. La
página Web que creará es la página principal de Cafe Townsend, un
restaurante ficticio.
Tutorial: Configuración del sitio y de los archivos del proyecto . . 51
Tutorial: Crear un diseño de página basado en tablas . . . . . . . . . .59
Tutorial: Adición de contenido a las páginas . . . . . . . . . . . . . . . . . . 79
Tutorial: Formatear la página con CSS . . . . . . . . . . . . . . . . . . . . . . 107
Tutorial: Publicación del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

49

CAPÍTULO 3

Tutorial: Configuración del sitio
y de los archivos del proyecto
3
Este tutorial le presenta el concepto de sitio de Macromedia Dreamweaver
8 y le enseña a configurar los archivos del proyecto del sitio de muestra
Cafe Townsend. 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). El panel Archivos de Dreamweaver se utiliza para administrar los
archivos del sitio.
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 que puedan ser
vistas a través de la Web. En este tutorial sólo aprenderá a configurar el sitio
local, de manera que pueda comenzar a crear directamente páginas Web.
Más adelante, una vez creado el sitio Web, aprenderá a crear un sitio
remoto para poder cargar los archivos a un servidor Web.
En este tutorial va a realizar las tareas siguientes:
Conozca los sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 52
Configuración de los archivos del proyecto . . . . . . . . . . . . . . . . . . . 53
Defina una carpeta local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

51

Conozca los sitios de
Dreamweaver
En Dreamweaver, el término sitio se emplea para referirse tanto a un sitio
Web como a una ubicación de almacenamiento local de los documentos
que pertenecen a un sitio Web. Esto último es lo que tiene que establecer
antes de comenzar a crear su sitio Web. Un sitio de Dreamweaver organiza
todos los documentos asociados a su sitio Web y le permite controlar y
mantener vínculos, administrar y compartir archivos, y transferir los
archivos del sitio a un servidor Web.
NO TA

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

Un sitio de Dreamweaver consta de un máximo de tres partes, según el
entorno informático y el tipo de sitio Web que se desarrolle:
La carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta
se conoce como sitio local. La carpeta local suele ser una carpeta situada en
su disco duro.
En la carpeta remota se almacenan los archivos, según el entorno, para
fines de prueba, producción, colaboración y publicación. En Dreamweaver
esta carpeta se conoce como sitio remoto. La carpeta remota es una carpeta
situada en el equipo donde se ejecuta el servidor Web. El equipo donde
reside el servidor Web suele ser (aunque no siempre) el sistema que permite
que su sitio web esté disponible públicamente en la Web.
La carpeta para páginas dinámicas (carpeta del servidor de prueba) es
la carpeta donde Dreamweaver procesa las páginas dinámicas. Esta carpeta
suele coincidir con la carpeta remota. Sólo tendrá que preocuparse por esta
carpeta si desarrolla una aplicación Web. Para más información sobre cómo
utilizar la carpeta del servidor de prueba, consulte “Especificación de dónde
pueden procesarse las páginas dinámicas” en Utilización de Dreamweaver.

52 Tutorial: Configuración del sitio y de los archivos del proyecto

Puede configurar un sitio de Dreamweaver utilizando el asistente para la
Definición del sitio, que le orientará paso a paso a través del proceso de
configuración, o utilizando las opciones avanzadas de Definición del sitio,
que le permitirán configurar individualmente, según sea necesario, las
carpetas local, remota y de pruebas. En este tutorial utilizará las opciones
avanzadas de Definición del sitio para configurar una carpeta local para los
archivos del proyecto. Más adelante aprenderá a configurar una carpeta
remota, para que pueda publicar las páginas en un servidor Web y ponerlas
a disposición pública.
Para más información sobre cómo utilizar el asistente para la definición del
sitio para configurar un sitio de Dreamweaver, consulte “Configuración de
un sitio de Dreamweaver nuevo” en Utilización de Dreamweaver.
Para más información sobre la configuración de un sitio remoto, consulte
Capítulo 7, “Tutorial: Publicación del sitio”.
Para más información sobre los sitios de Dreamweaver en general, consulte
“Configuración de un sitio de Dreamweaver” en el apartado Utilización de
Dreamweaver.

Configuración de los archivos del
proyecto
Cuando cree un sitio local, puede colocar los activos existentes (imágenes u
otro tipo de contenido) en la carpeta raíz del sitio local (la carpeta principal
del sitio). Posteriormente, cuando esté listo para añadir contenido a las
páginas, tendrá los activos disponibles y listos para ser utilizados.

Los archivos de muestra incluidos con Dreamweaver contienen activos para
el sitio Web de muestra que creará con estos tutoriales de Primeros pasos con
Dreamweaver. 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.

Configuración de los archivos del proyecto 53

1. Cree una nueva carpeta llamada local_sites en su disco duro.
Por ejemplo, cree una carpeta llamada local_sites en una de estas dos
ubicaciones:
■ En Windows: C:Documents and
Settingssu_nombre_de_usuarioMis documentoslocal_sites
■ En Macintosh: Macintosh HD/Users/su_nombre_de_usuario/
Documents/local_sites
N OT A

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 cafe_townsend 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:
■ En Windows: C:Archivos de programaMacromediaDreamweaver
8Tutorial_assetscafe_townsend.
■ En Macintosh: Macintosh HD/Applications/Macromedia
Dreamweaver 8/Tutorial_assets/cafe_townsend.
A c er c a d e. ..

Carpetas locales y carpetas remotas "raíz" La carpeta "raíz" local del sitio Dreamweaver suele ser la
carpeta principal o la carpeta de nivel superior de su sitio Web. Suele corresponderse con una carpeta
idéntica situada en el sitio remoto (servidor Web). La carpeta raíz también suele definir la primera parte
de la URL del sitio Web, después del nombre de dominio. Por ejemplo, si su carpeta raíz local se llama
misitioweb, y tiene una carpeta raíz idéntica en el sitio remoto, la URL de su sitio Web será algo como
http://www.yahoo.com/misitioweb.
En algunos casos, la carpeta raíz local podría no tener un nombre exacto equivalente en el sitio remoto.
Por ejemplo, si usted es propietario del dominio www.misitioweb.com, con un directorio raíz remoto
llamado public_html, su carpeta raíz local podría seguir llamándose misitioweb. Los archivos en los
directorios local y remoto raíz serían idénticos; lo único diferente sería los nombres de las carpetas
(public_html en el sitio remoto y misitioweb en el equipo local).

3. Copie la carpeta cafe_townsend en la carpeta local_sites.
La carpeta cafe_townsend es la carpeta que va a utilizar como carpeta
raíz (carpeta principal) para su sitio de Dreamweaver.


Defina una carpeta local
Debe definir una carpeta local de Dreamweaver para cada sitio Web nuevo
que cree. La carpeta local es la carpeta utilizada para almacenar copias de
trabajo de los archivos del sitio en el disco duro. Si no define una carpeta
local, algunas funciones de Dreamweaver podrían no funcionar
correctamente.
Además, al definir una carpeta local podrá también administrar archivos y
transferirlos entre el disco local y el servidor Web utilizando distintos
métodos de transferencia de archivos.
Ahora va a definir la carpeta cafe_townsend que copió en su carpeta local
llamada local_sites.
1. Inicie Dreamweaver y seleccione Sitio > Administrar sitios.
Aparece el cuadro de diálogo Administrar sitios.
2. Haga clic en el botón Nuevo y seleccione Sitio.
Aparecerá el cuadro de diálogo Definición del sitio.
3. Si aparece el asistente (ficha Básicas), haga clic en la ficha Avanzadas y
seleccione Datos locales en la lista Categoría (que debe ser la opción
predeterminada).
4. En el cuadro de texto Nombre del sitio, introduzca Cafe Townsend
como nombre del sitio.
5. En el cuadro de texto Carpeta raíz local, especifique la carpeta
cafe_townsend que copió en la carpeta local_sites en el apartado
anterior.
Puede hacer clic en el icono de la carpeta para examinar y seleccionar la
carpeta, o introducir una ruta en el cuadro de texto Carpeta raíz local.
6. En el cuadro de texto Carpeta predeterminada de imágenes, especifique
la carpeta de imágenes que ya existe en la carpeta cafe_townsend.
Puede hacer clic en el icono de la carpeta para examinar y seleccionar la
carpeta, o introducir una ruta en el cuadro de texto Carpeta
predeterminada de imágenes.

Defina una carpeta local 55

El cuadro de diálogo Definición de sitio debe parecerse ahora al
siguiente.

Aparecerá el cuadro de diálogo Administrar sitios, en el que se muestra
el nuevo sitio.
8. 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.

Para más información sobre cómo funciona el panel Archivos, consulte “El
panel Archivos” en la página 40.
Ya ha definido una carpeta raíz local para el sitio. La carpeta raíz local es el
punto de su equipo local donde almacena las copias de trabajo de sus
páginas Web. Más adelante, si quiere publicar sus páginas y hacerlas
públicas, deberá definir una carpeta remota, es decir, un lugar en un equipo
remoto donde resida un servidor Web y donde se almacenen las copias
publicadas de sus archivos locales.
Puede seguir el resto de los tutoriales de esta guía para crear el sitio de
muestra de Cafe Townsend, o bien puede trabajar en sus propias páginas
Web. 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.
Para más información, consulte Capítulo 7, “Tutorial: Publicación
del sitio”.

Defina una carpeta local 57

CAPÍTULO 4

Tutorial: Crear un diseño de
página basado en tablas 4
Este tutorial explica cómo crear un diseño de página basado en tablas con
Macromedia Dreamweaver 8. Un diseño de página determina cómo va a
aparecer la página en el navegador, mostrando, por ejemplo, la situación de
los menús, las imágenes, y el contenido de Macromedia Flash.
Las tablas constituyen una herramienta muy eficaz para presentar datos de
tabla y establecer el diseño de texto y gráficos en una página HTML. Puede
utilizar las tablas para crear su propio diseño de un modo rápido y sencillo.
En este tutorial, va a crear varias tablas en un nuevo documento de
Dreamweaver. Las filas y celas de las tablas sirven de cuadros contenedores
para el contenido que añadirá posteriormente.
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

Examen de la maqueta de diseño
Lo habitual no es empezar a construir un sitio Web iniciando
Dreamweaver y creando páginas directamente. Los primeros pasos para
crear un sitio Web debe darlos sobre una hoja de papel, o en una aplicación
de edición gráfica como Macromedia Fireworks. Los diseñadores gráficos
suelen crear un boceto artístico general del sitio Web (también conocido
como “maqueta”), con el fin de mostrárselo al cliente y asegurarse de que la
idea inicial para el sitio Web recibe la aprobación del cliente.

59

Una maqueta está formada por una cantidad indeterminada de elementos
de páginas que el cliente ha solicitado para su sitio Web. Por ejemplo, el
cliente podría haber dicho: "quiero un logotipo en la parte superior de la
página, una zona de navegación que enlace con estas otras páginas, una
sección para una tienda online y una parte donde pueda insertar
videoclips.” A partir de esto, el diseñador comienza a planificar el diseño de
la página y realiza bocetos de páginas de muestra que cumplen los
requisitos del cliente.
Este tutorial le proporciona una maqueta completa y aprobada para Cafe
Townsend, un restaurante ficticio que ha solicitado un sitio Web. Su
trabajo como diseñador Web consiste en transformar el comp en una
página web activa (probablemente contando con la ayuda de otros
diseñadores gráficos y desarrolladores de Flash).

60 Tutorial: Crear un diseño de página basado en tablas

Verá que el diseñador gráfico le ha proporcionado un comp para una
página Web que incluye varias zonas de contenido, así como algunas ideas
gráficas. A lo largo de los apartados siguientes, va a utilizar Dreamweaver
para desarrollar este diseño.
También puede abrir el archivo comp original para verlo en la pantalla del
equipo. El archivo comp, homepage-mockup.jpg, puede encontrarlo en la
carpeta fireworks_assets dentro de la carpeta cafe_townsend que copió a su
disco duro en el apartado Capítulo 3, “Tutorial: Configuración del sitio y
de los archivos del proyecto”. Si lo prefiere, también puede imprimir el
comp para tenerlo delante mientras crea la página.

Creación y almacenamiento de
una página nueva
Después de crear un sitio nuevo y examinar los comps, ya puede empezar a
crear páginas Web. Comience creando una página nueva y guardándola en
la carpeta raíz local cafe_townsend de su sitio Web. Más adelante esta
página será la página de inicio de Cafe Townsend, un restaurante ficticio.
Si no ha creado una carpeta raíz local llamada cafe_townsend, deberá
hacerlo antes de continuar. Para instrucciones, consulte Capítulo 3,
“Tutorial: Configuración del sitio y de los archivos del proyecto”.
1. En Dreamweaver, Seleccione Archivo > Nuevo.
2. En la ficha General del cuadro de diálogo Nuevo documento, seleccione
Página básica en la lista Categoría, seleccione HTML en la lista Página
básica y haga clic en Crear.
3. Seleccione Archivo > Guardar como.
4. En el cuadro de diálogo Guardar como, busque y abra la carpeta
cafe_townsend que definió como carpeta raíz local del sitio.
Esta carpeta la creó en Capítulo 3, “Tutorial: Configuración del sitio y
de los archivos del proyecto”, dentro de una carpeta llamada local_sites.
5. Escriba index.html en el cuadro de texto Nombre de archivo y haga clic
en Guardar.
El nombre de archivo aparecerá ahora en la barra de título en la parte
superior de la ventana de la aplicación.

Creación y almacenamiento de una página nueva 61

6. En el cuadro de texto Título del documento en la parte superior del
nuevo documento, escriba Cafe Townsend.

Éste es el título de la página (distinto al nombre de archivo). Los
visitantes del sitio verán este título en la barra del título del navegador
cuando accedan a ella a través de su navegador Web.
7. Seleccione Archivo > Guardar para guardar la página.

Inserción de tablas
A continuación, vamos a introducir una tabla que incluirá texto, gráficos y
activos de Macromedia Flash.
1. Haga clic una vez en la página para colocar el punto de inserción en la
esquina superior izquierda de la página.

2. Seleccione Insertar> Tabla.
3. En el cuadro de diálogo Tabla, siga este procedimiento:
■ Escriba 3 en el cuadro de texto Filas.
■ Escriba 1 en el cuadro de texto Columnas.
■ Escriba 700 en el cuadro de texto Ancho de tabla.
■ Seleccione Píxeles en el menú emergente Ancho de tabla.
■ Escriba 0 en el cuadro de texto Grosor del borde.
■ Escriba 0 en el cuadro de texto Relleno de celda.
■ Escriba 0 en el cuadro de texto Espacio entre celdas.


Aparece en su documento una tabla con tres filas y una columna. La
tabla tiene 700 píxeles de ancho, sin bordes, relleno de celda ni espacio
entre celdas.

Inserción de tablas 63

A c er c a d e. . .

Más información sobre las tablas Las tablas constituyen una herramienta muy eficaz para presentar
datos de tabla y establecer el diseño de texto y gráficos en una página HTML. Una tabla consta de una o
varias filas, cada una de las cuales consta, a su vez, de una o más celdas. Al crear filas múltiples con
celdas múltiples, las celdas formal columnas. Técnicamente, una celda es una división dentro de una fila
horizontal, y una columna es una acumulación vertical de estas divisiones de celdas.
Dreamweaver muestra el ancho de la tabla y de cada columna en el Selector de tablas (marcado con
líneas verdes) cuando se selecciona una tabla o cuando el punto de inserción está en ella.

Junto a los anchos se encuentran flechas para el menú de encabezado de la tabla y los menús de
encabezado de las columnas. Puede utilizar los menús para acceder rápidamente a determinados
comandos relacionados con tablas. También puede activar o desactivar la vista de los anchos y los
menús seleccionando Ver > Ayudas visuales > Anchos de tabla.
Las tablas pueden tener bordes, y las celdas de una tabla pueden tener relleno, espaciado o ambos. El
relleno de celda determina el número de píxeles entre el contenido de una celda y los límites de la misma.
El espacio entre celdas determina el número de píxeles entre celdas contiguas de una tabla.
Si no se especifican de forma explícita los valores de relleno y espaciado de celda, la mayoría de los
navegadores mostrará la tabla como si el valor de relleno de celda fuera 1 y el de espaciado de celda fuera
2. Si quiere asegurarse de que los navegadores muestran la tabla sin relleno ni espaciado, establezca 0
como valor de ambos atributos.
Para más información sobre tablas, consulte el Capítulo 8, “Presentación de contenido en tablas” en

5. Haga clic una vez a la derecha de la tabla para anular la selección.
6. Seleccione Insertar> Tabla para insertar otra tabla.
7. En el cuadro de diálogo Insertar tabla, siga este procedimiento para la
segunda tabla:


Aparece una segunda tabla con una fila y tres columnas debajo de la
primera tabla.

9. Haga clic a la derecha de la tabla para anular la selección.
10. Inserte una tercera tabla seleccionando Insertar > tabla e introduciendo
los siguientes valores en el cuadro de diálogo Insertar tabla:
Aparece una tercera tabla con una fila y una columna debajo de la
segunda tabla.

Haga clic a la derecha de la tabla para anular la selección. La página
creada debe ser parecida a la siguiente:

Inserción de tablas 65

N O TA
Es posible que se vea el Selector de tablas (señalado con líneas verdes)
después de insertar una tabla. Puede hacer desaparecer el Selector de
tablas haciendo clic fuera de la tabla. También puede desactivar el
Selector de tablas seleccionando Ver > Ayudas visuales > Anchos de tabla.

Establecimiento de las
propiedades de una tabla
Ahora va a definir propiedades específicas de la tabla utilizando el modo de
tablas expandidas, una función que añade temporalmente relleno y
espaciado de celdas a las tablas y aumenta los bordes, para así simplificar la
edición. Específicamente, permite colocar el punto de inserción de manera
precisa, sin seleccionar accidentalmente la tabla equivocada o el contenido
de otra tabla.
N OT A

Una vez concluida la definición de propiedades de la tabla en el modo de
tablas expandidas, regrese siempre al Modo estándar. El modo de tablas
expandidas no es un entorno WYSIWYG, por lo que algunas operaciones,
como el cambio de tamaño, no producirán el resultado esperado.

1. Seleccione Ver > Modo de tabla > Modo de tablas expandidas.
NO TA

Si aparece el cuadro de diálogo Introducción al modo de tablas
expandidas, haga clic en Aceptar.


2. Haga clic una vez dentro de la primera fila de la primera tabla.

3. En el inspector de propiedades (Ventana> Propiedades), introduzca 90
en el cuadro de texto Alto de celda (Al) y presione Intro (Windows) o
Retorno (Macintosh).
N OT A

Si no aparece el cuadro de texto Alto de celda, haga clic en la flecha de
ampliación situada en la esquina inferior derecha del inspector de
propiedades.

4. Haga clic una vez dentro de la segunda fila de la primera tabla.

5. En el inspector de propiedades, introduzca 166 en el cuadro de texto
Alto de celda y presione Intro (Windows) o Retorno (Macintosh).

Establecimiento de las propiedades de una tabla 67

6. Haga clic una vez dentro de la tercera fila de la primera tabla.
7. En el inspector de propiedades, introduzca 24 en el cuadro de texto Alto
de celda y presione Intro (Windows) o Retorno (Macintosh).
Ahora debe tener tres filas de alturas diferentes en la primera tabla.

A continuación vamos a definir las propiedades de la segunda tabla (la
que consta de tres columnas).


8. Haga clic una vez dentro de la primera columna de la segunda tabla.

Ancho de celda (An) y presione Intro (Windows) o Retorno
(Macintosh).
10. Haga clic una vez dentro de la segunda columna de la segunda tabla.


Ancho de celda y presione Intro (Windows) o Retorno (Macintosh).

12. Defina el ancho de la tercera columna con un valor de 230 píxeles.
Si el Selector de tablas está activado (Ver > Ayudas visuales > Anchos de
tabla), podrá ver sobre las columnas de la tabla respectivas los tres
valores en píxeles que acaba de introducir.
No va a introducir valores para la altura de las celdas de esta tabla
porque la altura de dichas celdas variará dependiendo del contenido
que agregue más adelante.
13. Por último, haga clic dentro de la última tabla (la que tiene una fila y
una columna).


14. En el inspector de propiedades, introduzca 24 en el cuadro de texto Alto
de celda y presione Intro (Windows) o Retorno (Macintosh).
El diseño creado debe ser parecido al siguiente:

15. Haga clic en el vínculo Salir de modo de tablas expandidas en la parte
superior de la ventana de documento para regresar al Modo estándar.
16. Guarde la página.


Inserción de un marcador de
posición de imagen
Un marcador de posición de imagen es un gráfico que se utiliza hasta que el
gráfico definitivo está listo para su incorporación a la página Web. Un
marcador de posición de imagen puede resultar útil al crear el diseño de
página, pues permite colocar una imagen en una página antes de crear la
imagen.
1. En la ventana de documento, haga clic una vez dentro de la primera fila
de la primera tabla.
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, siga este
procedimiento:
■ Escriba banner_graphic en el cuadro de texto Nombre.
■ Escriba 700 en el cuadro de texto Ancho.
■ Escriba 90 en el cuadro de texto Alto.
■ Haga clic en el cuadro de color y seleccione un color en el selector
de color. Para este tutorial, seleccione un marrón rojizo (#993300).
■ Deje en blanco el cuadro de texto Texto alternativo.
A c er c a d e. ..

Nota sobre el texto alternativo El texto alternativo es una descripción textual de una imagen en una
página Web. Forma parte del código HTML y no se muestra en la página. Es importante proporcionar
texto alternativo para la mayoría de sus imágenes, 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.
En los gráficos de rótulo, que sólo suelen mostrar el logotipo en la página Web, no es esencial
proporcionar texto alternativo. Si deja el cuadro de texto Texto alternativo en blanco en el cuadro de
diálogo Marcador de posición de imagen, Dreamweaver añade un atributo alt="" a la etiqueta img. Si
posteriormente decide que quiere añadir texto alternativo a una imagen, puede seleccionar la imagen e
introducir el texto alternativo en el inspector de propiedades. Por ejemplo, si más adelante cambia el
logotipo añadiendo un número de teléfono dirección, podría incluir esta información en el texto
alternativo.


A ce r ca d e . ..

Marcadores de posición de imagen Un marcador de posición de imagen es un gráfico que se utiliza
hasta que el gráfico definitivo está listo para su incorporación a la página Web; no es una imagen gráfica
que se puede ver en el navegador. Antes de publicar el sitio, reemplace todos los marcadores de posición
de imágenes que haya añadido por archivos gráficos aptos para la Web, como archivos GIF o JPEG.
Si dispone de Macromedia Fireworks, puede crear un nuevo gráfico desde un marcador de posición de
imagen de Dreamweaver. Al seleccionar el marcador de posición de imagen y hacer clic en el botón Crear
del inspector de propiedades, Fireworks abre un nuevo lienzo. Las dimensiones de la nueva imagen se
configuran con el mismo tamaño que la imagen del marcador de posición. Puede crear y editar la imagen
como desee y reemplazar la imagen del marcador de posición en Dreamweaver. Para información sobre
cómo crear una imagen en Fireworks a partir de un marcador de posición de imagen, consulte
“Utilización de Fireworks para modificar marcadores de posición de imagen de Dreamweaver” en

El marcador de posición de imagen aparece dentro de la primera tabla.
El marcador de posición de imagen muestra una etiqueta y los atributos
de tamaño de la imagen que en su momento colocará en ese lugar.
NO T A

Cuando se visualiza en un navegador, el texto de etiqueta y tamaño del
marcador de posición de imagen no aparecen.


Inserción de un marcador de posición de imagen 73

Adición de color a la página
A continuación va a añadir más color a la página configurando los colores
de algunas de las celdas de la tabla y del fondo de la página.
1. Haga clic una vez dentro de la primera celda de la tabla de tres columnas.
2. Haga clic en la etiqueta <td> (etiqueta de celda) en el selector de
etiquetas para seleccionar la celda.

3. En el inspector de propiedades (Ventana> Propiedades), haga clic una
vez dentro del cuadro de texto Color de fondo.
El cuadro de texto está situado justo al lado del cuadro de color del
Color de fondo (Fnd).
NO T A

Si no aparece el cuadro de texto Color de fondo, haga clic en la flecha de
propiedades.


4. En el cuadro de texto Color de fondo, introduzca el valor hexadecimal
993300 y presione Intro (Windows) o Retorno (Macintosh).

La celda de la tabla se volverá de color marrón rojizo.
5. Haga clic una vez dentro de la segunda celda de la tabla de tres
columnas.
6. Haga clic en la etiqueta <td> (etiqueta de celda) en el selector de
etiquetas para seleccionar la celda.
#F7EEDF y presione Intro (Windows) o Retorno (Macintosh).
La celda de la tabla se volverá de color marrón claro.
8. Repita los pasos de 5 a 7 para cambiar también el color de la tercera celda
de la tabla a un marrón claro.

9. Una vez definidos los colores de las tres celdas, haga clic una vez fuera
de la tabla para anular la selección.
A continuación cambiará el color de fondo de toda la página modificando
las propiedades de la página. El cuadro de diálogo Propiedades de la página
le permite configurar varias propiedades de la página, incluyendo, entre
otros, el tamaño y el color de las fuentes de la página, el color de los
vínculos visitados y los márgenes de la página.

Adición de color a la página 75

1. Seleccione Modificar > Propiedades de la página.
2. En la categoría Aspecto del cuadro de diálogo Propiedades de la página,
haga clic en el cuadro de color Color de fondo y seleccione negro
(#000000) en el selector de color.
A ce r ca d e .. .

Elegir colores En HTML, los colores se expresan en forma de valores hexadecimales (por ejemplo,
#FF0000) o con nombres (red). Un color seguro para la Web es aquél que se muestra de la misma forma
en Netscape Navigator y en Microsoft Internet Explorer, tanto en Windows como en Macintosh, con un
modo de 256 colores. Existen 216 colores comunes y cualquier valor hexadecimal que combine los pares
00, 33, 66, 99, CC o FF (valores RGB 0, 51, 102, 153, 204 y 255, respectivamente) representa a un
color seguro para la Web.
En Dreamweaver puede seleccionar colores introduciendo valores hexadecimales en los cuadros de
texto correspondientes o seleccionando un color en el selector de color. El selector de color utiliza la
paleta de 216 colores seguros para la Web; al seleccionar un color de esta paleta, se muestra el valor
hexadecimal del color. Para utilizar el selector de color, haga clic en el cuadro del color para seleccionar
un color.
También puede utilizar el selector de color para igualar colores. Por ejemplo, si una imagen de su página
incluye un todo de azul específico y quiere aplicar el mismo color al color de fondo de una celda de la
tabla, seleccione la celda en cuestión, haga clic en el cuadro de color para abrir el selector de color,
mueva el cuentagotas sobre el azul de la imagen y haga clic con el botón del ratón. El selector de color
rellenará la zona seleccionada con el color más parecido al que marcó con el cuentagotas. No obstante,
al seleccionar colores con este método, el color seleccionado por el selector de color podría no ser un
color seguro para la Web.


El color de fondo de la página se vuelve negro.

4. Guarde su trabajo.
Su diseño de página quedará definido. El diseño incluye varias tablas que
pueden albergar activos como imágenes, texto y archivos de Flash Video
(FLV). En el siguiente tutorial, Capítulo 5, “Tutorial: Adición de
contenido a las páginas”, aprenderá a añadir activos a la página utilizando
las diferentes funciones de inserción que le ofrece Dreamweaver.

Adición de color a la página 77

CAPÍTULO 5

Tutorial: Adición de
contenido a las páginas
5
Este tutorial le muestra cómo añadir contenido a las páginas Web en
Macromedia Dreamweaver 8. Puede añadir a las páginas Web contenidos
de diversa índole incluyendo, entre otros, gráficos, archivos de Macromedia
Flash, vídeos de Macromedia Flash y texto. Una vez añadido el contenido a
las páginas, puede obtener una vista previa con un navegador, para ver
cómo va a aparecer en la Web.
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

Localización de los archivos
Este tutorial comienza con la página basada en tablas (index.html) que creó
en el apartado Capítulo 4, “Tutorial: Crear un diseño de página basado en
tablas”. Si no completó ese tutorial, puede volver atrás y completarlo antes
de continuar o abrir la versión completada del tutorial y trabajar con ella.

79

Encontrará la versión ya completa del tutorial, table_layout.html, en la
carpeta completed_files/dreamweaver, dentro de la carpeta cafe_townsend
que copió en el disco duro en el Capítulo 3, “Tutorial: Configuración del
sitio y de los archivos del proyecto”.

N OT A Si comienza este tutorial con el archivo completado table_layout.html y no
con el archivo index.html de Capítulo 4, “Tutorial: Crear un diseño de
página basado en tablas”, algunos pasos e ilustraciones del tutorial no
coincidirán con lo que aparece en su pantalla.

80 Tutorial: Adición de contenido a las páginas

Repaso de la tarea
En este tutorial incorporará activos a la página de inicio de Cafe Townsend,
un restaurante ficticio. Aprenderá a añadir imágenes, archivos de
Macromedia Flash, archivos de Macromedia Flash Video y texto. Cuando
haya terminado, la página se parecerá a ésta:

Como podrá ver, el texto de la página todavía no está formateado. Eso es
debido a que mas adelante, en el siguiente tutorial, aprenderá a darle
formato al texto utilizando hojas de estilos en cascada (CSS).

Repaso de la tarea 81

Los activos necesarios para poder realizar este tutorial se encuentran en la
carpeta raíz cafe_townsend que copió en su disco duro en Capítulo 3,
“Tutorial: Configuración del sitio y de los archivos del proyecto”. Si no ha
realizado dicho tutorial, debe hacerlo antes de seguir con éste. El tutorial le
irá indicando dónde puede encontrar los activos a medida que vaya
avanzando.

Inserción de imágenes
Una vez creado su diseño de página, ya puede añadir activos a la página.
Vamos a comenzar añadiendo imágenes. Hay varias formas de añadir
imágenes a una página Web en Dreamweaver. En este apartado va a añadir
cuatro imágenes distintas a la página “index” de Cafe Townsend siguiendo
varios métodos.

Reemplazo del marcador de posición de
imagen
1. En Dreamweaver, abra el archivo index.html que creó en Capítulo 4,
“Tutorial: Crear un diseño de página basado en tablas”.
NO T A

Si no ha completado Capítulo 4, “Tutorial: Crear un diseño de página
basado en tablas”, consulte los pasos a seguir en “Localización de los
archivos” en la página 79.


2. Haga doble clic en el marcador de posición de imagen banner_graphic,
en la parte superior de la página.

3. En el cuadro de diálogo Seleccionar origen de imagen, acceda a la
carpeta de imágenes dentro de la carpeta cafe_townsend que definió
como carpeta raíz del sitio.
4. Seleccione el archivo banner_graphic.jpg y haga clic en Aceptar.

Inserción de imágenes 83

Dreamweaver sustituye el marcador de posición de imagen por el
gráfico de rótulo de Cafe Townsend.

5. Haga clic una vez fuera de la tabla para anular la selección de la imagen.
6. Guarde el archivo (Archivo > Guardar).

Insertar una imagen utilizando el menú
Insertar
1. Haga clic una vez dentro de la tercera fila de la primera tabla (dos filas
por debajo del gráfico de rótulo que acaba de insertar, justo encima de
las celdas coloreadas de la tabla).

2. Seleccione Insertar > Imagen.
3. En el cuadro de diálogo Seleccionar origen de imagen, acceda a la
carpeta de imágenes dentro de la carpeta cafe_townsend, seleccione el
archivo body_main_header.gif y haga clic en Aceptar.
NO T A

Se abre el cuadro de diálogo Atributos de accesibilidad de la etiqueta de
imagen, haga clic en Aceptar.


Aparece en la tabla un gráfico largo y coloreado. Parece más un color de
fondo para la celda de la tabla que un gráfico, pero si lo mira con más
atención verá que el gráfico tiene las esquinas redondeadas. El efecto de
equinas redondeadas le dará un aspecto interesante a la parte inferior de
la página una vez haya añadido todos los activos.

Inserción de una imagen arrastrando
1. Haga clic una vez dentro de la última fila de la última tabla de la página
(justo debajo de las celdas coloreadas de la tabla).


2. En el panel Archivos (Ventana > Archivos) busque el archivo
body_main_footer.gif (dentro de la carpeta de imágenes), y arrástrelo
hasta el punto de inserción de la última tabla.

NO TA
Se abre el cuadro de diálogo Atributos de accesibilidad de la etiqueta de

3. Haga clic una vez fuera de la tabla y guarde la página (Archivo >
Guardar).

Insertar una imagen desde el panel Activos
1. Haga clic una vez dentro de la columna central de la tabla de tres
columnas (la primera celda de la tabla de color marrón claro).


2. En el inspector de propiedades (Ventana > Propiedades), seleccione
Centro en el menú emergente Horiz, y seleccione Superior en el menú
emergente Vert. Esto alineará el contenido del a tabla en el centro de la
celda, y empujará el contenido de la celda a la parte superior de la
misma.
N OT A

Si no aparecen los menús emergentes Vert o Horiz, haga clic en la flecha
de ampliación situada en la esquina inferior derecha del inspector de
propiedades.

3. Presione Intro (Windows) o Retorno (Macintosh) una vez para crear
más espacio.


A c e r ca d e .. .

El panel Activos El panel Activos le permite administrar los activos del sitio actual. En el panel Activos
se muestran los activos del sitio asociados al documento activo en la ventana de documento.
deberá definir un sitio local antes de ver los activos en el panel Activos. Para más información, consulte
Capítulo 3, “Tutorial: Configuración del sitio y de los archivos del proyecto” o Utilización de Dreamweaver.
El panel Activos proporciona dos vistas:
La lista Sitio enumera todos los activos del sitio, incluidos los colores y los URL que se utilizan en los
documentos del sitio.
La lista Favoritos enumera únicamente los activos que haya elegido de forma explícita. Para añadir un
activo a la lista Favoritos, seleccione el activo en la lista Sitio y, a continuación, seleccione Añadir a
Favoritos en el menú Opciones, situado en la esquina superior derecha del panel Archivos.
Al hacer clic en un activo del panel Activos, aparece el activo seleccionado en el área de vista previa. Para
cambiar el tamaño del área de vista previa, arrastre la línea que separa el área de vista previa de los
encabezados de columna de activos.
Para más información, consulte “Utilización de activos” en Utilización de Dreamweaver.

4. Haga clic en la ficha Activos del panel Archivos o seleccione Ventana >
Activos.
Aparecen los activos de su sitio.

Botón Imágenes

5. Si no está seleccionada la vista Imágenes, haga clic en Imágenes para ver
sus activos de imagen.
6. En el panel Activos, seleccione el archivo street_sign.jpg.


7. Siga uno de estos procedimientos:
■ Arrastre el archivo street_sign.jpg hasta el punto de inserción de la
celda de la tabla central.
■ Haga clic en Insertar en la parte inferior del panel Activos.
NO T A

Si se abre el cuadro de diálogo Atributos de accesibilidad de la etiqueta de

El gráfico street_sign.jpg aparece en la página.

8. Haga clic una vez fuera de la tabla para anular la selección de la imagen.


Inserción y reproducción de un
archivo Flash
A continuación va a insertar un archivo Flash que reproduce una serie de
fotografías de alimentos ofrecidos por Cafe Townsend. El archivo Flash que
va a insertar es un archivo FMA, o área de mensajería flexible. Un FMA es
un tipo de aplicación Flash común que muestra un mensaje informativo. El
mensaje puede cambiar según las necesidades específicas. Por ejemplo, si
Cafe Townsend va a celebrar un acontecimiento especial, el FMA se podría
cambiar fácilmente (sin afectar al resto de la página) para mostrar
información sobre el evento en lugar de mostrar los alimentos ofrecidos.
Para insertar el archivo FMA de Flash necesita insertar código HTML para
incrustar el archivo en la página de Dreamweaver. Para hacer esto, lo más
sencillo es insertar el archivo SWF (el archivo de película Flash exportado)
en la página. Cuando se inserta un archivo SWF en Dreamweaver,
Dreamweaver escribe por usted todo el código Flash HTML necesario.
1. Con la página index.html abierta en la ventana de documento de
Dreamweaver, haga clic una vez dentro de la segunda fila de la primera
tabla.
La fila de la tabla justo debajo del gráfico de rótulo introducido en el
apartado anterior.
Centro en el menú emergente Horiz, y seleccione Medio en el menú
emergente Vert.
De este modo se colocan los contenidos de la celda de la tabla en el
medio de la misma.
NO T A

Si no aparecen los menús emergentes Vert o Horiz, haga clic en la flecha
de ampliación situada en la esquina inferior derecha del inspector de
propiedades.


A ce r ca d e . ..

Archivos flash Al crear activos en Macromedia Flash, se trabaja con archivos FLA, el tipo de archivo
predeterminado de la aplicación Flash. Los archivos FLA tienen la extensión .fla. Por ejemplo, si está
trabajando con un logotipo animado para un sitio Web, el nombre del archivo Flash podría ser
animated_logo.fla.
Cuando termine de trabajar con el archivo FLA en Flash, debe exportar el archivo a un formato que pueda
verse en la Web con Flash Player. Al exportar archivos FLA en Flash, se convierten en archivos SWF con
la extensión .swf. Los archivos SWF (no FLA) reproducen contenido Flash en un navegador; es el tipo de
archivo que se debe introducir en una página Web que se está diseñando con Dreamweaver.

3. Seleccione Insertar > Media > Flash.
En el cuadro de diálogo Seleccionar archivo, acceda al archivo
flash_fma.swf (está en la carpeta raíz cafe_townsend del sitio)
seleccione el archivo y haga clic en Aceptar.
Si se abre el cuadro de diálogo Atributos de accesibilidad de la etiqueta
de objeto, haga clic en Aceptar.

En la ventana de documento aparecerá un marcador de posición del
contenido Flash en lugar de una escena de FMA. Esto es debido a que
el código HTML “apunta” al archivo SWF flash_fma.swf. Al cargar la
página index.html, el navegador muestra el archivo SWF.

Inserción y reproducción de un archivo Flash 91

4. El marcador de posición del contenido Flash se mantendrá seleccionado
después de insertar un archivo SWF mientras no haga clic en ningún
otro punto de la página.
Si no está seleccionado, seleccione el marcador de posición del
contenido haciendo clic sobre él.
5. En el inspector de propiedades (Ventana > Propiedades), haga clic en
Reproducir.
NO TA

Si no puede ver el botón Reproducir de Flash, haga clic en la flecha de
propiedades.

Dreamweaver reproduce el archivo Flash en la ventana de documento,
mostrando lo que podrán ver los visitantes de la página cuando la vean
a través de un navegador.

6. En el inspector de propiedades, haga clic en Detener para detener la
reproducción del archivo Flash.


Inserción de Flash Video
A continuación va a insertar un archivo de vídeo Flash utilizando el activo
proporcionado.
Dreamweaver, haga clic una vez sobre el gráfico que introdujo en la
columna central de la tabla de tres columnas.
En el apartado anterior, se creó espacio antes de insertar el gráfico; es
aquí donde debe hacer clic.

2. Seleccione Insertar > Media > Flash Video.

Inserción de Flash Video 93

3. En el cuadro de diálogo Insertar de Flash Video, seleccione Vídeo de
descarga progresiva en el menú emergente Tipo de vídeo.
A ce r c a d e . ..

Flash Video El comando Insertar Flash Video de Dreamweaver le permite insertar contenido de Flash
Video en las páginas Web sin tener que utilizar la herramienta de autoría de Flash. El comando inserta un
componente de Flash, que muestra el contenido de Flash Video seleccionado, además de un conjunto de
mandos de reproducción cuando se muestra en un navegador.
El comando Insertar Flash Video le permite ofrecer contenido de vídeo a los visitantes de su sitio a través
de una de estas opciones:
El vídeo de descarga progresiva descarga el archivo de Flash Video (FLV) al disco duro del usuario y lo
reproduce. Sin embargo, a diferencia de los métodos tradicionales de entrega de vídeo de tipo "descarga
y reproducción", la descarga progresiva permite iniciar la reproducción del archivo de vídeo antes de que
haya finalizado la descarga.
El vídeo de flujo transfiere el contenido de Flash Video y lo reproduce en la página Web de inmediato
cuando se solicite. No obstante, para poder utilizar el vídeo de flujo en páginas Web, es necesario tener
acceso a Macromedia Servidor de comunicaciones de Flash, el único servidor que puede transferir
contenido de Flash Video.
Para más información sobre cómo utilizar Flash Video, consulte “Inserción de contenido de Flash Video”

4. En el cuadro de texto URL, especifique una ruta relativa al archivo
cafe_townsend_home.flv; para ello, haga clic en Examinar, acceda al
archivo cafe_townsend_home.flv (situado en la carpeta raíz
cafe_townsend del sitio), y seleccione el archivo FLV.

5. Seleccione Aspecto de halo 2 en el menú emergente Apariencia.
Se muestra una vista previa del aspecto seleccionado bajo el menú
emergente Apariencia. La opción Apariencia determina el aspecto y
funcionamiento del componente de Flash Video que incluirá el
contenido de Flash Video.
Para más información sobre cómo seleccionar los diferentes
aspectos para los componentes de Flash Video, consulte
www.macromedia.com/go/flv_tutorial_es.


6. En los cuadros de texto Ancho y Alto, siga este procedimiento:
■ En el cuadro de texto Ancho, escriba 180.
■ En el cuadro de texto Alto, escriba 135 y presione Intro (Windows)
o Retorno (Macintosh).

El valor de los cuadros de texto Ancho y Alto especifica la anchura y la

S U G E R E N CI A
Puede hacer clic en
altura en píxeles del archivo FLV. Puede ajustar los valores
Detectar tamaño
arbitrariamente para cambiar el tamaño del Flash Video en su página para especificar el
Web. Al aumentar las dimensiones de un vídeo, suele deteriorarse la ancho y alto exacto
calidad del vídeo. del archivo FLV. No
obstante, en
N OT A

"Total con aspecto" es el valor del ancho y alto del archivo FLV más el ocasiones
ancho y alto del aspecto seleccionado. Dreamweaver no
puede determinar las
7. En el resto de opciones, deje los valores predeterminados: dimensiones del
archivo FLV. En
Restringirmantiene la misma relación de aspecto entre el ancho y alto
estos casos, deberá
del componente de Flash Video. Esta opción está activada de forma introducir
predeterminada. manualmente los
Reproducción automática especifica si el archivo se va a reproducir al valores de ancho y
abrir la página Web. Esta opción está desactivada de forma alto.

predeterminada.
Rebobinado automático especifica si el control de reproducción
vuelve al punto de inicio cuando finalice la reproducción. Esta opción
está desactivada de forma predeterminada.

Inserción de Flash Video 95

8. Haga clic en Aceptar para cerrar el cuadro de diálogo y añadir el
contenido de Flash Video a la página Web.
El comando Insertar Flash Video crea un archivo de reproducción de
vídeo SWF y un archivo de skin SWF que se utilizan para reproducir el
contenido de Flash Video en una página Web. (Quizás tenga que hacer
clic en el botón Actualizar del panel Archivos para ver los nuevos
archivos.) Estos archivos se almacenan en el mismo directorio que el
archivo HTML al que está añadiendo contenido de Flash Video (en
este caso, la carpeta raíz cafe_townsend). Al cargar la página HTML
con el contenido de Flash Video, Dreamweaver carga estos archivos
como archivos dependientes (siempre que haga clic en Sí en el cuadro
de diálogo Colocar archivos dependientes).

Inserción de texto
A continuación, va a añadir texto a la página. Puede escribir texto
directamente en la ventana de documento de Dreamweaver o copiarlo y
pegarlo de otro origen (como un archivo de Microsoft Word o de texto).
Mas adelante, le dará formato al texto utilizando hojas de estilos en cascada
(CSS).


Inserción del texto del cuerpo
1. En el panel Archivos, localice el archivo sample_text.txt (en la carpeta
raíz cafe_townsend) y haga doble clic en el icono del archivo para abrirlo
en Dreamweaver.
Esta ventana se muestra en la vista Código y no se puede cambiar a la
vista Diseño (la vista que ha estado utilizando hasta ahora) porque el
archivo no tiene formato HTML.

2. En la ventana de documento sample_text.txt , presione Control+A
(Windows) o Comando+A (Macintosh) para seleccionar todo el texto y,
a continuación, elija Edición > Copiar para copiar el texto.
3. Cierre el archivo sample_text.txt haciendo clic en la X de la esquina
superior derecha del documento.
4. En la ventana de documento index.html, haga clic una vez dentro de la
tercera celda de la tabla de tres columnas (la celda a la derecha de la
columna con el gráfico y el vídeo de Flash).
5. Seleccione Edición> Pegar.
El texto del archivo de texto aparece en la celda de la tabla seleccionada.

Inserción de texto 97

Dependiendo de la resolución de su monitor, el texto ampliará la tabla
de tres columnas para darle cabida al texto. De momento, no se
preocupe por el aspecto. En el siguiente tutorial, aprenderá a darle
estilo al texto utilizando hojas de estilos CSS, para que todo el
contenido se incluya en la tabla de un modo adecuado.
6. Asegúrese de que el punto de inserción continúa en la celda de la taba
donde acaba de pegar el texto. Si no lo está, haga clic dentro de la celda
de la tabla.


Superior en el menú emergente Vert. El texto que acaba de pegar se
alineará en la parte superior de la celda. Si no aparece el menú emergente
Vert, haga clic en la flecha de ampliación situada en la esquina inferior
derecha del inspector de propiedades.


Inserción de texto de una barra de
navegación
A continuación va a insertar texto para una barra de navegación. Tenga en
cuenta que el texto no va a tener aspecto de barra de navegación hasta que
lo formatee en el siguiente tutorial.
1. Haga clic una vez dentro de la primera columna de la tabla de tres
columnas (la columna de color marrón rojizo).


2. Escriba la palabra Cuisine.

3. Presione la barra de espacio y escriba Chef Ipsum.
4. Repita el paso anterior hasta haber incluido las siguientes palabras con
un espacio entre ellas: Articles, Special Events, Location, Menu,
Contact Us.
No presione la tecla Intro (Windows) o Retorno (Macintosh) mientras
escribe. Utilice solamente la barra de espacio para separar las palabras y
deje que éstas se distribuyan de forma natural. El ancho fijo de la celda
de la tabla determina las palabras que van a caber por línea.


5. Manteniendo el punto de inserción en la primera celda de la tabla de tres
columnas, haga clic en la etiqueta <td> del selector de etiquetas.

Superior en el menú emergente Vert.
El texto que acaba de escribir se alineará en la parte superior de la celda.
N O TA

Si no aparece el menú emergente Vert, haga clic en la flecha de
propiedades.



Creación de vínculos
Un vínculo es una referencia insertada en una página Web que señala a otro
documento. Puede convertir prácticamente cualquier tipo de activo en un
vínculo, pero el tipo de vínculo más común es el de texto.
Puede crear vínculos en cualquier etapa del proceso de creación del sitio.
En este apartado va a crear vínculos para la barra de navegación, aunque
todavía no lo haya formateado para que aparezca como barra de
navegación.
La carpeta raíz de cafe_townsend incluye una página HTML completada a
la que puede enlazar con el vínculo (una página con un menú de Cafe
Townsend). Esta página se utilizará para todos los vínculos de navegación,
aunque si estuviera creando un sitio real tendría páginas diferentes para
estos vínculos.
Dreamweaver, seleccione la palabra Cuisine que introdujo en la primera
celda de la tabla de tres columnas. Tenga cuidado de seleccionar
únicamente la palabra Cuisine, y no el espacio que le sigue.

2. En el inspector de propiedades (Ventana > Propiedades), haga clic en el
icono de carpeta situado junto al cuadro de texto Vínculo.


3. En el cuadro de diálogo Seleccionar archivo, localice el archivo
menu.html (que está en la misma carpeta que el archivo index.html) y
haga clic en Aceptar (Windows) o Escoger (Macintosh).
4. Haga clic una vez en la página para anular la selección de la palabra
Cuisine. El texto Cuisine aparecerá subrayado y de color azul, lo que
indica que se ha convertido en un vínculo.
5. Repita los pasos anteriores para vincular cada palabra o conjunto de
palabras escritas para así poder navegar. Tendrá que crear seis vínculos
más: para Chef Ipsum, Articles, Special Events, Location, Menu, y
Contact Us.
Enlace con vínculos cada palabra o conjunto de palabras a la página
menu.html, y al crear los vínculos tengacuidado de no incluir los
espacios antes y después de las palabras o grupos de palabras. Se trata
sólo de un conjunto de vínculos ficticios; en un sitio real, enlazaría cada
palabra de la barra de navegación con una página específica diferente.
N OT A

Los vínculos no funcionan cuando se hace clic en ellos en la ventana de
documento en Dreamweaver; sólo funcionan en los navegadores. Para
asegurarse de que los vínculos funcionan correctamente, tendrá que
obtener una vista previa de la página en un navegador. Para instrucciones
sobre cómo hacerlo, pase a “Vista previa de la página en un navegador”
en la página 103.


Vista previa de la página en un
navegador
La vista de Diseño le da una idea aproximada de cómo se verá la página en
la Web, pero debe hacer una visualización previa en un navegador si desea
ver el resultado final definitivo. Aunque en general los navegadores
producen los mismos resultados, las distintas versiones de cada navegador
pueden producir algunas diferencias al mostrar páginas HTML.
Dreamweaver procura producir HTML que tenga el aspecto más parecido
posible en todos los navegadores, si bien no puede evitar algunas
diferencias. Por lo tanto, el único modo de comprobar lo que van a ver los
usuarios de su página una vez publicada, es visualizándola previamente en
un navegador.

Vista previa de la página en un navegador 103

1. Asegúrese de que el archivo index.html esté activo en la ventana de
documento.
2. Presione F12 (Windows) u Opción+F12 (Macintosh).
Si no está abierto, su navegador principal se iniciará mostrando la
NO T A página index.

Dreamweaver detecta automáticamente el navegador principal y lo utiliza
para la vista previa. Si no aparece la vista previa o si no aparece en el
navegador deseado, vuelva a Dreamweaver (si es necesario) y elija
Archivo > Vista previa en el navegador > Editar lista de navegadores.
Cuando aparezca el cuadro de diálogo de preferencias de Vista previa en
el navegador, añada el navegador adecuado a la lista. Para más
información, haga clic en el botón Ayuda del cuadro de diálogo
Preferencias.

3. (Opcional) Vuelva a Dreamweaver para realizar los cambios necesarios.
A continuación, guarde su trabajo y pulse de nuevo la tecla F12 para
asegurarse de que sus cambios surten efecto.


Ya ha creado una página Web con contenidos. El paso siguiente consiste en
formatear el contenido para darle un aspecto más atractivo. En el siguiente
tutorial, aprenderá a formatear el texto que ha añadido utilizando hojas de
estilos CSS.

Vista previa de la página en un navegador 105

CAPÍTULO 6

Tutorial: Formatear la
página con CSS
6
Este tutorial explica cómo formatear el texto de la página utilizando hojas
de estilos en cascadas (CSS) con Dreamweaver. CSS le proporciona un
mayor control sobre el aspecto de la página, ya que le permite formatear y
situar el texto ofreciéndole posibilidades que no existen en HTML.
Localización de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Repaso de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Conocer las CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Crear una nueva hoja de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Explorar el panel Estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Adjuntar una hoja de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
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

107

Este tutorial comienza con la página índice de Cafe Townsend a la que
añadió contenido en el apartado Capítulo 5, “Tutorial: Adición de
contenido a las páginas”. Si no completó ese tutorial, puede volver atrás y
completarlo antes de continuar o abrir la versión completada del tutorial y
trabajar con ella. Encontrará la versión ya completa del tutorial,
add_content.html, en la carpeta completed_files/dreamweaver, dentro de
la carpeta cafe_townsend que copió en el disco duro en el apartado
Capítulo 3, “Tutorial: Configuración del sitio y de los archivos del
proyecto”.
N OT A

Si comienza este tutorial con el archivo completado add_content.html y
no con el archivo index.html de Capítulo 5, “Tutorial: Adición de contenido
a las páginas”, algunos pasos e ilustraciones del tutorial no coincidirán
con lo que aparece en su pantalla.

108 Tutorial: Formatear la página con CSS

Repaso de la tarea
En este tutorial utilizará hojas de estilos en cascada (CSS) para formatear el
texto de la página de inicio de Cafe Townsend, un restaurante ficticio. Va a
crear distintos tipos de reglas CSS para formatear el texto del cuerpo.
También va a formatear el texto del vínculo a la izquierda de la página,
creando una barra de navegación. Cuando haya terminado, la página se
parecerá al siguiente ejemplo:


Para más información sobre CSS, pase a la sección siguiente. Para empezar
a crear CSS directamente, pase a “Crear una nueva hoja de estilos” en
la página 112.

Conocer las CSS
Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato
que controlan el aspecto del contenido de una página Web. Cuando se
utiliza CSS para formatear una página, se separa el contenido de la
presentación. El contenido de su página (el código HTML) reside en el
archivo HTML, mientras que las reglas CSS que definen la presentación
del código residen en otro archivo (una hoja de estilo externa) o en otra
parte del documento HTML (normalmente en la sección <head>). Los
estilos CSS aportan gran flexibilidad y control sobre el aspecto exacto que
se busca en una página, desde la colocación precisa de elementos hasta el
diseño de fuentes y estilos concretos.
CSS permite definir muchas propiedades que no se pueden controlar
utilizando sólo HTML. Por ejemplo, puede especificar distintos tamaños y
unidades de fuente (píxeles, puntos, etc.) para el texto seleccionado. Si
utiliza CSS para definir el tamaño de fuente en píxeles, también conseguirá
un tratamiento más coherente del diseño y el aspecto de la página en
múltiples navegadores.
Una regla de formato CSS consta de dos partes: el selector y la declaración.
El selector es un término (como P, H1, el nombre de una clase o un ID)
que identifica el elemento formateado, y la declaración define los
elementos de estilo. En el siguiente ejemplo, H1 es el selector y todo lo que
queda entre las llaves ({}) es la declaración:
H1 {
font-size: 16 píxeles;
font-family: Helvetica;
font-weight: bold;
}
La declaración, a su vez, consta de dos partes: la propiedad (por ejemplo,
font-family) y el valor (por ejemplo, Helvetica). El ejemplo anterior
crea un estilo para las etiquetas H1: El texto de todas las etiquetas H1
vinculadas a este estilo tendrá un tamaño de 16 píxeles, fuente Helvetica y
negrita.


La expresión en cascada hace referencia a la posibilidad de aplicar varios
estilos al mismo elemento o página Web. Por ejemplo, puede crear una
regla CSS que aplique color y otra que aplique los márgenes y aplicarlas las
dos al mismo texto en una página. Los estilos definidos se distribuyen en
“cascada” hacia los elementos de la página Web, lo que le permite obtener
finalmente el diseño deseado.
Una de las grandes ventajas de las CSS reside en que pueden actualizarse
fácilmente; cuando actualiza una regla CSS en un sitio, el formato de todos
los documentos que usan ese estilo se actualiza automáticamente con el
nuevo estilo.
Puede definir los siguientes tipos de reglas en Dreamweaver:
■ Las reglas CSS personalizadas, también llamadas estilos de clase,
permiten aplicar atributos de estilo a cualquier rango o bloque de texto.
todos los estilos de clase empiezan por un punto (.). Por ejemplo, puede
crear un estilo de clase llamado .red, definir la propiedad de color de la
regla con el valor rojo, y aplicar el estilo a una porción de texto de
párrafo que ya tiene estilo.
■ Las reglas de etiquetas HTML redefinen el formato de una
determinada etiqueta, como p o h1. Cuando se crea o cambia una regla
CSS para la etiqueta h1, todo el texto formateado con la etiqueta h1 se
actualiza inmediatamente.
■ Las reglas selectoras CSS (estilos avanzados) redefinen el formato de
una combinación particular de elementos o de otras formas selectores
según lo permitan las CSS (por ejemplo, el selector td h2 se aplica
siempre que aparezca un encabezado h2 dentro de una celda de tabla.)
Los estilos avanzados también pueden redefinir el formato de etiquetas
que contengan un atributo id específico (por ejemplo, los estilos
definidos por #myStyle se aplican a todas las etiquetas que contengan
pares de atributos y valores de tipo id="myStyle").
Para más información, consulte “Aplicación de formato a texto en
Dreamweaver” en Utilización de Dreamweaver.

Conocer las CSS 111

Crear una nueva hoja de estilos
En primer lugar, creará una hoja de estilos externa que contenga una regla
CSS que defina un estilo para un texto de párrafo. Al crear estilos en una
hoja de estilos externa, puede controlar el aspecto de varias páginas Web
desde un punto central, en ligar de definir estilos para cada página
individualmente.

1. Seleccione Archivo> Nuevo.
2. En el cuadro de diálogo Nuevo documento, seleccione Página básica en
la columna Categoría, seleccione CSS en la columna Página básica y
haga clic en Crear.

Aparecerá una hoja de estilos en blanco en la ventana de documento La
vista Diseño y los botones de vista de Código están desactivados. Las
hojas de estilos CSS son archivos sólo texto, es decir, su contenido no se
puede ver a través de un navegador.


A ce r ca d e . ..

Más información sobre las reglas CSS
Las reglas CSS pueden residir en las ubicaciones siguientes:
Las hojas de estilos CSS externas son conjuntos de reglas CSS almacenados en un archivo .css
independiente externo (no un archivo HTML). El archivo .css se vincula a una o varias páginas de un sitio
Web mediante un vínculo situado en la sección head de un documento.
Las hojas de estilos CSS internas (o incrustadas) son grupos de reglas CSS incluidos en una etiqueta
style en la sección head de un documento HTML. Por ejemplo, el siguiente ejemplo define el tamaño de
la fuente de todo el texto del documento formateado con la etiqueta de párrafo:
<head>
<style>
p{
font-size:80px
}
</style>
</head>
Los estilos en línea se definen con instancias específicas de etiquetas en un documento HTML. Por
ejemplo, <p style=“font-size: 9px”> define el tamaño de la fuente sólo para el párrafo formateado
con una etiqueta que contenga el estilo en línea.
Dreamweaver representa la mayoría de atributos de estilo aplicados y los muestra en la ventana de
documento. También puede obtener una vista previa del documento en la ventana del navegador para
comprobar los estilos aplicados. Algunos atributos de estilo CSS se representan de forma distinta en
Microsoft Internet Explorer, Netscape Navigator, Opera y Apple Safari.

3. Guarde la página (Archivo > Guardar) como cafe_townsend.css.
Cuando guarde la hoja de estilos, asegúrese de que la guarda en la
carpeta cafe_townsend (la carpeta raíz de su sitio Web).
4. Escriba el siguiente código en la hoja de estilos:
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}

Conforme vaya escribiendo, Dreamweaver utilizará sugerencias para
código que le darán opciones para completarlo. Presione Intro
(Windows) o Retorno (Macintosh) cuando vea el código que quiere
introducir para dejar que Dreamweaver lo escriba por usted.

Crear una nueva hoja de estilos 113

No olvide incluir un punto y coma al final de cada línea, después de los
valores de propiedad.
Cuando haya terminado, el código se parecerá al siguiente ejemplo:

5. Guarde la hoja de estilos.
S UG E R E N CI A

Para más
información sobre A continuación va a adjuntar la hoja de estilos a la página index.html.
cualquier propiedad
de CSS, consulte la
guía de referencia de Adjuntar una hoja de estilos
O’Reilly que
acompaña a Al adjuntar una hoja de estilos a una página Web, las reglas definidas en la
Dreamweaver. Para hoja de estilos se aplican a los elementos correspondientes de la página. Por
mostrar la guía, ejemplo, al adjuntar la hoja de estilos cafe_townsend.css a la página
seleccione Ayuda > index.html, todo el texto de párrafo (texto formateado con la etiqueta <p>
Referencia y
en el código HTML) se formateará de acuerdo a la regla CSS definida.
seleccione O’Reilly
CSS Reference en el 1. El la ventana de documento, abra el archivo de Cafe Townsend
menú emergente del index.html. (si ya está abierto, puede hacer clic en su ficha)
panel Referencia.
2. Seleccione el texto del primer párrafo que pegó en la página en el
apartado Capítulo 5, “Tutorial: Adición de contenido a las páginas”.


3. Consulte el inspector de propiedades y asegúrese de que el párrafo está
formateado con la etiqueta de párrafo.
Si el menú emergente Formato del inspector de propiedades dice
"Párrafo", significa que el párrafo está formateado con la etiqueta de
párrafo. Si el menú emergente Formato del inspector de propiedades
dice "Ninguno" o algo diferente, seleccione Párrafo para formatear el
párrafo.

4. Repita el paso 3 para el segundo párrafo.
5. En el panel Estilos CSS (Ventana> Estilos CSS), haga clic en el botón
Adjuntar hoja de estilos en la esquina inferior derecha del panel.

6. En el cuadro de diálogo Adjuntar hoja de estilos externa, haga clic en
Examinar y busque el archivo cafe_townsend.css que creó en el apartado
anterior.
El texto de la ventana de documento está formateado según la regla
CSS de la hoja de estilos externa.

Adjuntar una hoja de estilos 115

Explorar el panel Estilos CSS
El panel Estilos CSS le permite supervisar las reglas y propiedades CSS que
afectan a un elemento de página actualmente seleccionado o las reglas y
propiedades que afectan a todo un documento. También le permite
modificar propiedades CSS sin tener que abrir una hoja de estilos externa.
1. Asegúrese de que la página index.html esté activo en la ventana de
documento.
2. En el panel Estilos CSS (Ventana> Estilos CSS), haga clic en Todo en la
parte superior del panel y examine sus reglas CSS.
En modo Todo, el panel CSS le muestra todas las reglas CSS definidas
para el documento actual, con independencia de si dichas reglas están
en una hoja de estilos externa o en el mismo documento. En el panel
Todas las reglas verá dos categorías principales: una categoría de
etiquetas <estilo> y una categoría cafe_townsend.css.
3. Haga clic en el signo más (+) para ampliar la categoría de etiquetas
<estilo> si no está ya expandida.
4. Haga clic en la regla del cuerpo.
La propiedad background-color con el valor #000000 aparece en el
panel Propiedades de abajo.
N O TA

Es posible que necesite contraer otro panel, como el panel Archivos, para
ver el panel Estilos CSS al completo. También puede modificar la longitud
del panel Estilos CSS arrastrando las separaciones entre paneles.


El color de fondo de la página se define en Capítulo 4, “Tutorial: Crear
un diseño de página basado en tablas” utilizando el cuadro de diálogo
Modificar propiedades de la página. Al definir las propiedades de la
página con este método, Dreamweaver escribe un estilo CSS interno al
documento.
5. Haga clic en el signo más (+) para ampliar la categoría
cafe_townsend.css.
6. Haga clic en la regla p.
Todas las propiedades y valores definidas en la hoja de estilos externa
para la regla p aparecen en el panel Propiedades de abajo.

7. En la ventana de documento, haga clic una vez en cualquier punto de
uno de los dos párrafos que acaba de formatear.
8. En el panel Estilos CSS, haga clic en Actual en la parte superior del panel
y examine sus estilos CSS. En modo Actual, el panel CSS le muestra un
resumen de las propiedades de la selección actual. Las propiedades que
se muestran corresponden a las propiedades de la regla p en la hoja de
estilos externa.
A lo largo de la sección siguiente, va a utilizar los Estilos CSS para crear una
nueva regla. Es mucho más sencillo utilizar el panel Estilos CSS para crear
una nueva regla que escribir la regla a mano, como hizo cuando creó la hoja
de estilos externa en un principio.

Explorar el panel Estilos CSS 117

Crear una nueva regla CSS
En esta sección va a utilizar el panel Estilos CSS para crear una regla CSS
personalizada o estilo de clase. Los estilos de clase le permiten ver los
atributos de estilo de cualquier rango o bloque de texto, y se pueden aplicar
a cualquier etiqueta HTML. Para más información sobre los diferentes
tipos de regla CSS, consulte “Conocer las CSS” en la página 110.
1. En el panel Estilos CSS, haga clic en Nueva regla CSS en la parte
inferior derecha del panel.

2. Seleccione Clase en el cuadro de diálogo Nueva regla CSS a partir de las
opciones de Tipo de selector. Deberá estar seleccionado de forma
predeterminada.
3. Escriba .bold en el cuadro de texto Nombre.
Asegúrese también de escribir el punto (.) delante de la palabra “bold.”
Todos los estilos de clase deben comenzar por un punto.


4. Seleccione cafe_townsend.css en el menú emergente Definir en. Deberá
estar seleccionado de forma predeterminada.

Aparecerá el cuadro de diálogo Definición de reglas de CSS, lo que
indica que está creando un estilo de clase llamado .bold en el archivo
cafe_townsend.css.
6. En el cuadro de diálogo Definición de reglas de CSS, siga este
procedimiento:
■ En el cuadro de texto Fuente, escriba Verdana, sans-serif.
■ En el cuadro de texto Tamaño , introduzca 11 y seleccione píxeles en el
menú emergente que aparece inmediatamente a la derecha.
■ En el cuadro de texto Alto de línea, introduzca 18 y seleccione píxeles
en el menú emergente que aparece inmediatamente a la derecha.
■ Seleccione negrita en el menú emergente Grosor.
■ Escriba #990000 en el cuadro de texto Color.

Crear una nueva regla CSS 119

.

S U G E R E N CI A

Para más
información sobre 8. Haga clic en Todo en la parte superior del panel Estilos CSS.
cualquier propiedad 9. Haga clic en el signo más (+) junto a la categoría cafe_townsend.css si
de CSS, consulte la todavía no está expandida.
guía de referencia de
O’Reilly que Verá que Dreamweaver ha añadido el estilo de clase .bold a la lista de
acompaña a reglas definidas en la hoja de estilos externa. Si hace clic en la regla
Dreamweaver. Para .bold en el panel Todas las reglas, se mostrarán las propiedades de la
mostrar la guía, regla en el panel Propiedades. La nueva regla también aparece en el
seleccione Ayuda >
menú emergente Estilo del inspector de propiedades.
Referencia y
CSS Reference en el
menú emergente del
panel Referencia.


Aplicar un estilo de clase al texto
Una vez creada una regla de clase, puede aplicarla a texto de párrafo.
1. En la ventana de documento, seleccione las cuatro primeras palabras de
texto del primer párrafo. Cafe Townsend’s visionary chef.
2. En el inspector de propiedades (Ventana > Propiedades), seleccione bold
en el menú emergente Estilo.

El estilo de clase negrita se aplica al texto.
3. Repita el paso 2 para aplicar el estilo de clase negrita a las cuatro primeras
palabras del segundo párrafo.


Aplicar un estilo de clase al texto 121

Formatear el texto de la barra de
navegación
A continuación va a utilizar CSS para aplicar estilos al texto del vínculo de
una barra de navegación. Muchas páginas Web utilizan imágenes de
rectángulos coloreados con texto en su interior para crear una barra de
navegación, pero con CSS todo lo que necesita es un texto de vínculo con
formato. Utilizando display: block y asignándole una anchura al
bloque, podrá crear rectángulos sin tener que utilizar imágenes separadas.

Crear una nueva regla para la navegación
1. Abra el archivo cafe_townsend.css si todavía no está abierto o haga clic
en su ficha para verlo.
2. Defina una nueva regla escribiendo en el archivo el código siguiente
después del estilo de clase .bold:
.navigation {
}

Esta regla está vacía.
El código del archivo será parecido al del ejemplo siguiente:


3. Guarde el archivo cafe_townsend.css.
A continuación, va a ver el panel Estilos CSS para añadir propiedades a
la regla.
4. Abra el archivo index.htm si aún no está abierto.
5. En el panel Estilos CSS, asegúrese de que está seleccionado el modo
Todo, seleccione la nueva regla .navigation y haga clic en Editar estilo
en la esquina inferior derecha del panel.

6. En el cuadro de diálogo Definición de reglas de CSS, siga este
procedimiento:
■ En el cuadro de texto Fuente, escriba Verdana, sans-serif.
■ Seleccione 16 en el menú emergente Tamaño, y seleccione píxeles en el
menú emergente situado inmediatamente a la derecha del menú
emergente Tamaño.
■ Seleccione Normal en el menú emergente Estilo.
■ Seleccione Ninguno en la lista Decoración.
■ Seleccione Negrita en el menú emergente Grosor.
■ Escriba #FFFFFF en el cuadro de texto Color.

Formatear el texto de la barra de navegación 123

S UG E R E N CI A

Para más
información sobre A continuación, va a utilizar el panel Estilos CSS para añadir más
cualquier propiedad propiedades a la regla .navigation.
de CSS, consulte la 8. En el panel Estilos CSS, asegúrese de que la regla .navigation está
guía de referencia de
seleccionada y haga clic en Mostrar vista de lista.
O’Reilly que
acompaña a
Dreamweaver. Para
mostrar la guía,
seleccione Ayuda >
Referencia y
CSS Reference en el
menú emergente del
panel Referencia.


La vista de lista reconoce el panel Propiedades y muestra una lista
ordenada alfabéticamente de todas las propiedades disponibles (a
diferencia de la vista anterior de propiedades establecidas, que sólo
muestra las propiedades ya definidas).
9. Haga clic en la columna a la derecha de la propiedad background-
color.
Para ver el texto completo de una propiedad, coloque el ratón sobre la
propiedad.
10. Escriba #993300 como valor hexadecimal y presione la tecla Intro
(Windows) o Retorno (Macintosh).

11. Localice la propiedad display (es posible que tenga que desplazarse

SUGERENCIA
Para ver cómo
hacia abajo), haga clic una vez en la columna de la derecha y seleccione
afecta su trabajo a la
block en el menú emergente. hoja de estilos
externa, mientras
trabaja mantenga
abierto el archivo
cafe_townsend.css
en la ventana de
documento. Cuando
realice una selección
en el panel Estilos
CSS, verá cómo
Dreamweaver
escribe al mismo
tiempo el código de
CSS en la hoja de
estilos.
12. Localice la propiedad padding, haga clic una vez en la columna de la
derecha, introduzca el valor 8px y presione la tecla Intro (Windows) o
13. Localice la propiedad width, haga clic una vez en la columna de la
derecha, introduzca 140 en el primer cuadro de texto, seleccione píxeles
en el menú emergente y presione la tecla Intro (Windows) o Retorno
(Macintosh).


14. Haga clic en Mostrar propiedades establecidas para que sólo aparezcan
las propiedades establecidas en el panel Propiedades.

15. Haga clic en el archivo cafe_townsend.css para verlo. Como puede ver,
Dreamweaver ha añadido al archivo todas las propiedades definidas.
16. Guarde el archivo cafe_townsend.css y ciérrelo.
Ya ha creado una regla para formatear el texto de la barra de navegación.
A continuación va a aplicar la regla a los vínculos seleccionados.


Aplique la regla
1. Con la página index.html abierta en la ventana de documento, haga clic
en la palabra Cuisine para que el punto de inserción quede en algún
lugar de la palabra.

2. En el selector de etiquetas, haga clic en la etiqueta <a> más hacia la
derecha.
Esta acción selecciona todo el texto de una etiqueta <a> específica o
vínculo.

navigation en el menú emergente Estilo.
En la ventana de documento, verá como cambia completamente el
aspecto del texto Cuisine. Ahora, el texto tiene el formato de un botón
de la barra de navegación, de acuerdo a las propiedades de la regla
.navigation definida en la sección anterior.


4. Repita los pasos 1 a 3 para cada vínculo de la barra de navegación.
Debe asignarle un estilo de clase de navegación a cada etiqueta <a> o
vínculo; por ello, es importante que utilice el selector de etiquetas para
seleccionar cada vínculo individualmente y que después asigne los
estilos de clase de uno en uno.

Si tiene problemas para formatear el texto del vínculo, asegúrese de que
hay un espacio (no un salto de línea) entre cada palabra o palabras
vinculadas. Asegúrese también de que el espacio entre los dos vínculos
no forma parte de los mismos. Si forma parte de éstos, seleccione
cuidadosamente el espacio en cuestión, borre el cuadro de texto
Vínculo en el inspector de propiedades y presione Intro (Windows) o
5. Cuando haya terminado de formatear todas las palabras para la barra de
navegación, guarde la página y abra una vista previa de su trabajo en un
navegador (Archivo > Vista previa en el navegador).
Si lo desea, haga clic en los vínculos para comprobar que funcionan.


Añadir un efecto sustitución
A continuación va a añadir un efecto sustitución de manera que el color de
fondo de los bloques de la barra de navegación cambie cuando el puntero
del ratón pase sobre uno de los vínculos. Para añadir el efecto sustitución,
añada una nueva regla que contenga la pseudoclase :activable.
A c er c a d e. . .

La pseudoclase :activable Una pseudoclase es un modo de influir en determinados elementos de un
documento HTML, basándose no en el código HTML del documento en sí sino en otras condiciones
externas aplicadas por el navegador. Las pseudoclases pueden ser dinámicas, en el sentido de que un
elemento de la página podría adquirir o peder la pseudoclase mientras el usuario interactúa con el
documento.
La pseudoclase :activable produce un cambio en un elemento formateado de la página cuando el usuario
mantiene el ratón sobre dicho elemento. Por ejemplo, cuando la pseudoclase :activable se incorpora al
estilo de clase .navigation (.navigation:activable) para crear una nueva regla, todos los elementos de texto
formateados por la regla .navigation cambiarán según las propiedades de la regla .navigation:activable.

1. Abra el archivo cafe_townsend.css.
2. Seleccione toda la regla .navigation.

3. Copie el texto (Edición > Copiar).


4. Haga clic una vez al final de la regla y presione Intro (Windows) o
Retorno (Macintosh) unas cuantas veces para crear más espacio.

5. Pegue (Edición > pegar) el texto copiado en el espacio que acaba de
crear.
6. Añada la pseudoclase :activable al selector pegado de .navigation
siguiendo este procedimiento:


7. En la nueva regla .navigation:activable, sustituya el color de fondo actual
(#993300) por #D03D03.

8. Guarde el archivo y ciérrelo.
9. Abra el archivo index.html en la ventana de documento y compruebe la
vista previa de la página en un navegador (Archivo > Vista previa en el
navegador.
Cuando mantenga el ratón sobre cualquiera de los vínculos, podrá ver
el efecto sustitución.

(Opcional) Centrar el contenido
de la página
Por último, va a utilizar el selector de etiquetas para seleccionar todo el
HTML del documento y centrar el contenido del documento.
N O TA

Algunos navegadores (como Internet Explorer 6), centran el texto de la
página dentro del contexto de las celdas de tabla cuando se utiliza el
método descrito en esta sección. Si no le gusta el resultado al consultar la
vista previa en el navegador, ignore esta sección y deje el contenido de su
página alineado a la izquierda.

(Opcional) Centrar el contenido de la página 131

Dreamweaver, haga clic en la etiqueta <body> en el selector de etiquetas.

Al hacer clic en la etiqueta <body> se selecciona todo lo comprendido
entre las etiquetas de apertura y cierre de <body> en la ventana de
documento. Para ver la selección, haga clic en la vista Código en la
parte superior de la ventana de documento.


2. En el inspector de propiedades (Ventana > Propiedades), haga clic en el
botón Alinear al centro.

Dreamweaver inserta las etiquetas <div> de CSS que centran el
contenido del cuerpo de la página. En la vista Diseño, aparece una línea
de puntos alrededor de la zona centrada por las etiquetas <div>.
Su página ya está terminada. El último paso para crear su sitio Web es
publicar la página. Para publicar la página, deberá definir una carpeta en un
sitio remoto y cargar sus archivos a esa carpeta. Si necesita consultar las
instrucciones, pase al siguiente tutorial.

(Opcional) Centrar el contenido de la página 133

CAPÍTULO 7

Tutorial: Publicación
del sitio
7
En este tutorial se explica cómo definir un sitio remoto con Macromedia
Dreamweaver 8 y cómo publicar sus páginas Web. Un sitio remoto suele
ser un lugar en un equipo remoto donde se ejecuta un servidor Web y
donde se almacenan copias de sus archivos locales. Los usuarios acceden al
sitio remoto del servidor Web cada vez que visitan sus páginas en un
navegador.
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

Los sitios remotos
Después de crear un sitio Web, el paso siguiente es publicarlo cargando los
archivos en una carpeta remota. En la carpeta remota se almacenan los
archivos para fines de prueba, producción, colaboración y publicación
(dependiendo del entorno). En Dreamweaver esta carpeta se conoce como
sitio 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 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.

135

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 Apéndice B,
“Instalación de un servidor Web”, en la página 247.
El procedimiento descrito en este tutorial funciona mejor 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.
Antes de continuar también necesita haber definido un sitio local. Para más
información, consulte “Tutorial: Configuración del sitio y de los archivos
del proyecto” en la página 51.
Para más información sobre sitios de Dreamweaver, consulte Capítulo 2,
“Configuración de un sitio de Dreamweaver” en Utilización de
Dreamweaver.

Definir una carpeta remota
A continuación va a definir una carpeta remota para poder publicar sus
páginas Web. La carpeta remota suele tener el mismo nombre que la
carpeta local, pues el sitio remoto suele ser una copia exacta del sitio local.
Es decir, los archivos y subcarpetas que envíe a la carpeta remota son copias
de los archivos y subcarpetas creadas localmente.
1. En el servidor remoto, cree una carpeta vacía dentro de la carpeta raíz
Web del servidor.
Llame a la nueva carpeta vacía cafe_townsend (el mismo nombre que
su carpeta raíz local).

136 Tutorial: Publicación del sitio

A c e r ca d e .. .

Crear una carpeta remota con Dreamweaver Si Dreamweaver es su único método de acceso al
servidor remoto, no podrá crear una carpeta vacía en el servidor remoto hasta que haya completado la
configuración remota en Dreamweaver y se haya establecido una conexión. Si ése fuera el caso, puede
definir su directorio de servidor como carpeta remota o crear una carpeta remota después de haber
establecido una conexión con el servidor. En cualquier caso, siga las instrucciones de este tutorial hasta
que esté conectado a un servidor remoto. Una vez establecida la conexión, puede usar el panel Archivos
de Dreamweaver para crear una nueva carpeta remota.
Al establecer una conexión con un servidor remoto, el panel Archivos muestra todos los archivos del
servidor remoto en la Vista remota (igual que muestra todos los archivos locales en la Vista local). Para
mostrar la Vista remota, seleccione Vista remota en el menú emergente situado en la parte superior del
panel Archivos o haga clic en Expandir/contraer en la barra de herramientas del panel Archivos. Al hacer
clic en Expandir/contraer, el panel Archivo muestra simultáneamente la Vista local y la Vista remota.
Para añadir una carpeta vacía en Vista remota, muestre primero la Vista remota siguiendo uno de los
métodos descritos anteriormente. (Si al principio no puede ver su conexión, haga clic en Actualizar en la
barra de herramientas del panel Archivos.) Cuando vea que está conectado al servidor Web, haga clic
con el botón derecho (Windows) o haga clic manteniendo presionada la tecla de Control (Macintosh) en
Vista remota y seleccione Nueva carpeta.

Botón Actualizar Botón Expandir/contraer

Para más información, consulte Capítulo 4, “Administración de archivos” en Utilización de Dreamweaver.

2. En Dreamweaver, seleccione Sitio > Administrar sitios.
3. En el cuadro de diálogo Administrar sitios, seleccione el sitio de Cafe
Townsend.
Si todavía no ha definido el sitio de Cafe Townsend, cree una carpeta
local para el sitio antes de continuar. Para más información, consulte
“Tutorial: Configuración del sitio y de los archivos del proyecto” en
la página 51.
4. Haga clic en Editar.
5. En el cuadro de diálogo Definición del sitio, haga clic en la ficha
Avanzadas si las opciones avanzadas no están visibles.

Definir una carpeta remota 137

6. Seleccione Datos remotos en la lista Categoría que aparece en la parte
izquierda.
7. Seleccione una opción de acceso.
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.
Para más información, haga clic en la Ayuda del cuadro de diálogo.
8. Si elige FTP, introduzca las opciones siguientes:
■ Introduzca el nombre del host del servidor
(como ftp.macromedia.com).
■ En el cuadro de texto Directorio del servidor, introduzca la ruta del
servidor desde la carpeta raíz FTP hasta la carpeta raíz del sitio
remoto (cafe_townsend). Si no está seguro de qué ruta introducir,
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 Prueba para comprobar la conexión.
■ Si no consigue establecer conexión, consulte con el administrador
del sistema.
9. 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.
Dreamweaver crea una conexión con la carpeta remota.
11. 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.
1. En el panel Archivos (Windows > Archivos), seleccione la carpeta raíz
local del sitio (cafe_townsend).
2. Haga clic en el icono de flecha azul Colocar archivos de la barra de
herramientas del panel Archivos
.

3. Cuando Dreamweaver le pregunte si desea colocar todo el sitio, haga clic
en Aceptar.
Dreamweaver copia todos los archivos en la carpeta remota definida en
“Definir una carpeta remota” en la página 136. Esta operación puede
tardar cierto tiempo, ya que Dreamweaver debe cargar todos los
archivos en el sitio.
4. Abra el sitio remoto en un navegador para comprobar que todos los
archivos se han cargado correctamente.

Cargar los archivos locales 139

Solución de problemas de
configuración de carpetas
remotas (opcional)
Un servidor Web se puede configurar de muchas formas. En la siguiente
lista se ofrece información sobre algunos problemas habituales que pueden
surgir al configurar una carpeta remota y sobre cómo solucionarlos:
■ Es posible que la implementación FTP de Dreamweaver no funcione
correctamente con algunos servidores proxy, servidores de seguridad
multinivel y otras formas de acceso indirecto al servidor.
Si surgen problemas con el acceso FTP, solicite ayuda al administrador
del sistema local.
■ Para la implementación FTP de Dreamweaver, debe conectar con la
carpeta raíz del sistema remoto. (En muchas aplicaciones, puede
conectar con cualquier directorio remoto y luego navegar por el sistema
de archivos remoto para localizar el directorio deseado.)
Asegúrese de indicar la carpeta raíz del sistema remoto como el
directorio del servidor.
Si tiene algún problema para conectar y ha especificado el directorio del
servidor utilizando una sola barra inclinada (/), es posible que tenga
que especificar una ruta relativa desde el directorio con el que está
conectando y la carpeta raíz remota.
Por ejemplo, si la carpeta raíz remota está en un nivel de directorio
superior, puede que tenga que utilizar ../../ especificar el directorio del
servidor.
■ Los nombres de archivo y carpeta que contienen espacios y caracteres
especiales suelen ocasionar problemas al transferirse a sitios remotos.
Utilice caracteres de subrayado en lugar de espacios y evite los
caracteres especiales en los nombres de archivo y carpeta siempre que
pueda. En concreto, algunos caracteres que pueden causar problemas
en los nombres de archivo son los dos puntos (:), las barras (/), el punto
(.) y el apóstrofo ('). Los caracteres especiales en los nombres de archivo
o carpeta también pueden impedir que Dreamweaver cree un mapa del
sitio.


■ Si experimenta problemas con nombres de archivo largos, acórtelos.
En Macintosh, los nombres de archivo no pueden tener más de
31 caracteres.
■ Muchos servidores utilizan vínculos simbólicos (UNIX), accesos
abreviados (Windows) o alias (Macintosh) para conectar una carpeta de
una parte del disco del servidor con otra carpeta situada en otro
emplazamiento.
Por ejemplo, el subdirectorio public_html del directorio principal del
servidor puede ser en realidad un vínculo con cualquier parte del
servidor. En la mayoría de los casos, estos alias no tienen ninguna
repercusión sobre la capacidad de establecer conexión con la carpeta o
el directorio correspondientes, pero si consigue conectar con una parte
del servidor y no con otra, es posible que haya una discrepancia de alias.
■ Si aparece un mensaje de error del tipo "no se puede colocar el
archivo", es posible que la carpeta remota se haya quedado sin espacio.
Para más información, consulte el registro FTP.
NO TA

En general, cuando tenga un problema con una transferencia FTP,
examine el registro FTP; para ello, seleccione Sitio > Avanzado > Registro
FTP.

Solución de problemas de configuración de carpetas remotas (opcional) 141

3
PARTE 3

Tutoriales avanzados

La Parte Tres de este libro incluye tutoriales que presentan funciones
avanzadas de Dreamweaver. No se necesita ningún conocimiento previo de
HTML ni de ningún otro lenguaje para realizar estos tutoriales, pero
deberá tener presente que los tutoriales de esta parte son más complejos
que los de la parte anterior.
Tutorial: Utilización de código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Tutorial: Crear un diseño de página basado en CSS . . . . . . . . . . 159
Tutorial: Visualización de datos XML. . . . . . . . . . . . . . . . . . . . . . . . 183
Tutorial: Desarrollo de una aplicación Web . . . . . . . . . . . . . . . . . 207

143

CAPÍTULO 8

Tutorial: Utilización de
código
8
A medida que añade texto, imágenes y otro contenido a una página Web,
Dreamweaver 8 genera código HTML. En este tutorial se explica cómo
utilizar la vista Código para mostrar el código subyacente de un
documento, así como para añadir y editar el código manualmente.
Si ya ha configurado el sitio y ha finalizado el tutorial anterior, puede
continuar trabajando en la misma carpeta index.html.
No es necesario haber finalizado los tutoriales anteriores para seguir el
presente tutorial. En primer lugar, configure el sitio siguiendo las
instrucciones de “Tutorial: Configuración del sitio y de los archivos del
proyecto” en la página 51. A continuación, utilice el archivo
index_code.html en la carpeta cafe_townsend/completed_files/
dreamweaver para seguir este tutorial. index_code.html es una copia del
archivo terminado index.html del apartado Capítulo 6, “Tutorial:
Formatear la página con CSS”, en la página 107.
N OT A

Si comienza este tutorial con el archivo completado index_code.html y no
con el archivo index.html de Capítulo 6, “Tutorial: Formatear la página con
CSS”, en la página 107, algunos pasos e ilustraciones del tutorial no
coincidirán con lo que aparece en su pantalla.

Consulta del código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Cambio al espacio de trabajo de edición de código (sólo
Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
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

145

Consulta del código
Dreamweaver permite ver la página de dos formas distintas: la vista Diseño
(donde el documento aparece de forma muy similar a como lo haría en un
navegador) y la vista Código (donde se puede ver el código HTML
subyacente). También puede utilizar una vista dividida que muestra
simultáneamente las vistas de Código y de Diseño.
1. Asegúrese de que el archivo index.html esté activo en la ventana de
documento.
NO T A

Si no completó el archivo index.html a lo largo de los tutoriales anteriores,
consulte la introducción a este tutorial, donde se indica cómo proceder.

2. En la barra de herramientas Documento, haga clic en Mostrar vistas de
código y diseño (etiquetado con el texto Dividir).
NO TA

Si la barra de herramientas Documento no está visible, elija Ver > Barras
de herramientas > Documento.

146 Tutorial: Utilización de código

La ventana se divide y muestra tanto la vista Diseño como el código
HTML subyacente.

Botón
Actualizar

Puede editar el código en la vista Código. Los cambios realizados en el
código no se mostrarán en la vista Diseño hasta que haga clic en
Actualizar en la barra de herramientas Documento o haga clic en
cualquier punto de la vista Diseño.
3. (Opcional) Para mostrar sólo la vista Diseño, haga clic en vista Diseño.
4. (Opcional) Para mostrar sólo la vista Código, haga clic en vista Código.
Cuando trabaje con sus propias páginas, podrá utilizar la vista que le resulte
más cómoda. En la mayoría de los tutoriales de esta guía se presupone que
el usuario emplea la vista Diseño.

Consulta del código 147

Cambio al espacio de
trabajo de edición de código
(sólo Windows)
Si no lo hizo durante la instalación, ahora puede configurar, si lo desea,
el espacio de trabajo de Windows para que tenga la apariencia y el
funcionamiento de los populares entornos de codificación de HomeSite
y ColdFusion Studio de Macromedia.
N OT A

Los usuarios de Macintosh no pueden cambiar el espacio de trabajo.

Para cambiar al espacio de trabajo de edición de código:
■ Seleccione Ventana > Diseño del espacio de trabajo > Codificador.

Añadir una etiqueta con el
Selector de etiquetas
A continuación, va a utilizar el Selector de etiquetas para ajustar una
etiqueta div alrededor de una de las imágenes de la página. Después podrá
asignarle a la imagen márgenes, bordes o colores. Existen diversas maneras
de ajustar una etiqueta div alrededor de una imagen; en esta sección se
explica cómo utilizar el Selector de etiquetas, que ayuda a insertar cualquier
etiqueta y a añadir los valores de atributo adecuados.
1. Abra el archivo index.html si aún no está abierto.


2. En la vista Diseño, haga clic en el gráfico de rótulo de Cafe Townsend
(banner_graphic.jpg) para seleccionarlo.

3. Cambie a la vista Código haciendo clic en vista Código en la barra de
herramientas Documento, o seleccionando Ver > Vista código.
El código de la imagen seleccionada aparecerá seleccionado en la vista
Código. Asegúrese de que la etiqueta img completa está seleccionada,
incluidos los paréntesis angulares de apertura y cierre.

4. Seleccione Ver > Opciones de vista de Código > Ajustar texto para
activar el ajuste del texto en el caso de que no esté activado.
5. Haga clic con el botón derecho del ratón (Windows) o, con la tecla
Control presionada (Macintosh), haga clic en el texto seleccionado y, a
continuación, seleccione Insertar etiqueta en el menú emergente.
Aparecerá el Selector de etiquetas.
6. En el Selector de etiquetas, expanda la categoría Etiquetas HTML,
a continuación Formato y diseño y, por último, General.

Añadir una etiqueta con el Selector de etiquetas 149

En el panel de la derecha aparece una lista de nombres de etiquetas.
Seleccione div de la lista.

NO TA

También puede seleccionar la categoría Etiquetas HTML y, en el panel derecho,
la etiqueta div, sin expandir primero Formato y diseño.

7. Haga clic en Insertar.
Aparecerá un editor de etiquetas para la etiqueta div.
8. En el editor de etiquetas, seleccione la categoría Hoja de estilos/
Accesibilidad e introduzca banner en el cuadro de texto ID.

9. Haga clic en Aceptar para cerrar el editor de etiquetas e insertar la
etiqueta.


Dreamweaver inserta la etiqueta div en su página y la ajusta alrededor
de la etiqueta de imagen.

10. Haga clic en Cerrar para cerrar el Selector de etiquetas.

Edición de una etiqueta
A continuación, utilizará el inspector de etiquetas para modificar
rápidamente los atributos de una etiqueta. El inspector de etiquetas
muestra los atributos de la etiqueta seleccionada en la ventana de
documento.
1. Abra la página index.html en la vista Código si aún no está abierto.
2. Abra el inspector de etiquetas, si no está ya abierto, seleccionando
Ventana > Inspector de etiquetas.
3. Seleccione la ficha Atributos.
4. Haga clic en Mostrar vista de lista en el inspector de etiquetas para ver
todos los atributos de las etiquetas seleccionadas en orden alfabético.

Edición de una etiqueta 151

5. En la vista Código de la ventana de documento, haga clic en cualquier
lugar situado entre los paréntesis de apertura y cierre de cualquier
etiqueta.
La ficha Atributos del inspector de etiquetas muestra información sobre
los atributos HTML de las etiquetas.
6. Sin dejar la vista Código, encuentre y haga clic en la etiqueta img de la
imagen banner_graphic.jpg en la parte superior de la página.

La ficha Atributos del inspector de etiquetas muestra información sobre
los atributos de la etiqueta img.
7. En el inspector de etiquetas, haga clic en el cuadro de texto vacío situado
junto al atributo alt y escriba Cafe Townsend; después, presione Intro
(Windows) o Retorno (Macintosh).

Dreamweaver muestra el nuevo valor en el inspector de etiquetas y
modifica el código en la ventana de documento.


Consulta de información sobre
una etiqueta
Si necesita ayuda con los atributos y los valores de atributo de una etiqueta,
puede consultar información de referencia en Dreamweaver.
1. Abra la página index.html en la vista Código si aún no está abierto.
2. En la ventana de documento, seleccione el nombre de atributo alt (no
el valor de atributo) de una etiqueta img.
3. Haga clic con el botón derecho del ratón (Windows) o, con la tecla
Control presionada (Macintosh), haga clic en el texto seleccionado y a
continuación elija Referencia en el menú emergente.

Se abrirá el panel Referencia y mostrará información sobre el atributo
alt.
NO T A

También puede seleccionar Ventana > Referencia para acceder al panel
Referencia.

Consulta de información sobre una etiqueta 153

4. Para información sobre otra etiqueta u otro atributo, seleccione la
etiqueta o el atributo en el menú emergente correspondiente del panel
Referencia.

Añadir una imagen con
sugerencias para el código
Para añadir código a la página manualmente, haga clic en la vista Código y
comience a escribir. Puede utilizar la función de sugerencias para el código
si desea acelerar su trabajo.
En esta lección, utilizará sugerencias para el código y añadirá la imagen del
cartel de la calle a la página índice de Cafe Townsend.
1. Abra la página index.html si aún no está abierta.
2. En la vista Diseño, seleccione la imagen street_sign.jpg (debajo del
marcador de posición Flash Video) y pulse Eliminar.
A continuación va a utilizar sugerencias para el código para volver a
insertar una imagen, en lugar de arrastrarla desde el panel Activos como
en el apartado Capítulo 5, “Tutorial: Adición de contenido a
las páginas”, en la página 79.


3. Cambie a la vista Código haciendo clic en vista Código en la barra de
herramientas Documento, o seleccionando Ver > Vista código.
En vista Código, el punto de inserción deberá estar entre una etiqueta
de apertura de párrafo y una de cierre, tal y como se muestra a
continuación:

Si no ve una etiqueta de apertura de párrafo y una de cierre antes de la
etiqueta de cierre de celda de la tabla </td>, escríbalas como se indica a
continuación:

Coloque el punto de inserción entre la etiqueta <p> de apertura y la
etiqueta </p> de cierre.
4. Borre todo lo que pudiera aparecer entre la etiqueta <p> de apertura y la
etiqueta </p> de cierre como, por ejemplo, los espacios indivisibles
( ).
5. Con el punto de inserción entre la etiqueta <p> de apertura y la etiqueta
</p> de cierre, escriba un paréntesis angular de apertura (<).

Añadir una imagen con sugerencias para el código 155

Aparecerá una lista de etiquetas en el punto de inserción.

NO TA

Puede establecer la duración de la demora antes de que aparezca la lista
seleccionando Edición > Preferencias (Windows) o Dreamweaver >
Preferencias (Macintosh) y, a continuación, seleccionando Sugerencias
para el código en la lista Categoría de la izquierda. En la vista Código,
puede mostrar un menú de sugerencias para el código en cualquier
momento presionando las teclas Control y la barra espaciadora, y cerrar
dicho menú presionando Escape.

6. Seleccione la etiqueta img en la lista y presione Intro (Windows) o
Retorno (Macintosh) para insertar la primera parte de la etiqueta.
7. Presione la barra espaciadora para mostrar una lista de atributos de la
SUGERENCIA

Para desplazarse
etiqueta.
rápidamente a una
etiqueta, escriba las 8. Comience a escribir src y presione Intro (Windows) o Retorno
primeras letras del (Macintosh) cuando esté seleccionado el atributo src en el menú de
nombre de la misma. sugerencias.

La palabra Examinar aparece seleccionada bajo el código que acaba de
escribir.
9. Presione Intro (Windows) o Retorno (Macintosh) para localizar un
archivo.


10. En el cuadro de diálogo Seleccionar archivo, acceda al archivo
street_sign.jpg (está en la carpeta imágenes de la carpeta raíz
cafe_townsend) y haga clic en Aceptar (Windows) o Escoger
(Macintosh).

La URL del archivo de imagen se insertará como valor del atributo src
y el punto de inserción aparecerá después de las comillas de cierre.
11. Presione la barra espaciadora, seleccione el atributo alt en el menú de
sugerencias y a continuación presione Intro (Windows) o Retorno
(Macintosh).
12. Deje las comillas vacías, ya que esta imagen es únicamente una
ilustración.
Utilice la tecla de flecha derecha para mover el punto de inserción a la
derecha de las comillas.
13. Escriba un paréntesis angular de cierre (>) para completar la etiqueta.


Añadir una imagen con sugerencias para el código 157

Comprobación de los cambios
S U G E R E N C IA

Para añadir un
atributo a una
Después de realizar cambios en el código, puede ver inmediatamente los
etiqueta ya creada,
coloque el punto de resultados.
inserción justo
después del valor del
Para obtener una representación visual del código, siga uno de
atributo final de la
estos procedimientos:
etiqueta y presione la ■ Haga clic en la vista Diseño o en las vistas Código y Diseño (etiquetado
barra espaciadora. con el texto Dividir) en la barra de herramientas Documento.
Cuando aparezca
■ Previsualice la página en un navegador Web presionando F12
una lista de atributos,
añada un atributo y
(Windows) u Opción+F12 (Macintosh). Para cerrar el navegador y
especifique su valor volver al código, presione Alt+F4 (sólo Windows).
si lo tiene.

Imprimir el código
Puede imprimir el código para editarlo fuera de línea, archivarlo o
distribuirlo.

Para imprimir código:
1. Abra una página en la vista Código.
2. Seleccione Archivo > Imprimir código.
3. Especifique las opciones de impresión y haga clic en Aceptar (Windows)
o en Imprimir (Macintosh).


CAPÍTULO 9

Tutorial: Crear un diseño de
página basado en CSS 9
En Capítulo 4, “Tutorial: Crear un diseño de página basado en tablas” ha
aprendido a utilizar las funciones del diseño de tabla de Dreamweaver para
crear un diseño de página. En este tutorial va a aprender a utilizar hojas de
estilos en cascada (CSS) para crear un diseño similar. Muchos diseñadores
prefieren los diseños basados en CSS, porque CSS ofrece un mayor control
sobre la situación de elementos, reduce la cantidad de código necesario y
permite formatear bloques de diseño con márgenes, bordes, colores, etc..
Si no ha definido un sitio de Dreamweaver ni creado la carpeta raíz local
cafe_townsend, deberá hacerlo antes de continuar. Para instrucciones,
consulte Capítulo 3, “Tutorial: Configuración del sitio y de los archivos del
proyecto”.
En este tutorial, llevará a cabo las tareas siguientes:
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

159

Diseño de página basado en
CSS
Muchos sitios Web utilizan diseños basados en tablas para mostrar la
información en las páginas. Las tablas son útiles a la hora de presentar datos
tabulares (como filas y columnas de elementos recurrentes) y son muy
fáciles de introducir en la página. Pero las tablas también tienden a generar
una gran cantidad de código que es difícil de leer y de mantener. Además,
debido a la gran cantidad de etiquetas que se necesitan y a la tendencia a
"anidar", las tablas pueden causar problemas para las personas
discapacitadas que utilizan lectores de pantalla para ver las páginas.
Un diseño basado en CSS, es decir, un diseño que utiliza elementos de
bloques en lugar de filas y columnas de tabla, contiene mucho menos
código que un diseño similar basado en tablas. Los diseños basados en CSS
suelen utilizar etiquetas <div> en lugar de <table> para crear los bloques
CSS utilizados para el diseño. Puede colocar estos bloques CSS en
cualquier lugar de la página y asignarles propiedades como bordes,
márgenes, colores de fondo, etc. Además, a los usuarios que utilizan
lectores de pantalla les será mucho más sencillo acceder al contenido de las
páginas Web creadas con CSS, porque el código es más sencillo y más
corto.
Dreamweaver le permite utilizar capas. Una capa de Dreamweaver es un
elemento de página HTML que se puede colocar en cualquier lugar del
documento. Específicamente, es una etiqueta <div> (o cualquier otra
etiqueta) con una posición absoluta. Las capas se arrastran hasta su página
con Dreamweaver y después las coloca donde quiera. Las capas funcionan
como bloques de contenido que pueden albergar activos como imágenes,
archivos Flash, texto, etc.
Las capas de Dreamweaver son elementos que tienen una posición
absoluta. Es decir, tienen una posición específica que se define de manera
relativa a los márgenes superior e izquierdo de la página. No puede crear un
diseño basado en CSS con capas y después centrar el contenido de la
página. Por ello, el diseño de este tutorial será algo diferente al creado en
Capítulo 4, “Tutorial: Crear un diseño de página basado en tablas”.
Para más información sobre capas de Dreamweaver, consulte Capítulo 7,
“Diseño de páginas con CSS” en Utilización de Dreamweaver.

160 Tutorial: Crear un diseño de página basado en CSS

Examen de la maqueta de diseño
N OT A

Si ya ha completado el apartado Capítulo 4, “Tutorial: Crear un diseño de
página basado en tablas” y ha examinado el diseño de maqueta, puede
pasar a la sección siguiente para empezar a crear su diseño basado en
CSS.

Lo habitual no es empezar a construir un sitio Web iniciando
Dreamweaver y creando páginas directamente. Los primeros pasos para
crear un sitio Web debe darlos sobre una hoja de papel, o en una aplicación
de edición gráfica como Macromedia Fireworks. Los diseñadores gráficos
suelen crear un boceto artístico general del sitio Web (también conocido
como “maqueta”), con el fin de mostrárselo al cliente y asegurarse de que la
idea inicial para el sitio Web recibe la aprobación del cliente.
Un comp está formado por una cantidad indeterminada de elementos de
páginas que el cliente ha solicitado para su sitio Web. Por ejemplo, el
cliente podría haber dicho: "quiero un logotipo en la parte superior de la
página, una zona de navegación que enlace con estas otras páginas, una
sección para una tienda en línea y una parte donde pueda insertar
videoclips.” A partir de esto, el diseñador comienza a planificar el diseño de
la página y realiza bocetos de páginas de muestra que cumplen los
requisitos del cliente.

Examen de la maqueta de diseño 161

Este tutorial le proporciona una maqueta completa y aprobada para Cafe
Townsend, un restaurante ficticio que ha solicitado un sitio Web. Su
trabajo como diseñador Web consiste en transformar el comp en una
página web activa (probablemente contando con la ayuda de otros
diseñadores gráficos y desarrolladores de Flash).

Verá que el diseñador gráfico le ha proporcionado un comp para una
página Web que incluye varias zonas de contenido, así como algunas ideas
gráficas. A lo largo de los apartados siguientes, va a utilizar Dreamweaver
para desarrollar este diseño.


También puede abrir el archivo comp original para verlo en la pantalla del
equipo. El archivo comp, homepage-mockup.jpg, puede encontrarlo en la
carpeta fireworks_assets dentro de la carpeta cafe_townsend que copió a su
disco duro en el apartado Capítulo 3, “Tutorial: Configuración del sitio y
de los archivos del proyecto”. Si lo prefiere, también puede imprimir el
comp consultarlo mientras crea la página.

Creación y almacenamiento de
una página nueva
Después de crear un sitio nuevo y examinar los comps, ya puede empezar a
crear páginas Web. Comience creando una página nueva y guardándola en
la carpeta raíz local cafe_townsend de su sitio Web. Más adelante esta
página será la página de inicio de Cafe Townsend, un restaurante ficticio.
Si no ha creado una carpeta raíz local llamada cafe_townsend, deberá
hacerlo antes de continuar. Para instrucciones, consulte Capítulo 3,
“Tutorial: Configuración del sitio y de los archivos del proyecto”.
1. En Dreamweaver, Seleccione Archivo > Nuevo.
2. En la ficha General del cuadro de diálogo Nuevo documento, seleccione
Página básica en la lista Categoría, seleccione HTML en la lista Página
básica y haga clic en Crear.
3. Seleccione Archivo > Guardar como.
4. En el cuadro de diálogo Guardar como, busque y abra la carpeta
cafe_townsend que definió como carpeta raíz local del sitio.
Esta carpeta la creó en Capítulo 3, “Tutorial: Configuración del sitio y
de los archivos del proyecto”, dentro de una carpeta llamada local_sites.
5. Escriba index_css.html en el cuadro de texto Nombre de archivo y haga
clic en Guardar.
El nombre de archivo aparecerá ahora en la barra de título en la parte
superior de la ventana de la aplicación, entre paréntesis.

Creación y almacenamiento de una página nueva 163

6. En el cuadro de texto Título del documento en la parte superior del
nuevo documento, escriba Cafe Townsend.

Éste es el título de la página (distinto al nombre de archivo). Los
visitantes del sitio verán este título en la barra del título del navegador
cuando accedan a ella a través de su navegador Web.
7. Seleccione Archivo > Guardar para guardar la página.

Insertar capas
A continuación, va a insertar capas en la página. Una capa es un elemento
con posición absoluta que puede utilizar para albergar imágenes, texto
archivos Flash y otro tipo de contenido. Para más información sobre capas,
consulte “Diseño de página basado en CSS” en la página 160.

Dibujar una capa nueva
1. Con la página index_css.html abierta en la ventana de documento,
seleccione el modo de diseño en la barra Insertar.

2. Haga clic en Dibujar capa.


El puntero del ratón se convertirá en un puntero en cruz cuando lo
mueva sobre la página.
3. Arrastre una capa de cualquier tamaño sobre la página y suelte el botón
del ratón.
4. Haga clic en el manejador de selección situado en la esquina superior
izquierda de la capa para asegurarse de que está seleccionada.
5. Una vez seleccionada la nueva capa, siga este procedimiento en el
inspector de propiedades (Ventana > Propiedades):
■ Haga clic en el cuadro de texto ID de capa y cambie el nombre de la
capa a banner_graphic.
■ En el cuadro de texto Ancho (An), escriba 700px..
■ En el cuadro de texto Alto (Al), escriba 90px.
■ En el cuadro de texto Izquierda (Iz), escriba 20px.
■ En el cuadro de texto Superior (Sup), escriba 20px.
■ Presione Intro (Windows) o Retorno (Macintosh) para aplicar su
última entrada.

Dreamweaver aplicará el tamaño y la situación a la nueva capa
banner_graphic. La capa banner_graphic tiene 700 píxeles de ancho
por 90 píxeles de alto. Además, está situada a 20 píxeles del margen
izquierdo de la página y a 20 del margen superior de la página.

Insertar capas 165

6. Abra el panel Capas (Ventana > Capas). Como puede ver, Dreamweaver
S U G E R E N C IA

Para colocar la capa
ha añadido la nueva capa (banner_graphic) a la lista de capas.
banner_graphic ha
utilizado valores 7. Haga clic una vez fuera de la nueva capa para anular su selección.
precisos en píxeles 8. Guarde la página.
en el inspector de
propiedades, pero
puede colocar una Añadir más capas
capa en cualquier
lugar de la página A continuación, va a añadir más capas a la página. Va a utilizar la primera
arrastrando el capa (banner_graphic) como punto de referencia para colocar el resto de
manejador de capas. También va utilizar la función de fondos de capas de CSS para
selección situado en
ayudarle a colocar las capas y a distinguirlas.
la esquina superior
izquierda de la capa 1. En la categoría Capa de la barra Insertar, haga clic en Dibujar capa y
seleccionada. arrastre hasta la página otra capa de cualquier tamaño.

2. Haga clic en el manejador de selección de la nueva capa para
seleccionarla.


inspector de propiedades:
capa a flash_fma.
■ En el cuadro de texto Superior (Sup), escriba 111px.
última entrada.
Dreamweaver aplicará el tamaño y la situación a la nueva capa
flash_fma.
.

La capa flash_fma tiene 700 píxeles de ancho por 166 píxeles de alto.
Además, está situada a 20 píxeles del margen izquierdo de la página y a
111 del margen superior de la página. Ha colocado esta capa a 111
píxeles del margen superior de la página para que no se solape con la
capa banner_graphic.

Insertar capas 167

Si las capas se solapan, notará como el borde de una de las capas (la que
está debajo) se marca con una línea de puntos.
4. Haga clic una vez fuera de la nueva capa para anular su selección.
5. Seleccione Ver > Ayudas visuales > Fondos de diseño CSS.

Dreamweaver inserta colores de fondo en las capas. Estos colores se
seleccionan aleatoriamente y no aparecen en la página Web publicada.
Se trata simplemente de ayudas visuales que ofrece Dreamweaver para
ayudarle a ver en qué punto de la página estarán las capas y otros tipos
de elementos de bloques.
Si lo desea, puede volver a desactivar los Fondos de diseño CSS
seleccionando Ver > Ayudas visuales y anulando la selección de Fondos
de diseño CSS.


6. A continuación, arrastre tres capas más hasta la página, debajo de la capa
banner_graphic y de la capa flash_fma.
No olvide hacer clic en Dibujar capas en la barra Insertar antes de
arrastrar una nueva capa.

Insertar capas 169

7. Cuando tenga tres capas más en la página, utiliza el inspector de
propiedades para hacer lo siguiente:
■ Seleccione la primera capa, llámela header y asígnele el tamaño
700 píxeles de ancho por 24 píxeles de alto.
última entrada.
■ Seleccione la segunda capa, llámela center_content y asígnele el
S U G E R E N CI A

Para seleccionar una
tamaño 700 píxeles de ancho por 350 píxeles de alto.
capa, haga clic en
algún punto del ■ Presione Intro (Windows) o Retorno (Macintosh) para aplicar su
borde de la capa o última entrada.
del manejador de
NO TA

selección de la capa, Cuando cambie el tamaño de la capa center_content a 350 píxeles de
pero no dentro de la alto, se solapará sobre la otra capa de la página. Antes de proceder con el
misma. Para siguiente paso, mueva la otra capa debajo de la capa center_content
asegurarse de que la seleccionándola y arrastrando el manejador de selección hasta la parte
capa ha sido inferior de la página.
seleccionada,
compruebe que
■ Seleccione la tercera capa, llámela footer y asígnele el tamaño 700
aparecen píxeles de ancho por 24 píxeles de alto. Presione Intro (Windows) o
manejadores de Retorno (Macintosh) para aplicar su última entrada.
cambio de tamaño Cuando haya terminado, la página se parecerá a ésta:
sobre los bordes de
la capa y que puede
ver las propiedades
de ancho y alto en el
inspector de
propiedades.
También puede
seleccionar una capa
haciendo clic sobre
su nombre en el
panel Capas
(Ventana > Capas).


8. A continuación, seleccione la capa header y arrastre el manejador de
selección hasta que la capa esté justo debajo de la capa flash_fma.
Si desea comprobar la posición de la capa mientras la arrastra, haga clic
fuera de ésta para anular su selección.

Insertar capas 171

9. Seleccione y arrastre la capa center_content y la capa footer, o utilice las
S U G E R E N C IA

También puede
teclas de flecha de su equipo para situar las capas, como muestra el
mover una distancia
de un píxel las capas
ejemplo siguiente:
seleccionadas
pulsando las teclas
de flecha del
teclado. Pruebe a
utilizar el inspector
de propiedades para
alinear la capa
header a una
distancia de 20
píxeles del margen
izquierdo de la
página. A
continuación, utilice
la tecla Flecha arriba
para mover la capa
hacia arriba hasta
que toque el borde
inferior de la capa
flash_fma.

10. Una vez colocadas las capas en posición, desactive los Fondos de diseño
S UG E R E N CI A

También puede
CSS (si todavía no lo están) seleccionando Ver > Ayudas visuales y
utilizar el botón
Ayudas visuales en
anulando la selección de Fondos de diseño CSS.
la barra de
herramientas
Documento para
Añadir capas dentro de una capa
activar o desactivar Las últimas capas que va a dibujar estarán dentro de la capa más grande
los Fondos de
center_content. Estas capas son el equivalente a las celdas de tablas que
diseño CSS.
añadió a la página en el apartado Capítulo 4, “Tutorial: Crear un diseño de
página basado en tablas”.
1. Haga clic una vez a la derecha de sus capas para asegurarse de que no hay
nada seleccionado.


2. En la categoría Diseño de la barra Insertar, haga clic en Dibujar capa y
arrastre otra capa dentro de la capa center_content, como muestra el
ejemplo siguiente:

3. Haga clic en el manejador de selección de la nueva capa para asegurarse
de que la capa está seleccionada.
capa a navigation.
última entrada.

Insertar capas 173

5. Utilice la tecla Flecha arriba del teclado para mover la capa navigation
hasta que encaje perfectamente dentro de la capa center_content, tal y
como muestra el ejemplo siguiente:


6. Cree otra capa en la capa center_content haciendo clic en Dibujar capa
y arrastrando otra capa, tal y como muestra el ejemplo siguiente:

capa a flash_video.
última entrada.

Insertar capas 175

9. Arrastre la capa flash_video o utilice las teclas de flecha del teclado para
situar la capa, tal y como muestra el ejemplo siguiente:


10. Cree una capa más en la capa center_content haciendo clic en Dibujar
capa y arrastrando otra capa, tal y como muestra el ejemplo siguiente:

capa a text.
última entrada.

Insertar capas 177

13. Arrastre la capa text o utilice las teclas de flecha del teclado para situar la
capa, tal y como muestra el ejemplo siguiente:

N O TA

Si aparecen líneas de puntos en los bordes de una capa, no hay ningún
problema. Sólo significa que sus capas están solapadas por uno o dos
píxeles.



Añadir color a la página
A continuación va a añadir color a la página configurando los colores de

S U G E R E N CI A
Puede cambiar el
fondo de algunas capas y del fondo de la página.
ancho de la columna
1. Seleccione la capa navigation haciendo clic sobre su nombre en el panel Nombre en el panel
Capas (Ventana > Capas). Capas arrastrando el
borde derecho del
título de la columna
hacia la izquierda o
la derecha.

2. En el inspector de propiedades, haga clic una vez dentro del cuadro de
texto Color de fondo.
El cuadro de texto está situado justo al lado del cuadro de color del
Color de fondo (Col. Fondo).
#993300 y presione Intro (Windows) o Retorno (Macintosh).

El color de fondo de la capa navigation se volverá de color marrón
rojizo.
4. Seleccione la capa flash_video haciendo clic sobre su nombre en el panel
Capas.
#F7EEDF y presione Intro (Windows) o Retorno (Macintosh).
La celda de la capa flash_video se volverá de color marrón claro.

Añadir color a la página 179

6. Repita los pasos anteriores para cambiar también el color de la capa text
a un marrón claro.

7. Una vez definidos los colores de fondo de las tres capas, haga clic una
vez a la derecha de todas sus capas para asegurarse de que no haya nada
seleccionado.
A continuación cambiará el color de fondo de toda la página
modificando las propiedades de la página. El cuadro de diálogo
Propiedades de la página le permite configurar varias propiedades de la
página, incluyendo, entre otros, el tamaño y el color de las fuentes de la
página, el color de los vínculos visitados, los márgenes de la página.
8. Seleccione Modificar > Propiedades de la página.
9. En la categoría Aspecto del cuadro de diálogo Propiedades de la página,
haga clic en el cuadro de color Color de fondo y seleccione negro
(#000000) en el selector de color.

El color de fondo de la página se vuelve negro.
Su diseño de página CSS ya está terminado. El diseño incluye varias capas
que pueden albergar activos como imágenes, texto y archivos de Flash
Video. El siguiente paso consiste en añadir contenido.


Si ya ha completado el apartado Capítulo 5, “Tutorial: Adición de
contenido a las páginas”, sabrá que puede utilizar Dreamweaver para
insertar fácilmente activos en la página. Si no completó el tutorial, puede
utilizar las ilustraciones como referencia mientras va añadiendo contenido
al diseño de página basado en CSS que acaba de realizar.
La versión final de este tutorial se encuentra en la carpeta cafe_townsend/
completed_files/dreamweaver.

Añadir color a la página 181

CAPÍTULO 10

Tutorial: Visualización de
datos XML
10
Este tutorial le muestra cómo crear una página Web que muestre datos
XML. La visualización de datos XML implica recuperar información
almacenada en un archivo XML local o remoto para, posteriormente,
mostrar dicha información en la página. La ventaja importante que supone
el uso de datos XML en páginas Web es la posibilidad de separar el
contenido de la presentación: el contenido de la página (los datos) son
totalmente independientes de la presentación de la página (el diseño, el
estilo del texto, etc.). De este modo, cualquiera puede trabajar con el
archivo XML sin necesidad de alterar la presentación de la página, y
viceversa.
Aunque no es imprescindible, se recomienda estar relativamente
familiarizado con las hojas de estilos en cascada (CSS) para poder seguir
este tutorial. De lo contrario, tal vez debería realizar Capítulo 6, “Tutorial:
Formatear la página con CSS”, en la página 107.
En este tutorial, llevará a cabo las tareas siguientes:
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

183

Adjuntar la página XSLT a la página XML . . . . . . . . . . . . . . . . . . 203
Más información sobre otras opciones de implementación . . . 205

Los archivos necesarios para poder realizar este tutorial se encuentran en la
carpeta xml, dentro de la carpeta raíz cafe_townsend que copió en el
equipo en el tutorial Capítulo 3, “Tutorial: Configuración del sitio y de los
archivos del proyecto”. Si no ha realizado dicho tutorial, debe hacerlo antes
de seguir con éste.
La carpeta xml contiene el archivo principal con el que trabajará en este
tutorial (xml_menu.html), la hoja de estilos CSS para la página del menú
(xml_menu.css), un archivo con los datos XML (specials.xml), una carpeta
de imágenes y varias páginas HTML más.
La versión final del tutorial, xml_menu.xsl, se encuentra en el directorio
cafe_townsend/completed_files/dreamweaver/xml.

184 Tutorial: Visualización de datos XML

Repaso de la tarea
El Café Townsend, un restaurante ficticio, publica en la actualidad una lista
de platos diarios en su sitio Web. Para ello, utilizan una tabla HTML con
distintas filas para mostrar la información. La columna situada a la
izquierda de cada fila muestra el nombre del artículo y su descripción. La
columna situada a la derecha de cada fila muestra el precio de cada artículo.
Toda la información de la página proviene de código manual (es decir, no
procede de una fuente de datos dinámicos) y se ha dado formato al texto
con una hoja de estilos externa.

Los propietarios del Café Townsend han decidido “dinamizarse” y utilizar
datos de un archivo XML para mostrar sus especialidades del día. Gracias al
XML es posible separar el contenido de la página (las especialidades del
menú) de la presentación (el diseño, el estilo del texto, etc.). Un empleado
sin conocimientos de HTML ni de mantenimiento de páginas Web puede
actualizar fácilmente la información editando el archivo XML, mientras los
estilos de la página que muestra la información del menú permanecen
intactos.


En este tutorial convertirá la página de especialidades existente (una página
HTML) en una página XSLT para poder mostrar los datos XML en la
página. Asimismo, aplicará estilos a los datos XML para que el aspecto de
los datos sea coherente con el del resto de la página.
Si ya está familiarizado con el uso de XML, XSLT y transformaciones en el
lado del cliente, puede omitir este tutorial y continuar con “Conversión de
una página HTML en una página XSLT” en la página 190. Si, por el
contrario, estos conceptos suponen una novedad, lea las siguientes
secciones.

Más información sobre el uso de
XML y XSL en páginas Web
El lenguaje de formato ampliable (XML) es un lenguaje que permite al
usuario estructurar la información. Al igual que ocurre con HTML, XML
permite estructurar la información con ayuda de etiquetas; pero las
etiquetas XML no están predefinidas como en HTML. XML permite crear
las etiquetas que mejor definan la estructura de datos. Las etiquetas se
anidan unas dentro de otras para crear un esquema de etiquetas padre e
hijo. Al igual que ocurre con la mayoría de las etiquetas HTML, todas las
etiquetas de un esquema XML deben tener una etiqueta de apertura y otra
de cierre.
El siguiente ejemplo describe la estructura básica de un archivo XML:
<?xml version=“1.0”>
<mybooks>
<book bookid=“1”>
<pubdate>03/01/2004</pubdate>
<title>Visualización de datos XML con Macromedia
Dreamweaver</title>
<author>Charles Brown</author>
</book>
<book bookid=“2”>
<pubdate>04/08/2004</pubdate>
<title>Aspectos básicos de XML</title>
<author>John Thompson</author>
</book>
</mybooks>


En este ejemplo, cada etiqueta padre <book> contiene tres etiquetas hijo:
<pubdate>, <title> y <author>. Pero cada etiqueta <book> también es
una etiqueta hijo de la etiqueta <mybooks>, que ocupa un nivel superior en
el esquema. No hay restricciones para nombrar y estructurar las etiquetas
XML, siempre y cuando se aniden correctamente unas dentro de otras y
cada etiqueta de apertura tenga su correspondiente etiqueta de cierre.
Los documentos XML no tienen formato alguno: son simples
contenedores de información estructurada. (Observará que el código de
muestra no contiene etiquetas de fuentes, tablas o encabezados.) Una vez
conseguido el esquema XML, se puede utilizar el lenguaje XSL (Lenguaje
de hojas de estilo ampliable) para mostrar la información. Del mismo
modo que las hojas de estilos en cascada (CSS) permiten dar formato al
HTML, el lenguaje XSL permite dar formato a los datos XML. Puede
definir estilos, elementos de página, el diseño, etc., en un archivo XSL y
adjuntarlo a un archivo XML de tal modo que, cuando un usuario visualice
los datos XML en un navegador, éstos estén formateados según lo que haya
definido en el archivo XSL. El contenido (los datos XML) y la presentación
(definida por el archivo XSL) son totalmente independientes, y
proporcionan un mayor control sobre el modo en que aparece la
información en una página Web. Esencialmente, XSL es una tecnología de
presentación para XML, en la que el resultado principal es una página
HTML.
XSLT (Transformaciones de lenguaje de hojas de estilo ampliable) es un
subconjunto del lenguaje XSL que permite mostrar los datos XML en una
página Web y “transformarlos” (junto con los estilos XSL) en información
legible y con estilos en formato HTML. Se puede utilizar Dreamweaver
para crear páginas XSLT que permitan realizar transformaciones XSL
mediante un servidor de aplicaciones o un navegador. Al llevar a cabo una
transformación XSL en el lado del servidor, éste realiza el trabajo de
transformación de XML y XSL, y muestra los datos en la página. Cuando
esta transformación se produce en el lado del cliente, todo el trabajo corre a
cargo del navegador (por ejemplo, Internet Explorer).

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

El método adoptado en última instancia (transformaciones en el lado del
servidor o en el lado del cliente) depende de lo que se intente obtener como
resultado final, de la tecnología disponible, del nivel de acceso a los
archivos de origen XML y de otros factores. Los dos métodos presentan sus
propias ventajas y limitaciones. Por ejemplo, las transformaciones en el
lado del servidor funcionan en todos los navegadores, mientras que las
transformaciones en el lado del cliente están limitadas solamente a los
navegadores más modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 y
Firefox 1.0.2). Las transformaciones en el lado del servidor permiten
mostrar los datos XML dinámicamente desde su propio servidor o desde
cualquier otra ubicación de la red, mientras que las transformaciones en el
lado del cliente deben utilizar datos XML alojados localmente en su propio
servidor Web. Por último, las transformaciones en el lado del servidor
requieren el desarrollo de las páginas en un servidor de aplicaciones
configurado, mientras que las transformaciones en el lado del cliente sólo
requieren acceso a un servidor Web.
En este tutorial recorrerá los pasos necesarios para crear una página XSLT y
realizar una transformación en el lado del cliente (fundamentalmente
debido a que el flujo de trabajo en el lado del cliente es mucho más sencillo
de ejecutar y no requiere la utilización de un servidor de aplicaciones). Para
más información sobre otras formas de desarrollar páginas XSLT, consulte
“Más información sobre otras opciones de implementación” en
la página 205.

Más información sobre las
páginas XSLT
Al trabajar con transformaciones XSL en el lado del servidor, se puede
utilizar Dreamweaver para crear páginas XSLT que produzcan documentos
HTML completos (páginas XSLT completas) o fragmentos de XSLT que
generen porciones de un documento HTML.


Una página XSLT completa es parecida a una página HTML normal.
Contiene una etiqueta <body> y una etiqueta <head>, y permite visualizar
una combinación de datos HTML y XML en la página. Un fragmento de
XSLT es una porción de código (utilizada por un documento
independiente) que muestra los datos XML formateados. Al contrario de lo
que sucede en una página XSLT completa, los fragmentos son archivos
independientes que no contienen etiquetas <body> ni <head>.
Si quiere mostrar datos XML en una página propia, debe crear una página
XSLT completa y vincular los datos XML. Por el contrario, si quiere
mostrar datos XML en una sección concreta de una página dinámica
existente (por ejemplo, una página de inicio dinámica para una tienda de
productos deportivos, con información de la clasificación de resultados
desde un agregador RSS que se muestren en un lado de la página) deberá
crear un fragmento de XSLT e insertar una referencia a él en la página
dinámica. La creación de fragmentos de XSLT y su uso en combinación
con otras páginas dinámicas para mostrar datos XML es el caso más
habitual cuando se trabaja con transformaciones en el lado del servidor.
En este tutorial creará una página XSLT completa y la utilizará para
transformar un archivo XML de muestra. La transformación será una
transformación en el lado del cliente que utilice un navegador moderno
(Internet Explorer 6, Netscape 8, Mozilla 1.8 o Firefox 1.0.2). Las
transformaciones en el lado del servidor van más allá de lo que se pretende
abordar en este tutorial, ya que requieren la existencia de un servidor de
aplicaciones configurado con un motor de transformación.
Para obtener una completa introducción de las transformaciones en el lado
del servidor y del cliente, consulte “Acerca de las transformaciones XSL en
el lado del servidor” y “Acerca de las transformaciones XSL en el lado del
cliente” en Utilización de Dreamweaver (Ayuda > Utilización de
Dreamweaver).
Para obtener recursos adicionales, incluidos los tutoriales que ofrecen
información más detallada sobre las transformaciones en el lado del
servidor, consulte www.macromedia.com/go/dw_xsl_es.

Más información sobre las páginas XSLT 189

Conversión de una página HTML
en una página XSLT
Empezará por convertir la página de especialidades existente del Café
Townsend (una página HTML) en una página XSLT que pueda mostrar
datos XML.
1. En el panel Archivos (Ventana > Archivos), localice el archivo
xml_menu.html y haga doble clic para abrirlo. El archivo
xml_menu.html se encuentra en la carpeta xml, dentro de la carpeta raíz
cafe_townsend. Para más información, consulte “Localización de los
archivos” en la página 184.
2. Seleccione Archivo > Convertir > XSLT 1.0.

Dreamweaver abre una copia de la página xml_menu en la ventana de
documento. La nueva página es una hoja de estilos XSL y se guarda con
la extensión .xsl.
3. Haga clic en la página xml_menu.html y ciérrela para que sólo se
muestre la nueva página xml_menu.xsl en la ventana de documento.


Adjuntar una fuente de datos
XML a la página XSLT
A continuación, adjuntará una fuente de datos XML a la página utilizando
el panel Vinculaciones.
1. En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el
vínculo XML.
NO TA

También puede hacer clic en el vínculo Origen situado en la esquina
superior derecha del panel Vinculaciones para añadir una fuente de datos
XML.

2. Seleccione Adjuntar un archivo local en mi equipo o en la red de área
local (debería aparecer seleccionado de forma predeterminada), haga clic
en el botón Examinar, busque el archivo specials.xml en su equipo
(también se encuentra en la carpeta cafe_townsend/xml) y, por último,
haga clic en Aceptar.

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

3. Haga clic en Aceptar para cerrar el cuadro de diálogo Buscar origen
XML.
Dreamweaver muestra el esquema de la fuente de datos XML en el
panel Vinculaciones.

Para obtener una guía de los símbolos que aparecen en el esquema,
consulte “Creación de páginas XSLT” en Utilización de Dreamweaver
(Ayuda > Utilización de Dreamweaver).


Modificación del diseño de la
página XSLT
Ahora que va a utilizar los datos XML en la página en vez de utilizar texto
estático, no necesita todas las filas de la tabla. A continuación, eliminará
todas las filas de la tabla excepto una, que utilizará para mostrar los datos.
1. Haga clic una vez en la última fila de la tabla (la fila New York
Cheesecake) y haga clic en la etiqueta <tr> situada más a la derecha en
el selector de etiquetas para elegir la fila.

2. Pulse Eliminar.
3. Repita los pasos anteriores para eliminar la fila Grilled Pacific Salmon y
la fila Thai Noodle Salad. Cuando haya terminado, debería quedar
únicamente una fila en la página: la fila Summer Salad.
4. Seleccione todo el texto en la celda de la tabla situada a la izquierda.

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

Ninguna en el menú emergente Estilo.

Con este paso se borra el estilo de la clase "menu" en el texto
seleccionado. En un flujo de trabajo normal no sería necesario realizar
este paso. Aquí estamos borrando todos los estilos para que sepa cómo
aplicarlos a los datos XML más adelante.
6. Con el texto aún seleccionado, presione Eliminar.
7. Guarde el trabajo (Archivo > Guardar).


Vinculación de datos XML a la
página XSLT
Ahora está preparado para vincular datos XML a la página.
1. En el panel Vinculaciones (Ventana > Vinculaciones), seleccione el
elemento y arrástrelo hasta la celda vacía de la tabla.

Aparece en la página un marcador de posición de los datos XML. Este
marcador de posición se muestra resaltado y encerrado entre llaves.
Utiliza la sintaxis XPath (Lenguaje de rutas XML) para describir la
estructura jerárquica del esquema XML.
2. Presione la tecla de flecha derecha del teclado para desplazar el punto de
inserción a la derecha del marcador de posición de datos XML.
3. Presione la barra espaciadora, introduzca un guión y presione de nuevo
la barra espaciadora.

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

4. En el panel Vinculaciones, seleccione el elemento descriptivo y
arrástrelo hasta el punto de inserción.
Aparece en la página otro marcador de posición de los datos XML. En
función de la resolución del monitor, es posible que el marcador de
posición aparezca desplazado en la línea siguiente. No debe preocuparse
por esto ahora. Más adelante, cuando visualice la página en un
navegador, los datos se repartirán por la tabla correctamente.
5. Por último, seleccione el precio (1) en la celda de la tabla de la derecha.
6. En el panel Vinculaciones, haga doble clic en el elemento del precio.
Una vez más, el marcador de posición de los datos XML afecta al
diseño de la página. No debe preocuparse por esto ahora.
NO TA

El marcador de posición de los datos XML sigue formateado con el estilo
de la clase "menu", ya que no se han borrado los estilos tal como hicimos
para la celda de la tabla de la izquierda.

7. Guarde la página y obtenga una vista previa del trabajo en un navegador.
Para ello, presione F12 (Windows) u Opción + F12 (Macintosh).
El navegador mostrará la página con una fila de datos del archivo XML.

Aplicación de estilos a los datos
XML
Ahora aplicará los estilos a los marcadores de posición de datos XML de
elementos y descripciones. Al aplicar estilos a un marcador de posición de
datos XML, el texto del propio marcador de posición muestra los estilos.
Más adelante, cuando se obtiene la vista previa de la página en un
navegador, los datos XML resultantes también mostrarán los estilos
asignados.


1. Haga clic una vez en la celda de la tabla de la izquierda y haga clic en la
etiqueta <td> situada más a la derecha en el selector de etiquetas para
seleccionar la celda.

Se seleccionar la celda para poder formatear todo su contenido de una
sola vez, incluido el guión.
2. En el inspector de propiedades, seleccione "menu" en la lista de estilos
de clase en el menú desplegable Estilo
3. Haga clic una vez dentro de la celda de la tabla de la izquierda para
anular su selección.
4. Haga clic una vez en el marcador de posición de datos XML del
elemento para seleccionarlo.
5. En el inspector de propiedades, haga clic en el botón Cursiva.

Aplicación de estilos a los datos XML 197

Para más información sobre la aplicación de estilos a datos XML, consulte
“Aplicación de estilos a fragmentos de XSLT” en Utilización de
Dreamweaver (Ayuda > Utilización de Dreamweaver).

Creación de un vínculo dinámico
Ahora creará un vínculo dinámico para que el nombre del elemento del
menú de especialidades quede vinculado a una página que contenga una
imagen del elemento.
1. En la ventana de documento, haga clic en el marcador de posición de
datos XML para seleccionarlo.
2. En el inspector de propiedades, haga clic en el icono Buscar el archivo,
que se encuentra junto al cuadro de texto Vínculo.


3. En el cuadro de diálogo Seleccionar archivo, seleccione Fuentes de
datos.
Si trabaja con un sistema Windows, la opción se encuentra en la parte
superior del cuadro de diálogo. Si trabaja con un sistema Macintosh, la
opción se encuentra en la parte inferior del cuadro de diálogo.

4. Cuando aparezca el esquema XML en el cuadro de diálogo, seleccione
el elemento del vínculo.

Creación de un vínculo dinámico 199

Dreamweaver crea un vínculo dinámico. En el archivo XML, cada
elemento de vínculo apunta a una página HTML que contiene una
imagen del elemento de menú correspondiente.
NO TA Si abre el archivo specials.xml y analiza el código, verá que cada elemento
<link> contiene el nombre del archivo HTML que, a su vez, contiene la
imagen del elemento de menú correspondiente. De hecho, se trata de la
ruta de acceso al archivo HTML, ya que las páginas HTML que contienen
las imágenes se encuentran en el mismo directorio xml que la página
XSLT que está creando. El elemento de vínculo siempre es una ruta de
acceso completa a la página vinculada y, a menudo, se escribe igual que
las direcciones HTTP.

El navegador muestra la página con un vínculo dinámico. Si hace clic
en él, accederá a una nueva página.

Añadir un objeto XSLT Repetir
región
El objeto XSLT Repetir región permite mostrar elementos repetidos de una
fuente de datos XML en una página. A continuación, añadirá el objeto
XSLT Repetir región a la fila de la tabla para poder mostrar varias
especialidades en la página.
1. En la ventana de documento, haga clic una vez en cualquier lugar de la
fila de la tabla que contiene los marcadores de posición de datos XML.
2. En el selector de etiquetas, haga clic en la etiqueta <tr> situada más a la
derecha para seleccionar la fila de la tabla.


3. Seleccione Insertar > Objetos XSLT > Repetir región.

Añadir un objeto XSLT Repetir región 201

4. En el Creador de expresiones XPATH, seleccione el elemento repetido
menu_item. (Los elementos repetidos se reconocen por un pequeño
signo más).

En la ventana de documento, aparecerá un contorno delgado
delimitado con tabulaciones de color gris alrededor de la región
repetida. (Deberá anular la selección de la tabla para verlo.) Más
adelante, al obtener una vista previa de su trabajo en un navegador, el
contorno gris desaparece y la selección se amplía para mostrar los
elementos repetidos especificados del archivo XML.
Dreamweaver también acorta la longitud del marcador de posición de
datos XML. Esto se debe a que Dreamweaver actualiza la sintaxis XPath
del marcador de posición de datos XML para que esté relacionado con
la ruta de acceso del elemento repetido. Para más información sobre
este tema, consulte “Acerca de los datos XML y elementos repetidos” en


El navegador mostrará ahora la página con cada elemento de menú.

Adjuntar la página XSLT a la
página XML
Una vez terminada la página XSLT, debe adjuntarla a la página XML. Al
utilizar Dreamweaver para adjuntar la página, el programa inserta un
vínculo a la página XSLT en la parte superior de la página XML.
La página XML es la página a la que accederán los visitantes del sitio
cuando visualicen la página en línea. Esto se debe a que deben acceder a la
página de "contenido" que contiene los datos (el archivo XML) y no a la
página que contiene los estilos (la página XSLT).
N OT A

Los archivos XML y XSL que se utilizan para las transformaciones en el
lado del cliente deben estar en el mismo directorio. De lo contrario, el
navegador leerá el archivo XML y buscará la página XSLT para la
transformación, pero no podrá encontrar los activos (hojas de estilos,
imágenes, etc.) definidos por los vínculos relacionados en la página XSLT.

1. Con la página xml_menu.xsl abierta en la ventana de documento, abra
el panel Vinculaciones (Ventana > Vinculaciones) si todavía no lo está.
2. En el panel Vinculaciones, haga doble clic en Esquema para que
specials.xml abra el archivo specials.xml. (Debe hacer doble clic en las
palabras, no en el icono de la página.)
3. Seleccione Comandos > Adjuntar una hoja de estilos XSLT.
4. En el cuadro de diálogo correspondiente, haga clic en el botón
Examinar, navegue hasta la página xml_menu.xsl, selecciónela y haga
clic en Aceptar.
5. Haga clic en Aceptar para cerrar el cuadro de diálogo Adjuntar hoja de
estilos XSLT.

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

Dreamweaver inserta la referencia en la página XSLT en la parte
superior del documento XML.

6. Guarde la página specials.xml.
7. Obtenga una vista previa de la página XML (no de la página XSLT) en
un navegador. Para ello, presione F12 (Windows) u Opción + F12
(Macintosh).
La página XML se visualiza en un navegador con los estilos de la página
XSLT que ha creado.


Recuerde que los visitantes del sitio accederán a la página XML (no la
página XSLT) una vez que ambas páginas estén implementadas en el
servidor. Para más información, consulte “Acerca de las
transformaciones XSL en el lado del cliente” en Utilización de

Más información sobre otras
opciones de implementación
En este tutorial ha aprendido a crear una página XSLT completa para
utilizarla como parte de la transformación en el lado del cliente. Pero
también puede utilizar páginas completas XSLT para transformaciones en
el lado del servidor. Al utilizar una página completa XSLT para una
transformación en el lado del servidor, la página se construye exactamente
igual.
No obstante, el método más habitual para realizar transformaciones en el
lado del servidor son los fragmentos de XSLT. Un fragmento de XSLT es
una porción de código (utilizada por un documento independiente) que
muestra los datos XML formateados.
Para una breve introducción de las páginas completas XSLT y fragmentos
de XSLT, consulte “Más información sobre las páginas XSLT” en
la página 188. Para una introducción más detallada sobre el
funcionamiento de las páginas completas XSLT y los fragmentos de XSLT,
consulte “Acerca de las transformaciones XSL en el lado del servidor” en
Utilización de Dreamweaver (Ayuda > Utilización de Dreamweaver).
Para tutoriales y otros recursos con los que aprender el funcionamiento de
los fragmentos de XSLT, visite www.macromedia.com/go/dw_xsl_es.
A continuación se muestra el flujo de trabajo para realizar transformaciones
en el lado del servidor con páginas XSLT:
■ Configure un sitio de Dreamweaver. Consulte Capítulo 2,
“Configuración de un sitio de Dreamweaver” en Utilización de
Dreamweaver.
■ Seleccione una tecnología de servidor y configure el servidor de
aplicación. Consulte “Configuración de un servidor de aplicaciones” en

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

■ Pruebe el servidor de aplicaciones para garantizar que funciona
correctamente. Por ejemplo, cree una página que requiera
procesamiento y verifique que el servidor de aplicaciones procesa la
página correctamente. Para un tutorial sobre el modo de hacerlo, visite
www.macromedia.com/go/dw_xsl_es.
■ Siga uno de estos procedimientos:
■ En su sitio de Dreamweaver, cree un fragmento de XSLT o una
página completa XSLT. Consulte “Creación de páginas XSLT” en
■ Convierta una página HTML existente en una página completa
XSLT. Consulte “Conversión de páginas HTML en páginas XSLT”
■ Si aún no lo ha hecho, adjunte una fuente de datos XML a la página.
Consulte “Adjuntar fuentes de datos XML” en Utilización de
Dreamweaver.
■ Vincule los datos XML al fragmento de XSLT o a la página completa
XSLT. Consulte “Visualización de datos XML en páginas XSLT” en
■ Si procede, añada un objeto XSLT Repetir región a la tabla, o bien una
fila de tabla que contenta los marcadores de posición de datos XML.
Consulte “Visualización de elementos XML repetidos” en Utilización
de Dreamweaver.
■ Siga uno de estos procedimientos:
■ Utilice el comportamiento de servidor XSL Transformation para
insertar una referencia en el fragmento de XSLT de la página
dinámica. Consulte “Inserción de fragmentos de XSLT en páginas
dinámicas” en Utilización de Dreamweaver.
■ Elimine todo el código HTML de una página dinámica y, a
continuación, utilice el comportamiento de servidor XSL
Transformation para insertar una referencia a la página completa
XSLT de la página dinámica.
■ Publique tanto la página dinámica como el fragmento de XSLT (o la
página completa XSLT) en el servidor de aplicaciones. Si utiliza un
archivo XML local, deberá publicarlo también.
■ Visualice la página dinámica en un navegador. Al hacerlo, el servidor de
aplicaciones transforma los datos XML, los inserta en la página
dinámica y la muestra en el navegador.


CAPÍTULO 11

Tutorial: Desarrollo de
una aplicación Web
11
En este tutorial, aprenderá a utilizar Macromedia Dreamweaver 8 para
empezar a desarrollar rápidamente aplicaciones Web dinámicas gestionadas
por bases de datos, que le permitirán presentar información recuperada de
una base de datos en las páginas Web.
Visualizará páginas Web para el sitio de Cafe Townsend utilizando una
base de datos de muestra suministrada con Dreamweaver. También
utilizará Dreamweaver para crear un formulario de inserción de registro
para permitir a los visitantes dejar comentarios.
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
Lecturas adicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Antes de comenzar
Debe configurar el entorno de trabajo de Dreamweaver para el desarrollo
de aplicaciones antes de completar este tutorial. Para obtener información
de configuración, consulte el capítulo de configuración correspondiente a
su servidor de aplicación de la siguiente lista. Si no está seguro del servidor
de aplicaciones que utiliza, consulte al administrador del sistema.

207

■ Apéndice C, “Configuración del sitio ColdFusion de muestra”, en
la página 253
■ Apéndice D, “Configuración del sitio ASP.NET de muestra”, en
la página 271
■ Apéndice E, “Configuración del sitio ASP de muestra”, en la página
285
■ Apéndice F, “Configuración del sitio JSP de muestra”, en la página 303
■ Apéndice G, “Configuración del sitio PHP de muestra”, en la página
321
Los capítulos de configuración le enseñarán a desempeñar las tareas
siguientes:
■ Configurar el sistema.
■ Configurar Dreamweaver para que funcione con el servidor de
aplicaciones elegido.
■ Definir una conexión con la base de datos.
No habrá completado este tutorial hasta haber llevado a cabo esas tareas.
Las pantallas de ejemplo de este capítulo muestran cuadros de diálogo de
Macromedia ColdFusion. Sin embargo, puede seguir las lecciones de este
tutorial utilizando cualquiera de los modelos de servidor compatibles con
Dreamweaver.

Repaso de la tarea
La tarea consiste en crear las siguientes páginas dinámicas para el sitio Web
de Cafe Townsend:
■ Una página con los comentarios que ya se encuentran en la base de
datos.
■ Una página que permite a los visitantes enviar comentarios a la
empresa, tras lo cual se almacenan en una base de datos.

208 Tutorial: Desarrollo de una aplicación Web

La página que permite al personal de Cafe Townsend ver los comentarios
de la base de datos tendrá el siguiente aspecto:

La página que permite a los visitantes enviar comentarios tendrá el
siguiente aspecto:


Apertura de un documento para
trabajar en él
Un buen punto de partida para desarrollar una aplicación de base de datos
consiste en crear una lista de los registros almacenados en la base de datos.
En la aplicación que genera en este tutorial creará una página Web
dinámica que muestre la información extraída de la tabla de comentarios
de clientes de la base de datos. Posteriormente, creará otra página Web
dinámica que permita a los clientes insertar directamente comentarios o
preguntas en la base de datos.
Comencemos localizando los documentos con los que trabajará para crear
estas páginas.
1. Seleccione Ventana > Archivos para abrir el panel Archivos.
Se abrirá el panel Archivos.
2. En el menú emergente Sitio, seleccione el sitio Cafe Townsend que
definió durante el proceso de configuración.
Para más información, consulte los capítulos de configuración que se
muestran en “Antes de comenzar” en la página 207.

3. En el panel Archivos, haga doble clic en el archivo view para abrirlo.
El documento se abrirá en la ventana de documento.


4. Si en este momento está viendo el documento en la vista Código, haga
clic en Mostrar vista de diseño (con la etiqueta “Diseño”) o Mostrar
vistas de código y diseño (con la etiqueta “Dividir”) en la barra de
herramientas Documento para poder utilizar las pantallas
proporcionadas como referencia mientras realiza el tutorial.

Definición de un juego de
registros
A continuación creará un juego de registros para seleccionar los datos que
desea mostrar. Un juego de registros es un conjunto de información
extraída de una base de datos mediante una consulta de base de datos. (En
ASP.NET se denomina conjunto de datos o DataSet.) Una consulta de base
de datos es una manera de solicitar datos de una base de datos utilizando
criterios de búsqueda especificados, normalmente en un lenguaje
denominado SQL. A continuación, utilice la información extraída como
origen del contenido de las páginas dinámicas.
Dreamweaver ofrece una interfaz fácil de usar para la creación de consultas
SQL sencillas (no es necesario tener conocimientos de SQL para crear un
juego de registros en Dreamweaver).
Creará un juego de registros que seleccione todos los valores de la tabla
COMMENTS de la base de datos del tutorial.
N OT A

Antes de completar este procedimiento, debe configurar una conexión a
la base de datos. Para más información, consulte “Antes de comenzar” en
la página 207.

1. En el documento Cafe Townsend abierto en Dreamweaver, sitúe el
punto de inserción debajo del encabezado Customer Comments.
2. Abra el cuadro de diálogo Juego de registros o (para ASP.NET) el
cuadro de diálogo Conjunto de datos siguiendo uno de
estos procedimientos:
■ En la categoría Aplicación de la barra Insertar, haga clic en Juego de
registros o (para ASP.NET) en el botón Conjunto de datos.
■ Seleccione Ventana > Vinculaciones para abrir el panel
Vinculaciones y, a continuación, haga clic en el signo más (+) y
seleccione Juego de registros o (para ASP.NET) Conjunto de datos.

Definición de un juego de registros 211

Aparecerá el cuadro de diálogo Juego de registros o (para ASP.NET)
Conjunto de datos.

N OT A

Si el cuadro de diálogo que aparece es más complejo que el cuadro
anterior, haga clic en Simple.

3. En el cuadro de texto Nombre, introduzca rs_Comments.
4. En el menú emergente Fuente de datos (ColdFusion) o Conexión
(otros tipos de páginas del servidor), seleccione connTownsend.


El cuadro de diálogo Juego de registros o Conjunto de datos se
actualizará con datos de la base de datos.

5. Si existe un nombre de usuario y una contraseña asociados con la fuente
de datos o la conexión, introdúzcalos. Si no ha facilitado un nombre de
usuario o una contraseña al configurar la fuente de datos, deje estos
cuadros de texto en blanco.
6. En el menú emergente Tabla, deje COMMENTS seleccionado.
7. En Columnas, asegúrese de que se haya seleccionado Todo para
seleccionar todas las columnas de la tabla.
8. Seleccione la opción Ninguno en el menú emergente Filtro para
seleccionar todas las filas de la tabla.
9. En el primer menú emergente Ordenar, seleccione LAST_NAME y, en
el segundo menú emergente, seleccione Ascendente.

Definición de un juego de registros 213

Este paso especifica que los registros recuperados se muestren en una
lista en orden alfabético por el apellido del cliente.

10. Haga clic en Prueba para comprobar el juego de registros o el conjunto
de datos.

En la ventana Declaración SQL de prueba, se mostrarán los registros de
la base de datos que coincidan con los criterios de selección del juego de
registro o el conjunto de datos. En este caso, ha seleccionado todos los
datos de la tabla.
11. Haga clic en Aceptar para cerrar la ventana Declaración SQL de prueba.


12. Haga clic en Aceptar o cierre el cuadro de diálogo Juego de registros o
Conjunto de datos y cree un juego de registros o un conjunto de datos.
El juego de registros aparecerá en el panel Vinculaciones. La ventana
Documento no cambia.

S U G E R E N C IA
Si no ve todos los
campos de juegos de
registros en el panel
Vinculaciones, haga
clic en el signo más
(+) (Windows) o en la
flecha de ampliación
(Macintosh) situada
junto a Juego de
registros
(rs_Comment) para
expandir la estructura
del juego de
registros.
Visualización de los registros de
la base de datos
A continuación creará una página que incluya los registros que contiene la
tabla COMMENTS. Generará dinámicamente la página en lugar de
introducir manualmente la información.
Comenzará creando una tabla para estructurar la lista de datos.
1. En el documento Cafe Townsend, sitúe el punto de inserción en la línea
en blanco después del encabezado “Customer Comments”.
2. Inserte una tabla siguiendo uno de estos procedimientos:
■ En la barra Insertar, haga clic en la categoría Común y, a
continuación, haga clic en el botón Tabla o arrastre el botón hasta
el documento.
■ Seleccione Insertar > Tabla.
Se mostrará el cuadro de diálogo Tabla.
3. En el cuadro de diálogo, defina las siguientes opciones:
■ En Filas, introduzca 2.
■ En Columnas, introduzca 4.
■ Mantenga el Ancho de tabla configurado con 100 por cien.

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

■ Establezca el Grosor del borde en 1.
■ En Relleno de celda, introduzca 2.
■ En Espacio entre celdas, introduzca 2.
■ En la sección Encabezado, seleccione la opción Superior.
En el cuadro de diálogo Resumen, escriba un texto descriptivo de la
tabla para los visitantes que utilicen lectores de pantalla, del modo
siguiente:
En esta tabla se detallan todos los comentarios que introducen en la
base de datos los visitantes del sitio.
El cuadro de diálogo terminado deberá asemejarse al del siguiente
ejemplo:

La tabla se inserta en el documento.
5. En la fila superior de la tabla, añada etiquetas para las entradas de la
tabla:
■ En la primera celda de la tabla, introduzca First Name.
■ En la siguiente celda, introduzca Last Name.
■ En la siguiente celda, introduzca E-mail.
■ En la última celda, introduzca Comments.



Adición de campos dinámicos a
la tabla
Ahora está preparado para añadir los campos del juego de registros a la
tabla.
1. Abra el panel Vinculaciones si no está abierto siguiendo uno de estos
procedimientos.
■ Seleccione Ventana > Vinculaciones.
■ Haga clic en la flecha de ampliación del grupo de paneles
Aplicación y seleccione el panel Vinculaciones.
2. Añada el campo FIRST_NAME a la tabla siguiendo uno de estos
procedimientos:
■ Sitúe el punto de inserción en la celda de la tabla situada bajo la
etiqueta First Name y, en el panel Vinculaciones, seleccione
FIRST_NAME y haga clic en Insertar.
■ Arrastre FIRST_NAME desde el panel Vinculaciones a la celda de
la tabla situada bajo la etiqueta First Name.
3. Repita el paso 2 para añadir LAST_NAME, EMAIL y COMMENTS a
la tabla.
Su tabla debe tener el aspecto siguiente. Quizás deba aumentar el ancho
de la ventana Documento para ver la tabla completa.


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

Definición de una región repetida
La tabla que ha creado sólo contiene una fila para datos. Para visualizar
todos los registros, debe establecer esa fila de la tabla como región repetida.
Cuando se visualice en un navegador, la tabla contendrá una fila para cada
registro que coincida con los criterios de búsqueda del juego de registros.
1. En la ventana de documento, seleccione la fila inferior de la tabla
siguiendo uno de estos procedimientos:
■ Haga clic en una de las celdas y, a continuación, en el selector de
etiquetas, haga clic en la etiqueta <tr> de la lista.
■ Sitúe el puntero en el extremo izquierdo de la fila de la tabla y,
cuando el puntero se transforme en una flecha que apunte a la
derecha, haga clic en el borde de la fila de la tabla para seleccionar la
fila.
2. Cree una región repetida siguiendo uno de estos procedimientos:
■ En el panel Comportamientos del servidor, haga clic en el signo
más (+) y seleccione Repetir región.
■ En la categoría Aplicación de la barra Insertar, haga clic en Región
repetida.
■ Seleccione Insertar > Objetos de aplicación > Región repetida.
Aparecerá el cuadro de diálogo Repetir región.

3. En el cuadro de diálogo, haga clic en Aceptar para aceptar los valores
predeterminados.
Aparecerá un contorno alrededor de la fila y, sobre ésta y a la izquierda,
una ficha que indicará que se trata de una región repetida. La etiqueta
de la ficha varía según la tecnología de servidor que esté utilizando.


Visualización de la página
A continuación, verá la página. Para ver una página en Dreamweaver con la
apariencia que tendría al ser procesada por el servidor. puede utilizar la vista
Live Data.
Con el documento Cafe Townsend aún activo, siga uno de estos
procedimientos para ver los datos en sus páginas:
■ En la barra de herramientas Documento, haga clic en Vista Live Data.
■ Seleccione Ver > Live Data.
La página se actualiza para mostrar los datos extraídos de la base de
datos.

Visualización de la página 219

Creación de un formulario de
inserción de registro
La página siguiente que cree para el sitio Web de Cafe Townsend permitirá
a los clientes añadir comentarios a la base de datos.
Dreamweaver incluye diversos objetos de aplicación para ayudarle a crear
páginas de aplicación Web de forma rápida y sencilla. En este ejercicio,
usted utilizará un objeto de aplicación para crear la página de inserción. El
objeto de aplicación Insertar registro crea un formulario HTML, campos
de datos que se corresponden con campos en la base de datos y los scripts
de servidor necesarios para crear una página dinámica.

Adición de un objeto de aplicación
Formulario de inserción de registro
Puede utilizar un objeto de aplicación Formulario de inserción de registro
para crear un formulario que permita a los visitantes introducir datos en
una base de datos. El objeto de aplicación permite seleccionar los campos
que se incluyen en el formulario, etiquetar los campos y seleccionar el tipo
de objetos de formulario que se van a insertar. Cuando un usuario
introduce datos en los campos del formulario y hace clic en el botón
Enviar, se inserta un nuevo registro en la base de datos. También se puede
definir que se abra una página cuando se haya enviado correctamente un
registro, de manera que el usuario sepa que la base de datos se ha
actualizado.
1. En el panel Archivos, localice el archivo “send” y haga doble clic en el
archivo para abrirlo.


El documento se abrirá en la ventana de documento.

2. Sitúe el punto de inserción en una fila vacía de la tabla, debajo de la fila
que contiene el párrafo.
El objeto de aplicación se insertará en la fila vacía.
3. Para añadir un objeto de inserción de registro a su página, realice una de
las operaciones siguientes:
■ En la categoría Aplicación de la barra Insertar, seleccione
Formulario de inserción de registro del menú emergente Insertar
registro.
■ Seleccione Insertar > Objetos de aplicación > Insertar registro >
Asistente de formulario de inserción de registro.

Creación de un formulario de inserción de registro 221

Aparecerá el cuadro de diálogo Formulario de inserción de registro.

4. En el menú emergente Fuente de datos (ColdFusion) o Conexión,
seleccione connTownsend.
5. Si existe un nombre de usuario y una contraseña asociados con la fuente
de datos o la conexión, introdúzcalos.
Si no facilita un nombre de usuario o una contraseña al configurar la
fuente de datos o la conexión, deje estos cuadros en blanco.
6. En el menú emergente Tabla, compruebe que COMMENTS está
seleccionado.
7. Haga clic en Examinar, situado junto al cuadro de texto Tras insertar, ir
a o (para ASP.NET) junto al cuadro de texto Si es correcto, ir a.
8. En el cuadro de diálogo que aparece, seleccione el archivo llamado
“view” y haga clic en Aceptar para cerrar el cuadro de diálogo.
Con el fin de realizar pruebas, deberá ver la página que muestra todos
los comentarios después de introducir un comentario. Tras probar la
aplicación Web, cambie esta configuración para que se muestre una
página en la que se agradezca al visitante el envío del comentario.
9. Complete el resto del asistente siguiendo el procedimiento de la sección
siguiente.


Creación del formulario de inserción
En la sección Campos de formulario del Asistente de formulario de
inserción de registro, defina el formulario en el que el visitante introducirá
datos.
1. En el Asistente de formulario de inserción de registro, elimine los
campos que no desee incluir en el formulario siguiendo uno de estos
procedimientos:
■ Seleccione COMMENT_ID y haga clic en el signo menos (-).
■ Seleccione TELEPHONE y haga clic en el signo menos (-).
■ Seleccione SUBMIT_DATE y haga clic en el signo menos (-).
■ Seleccione ANSWERED y haga clic en el signo menos (-).
2. Si está creando una página para ASP.NET, cambie el orden alfabético
de los campos del formulario siguiendo uno de estos procedimientos:
■ En la lista Columna, seleccione COMMENTS y haga clic en el
botón de flecha abajo para situar COMMENTS debajo de
LAST_NAME.
■ En la lista Columna, seleccione EMAIL y, a continuación, haga clic
en el botón de flecha abajo para situar EMAIL debajo de
LAST_NAME.
3. En la lista Campos de formulario, seleccione FIRST_NAME para
especificar cómo debe mostrarse el campo en el formulario.
4. En el cuadro de texto Etiqueta, escriba First Name para sustituir el texto
predeterminado.
Ésta es la etiqueta que aparecerá en el formulario HTML junto al
campo de texto.
5. Establezca el tipo de objeto de formulario para el campo siguiendo uno
de estos procedimientos:
■ Si utiliza ASP.NET, acepte el valor predeterminado Campo de texto
en el menú emergente Mostrar como y cambie el valor
predeterminado WChar por CARVAR en el menú emergente
Enviar como.
■ Si utiliza una tecnología de servidores distinta de ASP.NET, acepte
el valor predeterminado Campo de texto en el menú emergente
Mostrar como y acepte el valor predeterminado Texto en el menú
emergente Enviar como.


6. Deje en blanco el campo Valor predeterminado.
Para algunas aplicaciones Web, este campo se utiliza para configurar el
texto inicial del campo con el fin de que el usuario sepa el tipo de
información que debe facilitar. En este caso, el campo con la etiqueta
“First Name” deja claro que el visitante debe escribir su nombre.
Cuando haya terminado, la entrada FIRST_NAME debe ser similar a
la siguiente:

7. Repita los pasos del 3 al 6 para el campo de formulario LAST_NAME,
con una etiqueta Last Name, mostrándolo como campo de texto y
enviándolo como texto.
8. Repita los pasos del 3 al 6 para el campo de formulario EMAIL, con una
etiqueta Email, mostrándolo como campo de texto y enviándolo como
texto.
9. En la lista Campos de formulario, seleccione COMMENTS.
10. En el campo Etiqueta, introduzca Comments.
11. Establezca el tipo de objeto de formulario para el campo de formulario
Comments siguiendo uno de estos procedimientos:
■ Si utiliza ASP.NET, seleccione Área de texto en el menú emergente
Mostrar como y seleccione CARVAR en el menú emergente Enviar
como.
■ Si utiliza otro tipo de tecnología de servidor, seleccione Área de
texto en el menú emergente Mostrar como y acepte el valor
predeterminado Texto en el menú emergente Enviar como.


Cuando haya acabado, el cuadro de diálogo debe ser similar al
siguiente:

12. Haga clic en Aceptar para cerrar el cuadro de diálogo y crear el
formulario de inserción de registro.
El objeto de aplicación Formulario de inserción de registro se insertará
en el documento.



Copia de los archivos en el
servidor
A continuación copiará en el servidor los archivos actualizados. Después de
copiar los archivos, verá la página de inserción de registro, añadirá un
comentario o una pregunta y enviará los datos para comprobar la
aplicación.
1. En el panel Archivos, presione Control (Windows) o Comando
(Macintosh) mientras hace clic en los archivos “view” y “send” y haga
clic en el icono de flecha azul Colocar archivos para cargar los archivos
en el servidor.
2. Si Dreamweaver le pregunta si desea copiar los archivos dependientes en
el servidor, seleccione Sí.
NO TA

Con algunos modelos de servidor, Dreamweaver crea una carpeta
Connections en la carpeta local. Deberá copiar también esa carpeta en el
servidor remoto para que funcione la aplicación Web. En el panel Archivos,
seleccione la carpeta Connections y luego haga clic en Colocar archivo(s)
para copiar la carpeta en el servidor.

3. Con el archivo send como documento activo, seleccione Archivo > Vista
previa en el navegador o pulse F12 para ver su página en un navegador.
4. Introduzca los datos de prueba en el formulario y haga clic en Insertar
registro en el documento para enviar los datos.
El servidor de aplicaciones recibirá la información enviada, actualizará
la base de datos y mostrará la página de comentarios con la información
actualizada.

Lecturas adicionales
En este tutorial se ha facilitado información sobre un pequeño conjunto de
herramientas que se pueden utilizar para crear páginas dinámicas
gestionadas por datos. En esta lección ha aprendido a crear juegos de
registros para definir los datos que desea emplear en el sitio Web. También
ha utilizado un objeto de aplicación de Dreamweaver para crear una
aplicación Web efectiva que permite interactuar con los datos almacenados
en la base de datos.


Para más información sobre el desarrollo de aplicaciones Web, consulte los
temas siguientes en Utilización de Dreamweaver:
■ “Obtención de datos para la página”
■ “Definición de fuentes de contenido dinámico”
■ “Adición de contenido dinámico a páginas Web”
■ “Visualización de registros de la base de datos”

Lecturas adicionales 227

4
PARTE 4

Apéndices

La Parte Cuatro de este libro contiene apéndices que ofrecen información
adicional sobre los conceptos que se utilizan en las secciones precedentes.
Aspectos básicos de las aplicaciones Web . . . . . . . . . . . . . . . . . . 231
Instalación de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Configuración del sitio ColdFusion de muestra . . . . . . . . . . . . . . 253
Configuración del sitio ASP.NET de muestra . . . . . . . . . . . . . . . . 271
Configuración del sitio ASP de muestra . . . . . . . . . . . . . . . . . . . . 285
Configuración del sitio JSP de muestra . . . . . . . . . . . . . . . . . . . . 303
Configuración del sitio PHP de muestra . . . . . . . . . . . . . . . . . . . . . 321

229

APÉNDICE A

Aspectos básicos de las
aplicaciones Web
A
Una aplicación Web es un conjunto de páginas Web que interactúan entre
sí, con el usuario y con diversos recursos en un servidor Web, incluidas las
bases de datos. Antes de comenzar a crear aplicaciones Web, debe
familiarizarse con los conceptos que se describen en este capítulo.
Este capítulo contiene los siguientes temas:
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

Aplicaciones Web
Una aplicación Web es un sitio Web que contiene páginas con contenido
sin determinar, parcialmente o en su totalidad. El contenido final de una
página se determina sólo cuando el usuario solicita una página del servidor
Web. Dado que el contenido final de la página varía de una petición a otra
en función de las acciones del visitante, este tipo de página se denomina
página dinámica.
Las aplicaciones Web se crean en respuesta a diversas necesidades o
problemas. En esta sección se describen los usos más habituales de las
aplicaciones Web y se proporciona un ejemplo sencillo.

231

Usos comunes de las aplicaciones Web
Las aplicaciones Web pueden tener numerosos usos tanto para los visitantes
como para los ingenieros de desarrollo, entre otros:
■ Permitir a los usuarios localizar información de forma rápida y sencilla
en un sitio Web en el que se almacena gran cantidad de contenido.
Este tipo de aplicación Web ofrece a los visitantes la posibilidad de
buscar contenido, organizarlo y navegar por él de la manera que
estimen oportuna. Algunos ejemplos son: las intranets de las empresas,
Microsoft MSDN (www.msdn.microsoft.com) y Amazon.com
(www.amazon.com).
■ Recoger, guardar y analizar datos suministrados por los visitantes de los
sitios.
En el pasado, los datos introducidos en los formularios HTML se
enviaban como mensajes de correo electrónico a los empleados o a
aplicaciones CGI para su procesamiento. Una aplicación Web permite
guardar datos de formularios directamente en una base de datos,
además de extraer datos y crear informes basados en la Web para su
análisis. Ejemplos de ello son las páginas de los bancos en línea, las
páginas de tiendas en línea, las encuestas y los formularios con datos
suministrados por el usuario.
■ Actualizar sitios Web cuyo contenido cambia constantemente.
Una aplicación Web evita al diseñador Web tener que actualizar
continuamente el código HTML del sitio. Los proveedores
de contenido, como los editores de noticias, proporcionan el contenido
a la aplicación Web y ésta actualiza el sitio automáticamente. Entre los
ejemplos figuran Economist (www.economist.com) y CNN
(www.cnn.com).

232 Aspectos básicos de las aplicaciones Web

Ejemplo de aplicación Web
Ana es una diseñadora Web profesional y usuaria experimentada de
Dreamweaver cuya tarea consiste en mantener los sitios de intranet e
Internet de una empresa de tamaño medio en la que trabajan 1.000
empleados. Un día, Pedro, del departamento de RR.HH., le expone un
problema. Su departamento administra un programa de promoción de la
salud por el que los empleados reciben puntos por cada kilómetro recorrido
a pie, en bicicleta o corriendo. Cada empleado debe informar a Pedro del
número total de kilómetros recorridos cada mes a través del correo
electrónico. A finales de mes, Pedro reúne todos los mensajes de correo
electrónico y entrega a los empleados pequeños regalos en metálico en
función del total de puntos acumulados.
El problema de Pedro es que el programa de salud ha tenido demasiado
éxito. Es tal el número de empleados que participan en él que Pedro se ve
inundado de mensajes a final de cada mes. Pedro pregunta a Ana si se le
ocurre alguna solución basada en la Web.
Ana le propone una aplicación Web basada en la intranet, que puede
realizar las siguientes tareas:
■ Permitir a los empleados introducir los kilómetros recorridos en una
página Web mediante un formulario HTML sencillo
■ Almacenar los kilómetros recorridos por cada empleado en una base de
datos
■ Calcular los puntos en función de los datos de kilometraje
■ Permitir a los empleados supervisar su progreso mensual
■ Proporcionar a Pedro acceso mediante un solo clic al total de puntos al
final de cada mes
Ana tiene la aplicación lista y en funcionamiento antes de la hora del
almuerzo gracias a Dreamweaver, que proporciona las herramientas
necesarias para crear este tipo de aplicación con rapidez y facilidad.

Aplicaciones Web 233

Funcionamiento de una
aplicación Web
Una aplicación Web es un conjunto de páginas Web estáticas y dinámicas.
Una página Web estática es aquélla que no cambia cuando un usuario la
solicita: el servidor Web envía la página al navegador Web solicitante sin
modificarla. Por el contrario, el servidor modifica las páginas Web dinámicas
antes de enviarlas al navegador solicitante. La naturaleza cambiante de este
tipo de página es la que le da el nombre de dinámica.
Por ejemplo, podría diseñar una página para que mostrara los resultados del
programa de salud y dejara cierta información fuera (como el nombre del
empleado y sus resultados) para calcularla cuando la página la solicite un
empleado en particular.

Procesamiento de páginas Web estáticas
Un sitio Web estático consta de un conjunto de páginas y de archivos
HTML relacionados alojados en un equipo que ejecuta un servidor Web.
Un servidor Web es un software que suministra páginas Web en respuesta a
las peticiones de los navegadores Web. La petición de una página se genera
cuando el usuario hace clic en un vínculo de una página Web, elige un
marcador en un navegador o introduce una URL en el cuadro de texto
Dirección del navegador.
El contenido final de una página Web estática lo determina el diseñador de
la página y no cambia cuando se solicita la página. A continuación se
incluye un ejemplo:
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
</body>
</html>


El diseñador escribe todas y cada una de las líneas de código HTML de la
página antes de colocarla en el servidor. El código HTML no cambia una
vez colocado en el servidor y por ello, este tipo de páginas se denomina
página estática.
N OT A

E sentido estricto, una página "estática" puede no ser estática en
absoluto. Por ejemplo, una imagen de sustitución o contenido de Flash
(un archivo SWF) puede hacer que una página estática tome vida. No
obstante, en esta guía se habla de página estática cuando ésta se envía al
navegador sin modificaciones.

Cuando el servidor Web recibe una petición de una página estática, el
servidor lee la solicitud, localiza la página y la envía al navegador
solicitante, como se muestra en la siguiente figura:

Servidor Web
Paso 1: el
navegador Web
solicita la página
estática. Petición Respuesta

Paso 3: el servidor
Web envía la página
SERVIDOR WEB al navegador
solicitante.
Paso 2: el
servidor
localiza la <HTML>
página. <p>Hi
</HTML>

Página estática

En el caso de las aplicaciones Web, algunas líneas de código no están
determinadas cuando el usuario solicita la página. Estas líneas deben
determinarse mediante algún mecanismo antes de enviar la página al
navegador. En la siguiente sección se describe dicho mecanismo.

Funcionamiento de una aplicación Web 235

Procesamiento de páginas dinámicas
Cuando un servidor Web recibe una petición para mostrar una página Web
estática, el servidor la envía directamente al navegador que la solicita.
Cuando el servidor Web recibe una petición para mostrar una página
dinámica, sin embargo, reacciona de distinta forma: transfiere la página a
un software especial encargado de finalizar la página. Este software especial
se denomina servidor de aplicaciones.
El servidor de aplicaciones lee el código de la página, finaliza la página en
función de las instrucciones del código y elimina el código de la página. El
resultado es una página estática que el servidor de aplicaciones devuelve al
servidor Web, que a su vez la envía al navegador solicitante. Lo único que el
navegador recibe cuando llega la página es código HTML puro. A
continuación se incluye una vista de este proceso:

Navegador Web
Paso 1 - el
navegador Web
solicita la página
dinámica. Petición Respuesta

Paso 5- el servidor
finalizada al
SERVIDOR WEB navegador
solicitante.
Paso 2 - el
servidor Web <HTML> <HTML>
localiza la página <code> <p>Hi
y la envía al </HTML> </HTML>
servidor de
aplicaciones.
Paso 4- el servidor
de aplicaciones
pasa la página
Paso 3 - el terminada al
servidor de Servidor de aplicaciones servidor Web.
aplicaciones busca
instrucciones en la
página y la termina.


Acceso a una base de datos
Un servidor de aplicaciones le permite trabajar con recursos del lado del
servidor, como las bases de datos. Por ejemplo, una página dinámica puede
indicar al servidor de aplicaciones que extraiga datos de una base de datos y
los inserte en el código HTML de la página. Para más información,
consulte Apéndice A, “Guía de bases de datos para principiantes” en
La instrucción para extraer datos de una base de datos recibe el nombre de
consulta de base de datos. Una consulta consta de criterios de búsqueda
expresados en un lenguaje de base de datos denominado SQL (Structured
Query Language, lenguaje de consulta estructurado). La consulta SQL se
escribe en los scripts o etiquetas del lado del servidor de la página.
Un servidor de aplicaciones no se puede comunicar directamente con una
base de datos porque el formato de esta última impide que se descifren los
datos, de una forma bastante similar a cuando un documento de Microsoft
Word no puede descifrarse al abrirlo con el Bloc de Notas o BBEdit. El
servidor de aplicaciones sólo se puede comunicar con la base de datos a
través de un controlador que actúe de intermediario con la base de datos: el
software actúa entonces como un intérprete entre el servidor de
aplicaciones y la base de datos.
Una vez que el controlador establece la comunicación, la consulta se
ejecuta en la base de datos y se crea un juego de registros. Un juego de
registros es un conjunto de datos extraídos de una o varias tablas de una
base de datos. El juego de registros se devuelve al servidor de aplicaciones,
que emplea los datos para completar la página.
A continuación se ofrece una consulta de base de datos sencilla escrita en
SQL:
SELECT lastname, firstname, fitpoints
FROM employees

Esta instrucción crea un juego de registros de tres columnas y lo completa
con filas que contienen el apellido, el nombre y los puntos de forma física
de todos los empleados de la base de datos. Para más información, consulte
Apéndice B, “Nociones básicas de SQL” en Utilización de Dreamweaver.

Funcionamiento de una aplicación Web 237

A continuación se ofrece una ilustración del proceso de consulta de base de
datos y de devolución de los datos al navegador.

Paso 1 - el navegador Navegador Web
Web solicita la página
dinámica.

Petición Respuesta

Paso 9- el servidor
finalizada al
SERVIDOR WEB navegador
solicitante.
Paso 2 - el servidor
Web localiza la <HTML> <HTML>
página y la envía al <code> <p>Hi
servidor de
aplicaciones. </HTML> </HTML>
Paso 8- el servidor
de aplicaciones
inserta los datos en
una página y luego
Paso 3- el servidor pasa la página al
de aplicaciones servidor Web.
busca instrucciones
en la página. Servidor de aplicaciones

Paso 4- el servidor
de aplicaciones envía Paso 7- el
la consulta al controlador pasa el
controlador de la juego de registros al
base de datos. servidor de
Consulta Juego de registros
aplicaciones.

Paso 5- el Paso 6 - el juego de
controlador ejecuta la Controlador de base de datos registros se devuelve al
consulta en la base controlador.
de datos.

Base de datos

Puede utilizar prácticamente cualquier base de datos con su aplicación
Web, siempre y cuando se haya instalado el controlador de base de datos
correcto en el servidor.


Si tiene intención de desarrollar pequeñas aplicaciones de bajo coste, puede
utilizar una base de datos basada en archivos, como las que permite crear
Microsoft Access. En cambio, si desea desarrollar aplicaciones empresariales
críticas, puede utilizar una base de datos basada en servidor, como las que
permite crear Microsoft SQL Server, Oracle 9i o MySQL.
Si la base de datos está situada en un sistema distinto del servidor Web,
asegúrese de disponer de una conexión rápida entre ambos sistemas para
que la aplicación Web pueda funcionar de forma rápida y eficiente.

Creación de páginas dinámicas
La creación de una página dinámica implica, en primer lugar, escribir el
código HTML y, después, añadir los scripts o etiquetas del lado del
servidor al código HTML para crear la página dinámica. Al visualizar el
código resultante, el lenguaje aparece incrustado en el código HTML de la
página. Por esta razón, estos lenguajes se conocen como lenguajes de
programación incrustados en HTML. En el siguiente ejemplo básico se
utiliza ColdFusion Markup Language (CFML):
<html>
<head>
</head>
<body>

<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>

</body>
</html>

Las instrucciones incrustadas de esta página realizan las siguientes acciones:
1. Crean una variable denominada department y le asignan la cadena
"Ventas".
2. Inserta el valor de la variable, "Ventas", en el código HTML.

Creación de páginas dinámicas 239

El servidor de aplicaciones devuelve la siguiente página al servidor Web:
<html>
<head>
</head>
<body>
<p>Be sure to visit our Sales page.</p>
</body>
</html>

El servidor Web envía la página al navegador solicitante, que la muestra de
la siguiente forma:
Acerca de Trio Motors
Trio Motors es un fabricante líder de automóviles.
No olvide visitar nuestra página de Ventas.
La utilización de un lenguaje basado en etiquetas o en scripts se decide en
función de la tecnología de servidor disponible en el servidor. A
continuación se enumeran los lenguajes más utilizados para las cinco
tecnologías de servidor que admite Dreamweaver:

Tecnología de servidor Lenguaje
ColdFusion ColdFusion Markup Language (CFML)

ASP.NET Visual Basic
C#

Active Server Pages (ASP) VBScript
JavaScript

Java Server Pages (JSP) Java

PHP PHP

Para más información, consulte “Elección de una tecnología de servidor”
en la página 241.
Dreamweaver puede crear los scripts (archivos de comando) o las etiquetas
del lado del servidor necesarias para que sus páginas funcionen, o puede
escribirlos usted manualmente en el entorno de codificación de
Dreamweaver.


Elección de una tecnología de
servidor
Puede utilizar Dreamweaver para crear aplicaciones Web mediante
cualquiera de las cinco tecnologías de servidor: ColdFusion, ASP.NET,
ASP, JSP o PHP. Cada una de estas tecnologías corresponde a un tipo de
documento en Dreamweaver. La elección de una de ellas para una
aplicación Web depende de diversos factores, entre los que se encuentran su
nivel de conocimiento de los diversos lenguajes de scripts y el servidor de
aplicaciones que vaya a utilizar.
Si es la primera vez que desarrolla una aplicación Web o una aplicación en
general, es probable que prefiera ColdFusion, pues proporciona un entorno
de scripts de servidor fácil de aprender y que está plenamente integrado en
Dreamweaver. Si conoce otras tecnologías de servidor, como JSP, PHP, ASP
o ASP.NET, Dreamweaver ofrece un excelente soporte para todas ellas.
La tecnología de servidor que seleccione también depende del servidor de
aplicaciones que vaya a utilizar para su aplicación Web. Un servidor de
aplicaciones es un software que ayuda al servidor Web a procesar las
páginas que contienen scripts o etiquetas del lado del servidor. Por ejemplo,
si tiene ColdFusion MX 7 Server, puede seleccionar ColdFusion como su
tecnología de servidor. Si tiene acceso a un servidor que ejecuta Microsoft
Internet Information Server 5 (IIS) con .NET Framework, puede elegir
ASP.NET. Puede utilizar PHP si tiene acceso a un servidor Web con un
servidor de aplicaciones PHP, o JSP si tiene acceso a un servidor Web con
un servidor de aplicaciones JSP (como Macromedia JRun).
La edición para desarrolladores de ColdFusion MX 7 está disponible en el
CD de Dreamweaver (sólo versión para Windows) y en el sitio Web de
Macromedia www.macromedia.com/go/coldfusion/.
Para más información, consulte “Configuración de un servidor de
aplicaciones” en Utilización de Dreamweaver.
Para obtener información sobre ColdFusion, seleccione Utilización de
ColdFusion del menú Ayuda.
Para obtener más información sobre ASP.NET, visite el sitio Web de
Microsoft http://msdn.microsoft.com/asp.net/.

Elección de una tecnología de servidor 241

Para obtener más información sobre ASP, visite el sitio Web de Microsoft
en http://msdn.microsoft.com/library/default.asp?url=/library/en-us/
dnanchor/html/activeservpages.asp.
Para obtener más información sobre JSP, visite el sitio Web de Sun
Microsystems en java.sun.com/products/jsp/.
Para obtener más información sobre PHP, visite el sitio Web de PHP en
www.php.net/.

Terminología de aplicaciones
Web
En esta sección se definen términos utilizados con frecuencia relacionados
con las aplicaciones Web.
Un servidor de aplicaciones es un software que ayuda al servidor Web a
procesar las páginas que contienen scripts o etiquetas del lado del servidor.
Cuando se solicita al servidor una página de este tipo, el servidor Web pasa
la página al servidor de aplicaciones para su procesamiento antes de
enviarla al navegador. Para más información, consulte “Funcionamiento de
una aplicación Web” en la página 234.
Entre los servidores de aplicaciones más habituales se encuentran
Macromedia ColdFusion, Macromedia JRun Server, Microsoft .NET
Framework, IBM WebSphere y Apache Tomcat.
Una base de datos es un conjunto de datos almacenados en tablas. Cada
fila de una tabla constituye un registro de datos, y cada columna constituye
un campo del registro, como se indica en el siguiente ejemplo.
Campos (columnas)

Número Apellido Nombre Cargo Objetivo

Registros
(filas)


Un controlador de base de datos es un software que actúa como
intérprete entre una aplicación Web y una base de datos. Los datos de una
base de datos se almacenan en un formato propio de dicha base de datos.
Un controlador de base de datos permite a la aplicación Web leer y
manipular datos que, de otro modo, resultarían indescifrables.
Un sistema de administración de base de datos (DBMS o sistema de
base de datos) es un software que se utiliza para crear y manipular bases de
datos. Entre los sistemas de bases de datos más habituales figuran Microsoft
Access, Oracle 9i y MySQL.
Una consulta de base de datos es la operación mediante la cual se extrae
un juego de registros de una base de datos. Una consulta consta de criterios
de búsqueda expresados en un lenguaje de base de datos denominado SQL.
Por ejemplo, la consulta puede especificar que sólo se incluyan
determinadas columnas o determinados registros en el juego de registros.
Una página dinámica es una página Web personalizada por el servidor de
aplicaciones antes de que la página se envíe a un navegador. Para más
información, consulte “Funcionamiento de una aplicación Web” en
la página 234.
Un juego de registros es un conjunto de datos extraídos de una o varias
tablas de una base de datos, como se ilustra en el siguiente ejemplo:

Número Apellido Nombre Cargo Objetivos

Tabla de base de datos

Apellido Nombre Cargo

Tabla de juego de registros

Terminología de aplicaciones Web 243

Una base de datos relacional es una base de datos que contiene múltiples
tablas que comparten datos. La siguiente base de datos es relacional porque
dos tablas comparten la columna DepartmentID.

La tecnología de servidor es la tecnología que utiliza un servidor de
aplicaciones para modificar páginas dinámicas en tiempo de ejecución.
El entorno de desarrollo de Dreamweaver admite las siguientes tecnologías
de servidor:
■ Macromedia ColdFusion
■ Microsoft ASP.NET
■ Microsoft Active Server Pages (ASP)
■ Sun Java Server Pages (JSP)
■ PHP: Hypertext Preprocessor (PHP)
También puede utilizar el entorno de codificación de Dreamweaver para
desarrollar páginas para cualquier otra tecnología de servidor no incluida
en la lista.
Una página estática es una página Web que el servidor de aplicaciones no
modifica antes de enviarla a un navegador. Para más información, consulte
“Procesamiento de páginas Web estáticas” en la página 234.
Una aplicación Web es un sitio Web que contiene páginas con contenido
sin determinar parcialmente o en su totalidad. El contenido final de estas
páginas se determina sólo cuando un visitante solicita una página del
servidor Web. Dado que el contenido final de la página varía de una
petición a otra en función de las acciones del visitante, este tipo de página
se denomina página dinámica.
Un servidor Web es un software que suministra páginas Web en respuesta
a las peticiones de los navegadores Web. La petición de una página se
genera cuando un visitante hace clic en un vínculo de una página Web en el
navegador, elige un marcador en el navegador o introduce una URL en el
cuadro de texto Dirección del navegador.


Entre los servidores Web más utilizados se encuentran Microsoft Internet
Information Server, Microsoft Personal Web Server, Apache HTTP Server,
Netscape Enterprise Server y Sun ONE Web Server.

Terminología de aplicaciones Web 245

APÉNDICE B

Instalación de un
servidor Web
B
Para desarrollar y comprobar páginas Web dinámicas, necesitará un
servidor Web en funcionamiento. En este capítulo se describe cómo la
mayoría de los usuarios de Windows pueden instalar y utilizar un servidor
Web Microsoft en sus equipos locales.
Si es usted usuario de Windows y desea desarrollar sitios ColdFusion,
puede utilizar el servidor Web incluido en la edición para desarrolladores
del servidor de aplicaciones Macromedia ColdFusion MX 7, que puede
instalar y utilizar gratuitamente. Para más información, consulte
Apéndice C, “Configuración del sitio ColdFusion de muestra”, en
la página 253.
Si es usted usuario de Macintosh, puede utilizar el servidor Web de un
equipo conectado en red o de una empresa de alojamiento Web. Si desea
desarrollar aplicaciones PHP, puede utilizar el servidor Web Apache ya
instalado en su equipo Macintosh.
Este capítulo contiene las secciones siguientes:
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
NO T A

Macromedia no ofrece asistencia técnica para productos de software de
terceros fabricantes como Microsoft Internet Information Server. Si
necesita ayuda sobre un producto de Microsoft, póngase en contacto con
el servicio técnico de Microsoft.

247

Introducción
Si es usted usuario de Windows, puede instalar y ejecutar Internet
Information Server (IIS) en su equipo. También puede instalar el servidor
Web en un equipo Windows conectado en red para que otros
desarrolladores de su equipo puedan utilizarlo.
Los usuarios de Windows que deseen desarrollar aplicaciones ColdFusion
pueden utilizar, en lugar de ello, el servidor Web instalado con la edición
para desarrolladores de ColdFusion MX 7. Para más información, consulte
Apéndice C, “Configuración del sitio ColdFusion de muestra”, en
la página 253.
Puede que IIS ya esté instalado en su equipo. Compruebe la estructura de
carpetas para averiguar si contiene una carpeta denominada C:Inetpub o
D:Inetpub. IIS crea esta carpeta durante la instalación.
Si la carpeta no existe, instale IIS. Para más información, consulte
“Instalación de Internet Information Server” en la página 248.
Si es usted usuario de Macintosh y está interesado en desarrollar
aplicaciones PHP, puede utilizar el servidor Web Apache ya instalado en su
equipo Macintosh. Para más información, consulte “Comprobación del
servidor Web de Macintosh (desarrolladores PHP)” en la página 250.

Instalación de Internet
Information Server
Los usuarios de Windows 2000 y Windows XP Professional deben instalar
Internet Information Server (IIS).
Si es usted usuario de Windows 2000 o Windows XP Professional,
compruebe si IIS está instalado y en ejecución en su sistema. Para ello,
busque la carpeta C:Inetpub. Si no existe, es probable que IIS no esté
instalado en el sistema.

Para instalar IIS en Windows 2000 y XP Professional:
1. Seleccione Inicio > Configuración > Panel de control > Agregar o quitar
programas o Inicio > Panel de control > Agregar o quitar programas.
2. Seleccione Agregar o quitar componentes de Windows.
3. Seleccione Internet Information Services (IIS) y haga clic en Siguiente.

248 Instalación de un servidor Web

4. Siga las instrucciones de instalación.
Puede comprobar el servidor Web una vez instalado.

Comprobación de IIS
Para comprobar el servidor Web, cree una página HTML sencilla llamada
myTestFile.htm y guárdela en la carpeta Inetpubwwwroot del equipo en el
que se ejecuta el servidor Web. La página HTML puede constar de una sola
línea, como, por ejemplo:
<p>My web server is working.</p>

A continuación, abra la página de prueba en el navegador Web con una
petición HTTP. Si se está ejecutando IIS en el equipo local, introduzca la
siguiente URL en el navegador Web:
http://localhost/myTestFile.html
Si IIS está en ejecución en un equipo conectado a red, utilice el nombre del
equipo conectado a red como el nombre de dominio. Por ejemplo, si el
nombre del equipo que ejecuta IIS es rockford-pc, introduzca la siguiente
URL en el navegador:
http://rockford-pc/myTestFile.html
N OT A

Para más información sobre nombres de equipos, consulte “Aspectos
básicos de los servidores Web” en la página 251.

Si el navegador muestra la página, el servidor Web se estará ejecutando con
normalidad.
Si el navegador no muestra la página, asegúrese de que el servidor esté en
ejecución. Si la página continúa sin abrirse, asegúrese de que la página de
prueba está situada en la carpeta Inetpubwwwroot y que tiene la extensión
de archivo .htm o .html.

Comprobación de IIS 249

Comprobación del servidor
Web de Macintosh
(desarrolladores PHP)
Puede utilizar el servidor Web Apache ya instalado en su equipo Macintosh
para desarrollar aplicaciones PHP.
Para probar el servidor, cree una página HTML sencilla con el nombre
myTestFile.htm; guárdela en la carpeta /Users/su_nombre_de_usuario/Sites/
de su Macintosh (donde su_nombre_de_usuario es su nombre de usuario
Macintosh). La página HTML puede constar de una sola línea, como, por
ejemplo:
<p>My web server is working.</p>

A continuación, abra la página de prueba en el navegador Web con una
petición HTTP introduciendo la siguiente URL en el navegador Web:
http://localhost:80/~su_nombre_de_usuario/myTestFile.htm
N OT A

De forma predeterminada, el servidor Apache se ejecuta en el puerto 80.

Si el navegador muestra la página, el servidor Web se estará ejecutando con
normalidad. Si el navegador no puede mostrar la página, asegúrese de que
el servidor Web se inicie abriendo Preferencias del sistema y mirando el
panel Compartir. La opción Compartir Web personal debe estar habilitada.
Su servidor Web Apache no funcionará con PHP de forma
predeterminada; debe configurarlo antes de utilizar PHP. Para más
información, consulte “Configuración del sistema (PHP)” en
la página 322.


Aspectos básicos de los
servidores Web
Un servidor Web es un software que suministra páginas Web en respuesta a
las peticiones de los navegadores Web. En ocasiones, también se hace
referencia a un servidor Web como servidor HTTP.
Suponga que utiliza IIS para desarrollar aplicaciones Web. El nombre
predeterminado del servidor Web es el nombre del equipo. Puede cambiar
el nombre del servidor cambiando el nombre de su equipo. Si su equipo no
tiene ningún nombre asignado, el servidor utilizará como nombre la
palabra localhost.
El nombre del servidor corresponde a la carpeta raíz del servidor (en un
equipo Windows), que es muy probable que sea C:Inetpubwwwroot.
Puede abrir cualquier página Web almacenada en la carpeta raíz
introduciendo la siguiente URL en un navegador que se encuentre en
ejecución en su equipo:
http://nombre_de_servidor/nombre_de_archivo
Por ejemplo, si el nombre del servidor es mer_noire y la página Web
denominada soleil.htm está almacenada en C:Inetpubwwwroot, puede
abrir la página introduciendo la siguiente URL en un navegador que se
encuentre en ejecución en el equipo local:
http://mer_noire/soleil.html
NO T A

Recuerde que en la URL debe utilizar barras diagonales normales, no
invertidas.

También puede abrir cualquier página Web almacenada en cualquier
subcarpeta de la carpeta raíz especificando la subcarpeta en la URL.
Supongamos, por ejemplo, que el archivo soleil.htm está almacenado en
una subcarpeta denominada gamelan, como se indica a continuación:
C:Inetpubwwwrootgamelansoleil.htm
Puede abrir esta página introduciendo la siguiente URL en un navegador
que se encuentre en ejecución en su equipo:
http://mer_noire/gamelan/soleil.htm

Aspectos básicos de los servidores Web 251

Cuando el servidor Web se encuentre en ejecución en el equipo, podrá
sustituir el nombre del servidor por localhost. Por ejemplo, las siguientes
URL abren la misma página en un navegador:
http://mer_noire/gamelan/soleil.htm
NO T A http://localhost/gamelan/soleil.htm

Otra expresión que puede utilizar en lugar del nombre del servidor o
localhost es 127.0.0.1 (por ejemplo, http://127.0.0.1/gamelan/soleil.htm).


APÉNDICE C

Configuración del sitio
ColdFusion de muestra
C
Macromedia Dreamweaver 8 incluye páginas ColdFusion de muestra que
le permitirán crear una pequeña aplicación Web. En este capítulo se
describe cómo configurar la aplicación de muestra.
El proceso de configuración de una aplicación Web consta de tres pasos. En
primer lugar, configure el sistema. En segundo lugar, defina un sitio de
Dreamweaver. En tercer lugar, conecte la aplicación a la base de datos. En
esta guía de configuración se realizan los tres pasos de que consta el
proceso.
Este capítulo contiene las siguientes secciones:
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

Listas de comprobación de la
configuración para
desarrolladores de ColdFusion
Para configurar una aplicación Web, debe configurar el sistema, definir un
sitio de Dreamweaver y conectar con una base de datos. En esta sección se
ofrecen las listas de comprobación para cada una de estas tareas. Las tareas
se describen detalladamente en el resto del capítulo.

253

Configure el sistema:
1. Instale el servidor de aplicaciones ColdFusion (que incluye un servidor
Web).
2. Cree una carpeta raíz.

Defina un sitio de Dreamweaver:
1. Copie los archivos de muestra en una carpeta del disco duro.
2. Defina la carpeta como carpeta local de Dreamweaver.
3. Defina una carpeta del servidor Web como carpeta remota de
Dreamweaver.
4. Especifique una carpeta para procesar páginas dinámicas.
5. Cargue los archivos de muestra en el servidor Web.

Conecte con la base de datos:
1. Si utiliza un equipo remoto como servidor, copie la base de datos de
muestra en el equipo remoto.
2. Cree la conexión en Dreamweaver.

Configuración del sistema
(ColdFusion)
En esta sección se proporcionan instrucciones para dos configuraciones de
sistema comunes: una en la que ColdFusion se instala en el disco duro y
otra en la que ColdFusion se instala en un equipo remoto con Windows.
Para utilizar una configuración diferente, consulte “Configuración de una
aplicación Web” en Utilización de Dreamweaver.

254 Configuración del sitio ColdFusion de muestra

La ilustración siguiente muestra las dos configuraciones descritas en esta
sección:

Configuración local Configuración del servidor remoto
(sólo para usuarios de Windows) (para usuarios de Macintosh o de Windows)

PC de WINDOWS MAC o PC de WINDOWS

Dreamweaver Dreamweaver

Servidor ColdFusion

Carpeta raíz del sitio web en
c:Inetpubwwwroot

Acceso de red o ftp

SERVIDOR DE WINDOWS

Servidor ColdFusion

c:Inetpubwwwroot

Para configurar el sistema:
1. Instale el servidor de aplicaciones ColdFusion .
2. Cree una carpeta raíz .
N O TA

La instalación del servidor de aplicaciones es una tarea que se ejecuta una
sola vez.

Configuración del sistema (ColdFusion) 255

Instalación de ColdFusion MX 7
Para procesar páginas Web dinámicas, necesitará un servidor Web y un
servidor de aplicaciones. ColdFusion MX 7 le proporciona los dos. Un
servidor Web es un software que suministra páginas Web en respuesta a las
peticiones de los navegadores Web. Un servidor de aplicaciones es un
software que ayuda al servidor Web a procesar las páginas que contienen
scripts o etiquetas del lado del servidor. Cuando un navegador solicita una
página de este tipo, el servidor Web remite la página al servidor de
aplicaciones para su procesamiento antes de enviarla al navegador. Para más
información, consulte “Aspectos básicos de las aplicaciones Web” en
la página 231.
Puede descargar e instalar una versión de ColdFusion MX 7 para
desarrolladores con todas las funciones desde el sitio Web de Macromedia
www.macromedia.com/go/coldfusion/. Asegúrese de que selecciona la
versión de Windows de ColdFusion MX 7 Developer Edition. También
dispone de una copia de ColdFusion MX 7 Developer Edition en el CD de
Dreamweaver (sólo para Windows).
N OT A

También puede instalar ColdFusion en un equipo Mac OS X que ejecute
un servidor J2EE, como JRun o Tomcat. Para más información, consulte
el sitio Web de Macromedia en www.macromedia.com/go/cfmx7_mac.
Sin embargo, el proceso de instalación es complicado, y Dreamweaver no
se ha probado con ColdFusion en Macintosh. Además, puede ser difícil
conectar ColdFusion a sistemas de bases de datos como MySQL en
Macintosh.

Para instalar ColdFusion MX 7:
1. Si es necesario, inicie la sesión en el sistema Windows utilizando la
cuenta de usuario Administrador.
2. Cierre todas las aplicaciones abiertas.
3. Haga doble clic en el archivo de instalador de ColdFusion MX 7.


4. Siga las instrucciones de instalación que aparecen en pantalla.
Algunas de las pantallas del asistente de instalación son sencillas y no
precisan ninguna explicación adicional. No obstante, deberá
seleccionar estas opciones para las siguientes pantallas:
■ En la pantalla Installer Configuration (configuración del
instalador), seleccione la opción Server Configuration
(configuración del servidor).


■ En la pantalla Select Installation Directory (seleccionar directorio
de instalación), acepte la carpeta predeterminada C:CFusionMX7
haciendo clic en Next (siguiente).

■ En la pantalla Configure Web Server (configurar el servidor Web),
seleccione la opción Built-in Web Server (servidor Web
incorporado) situada en la parte inferior de la pantalla.


■ En la pantalla RDS Password (contraseña RDS), asegúrese de que
está seleccionada la opción Enable RDS (activar RDS) y luego
introduzca y confirme una contraseña.

Para más información, consulte la documentación de ColdFusion en
Dreamweaver (Ayuda > Utilización de ColdFusion).
Tras instalar e iniciar ColdFusion, cree una carpeta raíz para la aplicación
Web.

Creación de una carpeta raíz
Después de instalar el software del servidor, cree una carpeta raíz para la
aplicación Web en el sistema que ejecuta ColdFusion y asegúrese de que la
carpeta cuenta con los permisos necesarios.

Para crear una carpeta raíz para la aplicación Web:
■ Cree una carpeta y asígnele el nombre MySampleApps en la carpeta
CFusionMX7wwwroot del sistema en el que se ejecuta ColdFusion.
N OT A

Anote el nombre de esta carpeta para utilizarlo posteriormente. Cuando lo
escriba más adelante, asegúrese de utilizar exactamente la misma
combinación de mayúsculas y minúsculas que la empleada al crearlo.


De forma predeterminada, ColdFusion configura su servidor Web para que
utilice páginas de la carpeta CFusionMX7wwwroot. El servidor Web
servirá cualquier página de esta carpeta o de cualquiera de sus subcarpetas
en respuesta a las peticiones HTTP de un servidor Web.
Una vez que haya configurado el sistema, deberá definir un sitio de
Dreamweaver.

Definición de un sitio de
Dreamweaver (ColdFusion)
Una vez que haya configurado el sistema, copie los archivos de muestra en
una carpeta local y defina un sitio de Dreamweaver para administrar los
archivos.

Para definir un sitio de Dreamweaver:
1. Copie los archivos de muestra en una carpeta del disco duro (véase
“Copia de los archivos de muestra” en la página 261).
2. Defina la carpeta como carpeta local de Dreamweaver (véase
“Definición de una carpeta local” en la página 262).
3. Defina la carpeta raíz del servidor Web como carpeta remota de
Dreamweaver (véase “Definición de una carpeta remota” en
la página 263).
4. Especifique una carpeta para procesar páginas dinámicas (véase
“Especificación del lugar en el que deben procesarse las páginas
dinámicas” en la página 264).
5. Cargue los archivos de muestra en el servidor Web (véase “Carga de los
archivos de muestra” en la página 265).


Copia de los archivos de muestra
Si aún no lo ha hecho, copie los archivos de muestra de la carpeta de la
aplicación de Dreamweaver en una carpeta del disco duro.

Para copiar los archivos de muestra:
1. Cree una carpeta nueva y asígnele el nombre local_sites en la carpeta de
usuario de su disco duro.
Por ejemplo, cree una de las carpetas siguientes:
■ C:Documents and Settingssu_nombre_de_usuarioMis
documentoslocal_sites (Windows).
■ /Users/su_nombre_de_usuario/Documents/local_sites (Macintosh).
NO TA


2. Localice la carpeta cafe_townsend en la carpeta de la aplicación
8Tutorial_assetscafe_townsend
Dreamweaver 8/Tutorial_assets/cafe_townsend
raíz (carpeta principal) para el sitio de Dreamweaver.
Una vez que haya copiado la carpeta cafe_townsend, defina la carpeta
como una carpeta local de Dreamweaver.

Definición de un sitio de Dreamweaver (ColdFusion) 261

Definición de una carpeta local
Una vez copiada la carpeta cafe_townsend, defina la carpeta que contiene
los archivos de muestra de ColdFusion como carpeta local de
Dreamweaver.

Para definir la carpeta local de Dreamweaver:
1. En Dreamweaver, seleccione Sitio > Administrar sitios.
En el cuadro de diálogo Administrar sitios, haga clic en Nuevo y
seleccione Sitio.
2. Si se muestra la ficha Básicas, haga clic en la ficha Avanzadas.
3. En el cuadro de texto Nombre del sitio, escriba Cafe Townsend
ColdFusion.
El nombre identifica el sitio en Dreamweaver.
4. Haga clic en el icono de carpeta situado junto al campo de texto Carpeta
raíz local y vaya a la siguiente carpeta, que contiene los archivos de
muestra de ColdFusion:
documentoslocal_sitescafe_townsend contactcoldfusion
(Windows)
■ /Users/su_nombre_de_usuario/Documents/local_sites/
cafe_townsend/contact/coldfusion (Macintosh)
5. Haga clic en Seleccionar para finalizar la definición de la carpeta local de
Dreamweaver.
Deje abierto el cuadro de diálogo Definición del sitio. Defina una carpeta
del servidor Web como carpeta remota de Dreamweaver.


Definición de una carpeta remota
Después de definir una carpeta local, defina una carpeta del servidor Web
como carpeta remota de Dreamweaver.

Para definir la carpeta remota de Dreamweaver:
1. En la ficha Avanzadas del cuadro de diálogo Definición del sitio,
seleccione Datos remotos en la lista Categoría.
Aparecerá la pantalla Datos remotos.
2. En el menú emergente Acceso, seleccione cómo desea mover sus
archivos hacia y desde el servidor: por una red local (la opción Local/red)
o mediante FTP.
NO T A

En el menú emergente Acceso aparecen otras opciones que no se tratan
en este manual. Para obtener información sobre las demás opciones,
véase Utilización de Dreamweaver.

3. Introduzca la ruta o la configuración de FTP de la carpeta del servidor
remoto creada en la sección “Creación de una carpeta raíz” en
la página 259.
La carpeta puede encontrarse en el disco duro o en un equipo remoto.
Aunque haya creado la carpeta en el disco duro, seguirá considerándose
como una carpeta remota válida. En el ejemplo siguiente se muestra
una ruta posible de carpeta remota si ha elegido el acceso Local/red y la
carpeta remota se encuentra en el disco duro de Windows:
Carpeta remota: C:CFusionMX7wwwrootMySampleApps
Para más información sobre FTP, consulte “Configuración de las
opciones remotas para acceso FTP” en Utilización de Dreamweaver de
la Ayuda.
Deje abierto el cuadro de diálogo Definición del sitio. A continuación,
defina una carpeta para procesar páginas dinámicas.


Especificación del lugar en el que deben
procesarse las páginas dinámicas
Después de definir la carpeta remota de Dreamweaver, especifique una
carpeta para el procesamiento de páginas dinámicas. Dreamweaver utiliza
esta carpeta para mostrar páginas dinámicas y conectar con bases de datos
mientras se desarrolla una aplicación.

Para especificar la carpeta en la que deben procesarse las
páginas dinámicas:
1. En la ficha Avanzadas del cuadro de diálogo Definición del sitio, haga
clic en Servidor de prueba en la lista Categoría.
Aparecerá la pantalla Servidor de prueba. Dreamweaver necesita los
servicios de un servidor de prueba para generar y mostrar contenido
dinámico mientras se trabaja. El servidor de prueba puede ser su equipo
local, un servidor de desarrollo, un servidor en funcionamiento o un
servidor de producción, siempre que pueda procesar páginas de
ColdFusion. En muchas situaciones, incluida la configuración del sitio
Cafe Townsend, puede utilizar la misma configuración que en la
categoría Datos remotos (véase “Definición de una carpeta remota” en
la página 263), ya que dicha configuración apunta a un servidor con
capacidad para procesar páginas de ColdFusion.
2. Seleccione ColdFusion en el menú emergente Modelo de servidor.
3. En el menú emergente Acceso, elija el mismo método (Local/red o FTP)
que ha especificado para acceder a la carpeta remota.
Dreamweaver introduce los parámetros especificados en la categoría
Datos remotos. No modifique dichos parámetros.
4. En el cuadro de texto Prefijo de URL, introduzca la URL raíz que
introduciría en un navegador Web para solicitar una página en la
aplicación Web.
Con el fin de mostrar datos dinámicos en las páginas mientras trabaja,
Dreamweaver crea un archivo temporal, lo copia en la carpeta raíz del
sitio Web e intenta solicitarlo utilizando el prefijo de URL.
N OT A

Dreamweaver proporciona el prefijo de URL más probable basándose en
la información proporcionada en el cuadro de diálogo Definición del sitio.
Sin embargo, si el prefijo URL es incorrecto, debe corregir el URL o
introducir un nuevo prefijo URL. Para más información, consulte
“Configuración del prefijo de URL” en Utilización de Dreamweaver.


Por ejemplo, si la carpeta especificada en el cuadro de texto Carpeta
remota es c:CFusionMX7wwwrootMySampleApps, el prefijo de
URL deberá ser el siguiente:
http://localhost:8500/MySampleApps/
NO T A

El servidor Web de ColdFusion se ejecuta de forma predeterminada en el
puerto 8500.

5. Haga clic en Aceptar para definir el sitio y cerrar el cuadro de diálogo

SUGERENCIA
El prefijo de URL
Definición del sitio y, a continuación, haga clic en Listo para cerrar el
debe especificar
cuadro de diálogo Administrar sitios. siempre una carpeta
Una vez especificada una carpeta en la que procesar las páginas dinámicas, en lugar de una
cargue los archivos de muestra al servidor Web. página concreta del
sitio. Asimismo,
asegúrese de utilizar
Carga de los archivos de muestra la misma
combinación de
Una vez especificada una carpeta en la que procesar las páginas dinámicas, mayúsculas y
cargue los archivos de muestra al servidor Web. Deberá cargar los archivos minúsculas que la
aunque el servidor Web se esté ejecutando en el equipo local. empleada al crear la
carpeta.
Si no carga los archivos, es posible que algunas funciones, como la vista
Live Data y Vista previa en el navegador, no funcionen correctamente con
páginas dinámicas. Por ejemplo, los vínculos de imágenes podrían
romperse en la vista Live Data, ya que los archivos de imagen aún no están
en el servidor. De igual forma, al hacer clic en un vínculo con una página
detalle tras obtener una vista previa de una página maestra en un
navegador, se producirá un error si la página detalle no está presente en el
servidor.

Para cargar los archivos de muestra en el servidor Web:
1. En el panel Archivos (Ventana > Archivos), seleccione la carpeta raíz del
sitio en el panel Vista local.
La carpeta raíz es la primera carpeta de la lista.
2. En la barra de herramientas del panel Archivos, haga clic en el icono de
flecha azul Colocar archivos y confirme que desea cargar todo el sitio.
Dreamweaver copia todos los archivos en la carpeta del servidor Web
definida en “Definición de una carpeta remota” en la página 263.
El sitio de Dreamweaver quedará definido. El siguiente paso consiste en
conectar con la base de datos de muestra instalada con Dreamweaver.


Conexión con la base de datos
de muestra (ColdFusion)
Durante la instalación, Dreamweaver copia en el disco duro una base de
datos de muestra de Microsoft Access. En esta sección se explica cómo crear
una conexión con la base de datos de muestra.
NO T A

Para más información sobre cómo conectarse a otra base de datos,
consulte “Conexiones de base de datos para desarrolladores de
ColdFusion” en Utilización de Dreamweaver.

Para crear una conexión de base de datos:
muestra en el equipo remoto. (Véase “Configuración de la base de datos
(servidor en un equipo remoto)” en la página 266).
2. Cree una fuente de datos de ColdFusion y visualice la conexión en
Dreamweaver (consulte “Conexión con la base de datos” en
la página 267).

Configuración de la base de datos
(servidor en un equipo remoto)
Esta sección sólo es pertinente si el servidor Web se está ejecutando en un
equipo remoto. Si el servidor Web se ejecuta en el mismo equipo que
Dreamweaver, continúe con la sección “Conexión con la base de datos” en
la página 267.
Antes de intentar conectar con la base de datos de muestra, copie la base de
datos en el disco duro del equipo remoto. Si ha instalado Dreamweaver en
la ubicación predeterminada, la ruta del disco duro local al archivo de base
de datos (tutorial.mdb) será la siguiente:
■ C:Archivos de
programaMacromediaDreamweaver 8Tutorial_assetscafe_townsend
datatutorial.mdb (Windows)
■ /Applications/Macromedia Dreamweaver 8/Tutorial_assets/
cafe_townsend/data/tutorial.mdb (Macintosh)


Puede colocar el archivo en cualquier carpeta del equipo remoto o crear
una nueva carpeta para él.
NO T A

Pueden surgir problemas de seguridad si coloca el archivo de base de
datos en la carpeta Inetpub del equipo remoto. Es mejor colocar el archivo
en una carpeta que no sea de acceso público.

Cuando la base de datos esté en el equipo remoto, cree una fuente de datos
de ColdFusion.

Para conectar con la base de datos, deberá crear una fuente de datos de
ColdFusion denominada connTownsend que apunte al archivo de base de
datos de muestra.

Para conectar con la base de datos:
1. En Dreamweaver, abra una página de ColdFusion, como, por ejemplo,
send.cfm y view.cfm.
2. En el panel Bases de datos (Ventana > Bases de datos), haga clic en el
vínculo “Conexión RDS”, introduzca su contraseña RDS y haga clic en
Aceptar.
3. Haga clic en el signo más (+) de la barra de herramientas del panel Bases
de datos y seleccione Conexión de Microsoft Access en el menú
emergente.
N OT A

Si no aparece el botón de signo más en el panel Bases de datos, reinicie
Dreamweaver.

4. En el cuadro de texto Nombre de fuente de datos CF, introduzca
connTownsend.
5. En el cuadro de texto Archivo de base de datos, introduzca la ruta del
archivo de base de datos tutorial.mdb.
Si ColdFusion se ejecuta en el equipo local y ha instalado Dreamweaver
en su ubicación predeterminada, la ruta es la siguiente:

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

C:Archivos de programaMacromediaDreamweaver
8Tutorial_assetscafe_townsenddatatutorial.mdb

Si ColdFusion se ejecuta en un equipo remoto, introduzca la ruta del
archivo de base de datos que situó en el equipo remoto en la sección
“Configuración de la base de datos (servidor en un equipo remoto)” en
la página 266.
Para más información, consulte la documentación de ColdFusion en
Dreamweaver (Ayuda > Utilización de ColdFusion).
6. Haga clic en Aceptar para crear la conexión.
La conexión se muestra en el panel Bases de datos.

Si la conexión no aparece en el panel, siga uno de estos procedimientos:
■ Compruebe la configuración de la carpeta que Dreamweaver utiliza
para procesar las páginas dinámicas (véase “Especificación del lugar
en el que deben procesarse las páginas dinámicas” en
la página 264).
■ Véase “Solución de problemas de conexiones de base de datos” en
Utilización de Dreamweaver (Ayuda > Utilización
de Dreamweaver).


7. Expanda la rama connTownsend branch y luego la rama Tablas.
Si la rama Tablas contiene las tres tablas siguientes, la aplicación
ColdFusion de muestra estará configurada para los tutoriales de
Primeros pasos con Dreamweaver. Para más información, consulte
“Tutorial: Desarrollo de una aplicación Web” en la página 207.

Si la rama Tablas no contiene las tablas, haga clic en Modificar fuentes
de datos de la barra de herramientas del panel Bases de datos y
compruebe los parámetros de conexión en Configuring and
Administering ColdFusion MX. En concreto, asegúrese de que la ruta del
archivo de base de datos es correcta.

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

APÉNDICE D

ASP.NET de muestra
D
Macromedia Dreamweaver 8 incluye páginas ASP.NET de muestra que le
permitirán crear una pequeña aplicación Web. En este capítulo se describe
un modo de configurar la aplicación de muestra.
Este capítulo se ha concebido para desarrolladores de ASP.NET. Para más
información sobre ASP, consulte “Configuración del sitio ASP de muestra”
en la página 285.
este capítulo de configuración se realizan los tres pasos de que consta el
proceso.
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

configuración para
desarrolladores de ASP.NET

271

1. Asegúrese de que dispone de un servidor Web.
2. Instale Microsoft .NET Framework.

Dreamweaver.


Configuración del sistema
(ASP.NET)
sistema comunes: una en la que Windows 2000 o Windows XP
Professional se instala en el disco duro y otra en la que Windows 2000 o
Windows XP Professional se instala en un equipo remoto. Si desea utilizar
una configuración diferente, consulte Capítulo 23, “Configuración de una
aplicación Web” en Utilización de Dreamweaver.

272 Configuración del sitio ASP.NET de muestra

sección:

(sólo para usuarios de Windows 2000 o XP) (para usuarios de Macintosh o de Windows)

WINDOWS 2000 o XP MAC o PC de WINDOWS


IIS 5 o superior

.NET Framework

c:Inetpubwwwroot Acceso de red o ftp

SERVIDOR DE WINDOWS

IIS 5 o superior

.NET Framework

c:Inetpubwwwroot

1. Asegúrese de que dispone de un servidor Web (véase “Comprobación de
un servidor Web” en la página 274).
2. Instale .NET Framework (véase “Instalación de .NET Framework” en
la página 274).
3. Cree una carpeta raíz (véase “Creación de una carpeta raíz” en
la página 275).
NO T A

La instalación del servidor Web y de .NET Framework sólo debe
realizarse una vez.

Configuración del sistema (ASP.NET) 273

Comprobación de un servidor Web
servidor Web. Un servidor Web es un software que suministra páginas Web
en respuesta a las peticiones de los navegadores Web.
Las páginas ASP.NET sólo funcionan con un servidor Web: Microsoft
IIS 5 o posterior. Dado que IIS 5 es un servicio de los sistemas operativos
Windows 2000 y Windows XP Professional, sólo podrá utilizar estas dos
versiones de Windows para ejecutar aplicaciones ASP.NET.
Compruebe que IIS 5 está instalado y en funcionamiento en un equipo
con Windows 2000 o Windows XP Professional. Puede utilizar su equipo
local como servidor si tiene Windows 2000 o Windows XP Professional.
Una forma rápida de comprobar si IIS está instalado en su equipo consiste
en examinar la estructura de carpetas para ver si contiene una carpeta
C:Inetpub o D:Inetpub. IIS crea esta carpeta durante la instalación.
Si IIS no está instalado, instálelo ahora. Para más información, consulte
“Instalación de Internet Information Server” en la página 248.
Después de instalar el servidor Web, instale .NET Framework.

Instalación de .NET Framework
Para procesar páginas Web dinámicas, necesitará un servidor de
aplicaciones. Un servidor de aplicaciones es un software que ayuda al
servidor Web a procesar las páginas que contienen scripts o etiquetas del
lado del servidor. Cuando un navegador solicita una página de este tipo, el
servidor Web remite la página al servidor de aplicaciones para su
procesamiento antes de enviarla al navegador. Para más información,
consulte “Aspectos básicos de las aplicaciones Web” en la página 231.
En ASP.NET, el servidor de aplicaciones se denomina Microsoft .NET
Framework 1.1. Para desarrollar aplicaciones Web ASP.NET, también
deberá instalar Microsoft .NET Framework 1.1 Software Development Kit
(SDK). Asegúrese de que Framework y SDK estén instalados y en
funcionamiento en un sistema Windows 2000 o Windows XP Professional
que ejecute IIS 5 o superior.


Para instalar .NET Framework y SDK:
1. Compruebe si .NET Framework está instalado en el sistema revisando
la lista de aplicaciones del cuadro de diálogo Agregar o quitar programas
(inicio > Panel de control > Agregar o quitar programas).
Si Microsoft .NET Framework 1.1 aparece en la lista, Framework ya
está instalado, por lo que no tendrá que volver a instalarlo. Continúe
con el paso 3.
2. Si .NET Framework no está instalado en el sistema, instale Microsoft
.NET Framework 1.1 Redistributable Package (Paquete redistribuible
de Microsoft .NET Framework 1.1) del sitio Web de Microsoft
http://msdn.microsoft.com/netframework/downloads/framework1_1/
y siga las instrucciones de instalación que aparecen en el sitio Web.
Framework se instala como una actualización de Windows.
3. Descargue Microsoft .NET Framework 1.1 Software Development Kit
(SDK) del mismo sitio Web y siga las instrucciones de instalación.
Después de instalar Framework y SDK, cree una carpeta raíz para la
aplicación Web.

aplicación Web en el sistema que ejecuta Microsoft IIS y asegúrese de que
la carpeta cuenta con los permisos necesarios.

1. Cree una carpeta llamada MySampleApps en el sistema que ejecuta IIS.
N OT A


Un lugar idóneo para crear la carpeta es en C:Inetpubwwwroot. De
forma predeterminada, el servidor Web IIS se configura para que utilice
páginas de la carpeta Inetpubwwwroot. El servidor Web servirá
cualquier página de esta carpeta o de cualquiera de sus subcarpetas en
respuesta a las peticiones HTTP de un servidor Web.

Configuración del sistema (ASP.NET) 275

2. Para asegurarse de que el permiso de ejecución de scripts está activado
para la carpeta, inicie la herramienta administrativa de IIS. Para ello, en
Windows XP, seleccione Inicio > Panel de control, o bien Inicio >
Configuración >Panel de control; a continuación, haga doble clic en
Herramientas administrativas y, después, haga doble clic en Servicios de
Internet Information Server. Expanda la lista del equipo local, luego la
carpeta Web Sites y después la carpeta Default Web Site. Haga clic con
el botón derecho en la carpeta MySampleApps y seleccione Properties
(propiedades) en el menú emergente. En el menú emergente Execute
Permissions (permisos de ejecución), asegúrese de que la opción
Scripts Only (sólo scripts) esté seleccionada. Por razones de seguridad,
no seleccione la opción Scripts and Executables (scripts y ejecutables).
A continuación, haga clic en Aceptar.
El servidor Web está ya configurado para facilitar páginas Web de la carpeta
raíz en respuesta a las peticiones HTTP de los navegadores Web.
Dreamweaver.

Dreamweaver (ASP.NET)
archivos.

la página 278).
“Especificación de dónde pueden procesarse las páginas dinámicas” en
la página 279).



aplicación Dreamweaver en una carpeta del disco duro.

N OT A


8Tutorial_assets cafe_townsend.

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

Después de copiar la carpeta cafe_townsend, defina la carpeta que contiene
los archivos de muestra de ASP.NET como una carpeta local de
Dreamweaver.

1. En Dreamweaver, seleccione Sitio > Administrar sitios. En el cuadro de
diálogo Administrar sitios, haga clic en el botón Nuevo y seleccione
Sitio.
3. En el cuadro de texto Nombre del sitio, escriba Cafe Townsend
ASP.NET.
muestra de ASP.NET:
documentoslocal_sitescafe_townsendcontactaspnet (Windows)
cafe_townsend/contact/aspnet (Macintosh)
Dreamweaver.




o mediante FTP.
NO TA

en este manual. Para información sobre ellas, consulte Utilización de

la página 275.
Carpeta remota: C:InetpubwwwrootMySampleApps
la Ayuda.

Especificación de dónde pueden
Una vez que haya definido la carpeta remota de Dreamweaver, especifique
una carpeta en la que procesar las páginas dinámicas. Dreamweaver utiliza
mientras usted desarrolla la aplicación.


dinámico mientras se trabaja. El servidor de prueba puede ser el equipo
servidor de producción, siempre que pueda procesar páginas ASP.NET.
En muchas situaciones, incluida la configuración del sitio Cafe
Townsend, puede utilizar la misma configuración que en la categoría
Datos remotos (véase “Definición de una carpeta remota” en
capacidad para procesar páginas de ASP.NET.
2. Seleccione ASP.NET VB o ASP.NET C# en el menú emergente
Modelo de servidor.
aplicación Web.
Dreamweaver proporciona el prefijo de URL más probable basándose
en la información proporcionada en el cuadro de diálogo Definición
del sitio. No obstante, el prefijo de URL sugerido puede ser incorrecto.
Corrija o introduzca un nuevo prefijo de URL si la sugerencia de
Dreamweaver no es correcta. Para más información, consulte
Si la carpeta especificada en el cuadro de texto Carpeta remota es
C:InetpubwwwrootMySampleApps, el prefijo de URL deberá ser el
siguiente:
http://localhost/MySampleApps/



S U G E R E N C IA
El prefijo de URL
debe especificar
cuadro de diálogo Administrar sitios. siempre un directorio
sitio. Asimismo,
combinación de
Una vez que haya especificado una carpeta en la que procesar las páginas mayúsculas y
dinámicas, cargue los archivos de muestra al servidor Web. Deberá cargar minúsculas que la
los archivos aunque el servidor Web se esté ejecutando en el equipo local. empleada al crear la
carpeta.
navegador, se producirá un error si la página detalle no está presente en
el servidor.



de muestra (ASP.NET)
NO T A

Para obtener información sobre la conexión con otra base de datos,
consulte el Capítulo 25, “Conexiones de base de datos para
desarrolladores de ASP.NET” de Utilización de Dreamweaver (Ayuda >
Utilización de Dreamweaver).

muestra en el equipo remoto. (Véase “Configuración de la base de datos
(servidor en el equipo remoto)” en la página 282).
2. Cree la conexión en Dreamweaver (véase “Creación de una conexión de
base de datos” en la página 283).

(servidor en el equipo remoto)
Dreamweaver, continúe con la sección “Creación de una conexión de base
de datos” en la página 283.
Antes de intentar conectar con la base de datos de muestra, copie la base de
datos en el disco duro del equipo remoto. Si ha instalado Dreamweaver en
la ubicación predeterminada, la ruta del disco duro local al archivo de base
de datos (tutorial.mdb) será la siguiente:
■ C:Archivos de
programaMacromediaDreamweaver 8Tutorial_assetscafe_townsend
datatutorial.mdb (Windows)


una nueva carpeta para él. En ambos casos, anote la ruta completa del
archivo de base de datos.
NO TA


Cuando la base de datos esté en su lugar, conéctese a ella.

Creación de una conexión de base de
datos
El último paso del proceso de configuración es crear una conexión con la
base de datos.

Para crear una conexión con la base de datos en
Dreamweaver:
1. Abra cualquier página de ASP.NET en Dreamweaver y, a continuación,
abra el panel Bases de datos (Ventana > Bases de datos).
2. Haga clic en el botón del signo más (+) del panel Bases de datos y
seleccione Conexión de base de datos OLE en el-menú emergente.
Aparecerá el cuadro de diálogo Conexión de base de datos OLE.
3. Introduzca connTownsend como nombre de conexión.
4. Haga clic en el botón Plantillas.
Aparecerá el cuadro de diálogo Plantilla de cadena de conexión.
5. En la lista de plantillas, seleccione Microsoft Access 2000 (Microsoft Jet
4.0 Provider) y haga clic en Aceptar.
Dreamweaver añadirá una plantilla de cadena de conexión al cuadro de
diálogo Conexión de base de datos OLE. La plantilla contiene
marcadores de posición para la información ausente en la cadena de
conexión.

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

6. En el cuadro de texto Fuente de datos, introduzca la ruta completa del
archivo de base de datos de muestra en su disco duro o en el del equipo
remoto. Si ASP.NET se ejecuta en el equipo local y ha instalado
Dreamweaver en su ubicación predeterminada, utilice la siguiente ruta:
C:Archivos de
programaMacromediaDreamweaver 8Tutorial_assetsdatatutorial.mdb
NO T A

La ruta puede variar según dónde esté instalado Dreamweaver.

Por ejemplo, puede escribir esta ruta como el valor de Fuente de datos
para una base de datos en su disco duro local:
Fuente de datos=C:Archivos
de programaMacromediaDreamweaver 8Tutorial_assetsdatatutoria
l.mdb;
También puede introducir esta ruta para una base de datos en un
servidor remoto:
Fuente de datos=C:usersDenmanSitesdatatutorial.mdb;
7. Borre las líneas ID de usuario y Contraseña.
La base de datos Access no requiere un ID de usuario ni una contraseña.
8. Haga clic en Prueba.
Dreamweaver intentará conectarse con la base de datos. Si falla la
conexión, siga este procedimiento:
■ Compruebe la ruta de la base de datos.
para procesar las páginas dinámicas (véase “Especificación de dónde
pueden procesarse las páginas dinámicas” en la página 279).
■ Para desplegar los archivos de soporte, seleccione Sitio > Avanzadas
> Desplegar archivos de soporte.
■ Consulte el Capítulo 29, “Solución de problemas de conexiones de
base de datos” de Utilización de Dreamweaver (Ayuda > Utilización
de Dreamweaver).
La nueva conexión se muestra en el panel Bases de datos.
Ahora la aplicación ASP.NET de muestra está configurada para los
tutoriales de Primeros pasos con Dreamweaver. Para más información,
consulte “Tutorial: Desarrollo de una aplicación Web” en la página 207.


APÉNDICE E

ASP de muestra
E
Macromedia Dreamweaver 8 incluye páginas Microsoft Active Server
(ASP) de muestra que le permitirán crear una pequeña aplicación Web.
En este capítulo se describe cómo configurar la aplicación de muestra
empleando Microsoft Internet Information Server (IIS). Para más
información sobre estos servidores Web, consulte “Instalación de un
servidor Web” en la página 247.
Este capítulo se ha concebido exclusivamente para desarrolladores de ASP.
Para más información sobre ASP.NET, consulte “Configuración del sitio
ASP.NET de muestra” en la página 271.
El proceso de configuración de una aplicación Web consta de tres pasos.
En primer lugar, configure el sistema. En segundo lugar, defina un sitio de
este capítulo de configuración se realizan los tres pasos de que consta el
proceso.
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

285

configuración para
desarrolladores de ASP

2. Instale un servidor de aplicaciones.
3. Compruebe la instalación.

Dreamweaver.


286 Configuración del sitio ASP de muestra

Configuración del sistema (ASP)
En esta sección se proporcionan las instrucciones correspondientes a dos
configuraciones de sistema comunes para ASP: una en la que Microsoft IIS
se instala en el disco duro y otra en la que IIS se instala en un equipo
remoto con Windows.
sección:




IIS

c:Inetpubwwwroot

Acceso de red o ftp

SERVIDOR DE WINDOWS

IIS

c:Inetpubwwwroot

Configuración del sistema (ASP) 287

2. Si es necesario, instale un servidor de aplicaciones (véase “Instalación de
un servidor de aplicaciones ASP” en la página 289).
3. Compruebe la instalación (véase “Comprobación de la instalación” en
la página 289).
la página 291).
NO TA

La instalación del servidor Web y del servidor de aplicaciones sólo debe
realizarse una vez.

Asegúrese de que Microsoft IIS está instalado y en ejecución en el disco
duro o en un equipo Windows remoto. (Los usuarios de Macintosh
deberán instalar Microsoft IIS en un equipo Windows remoto.) Una forma
rápida de comprobar si IIS está instalado en su equipo consiste en examinar
la estructura de carpetas para ver si contiene una carpeta C:Inetpub o
Si IIS no está instalado, instálelo ahora. Para instrucciones, consulte
“Instalación de un servidor Web” en la página 247.
Después de instalar el servidor Web, deberá instalar un servidor de
aplicaciones.


Instalación de un servidor de aplicaciones
ASP
Si ha instalado IIS en un equipo Windows, no necesita un servidor de
aplicaciones ASP distinto. IIS también funciona con un servidor de
aplicaciones ASP. Para más información sobre la instalación y
comprobación de IIS, consulte “Instalación de un servidor Web” en
la página 247.
Debe comprobar el servidor para asegurarse de que funciona
correctamente.

Comprobación de la instalación
Puede comprobar el motor ASP de IIS ejecutando una página de prueba.

Para comprobar el motor ASP de IIS:
1. En Dreamweaver o cualquier editor de texto, cree un archivo de texto
normal y asígnele el nombre timetest.asp.
2. En el archivo, introduzca el código siguiente:
<p>This page was created at <b>
<%= Time %>
</b> on the computer running ASP.</p>

Este código mostrará la hora en que la página se procesó en el servidor.
3. Copie el archivo en la carpeta C:Inetpubwwwroot del equipo
Windows donde se ejecute IIS.
4. En el navegador Web, introduzca el URL de la página de prueba y,
a continuación, presione Intro.
Si se está ejecutando IIS en el equipo local, puede introducir el
siguiente URL:
http://localhost/timetest.asp


La página de prueba deberá abrirse y mostrar una hora del día de este
modo:

La hora especificada se considera contenido dinámico porque cambia cada
vez que se solicita la página. Haga clic en el botón Actualizar del navegador
para generar una nueva página con otra hora.
NO TA

Si examina el código fuente (Ver > Código fuente en Internet Explorer)
observará que la página no utiliza ningún JavaScript del lado del cliente
para conseguir este efecto.

Si la página no funciona de la forma deseada, compruebe los siguientes
errores posibles:
■ El archivo no tiene la extensión .asp.
■ Ha escrito la ruta del archivo de la página
(C:Inetputwwwroottimetest.asp) en lugar de su URL (por ejemplo,
http://localhost/timetest.asp) en el cuadro de texto Dirección del
navegador.
Si escribe una ruta de archivo en el navegador (como quizá esté
acostumbrado a hacer con las páginas HTML normales), omite el
servidor Web y el servidor de aplicaciones. Como consecuencia, el
servidor nunca procesa la página.
■ El URL contiene un error de escritura. Compruebe si hay errores y no
introduzca una barra diagonal después del nombre de archivo, como
http://localhost/timetest.asp/.
■ El código de la página contiene un error de escritura.


Después de instalar y comprobar el software del servidor, cree una carpeta
raíz para la aplicación Web.


NO TA


páginas de la carpeta Inetpubwwwroot. El servidor Web
servirá cualquier página de esta carpeta o de cualquiera de sus
subcarpetas en respuesta a las peticiones HTTP de un navegador Web.
2. Compruebe que dispone de permisos de lectura y de ejecución de scripts
para la carpeta. Para ello, haga lo siguiente:
a. Inicie la herramienta administrativa de IIS (en Windows XP,
seleccione inicio > Panel de control, o bien inicio >
Configuración > Panel de Control; a continuación, haga doble clic
en Herramientas administrativas y después haga doble clic en
Internet Information Services).
b. Expanda la lista del equipo local, luego la carpeta Web Sites y
después la carpeta Default Web Site.
c. Haga clic con el botón derecho en la carpeta MySampleApps y
seleccione Properties (propiedades) en el menú emergente.
d. En el menú emergente Execute Permissions (permisos de
ejecución), asegúrese de que la opción Scripts Only (sólo scripts)
esté seleccionada. Por razones de seguridad, no seleccione la opción
Scripts and Executables (scripts y ejecutables).
e. Haga clic en Aceptar.


Dreamweaver.

Dreamweaver (ASP)
archivos.

la página 294).
la página 296).



NO TA



Definición de un sitio de Dreamweaver (ASP) 293

los archivos de muestra de ASP como una carpeta local de Dreamweaver.

Sitio.
3. En el cuadro de texto Nombre del sitio, escriba Cafe Townsend ASP.
muestra de ASP:
documentoslocal_sitescafe_townsendcontactasp (Windows)
cafe_townsend/contact/asp (Macintosh)
Dreamweaver.


Aparecerá el cuadro de diálogo Datos remotos.


o mediante FTP.
NO TA

en este manual. Para más información sobre ellas, consulte el apartado

la página 291.
la Ayuda.



servidor de producción, siempre y cuando permita procesar páginas
ASP. En muchas situaciones, incluida la configuración del sitio Cafe
capacidad para procesar páginas de ASP.
2. Seleccione ASP JavaScript o ASP VBScript en el menú emergente
Modelo de servidor.


aplicación Web.
siguiente:

SUGERENCIA
El prefijo de URL
Definición del sitio y, a continuación, haga clic en Listo para cerrar el debe especificar
en lugar de una
Una vez especificada una carpeta en la que procesar las páginas dinámicas,
página concreta del
cargue los archivos de muestra al servidor Web. sitio. Asimismo,
la misma
Carga de los archivos de muestra combinación de
minúsculas que la
dinámicas, cargue los archivos de muestra al servidor Web. Deberá cargar
empleada al crear la
los archivos aunque el servidor Web se esté ejecutando en el equipo local. carpeta.
navegador, se producirá un error si la página detalle no está presente en el
servidor.



de muestra (ASP)
N OT A

desarrolladores de ASP” de Utilización de Dreamweaver.

1. Si utiliza un equipo remoto como servidor, configure la base de datos de
muestra en el equipo remoto (véase “Configuración de la base de datos


Antes de crear una conexión con la base de datos de muestra, realice las
tareas siguientes en el equipo remoto que ejecuta el servidor Web: copie la
base de datos de muestra en el disco duro del equipo y cree un DSN en el
equipo que señala a la base de datos.

Para configurar la base de datos de muestra en el equipo
remoto:
1. Copie la base de datos en el disco duro del equipo remoto. Si ha
instalado Dreamweaver en la ubicación predeterminada, la ruta del
disco duro local al archivo de base de datos (tutorial.mdb) será la
siguiente:
■ C:Archivos de
programaMacromediaDreamweaver 8Tutorial_assetscafe_towns
enddatatutorial.mdb (Windows)
NO T A


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

2. Compruebe que está instalado el Controlador de Microsoft Access
versión 4.0 o superior en el equipo remoto.
Para averiguar si el controlador ya está instalado, consulte
“Visualización de los controladores ODBC instalados en un sistema
Windows” en Utilización de Dreamweaver.
Si no está instalado el controlador, descargue e instale en el equipo
remoto los paquetes Microsoft Data Access Components (MDAC) 2.5
y 2.7. Puede descargar MDAC gratis del sitio Web de Microsoft
http://msdn.microsoft.com/data/mdac/downloads/. Estos paquetes
contienen los últimos controladores de Microsoft, incluido el
Controlador de Microsoft Access.
NO TA

Instale MDAC 2.5 antes que MDAC 2.7.

3. Configure un DSN llamado CafeTownsend que señale a la base de datos
de muestra del equipo remoto.
Para instrucciones, véanse los artículos siguientes en el sitio Web de
Microsoft:
■ Si el equipo remoto se ejecuta en Windows 2000, véase el artículo
300596 en
http://support.microsoft.com/default.aspx?scid=kb;en-us;300596.
■ Si el equipo remoto se ejecuta en Windows XP, véase el artículo
305599 en
http://support.microsoft.com/default.aspx?scid=kb;en-us;305599.
Después de instalar la base de datos, el controlador de base de datos y el
DSN, cree una conexión con la base de datos en Dreamweaver.

datos
base de datos.
Si el servidor Web se ejecuta en un equipo local, puede utilizar el nombre
de fuente de datos (DSN) que Dreamweaver ha creado durante la
instalación para conectarse rápidamente a la base de datos de muestra. Para
obtener más información sobre DSN, consulte “Utilización de un DSN”


Dreamweaver:
1. Abra cualquier página de ASP en Dreamweaver y, a continuación, abra
el panel Bases de datos (Ventana > Bases de datos).
2. Haga clic en el botón de signo más (+) en el panel y seleccione Nombre
de fuente de datos (DSN) en el menú emergente.
Aparecerá el cuadro de diálogo Nombre de fuente de datos (DSN).
4. (Sólo en Windows) Lleve a cabo una de estas operaciones:
■ Si el servidor se encuentra en el equipo local, seleccione la opción
Utilizando DSN local.
■ Si el servidor se encuentra en un sistema remoto, seleccione la
opción Utilizando DSN en el servidor de prueba.
Los usuarios de Macintosh pueden pasar por alto este paso porque
todas las conexiones de base de datos utilizan DSN en el servidor
de prueba.
5. Haga clic en el botón DSN y elija CafeTownsend en la lista de DSN.
Si está utilizando Dreamweaver en un equipo Windows, Dreamweaver
habrá creado durante la instalación un DSN llamado CafeTownsend,
que apunta a la base de datos de Microsoft Access de la carpeta de la
aplicación Dreamweaver.
■ Compruebe el DSN.
para procesar las páginas dinámicas (véase “Especificación de
dónde pueden procesarse las páginas dinámicas” en la página 296).
base de datos” de Utilización de Dreamweaver.
Ahora la aplicación ASP de muestra está configurada para los tutoriales de
Primeros pasos con Dreamweaver. Para más información, consulte “Tutorial:
Desarrollo de una aplicación Web” en la página 207.

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

APÉNDICE F

JSP de muestra
F
Macromedia Dreamweaver 8 incluye páginas Web Java Server Pages (JSP)
de muestra que le permitirán crear una pequeña aplicación Web. En este
capítulo se describe una forma de configurar la aplicación de muestra
empleando Microsoft Internet Information Server (IIS). Para más
información sobre estos servidores Web, consulte “Instalación de un
servidor Web” en la página 247. Si utiliza un servidor Web diferente,
consulte el Capítulo 23, “Configuración de una aplicación Web” de
Utilización de Dreamweaver (Ayuda > Utilización de Dreamweaver).
El proceso de configuración de una aplicación Web consta de tres
pasos. En primer lugar, configure el sistema. En segundo lugar, defina
un sitio de Dreamweaver. En tercer lugar, conecte la aplicación a la
base de datos. En este capítulo de configuración se realizan los tres
pasos de que consta el proceso.
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

303

configuración para
desarrolladores de JSP

2. Instale el servidor de aplicaciones JSP.

Dreamweaver.

1. Instale un controlador de puente JDBC-ODBC.

Configuración del sistema (JSP)
sistema comunes: una en la que Microsoft IIS se instala en el disco duro y
otra en la que IIS se instala en un equipo remoto con Windows. Si desea
utilizar una configuración diferente, consulte Capítulo 23, “Configuración
de una aplicación Web” en Utilización de Dreamweaver.

304 Configuración del sitio JSP de muestra

sección:




IIS

Servidor de aplicaciones JSP


SERVIDOR DE WINDOWS

IIS

Servidor de aplicaciones JSP

c:Inetpubwwwroot

2. Instale el servidor de aplicaciones JSP (véase “Instalación de un servidor
de aplicaciones JSP” en la página 306).
la página 308).
NO T A

realizarse una vez.

Configuración del sistema (JSP) 305

duro o en un equipo Windows remoto. (Los usuarios de Macintosh
deberán instalar Microsoft IIS en un equipo Windows remoto.) Una forma
rápida de comprobar si IIS está instalado en su equipo consiste en examinar
la estructura de carpetas para ver si contiene una carpeta C:Inetpub o
Tras instalar el servidor Web, instale el servidor de aplicaciones.

Instalación de un servidor de aplicaciones
JSP
Compruebe que el servidor de aplicaciones JSP está instalado y se ejecuta
en el sistema con IIS. (IIS puede encontrarse en el disco duro o en un
equipo remoto.)
Si no tiene un servidor de aplicaciones JSP, puede descargar e instalar la
versión de desarrollador (Developer Edition) de Macromedia JRun, un
servidor de aplicaciones JSP completo, del sitio Web de Macromedia
www.macromedia.com/go/jrun/.
JRun está disponible para Windows y para Macintosh. Sin embargo, en
esta guía no se describe la utilización de JRun en un sistema Macintosh.


Para instalar JRun:
cuenta Administrador.
2. Cierre todas las aplicaciones abiertas.
3. Haga doble clic en el archivo de instalación de JRun Developer Edition.
Aparecerá la pantalla de bienvenida.
4. Si no tiene un Java Runtime Environment (JRE) en el sistema,
seleccione la opción en la pantalla de bienvenida para instalarlo.
Dado que el servidor de aplicaciones JRun se basa en Java, deberá
instalar primero un JRE en el sistema que ejecutará el servidor de
aplicaciones. Después de instalar el JRE podrá instalar el servidor de
aplicaciones JRun.
5. Seleccione la opción en la pantalla de bienvenida para instalar JRun.
6. Siga las instrucciones que aparecen en la pantalla para terminar de
instalar y comprobar el programa.
7. Una vez que haya finalizado la instalación, cree un conector JRun
con el servidor Web IIS seleccionando Inicio > Programas >
Macromedia JRun 4 > Web Server Configuration.
Para instrucciones, véase la documentación de JRun.
Después de instalar e iniciar JRun, cree una carpeta raíz para la aplicación
Web.

Configuración del sistema (JSP) 307


NO T A


páginas de la carpeta Inetpubwwwroot. El servidor Web
servirá cualquier página de esta carpeta o de cualquiera de sus
subcarpetas en respuesta a las peticiones HTTP de un navegador Web.
seleccione inicio > Panel de control, o bien inicio >
Configuración > Panel de Control, haga doble clic en
Herramientas administrativas y después haga doble clic en Internet
Information Services).
ejecución), asegúrese de que la opción Scripts Only(sólo scripts)
Dreamweaver.


Dreamweaver (JSP)
archivos.

la página 311).
la página 312).


N OT A


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

■ En Windows: C:Archivos de programaMacromedia
Dreamweaver 8Tutorial_assetscafe_townsend.

los archivos de muestra de JSP como una carpeta local de Dreamweaver.

Sitio.
3. En el cuadro de texto Nombre del sitio, escriba Cafe Townsend JSP.
muestra de JSP:
documentoslocal_sitescafe_townsend contactjsp (Windows)
cafe_townsend/contact/jsp (Macintosh)
Dreamweaver.




o mediante FTP.
NO TA

en este manual. Para más información sobre ellas, consulte el apartado

la página 308.
opciones remotas para acceso FTP” en Utilización de Dreamweaver



JSP. En muchas situaciones, incluida la configuración del sitio Cafe
capacidad para procesar páginas de JSP.
2. Seleccione JSP en el menú emergente Modelo de servidor.


aplicación Web.
siguiente:

SUGERENCIA
El prefijo de URL
debe especificar
sitio. Asimismo,
combinación de
dinámicas, cargue los archivos de muestra al servidor Web. Deberá cargar minúsculas que la
los archivos aunque el servidor Web se esté ejecutando en el equipo local. empleada al crear la
carpeta.
el servidor.



de muestra (JSP)
datos de muestra de Microsoft Access. En esta sección se explica cómo
crear una conexión con la base de datos de muestra.
N OT A

desarrolladores de JSP” de Utilización de Dreamweaver.

1. Instale el controlador puente (véase “Instalación del controlador
puente” en la página 315).
2. Si utiliza un equipo remoto como servidor, configure la base de datos de
muestra en el equipo remoto (véase “Configuración de la base de datos


Instalación del controlador puente
Antes de intentar conectar con la base de datos de muestra, instale el
controlador puente JDBC-ODBC de Sun en el equipo que ejecuta el
servidor Web. El controlador puente permite utilizar nombres de fuentes
de datos (DSN) Windows para crear conexiones. Éste se suministra con
Sun Java 2 SDK, Standard Edition, para Windows.
Para averiguar si ya dispone de Java 2 SDK con el controlador, busque en el
disco duro cualquiera de los directorios siguientes:
C:jdk1.2.x
C:jdk1.3.x
C:j2sdk1.4.x
N OT A

El término “Java 2” se refiere a Java 1.2 y a versiones posteriores.

Si no dispone de SDK, descárguelo del sitio Web de Sun en
http://java.sun.com/j2se/. Después de descargar el archivo de instalación,
haga doble clic en él para ejecutarlo. Siga las instrucciones de la pantalla y
compruebe que el componente Java 2 Runtime Environment está
seleccionado en el cuadro de diálogo Seleccionar componente. Deberá estar
seleccionado de forma predeterminada. El controlador se instalará
automáticamente cuando instale SDK.
Aunque puede utilizarse para el desarrollo de sistemas de bases de datos
de gama baja, como por ejemplo Microsoft Access, el controlador
puente JDBC-ODBC de Sun no está pensado para tareas de
producción. Por ejemplo, sólo permite conectar con la base de datos a
una página JSP a la vez (es decir, no admite el uso compartido de varios
thread). Para más información sobre las limitaciones del controlador,
consulte la nota técnica 17392 del Centro de soporte de Macromedia en
www.macromedia.com/go/17392.
Después de instalar el controlador puente, configure la base de datos si es
preciso y, a continuación, cree una conexión con la base de datos en
Dreamweaver.

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

Antes de crear una conexión con la base de datos de muestra, realice las
tareas siguientes en el equipo remoto que ejecuta el servidor Web: copie la
base de datos de muestra en el disco duro del equipo, cree un DSN en el
equipo que señala a la base de datos e instale el controlador puente
JDBC-ODBC de Sun en el equipo.

Para configurar la base de datos de muestra en el equipo
remoto:
1. Copie la base de datos en el disco duro del equipo remoto. Si ha
instalado Dreamweaver en la ubicación predeterminada, la ruta del
disco duro local al archivo de base de datos (tutorial.mdb) será la
siguiente:
■ C:Archivos de
enddatatutorial.mdb (Windows)
N OT A


2. Compruebe que está instalado el Controlador de Microsoft Access
versión 4.0 o superior en el equipo remoto.
Para averiguar si el controlador ya está instalado, consulte
“Visualización de los controladores ODBC instalados en un sistema
Windows” en Utilización de Dreamweaver.


Si no está instalado el controlador, descargue e instale en el equipo
remoto los paquetes Microsoft Data Access Components (MDAC) 2.5
y 2.7. Puede descargar MDAC gratis del sitio Web de Microsoft
http://msdn.microsoft.com/data/mdac/downloads/. Estos paquetes
contienen los últimos controladores de Microsoft, incluido el
Controlador de Microsoft Access.
NO T A

Instale MDAC 2.5 antes que MDAC 2.7.

3. Configure un DSN llamado CafeTownsend que señale a la base de datos
de muestra del equipo remoto.
Para instrucciones, véanse los artículos siguientes en el sitio Web de
Microsoft:
■ Si el equipo remoto se ejecuta en Windows 2000, véase el artículo
300596 en http://support.microsoft.com/default.aspx?scid=kb;en-
us;300596.
■ Si el equipo remoto se ejecuta en Windows XP, véase el artículo
305599 en http://support.microsoft.com/default.aspx?scid=kb;en-
us;305599.
4. Compruebe que el controlador puente JDBC-ODBC de Sun está
instalado en el equipo remoto.
Utilizará este controlador junto con el DSN para crear una conexión
con la base de datos. Para instrucciones, consulte “Instalación del
controlador puente” en la página 315.
Después de instalar la base de datos, el DSN y el controlador puente, cree
una conexión con la base de datos en Dreamweaver.


datos
base de datos.

Dreamweaver:
1. Abra cualquier página de JSP en Dreamweaver y, a continuación, abra
2. Haga clic en el botón de signo más (+) del panel y elija Base de datos
ODBC (controlador JDBC-ODBC Sun) en el menú emergente.
Aparecerá el cuadro de diálogo Base de datos ODBC (controlador
JDBC-ODBC Sun).
4. (Sólo en Windows) Lleve a cabo una de estas operaciones:
■ Si el servidor se encuentra en el equipo local, seleccione la opción
Utilizando un controlador de este equipo.
■ Si el servidor se encuentra en un sistema remoto, seleccione la
opción Utilizando un controlador del servidor de prueba.
Los usuarios de Macintosh pueden pasar por alto este paso porque
todas las conexiones de base de datos utilizan controladores en el
servidor de prueba.
5. Reemplace el marcador de posición [odbc dsn] en el cuadro de texto
URL por CafeTownsend.
El cuadro de texto URL debe tener este aspecto:
jdbc:odbc:CafeTownsend

Si está utilizando Dreamweaver en un equipo Windows, Dreamweaver
habrá creado durante la instalación un DSN llamado CafeTownsend,
que apunta a la base de datos de Microsoft Access de la carpeta de la
aplicación Dreamweaver.


■ Compruebe-de nuevo el DSN y los demás parámetros de conexión.
pueden procesarse las páginas dinámicas” en la página 312).
base de datos” de Utilización de Dreamweaver (Ayuda >Utilización
deDreamweaver).
Ahora la aplicación JSP de muestra está configurada para los tutoriales de


APÉNDICE G

PHP de muestra
G
Macromedia Dreamweaver 8 incluye páginas PHP de muestra que le
permitirán crear una pequeña aplicación Web. En este capítulo se describe
una forma de configurar la aplicación de muestra empleando Microsoft
Internet Information Server (IIS). Para más información sobre estos
servidores Web, consulte “Instalación de un servidor Web” en
la página 247. Si utiliza un servidor Web diferente, consulte el Capítulo
23, “Configuración de una aplicación Web” de Utilización de
Dreamweaver.
Si es un usuario de Macintosh, puede conectar con un servidor PHP
remoto o bien puede desarrollar sitios PHP localmente mediante el
servidor Web Apache y el servidor de aplicaciones PHP que está instalado
con el sistema operativo. Para información sobre la configuración, consulte
los siguientes sitios Web:
■ http://developer.apple.com/internet/opensource/php.html
■ www.entropy.ch/software/macosx/php/
esta guía de configuración se realizan los tres pasos de que consta el
proceso.
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

321

configuración para
desarrolladores de PHP

2. Instale el servidor de aplicaciones PHP.
3. Compruebe la instalación.

Dreamweaver.

1. Cree una base de datos MySQL de muestra.

Configuración del sistema (PHP)
Debe configurar el sistema para poder ejecutar páginas PHP en él. En
concreto, compruebe que un servidor Web y un servidor de aplicaciones
PHP estén instalados y ejecutándose en el sistema y, después, cree una
carpeta raíz para los archivos PHP.

322 Configuración del sitio PHP de muestra

Configuración del sistema Windows (PHP)
En esta sección se proporcionan instrucciones para dos configuraciones
comunes de Windows: una en la que Microsoft IIS se instala en el disco
duro y otra en la que IIS se instala en un equipo remoto con Windows. Si
desea utilizar una configuración diferente, consulte Capítulo 23,
“Configuración de una aplicación Web” en Utilización de Dreamweaver.
sección:



IIS

Servidor de aplicaciones PHP


SERVIDOR DE WINDOWS

IIS

Servidor de aplicaciones PHP

c:Inetpubwwwroot

Configuración del sistema (PHP) 323

un servidor Web (Windows)” en la página 324).
2. Instale el servidor de aplicaciones PHP (véase “Instalación de un
servidor de aplicaciones PHP (Windows)” en la página 325).
3. Compruebe la instalación (véase “Comprobación de la instalación PHP
(Windows)” en la página 327).
4. Cree una carpeta raíz (véase “Creación de una carpeta raíz (Windows)”
en la página 329).
NO TA

realizarse una vez.

Comprobación de un servidor Web (Windows)
duro o en un equipo Windows remoto. Una forma rápida de comprobar si
IIS está instalado en su equipo consiste en examinar la estructura de
carpetas para ver si contiene una carpeta C:Inetpub o D:Inetpub. IIS crea
esta carpeta durante la instalación.
Tras instalar el servidor Web, instale el servidor de aplicaciones.


Instalación de un servidor de aplicaciones PHP
(Windows)
Compruebe que el servidor de aplicaciones PHP está instalado y se ejecuta
en el sistema con IIS. (IIS puede encontrarse en el disco duro o en un
equipo Windows remoto.) Puede descargarlo del sitio Web de PHP
www.php.net/downloads.php.
Con PHP 5, la extensión que permite que PHP funcione con un servidor
de base de datos MySQL no se instala ni se activa de manera
predeterminada con el instalador de Windows. Deberá instalarlo y activarlo
manualmente.

Para instalar PHP 5 en un sistema Windows:
cuenta Administrador.
2. Descargue el instalador de PHP 5.x para Windows del sitio Web de
PHP www.php.net/downloads.php.
3. Haga doble clic en el archivo instalador descargado y siga las
instrucciones de instalación que aparecen en pantalla.
4. Una vez que haya instalado PHP correctamente, descargue el
paquete Windows PHP 5.x zip del sitio Web de PHP
www.php.net/downloads.php y extraiga el paquete en una
carpeta temporal del disco duro.
El paquete zip contiene la extensión necesaria para trabajar con
MySQL.
5. En la carpeta temporal que contiene los archivos descomprimidos,
localice la carpeta ext y cópiela a la carpeta C:PHP.
La carpeta ext contiene extensiones PHP comunes, entre ellas, la
extensión MySQL.


6. En la carpeta C:Windows, localice el archivo php.ini y ábralo en el Bloc
de notas.
Deberá editar este archivo para activar la extensión MySQL.
7. Localice la siguiente línea en el archivo php.ini:
extension_dir = "./"
Esta línea especifica el lugar en el que PHP busca las extensiones.
8. Edite la línea de la siguiente forma:
extension_dir = "C:PHPext"
S U G E R E N CI A

No olvide incluir la
barra final.
9. Localice la siguiente línea en el archivo php.ini:
;extension=php_mysql.dll
El punto y coma (;) del principio de la línea indica a PHP que ignore la
línea.
10. Elimine el punto y coma del principio de la línea para activar la
extensión.
extension=php_mysql.dll
11. Guarde y cierre el archivo php.ini.
12. En la carpeta temporal que contiene los archivos PHP descomprimidos,
localice el archivo libmysql.dll y cópielo a la carpeta
C:Windowssystem32.
Este archivo es necesario para que IIS funcione con PHP 5 y MySQL.
13. Reinicie IIS.
Para más información sobre la activación de la extensión MySQL,
consulte el sitio Web de PHP http://www.php.net/manual/es/
ref.mysql.php. Para más información sobre el servidor de
aplicaciones, consulte la documentación de PHP, que puede
descargar del sitio Web de PHP www.php.net/download-docs.php.
Después de instalar PHP, puede comprobar el servidor para asegurarse de
su correcto funcionamiento.


Comprobación de la instalación PHP (Windows)
Puede comprobar el servidor de aplicaciones PHP ejecutando una página
de prueba.

Para comprobar el servidor de aplicaciones PHP:
normal con el nombre timetest.php.
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

3. Copie el archivo en la carpeta C:Inetpubwwwroot del equipo
Windows donde se ejecute IIS.
4. En el navegador Web, introduzca el URL de la página de prueba y, a
continuación, presione Intro.
Si ha instalado PHP en el equipo local, puede introducir el siguiente
URL:
http://localhost/timetest.php
La página de prueba deberá abrirse y mostrar una hora del día de este
modo:



NO TA
Si examina el código fuente (Ver > Código fuente en Internet Explorer)
observará que la página no utiliza ningún JavaScript del lado del cliente
para conseguir este efecto.

errores posibles:
■ El archivo no tiene la extensión .php.
■ Ha escrito la ruta del archivo de la página
(C:Inetputwwwroottimetest.php) en lugar de su URL (por ejemplo,
http://localhost/timetest.php) en el cuadro de texto Dirección del
navegador.
Si escribe una ruta de archivo en el navegador (como quizá esté
acostumbrado a hacer con las páginas HTML normales), omite el
servidor Web y el servidor de aplicaciones. Como consecuencia, el
servidor nunca procesa la página.
■ El URL contiene un error de escritura. Compruebe si hay errores y no
introduzca una barra diagonal después del nombre de archivo, como
http://localhost/timetest.php/.


Creación de una carpeta raíz (Windows)

NO T A


páginas de la carpeta Inetpubwwwroot. El servidor Web servirá
cualquier página de esta carpeta o de cualquiera de sus subcarpetas en
respuesta a las peticiones HTTP de un navegador.
seleccione inicio > Panel de control, o bien inicio > Configuración
> Panel de Control, haga doble clic en
Herramientas administrativas y después haga doble clic en Internet
Information Services).
ejecución), asegúrese de que la opción Scripts Only(sólo scripts)
Dreamweaver. (Véase “Definición de un sitio de Dreamweaver (PHP)” en
la página 332.)


Configuración del sistema Macintosh
(PHP)
Si está trabajando en un equipo Macintosh, puede ejecutar páginas PHP en
el equipo utilizando el servidor Web de Apache y el servidor de aplicaciones
PHP instalados con el sistema operativo. Al configurar el sistema debe
comprobar que el servidor Web y el servidor de aplicaciones PHP estén en
funcionamiento y, después, debe crear una carpeta raíz para los archivos
PHP.
■ “Comprobación de la instalación PHP (Macintosh)” en la página 330
■ “Creación de una carpeta raíz (Macintosh)” en la página 332
Para más información sobre Apache y PHP en Macintosh, consulte los
siguientes sitios Web:
■ http://developer.apple.com/internet/opensource/php.html
■ www.entropy.ch/software/macosx/php/

Comprobación de la instalación PHP (Macintosh)
Para comprobar el servidor Web Apache y el servidor de aplicaciones PHP
en el equipo Macintosh, puede ejecutar una página de prueba.
Sin embargo, si desea utilizar el servidor Web para servir páginas PHP y
contenido de bases de datos MySQL, antes debe configurar el servidor para
que funcione con PHP y MySQL. Para información sobre este proceso,
consulte www.macromedia.com/go/php_macintosh.

Para comprobar el servidor Web Apache y el servidor de
aplicaciones PHP:
1. Configure el servidor tal como se describe en el artículo del sitio Web de
Macromedia.
normal con el nombre timetest.php.
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>



4. Copie el archivo en la carpeta /Users/su_nombre_de_usuario/Sites del
equipo Macintosh.
La carpeta Sites es su carpeta raíz personal para el servidor Web Apache.
5. En el navegador Web, escriba el URL siguiente y presione Retorno:
http://localhost/~su_nombre_de_usuario/timetest.php
La página de prueba deberá abrirse y mostrar una hora del día.
NO T A

Si examina el código fuente (View > View Source en Safari) observará que
la página no utiliza ningún JavaScript del lado del cliente para conseguir
este efecto.

errores posibles:
■ El archivo no tiene la extensión .php.
■ El URL contiene un error de escritura. Compruebe si hay errores y
verifique que no haya una barra inclinada después del nombre de
archivo, como en http://localhost/~su_nombre_de_usuario/
timetest.php/. No olvide que debe haber una tilde (~) delante del
nombre de usuario.
■ El servidor Apache no está ejecutándose. Vaya a Preferencias del
sistema, categoría Compartir, para ver si la opción Compartir Web
personal está activada.


Creación de una carpeta raíz (Macintosh)
Después de instalar el software de servidor, cree una carpeta raíz para la
aplicación Web en el equipo Macintosh.

■ Cree una carpeta denominada MySampleApps en la carpeta /Users/
su_nombre_de_usuario/Sites.
Apache procesará todas las páginas de esta carpeta o de cualquiera de
sus subcarpetas en respuesta a una petición http de un navegador Web.
Dreamweaver.

Dreamweaver (PHP)
archivos.

la página 335).
“Especificación de dónde pueden procesarse las páginas dinámicas
(PHP)” en la página 336).



NO TA



Definición de un sitio de Dreamweaver (PHP) 333

los archivos de muestra de PHP como una carpeta local de Dreamweaver.

Sitio.
3. En el cuadro de texto Nombre del sitio, escriba Cafe Townsend PHP.
muestra de PHP:
documentoslocal_sitescafe_townsendcontactphp (Windows)
cafe_townsend/contact/php (Macintosh)
Dreamweaver.



o mediante FTP.
NO T A

En el menú emergente Acceso aparecen otras opciones, que no se tratan
en este capítulo. Para más información sobre ellas, consulte el apartado

remoto creada en la sección “Creación de una carpeta raíz (Windows)”
en la página 329.
En Macintosh, la carpeta podría ser la siguiente:
Carpeta remota: /Users/su_nombre_de_usuario/Sites/
MySampleApps
la Ayuda.


procesarse las páginas dinámicas (PHP)

PHP. En muchas situaciones, incluida la configuración del sitio Cafe
capacidad para procesar páginas de PHP.
2. Seleccione PHP MySQL en el menú emergente Modelo de servidor.


aplicación Web.
“Configuración del prefijo de URL” en Utilización de Dreamweaver
En el contenido de muestra de PHP en Windows, el prefijo debe ser el
siguiente:
Prefijo de URL: http://localhost/MySampleApps/
En Macintosh, el prefijo debe ser el siguiente:
Prefijo de URL: http://localhost/~su_nombre_de_usuario/
MySampleApps/
S U G E R E N CI A
El prefijo de URL
debe especificar
sitio. Asimismo,
la misma
combinación de
mayúsculas y
minúsculas que la
empleada al crear la
carpeta.


Carga de los archivos de muestra
Una vez que haya especificado una carpeta en la que procesar las páginas
dinámicas, cargue los archivos de muestra al servidor Web. Deberá cargar
los archivos aunque el servidor Web se esté ejecutando en el equipo local.
el servidor.


de muestra (PHP)
Durante la instalación, Dreamweaver copia un script SQL en el disco duro.
Puede utilizar este script para crear automáticamente una base de datos
MySQL de muestra. En esta sección se explica cómo crear una conexión
con la base de datos de muestra.
En esta sección se da por sentado que ha instalado y configurado MySQL
en un equipo local o remoto. Para descargar e instalar el sistema de base de
datos, visite el sitio Web de MySQL en www.mysql.com.


1. Cree la base de datos MySQL de muestra con el script de SQL (véase
“Creación de la base de datos MySQL” en la página 339).

Creación de la base de datos MySQL
Los archivos de muestra de Dreamweaver incluyen un script SQL capaz de
crear y llenar una base de datos MySQL de muestra.
Antes de comenzar, compruebe que ha instalado y configurado MySQL en
un equipo local o remoto. Descargue la versión más reciente del sitio Web
de MySQL http://dev.mysql.com/downloads/. Para fines de desarrollo,
descargue e instale la versión Windows Essentials del servidor de base de
datos MySQL.

Para crear la base de datos MySQL de muestra:
1. Copie el archivo de script SQL, insert.sql, en una carpeta apropiada del
equipo en el que se ha instalado MySQL.
Si ha instalado Dreamweaver en su ubicación predeterminada, la ruta al
archivo de script será la siguiente:
■ C:Archivos de
enddatainsert.sql (Windows)
cafe_townsend/data/insert.sql (Macintosh)
Si el equipo que ejecuta MySQL es Windows, copie el script insert.sql
en Archivos de programaMySQLMySQL Server 4.xbin. Si el equipo
que ejecuta MySQL es Macintosh, copie el script insert.sql en la
carpeta Documents de su carpeta principal.
2. En el equipo en el que está instalado MySQL, inicie MySQL Command
Line Client (Windows) o Terminal (Macintosh).
■ En Windows, inicie MySQL Command Line Client seleccionando
inicio > MySQL > MySQL Server 4.x > MySQL Command Line
Client.
■ En Macintosh, inicie Terminal accediendo a la carpeta
Applications, abriendo la carpeta Utilities y haciendo doble clic en
Terminal.

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

3. En Windows, introduzca su nombre de usuario (si lo tiene) y su
contraseña y luego presione Intro.
Aparecerá el indicador de comando del cliente MySQL de este modo:
mysql>

4. En Macintosh, introduzca el comando siguiente:
mysql -uUser -pPassword

Por ejemplo, si su nombre de usuario MySQL (también llamado
nombre de cuenta) y su contraseña son Tara y Telly3, introduzca el
comando siguiente:
mysql -uTara -pTelly3

Si no tiene contraseña, omita el argumento -p de este modo:
mysql -uTara

Si no ha definido un nombre de usuario mientras configuraba la
instalación de MySQL, introduzca root como nombre de usuario de
este modo:
mysql -uroot

Aparecerá el indicador de comando del cliente MySQL de este modo:
mysql>

5. Cree una base de datos introduciendo el siguiente comando en el
indicador de MySQL:
mysql>CREATE DATABASE CafeTownsend;

MySQL creará una base de datos, pero no contendrá tablas ni registros.
6. Cierre el cliente MySQL introduciendo el siguiente comando en el
indicador:
mysql>quit;

7. (Windows) Abra el indicador de comando de Windows seleccionando
inicio > Ejecutar y escribiendo cmd en el cuadro de diálogo Ejecutar.


8. En el indicador de comando del sistema, llene la nueva base de datos
CafeTownsend de MySQL.
En Windows, utilice el comando siguiente:
cd
cd Program FilesMySQLMySQL Server 4.xbin
mysql -uUser -pPassword CafeTownsend < insert.sql

En Macintosh, utilice el comando siguiente:
mysql -uUser -pPassword CafeTownsend < ~/Documents/
insert.sql

Este comando utiliza el archivo insert.sql para añadir tablas y registros a
la base de datos CafeTownsend que ha creado en el paso 5.
Después de crear la base de datos MySQL, cree una conexión con ella en
Dreamweaver.

datos
base de datos.

Dreamweaver:
1. Abra cualquier página de PHP en Dreamweaver y, a continuación, abra
2. Haga clic en el botón de signo más (+) del panel y elija Conexión
MySQL en el menú emergente.
Aparecerá el cuadro de diálogo de conexión Conexión MySQL.
4. En el cuadro de texto Servidor MySQL, especifique el equipo que aloja
MySQL.
Introduzca una dirección IP o un nombre de servidor. Si se está
ejecutando MySQL en el mismo equipo que Dreamweaver, introduzca
localhost.

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

5. Introduzca su nombre de usuario y contraseña de MySQL.
Si no ha definido un nombre de usuario mientras configuraba la
instalación de MySQL, introduzca root en el cuadro de texto Nombre
de usuario. Si no tiene contraseña, deje el cuadro de texto Contraseña
en blanco.
6. En el cuadro de texto Base de datos, introduzca CafeTownsend.
CafeTownsend es el nombre de la base de datos MySQL de muestra
que ha creado (véase “Creación de la base de datos MySQL” en
la página 339).
■ Compruebe-el nombre del servidor, el nombre de usuario y la
contraseña.
pueden procesarse las páginas dinámicas (PHP)” en la página 336).
base de datos” de Utilización de Dreamweaver (Ayuda >Utilización
deDreamweaver).
Ahora la aplicación PHP de muestra está configurada para los tutoriales de


Índice alfabético

Símbolos conjuntos de datos 211
lenguajes utilizados 240
.NET Framework .NET Framework 274
instalar 274 servidores compatibles 274
atributos, información de referencia 153
ayuda
A cambiar el tamaño de la fuente 26
Access. Véase Microsoft Access utilizar 15
Active Server Pages. Véase ASP
activos, añadir a un sitio 53
Activos, panel 88 B
Actualizar, botón 147 barra de estado
Apache Tomcat, servidor de aplicaciones 242 acerca de 34
Aplicación, categoría de la barra Insertar 218, 221 menú emergente Tamaño de ventana 35
aplicaciones Web Barra de herramientas de codificación 38
acerca de barras de herramientas
ASP, configurar 285 Codificación 38
ASP.NET, configurar 271 Documento 33, 219
ColdFusion, configurar 253 base de datos de muestra, conectarse a
definición 244 ASP 298, 300
desarrollar 207 ASP.NET 282
JSP, configurar 303 ColdFusion 266
PHP, configurar 321 JSP 318
usos comunes 232 PHP 341
aplicaciones Web. Véase Aplicaciones Web base de datos MySQL 239
Apple. Véase Mac OS X descargar 338
archivos base de datos Oracle 9i 239
cargar al servidor 226 bases de datos
cargar desde la carpeta local 139 acerca de 242
cargar muestra 265, 281, 297, 313 basadas en archivos
archivos de texto en vista Código 97 basadas en servidor
ASP conectarse a (ASP) 300, 318, 341
aplicaciones Web, configurar 285 conectarse a (ASP.NET) 282
hora, mostrar 289 conectarse a (ColdFusion) 266
servidores de aplicaciones, instalar 289 consultas 237, 243
solucionar problemas 290 controladores 237, 243
ASP.NET elegir
aplicaciones Web, configurar 271 juegos de registros para

343

mostrar datos 215, 237 Colocar archivos, botón 226
relacionales 244 color de fondo, establecer 74, 179
tablas Comportamientos de servidor, panel 218
usar con aplicaciones Web 232 conectarse
bases de datos relacionales 244 a bases de datos (ASP) 300, 318, 341
a bases de datos (ASP.NET) 282
a bases de datos (ColdFusion) 266
C Conexión de prueba, botón 138
C# (lenguaje) 240 configurar
capas 160 ASP 285
anidar 172 ASP.NET 271
insertar 164 ColdFusion 253
cargar archivos JSP 303
muestra 338 PHP 321
carpetas locales sistemas con .NET Framework 272
carpetas raíz 262 sistemas con ColdFusion MX 254
definir 55–57, 278, 294, 310, 334 sistemas con un servidor de aplicaciones ASP 287
carpetas raíz sistemas con un servidor de aplicaciones JSP 304
crear (ASP) 291 sistemas con un servidor de aplicaciones PHP 322
crear (ASP.NET) 275 conjuntos de datos (juegos de registros ASP.NET) 211
crear (ColdFusion) 259 consultas
crear (JSP) 308 base de datos 237
crear (PHP) 329 comprobar 214
definir 278, 294, 310, 334 definición 243
Véase también Carpetas locales controladores para bases de datos 237, 243
carpetas remotas 136 CSS. Consulte Hojas de estilos en cascada
crear con Dreamweaver 137
definir (ASP) 294
definir (ASP.NET) 278 D
definir (ColdFusion) 263 datos
definir (JSP) 311 dinámico, insertar 217
definir (PHP) 335 extraer de bases de datos 237
solucionar problemas de configuración 140 DBMS (sistemas de administración de bases de datos).
CFML (ColdFusion Markup Language) 239 Véase sistemas de administración de bases de
código datos
crear con el Selector de etiquetas 148 definición de carpetas remotas 263, 278, 294, 311,
imprimir 158 335
código, sugerencias 154 definiciones de términos de aplicaciones Web 242
Código, vista descargar, ajustar el tiempo 35
Diseño, vista y especificar una u otra 33 dinámicos, campos 217
mostrar archivos de texto 97 direcciones de red numéricas 252
mostrar con vista Diseño 146, 147 direcciones IP y número (127.0.0.1) 252
ColdFusion diseño
aplicaciones Web, configurar 253 basado en CSS 159
instalar 256 basado en tablas 59–77
ColdFusion Administrator 267 diseño del espacio de trabajo, codificación 148
ColdFusion Markup Language (CFML) 239 Diseño, vista
ColdFusion MX Server Developer Edition 256 Documento, barra de herramientas
ColdFusion Studio 148 acerca de 33
ColdFusion, lenguajes utilizados 240 vista Live Data 219

344 Índice alfabético

documentos crear 112
guardar 61, 163 Estilos CSS, panel 41
mostrar en fichas (Macintosh) 44 formatear con 107–133
y diseño 159
HomeSite 148
E hora, mostrar en ASP 289
edición, etiquetas 151 HTML
ejemplos de aplicaciones Web 232 lenguajes de programación incrustados 239
espacio de trabajo Véase también Código
acerca de 29
diseño 43
diseño flotante 30 I
espacio de trabajo de edición de código 148 IBM WebSphere, servidor de aplicaciones 242
especificar servidores de prueba 264, 279, 296, 312, IIS (Internet Information Services) 241
336 acerca de 248
Estilos CSS, panel 41, 116 herramienta administrativa, iniciar 276
etiquetas instalar 248
buscar información de referencia 153 soporte de ASP.NET 274
editar 151 imágenes, insertar 82–89
elegir 148 Insertar registro, objeto 220
lado del servidor 237 Insertar, barra
Selector de etiquetas 148 Aplicación, categoría 218, 221
sugerencias 154 categorías 36
extraer datos de las bases de datos 237 inspector de etiquetas 151
instalar
.NET Framework 274
F ColdFusion MX 256
Flash Dreamweaver 13
insertar archivos SWF 90 IIS (Internet Information Services) 248
reproducir contenido en Dreamweaver 92 servidores de aplicaciones, ASP 289
Flash Video, insertar 93 servidores de aplicaciones, JSP 306
Formulario de inserción de registro, cuadro de diálogo servidores de aplicaciones, PHP 325
222
formularios de inserción de registros, crear 220
fuentes de datos J
ColdFusion 267 Java 240
fuentes, cambiar el tamaño en ayuda 26 Java Server Pages (JSP) 240
JavaScript 240
JRun
G JSP (Java Server Pages)
generales, preferencias 148 aplicaciones Web, configurar 303
glosario de términos comunes de aplicaciones Web 242 servidores de aplicaciones, instalar 306
juegos de registros
comprobar 214
H crear 211
Herramienta Mano 35 definición 243
Hojas de estilos en cascada (CSS) Véase también Bases de datos
acerca de 110
adjuntar 114

Índice alfabético 345

L dinámicas, definidas
dinámicas, procesar 236
Lenguaje de consulta estructurado (SQL) 237 estáticas 235
lenguajes de scripts del lado del servidor 240 inserción de registros 220
lenguajes, lado del servidor 239, 240 mostrar datos de bases de datos 237
listas de comprobación páginas dinámicas
ASP.NET, configurar 272 acerca de 243
configuración de ColdFusion 254 procesar en ASP 296
configurar ASP 286 procesar en ASP.NET 279
configurar JSP 304 procesar en ColdFusion 264
configurar PHP 322 procesar en JSP 312
localhost 251 procesar en PHP 336
utilizar 236, 239
páginas estáticas 235
M Véase también Páginas
Macintosh páginas Web. Véase Páginas
Mac OS X con Apache y PHP paneles
servidores 250 Activos 88
Macintosh, documentos en fichas 44 Comportamientos de servidor, panel 218
Macromedia JRun vinculaciones, panel 211
instalar 307 PHP
marcadores de posición de imagen aplicaciones Web, configurar 321
acerca de 73 Mac OS X, configurar
crear imágenes desde 83 servidores de aplicaciones (Windows), instalar 325
insertar 72 solucionar problemas (Macintosh) 331
menú de encabezado de columna 64 solucionar problemas (Windows) 328
menú emergente Tamaño de ventana 35 PHP, tecnología de servidor 240
Microsoft Access 239 preferencias, cuadro de diálogo, categoría General 148
Microsoft Internet Information Server (IIS). Véase IIS publicar 135–141
Microsoft Personal Web Server (PWS) 245, 248 PWS (Microsoft Personal Web Server) 245
Microsoft SQL Server 239 acerca de 248
modelos de servidor. Véase Tecnologías de servidor soporte de ASP.NET 274
modificar, etiquetas 151
modo de tablas expandidas 66
R
Referencia, panel 153
N regiones repetidas, crear 218
Netscape Enterprise Server 245 registrar Dreamweaver 14
número de IP 127.0.0.1 252 registros
insertar 220
mostrar 215
O
objeto XSLT Repetir región 200
opción de prefijo de URL 264, 280, 297, 313, 337 S
scripts, lado del servidor 237
selector de color 76
P Selector de etiquetas 148
páginas selector de etiquetas 101
dinámicas, crear 239 Sequel (SQL) 237


servicio técnico para servidores 247 no se visualizan páginas 290, 328
servidor Web Apache en equipos Mac OS X 250 páginas dinámicas 265, 281, 297, 313, 338
servidores PHP (Macintosh) 331
acerca de PHP (Windows) 328
cargar archivos 139, 265, 297, 313, 338 servidores 247, 249
ASP.NET 281 SQL (Lenguaje de consulta estructurado) 237
carpetas raíz 263, 278, 294, 311, 335 Sun ONE Web Server 245
comprobar 249
direcciones IP 252
HTTP T
opciones de acceso 138 tabla, menú de encabezado 64
servidores de aplicaciones 236 tablas
servidores Web, definición 244 acerca de 64
solucionar problemas 249 base de datos 237
soporte de ASP.NET 274 configurar propiedades 66–71
Véanse también Servidores Web, Servidores de crear un diseño con 59–77
aplicaciones insertar 62–66, 215
servidores de aplicaciones 236, 242 modo de tablas expandidas 66
ColdFusion MX, instalar 256 tecnologías de servidor
instalar para ASP 289 compatibles 240
instalar para JSP 306 definición 244
.NET Framework (ASP.NET), instalar 274 elegir 241
PHP, instalar 325 terminología para aplicaciones Web 242
servidores de prueba términos comunes de aplicaciones Web, definiciones
acerca de 242
especificar 264, 279, 296, 312, 336 texto
servidores HTTP. Véase Servidores dinámico 217
servidores Web insertar 97
comprobar que el servidor Web se está ejecutando insertar, dinámico 217
274, 288, 306, 324 seleccionar 97
definición 244 texto alternativo 72
Véanse también Servidores, Servidores de texto dinámico, insertar 217
aplicaciones tipográficas, convenciones 14
sistemas de administración de bases de datos 243 Tomcat, servidor de aplicaciones 242
sistemas, configurar 254, 272, 287, 304, 322
sitios
acerca de 52 V
activos, añadir 53 variables de CFML 239
definir 55–57 VBScript 240
ASP 292 Ventana de documento
ASP.NET 276 aspectos básicos 32
ColdFusion 260 barra de estado 34
JSP 309 barra de título 32
PHP 332 menú emergente Tamaño de ventana 35
locales 52 selector de etiquetas 35
remotos 52, 136 tamaño del documento y tiempo de descarga 35
solucionar problemas 297 vinculaciones, panel 211
acerca de 331 vínculos, crear 102
ASP 290 vista Live Data 219
las páginas no se abren 249 solucionar problemas 265, 281, 297, 313, 338

Índice alfabético 347

Vista previa en el navegador
acerca de 103
cambiar Preferencias 104
Vista previa en el navegador, solucionar problemas con
páginas dinámicas
ASP 297
ASP.NET 281
ColdFusion 265
JSP 313
PHP 338
vistas
Código, vista
vista Live Data 219
Visual Basic 240

W
WebSphere 242

X
XML (Lenguaje de formato ampliable)
acerca de 186
aplicar estilos 196
crear vínculos con 198
visualizar en páginas Web 183
XSL (Lenguaje de hojas de estilo ampliable) 187
transformaciones del lado del cliente 189
Véase también XSLT
XSLT (Transformaciones de lenguaje de hoja de estilos
extensible)
acerca de 187
fragmentos 189
objeto XSLT Repetir región 200
páginas 189
páginas, adjuntar datos XML a 191
páginas, convertir a 190
páginas, mostrar datos XML en 195
páginas, vincular a archivos XML 203
y transformaciones en el lado del cliente 189


Manual dreamweaver 8 spanish

Más contenido relacionado

La actualidad más candente (11)

Similar a Manual dreamweaver 8 spanish (20)

Manual dreamweaver 8 spanish