Sunteți pe pagina 1din 348

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, diseos, ttulos, palabras o frases mencionados en
esta publicacin pueden ser marcas comerciales, marcas de servicio o nombres comerciales de Macromedia, Inc. u otras entidades
y pueden estar registrados en determinadas jurisdicciones.
Informacin de otros proveedores
Este manual contiene vnculos con sitios Web de terceros que no estn 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 vnculos exclusivamente para su comodidad, por lo
que la inclusin del vnculo no implica la aceptacin 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 ningn formato electrnico o legible por mquina, 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 vlida del
software que acompaa a este manual podr imprimir una copia de este manual a partir de la versin electrnica 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 ningn otro fin, incluyendo pero
no limitado a fines comerciales, como la venta de copias de esta documentacin o la oferta de servicios de soporte
remunerados. Nmero de componente ZDW80M100L
Agradecimientos
Administracin: Charles Nadeau
Redaccin: Jon Michael Varese
Edicin: Rosana Francescato, Lisa Stanziano, Evelyn Eldridge, Mark Nigara
Administracin de la produccin y la edicin: Patrice ONeill y Rosana Francescato
Produccin y diseo multimedia: Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel,
Arena Reed, Mario Reynoso
Administracin de la localizacin: Melissa Baerwald
Garanta de calidad de la localizacin: 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 ingeniera y
control de calidad de Dreamweaver.
Primera edicin: septiembre de 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103

Contenido

PARTE 1: INTRODUCCIN A DREAMWEAVER


Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Lo que puede hacer con Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . .11
Novedades en Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Instalacin de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Registro de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Convenciones tipogrficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Captulo 1: Conocer Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 15
Dnde comenzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Cmo sacarle el mximo provecho a la documentacin de
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Utilizacin del sistema de ayuda de Dreamweaver. . . . . . . . . . . . . . . . 24
Captulo 2: Aspectos bsicos de Dreamweaver . . . . . . . . . . . . . 29
Conocer el espacio de trabajo de Dreamweaver 8 . . . . . . . . . . . . . . . . 29
Personalizacin del espacio de trabajo de Dreamweaver 8 . . . . . . . . 42
Realizacin de tareas bsicas con Dreamweaver 8 . . . . . . . . . . . . . . . 45

PARTE 2: TUTORIALES
Captulo 3: Tutorial: Configuracin del sitio y de los
archivos del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Conozca los sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Configuracin de los archivos del proyecto . . . . . . . . . . . . . . . . . . . . . . 53
Defina una carpeta local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Captulo 4: Tutorial: Crear un diseo de pgina basado
en tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Examen de la maqueta de diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Creacin y almacenamiento de una pgina nueva . . . . . . . . . . . . . . . . . 61

Insercin de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Establecimiento de las propiedades de una tabla . . . . . . . . . . . . . . . . . 66
Insercin de un marcador de posicin de imagen . . . . . . . . . . . . . . . . . 72
Adicin de color a la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Captulo 5: Tutorial: Adicin de contenido a las pginas . . . . . . . 79
Localizacin de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Repaso de la tarea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Insercin de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Insercin y reproduccin de un archivo Flash . . . . . . . . . . . . . . . . . . . . . 90
Insercin de Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Insercin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Creacin de vnculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Vista previa de la pgina en un navegador. . . . . . . . . . . . . . . . . . . . . . . 103
Captulo 6: Tutorial: Formatear la pgina con CSS . . . . . . . . . . 107
Localizacin 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 navegacin . . . . . . . . . . . . . . . . . . . . 122
(Opcional) Centrar el contenido de la pgina . . . . . . . . . . . . . . . . . . . . .131
Captulo 7: Tutorial: Publicacin del sitio. . . . . . . . . . . . . . . . . . . 135
Los sitios remotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Definir una carpeta remota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Cargar los archivos locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Solucin de problemas de configuracin de carpetas remotas
(opcional). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

PARTE 3: TUTORIALES AVANZADOS


Captulo 8: Tutorial: Utilizacin de cdigo . . . . . . . . . . . . . . . . . . 145
Consulta del cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Cambio al espacio de trabajo de edicin de cdigo (slo
Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Contenido

Aadir una etiqueta con el Selector de etiquetas . . . . . . . . . . . . . . . . .148


Edicin de una etiqueta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Consulta de informacin sobre una etiqueta . . . . . . . . . . . . . . . . . . . . .153
Aadir una imagen con sugerencias para el cdigo . . . . . . . . . . . . . . .154
Comprobacin de los cambios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158
Imprimir el cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158
Captulo 9: Tutorial: Crear un diseo de pgina basado
en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Diseo de pgina basado en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
Examen de la maqueta de diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Creacin y almacenamiento de una pgina nueva . . . . . . . . . . . . . . . .163
Insertar capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164
Aadir color a la pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Captulo 10: Tutorial: Visualizacin de datos XML . . . . . . . . . . . 183
Localizacin de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184
Repaso de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
Ms informacin sobre el uso de XML y XSL en pginas Web . . . . .186
Ms informacin sobre las pginas XSLT . . . . . . . . . . . . . . . . . . . . . . . 188
Conversin de una pgina HTML en una pgina XSLT . . . . . . . . . . .190
Adjuntar una fuente de datos XML a la pgina XSLT . . . . . . . . . . . . . 191
Modificacin del diseo de la pgina XSLT . . . . . . . . . . . . . . . . . . . . . .193
Vinculacin de datos XML a la pgina XSLT . . . . . . . . . . . . . . . . . . . . .195
Aplicacin de estilos a los datos XML . . . . . . . . . . . . . . . . . . . . . . . . . . .196
Creacin de un vnculo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198
Aadir un objeto XSLT Repetir regin. . . . . . . . . . . . . . . . . . . . . . . . . . 200
Adjuntar la pgina XSLT a la pgina XML . . . . . . . . . . . . . . . . . . . . . . 203
Ms informacin sobre otras opciones de implementacin . . . . . . . 205
Captulo 11: Tutorial: Desarrollo de una aplicacin Web. . . . . . 207
Antes de comenzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Repaso de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Apertura de un documento para trabajar en l. . . . . . . . . . . . . . . . . . . .210
Definicin de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Visualizacin de los registros de la base de datos . . . . . . . . . . . . . . . .215
Adicin de campos dinmicos a la tabla . . . . . . . . . . . . . . . . . . . . . . . . . 217
Definicin de una regin repetida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218
Visualizacin de la pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219
Creacin de un formulario de insercin de registro . . . . . . . . . . . . . . 220
Copia de los archivos en el servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Contenido

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

PARTE 4: APNDICES
Apndice A: Aspectos bsicos de las aplicaciones Web . . . . . . 231
Aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Funcionamiento de una aplicacin Web . . . . . . . . . . . . . . . . . . . . . . . .234
Creacin de pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239
Eleccin de una tecnologa de servidor . . . . . . . . . . . . . . . . . . . . . . . . . 241
Terminologa de aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . .242
Apndice B: Instalacin de un servidor Web. . . . . . . . . . . . . . . 247
Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248
Instalacin de Internet Information Server . . . . . . . . . . . . . . . . . . . . . . .248
Comprobacin de IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Comprobacin del servidor Web de Macintosh
(desarrolladores PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Aspectos bsicos de los servidores Web. . . . . . . . . . . . . . . . . . . . . . . . 251
Apndice C: Configuracin del sitio ColdFusion de
muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Listas de comprobacin de la configuracin para
desarrolladores de ColdFusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253
Configuracin del sistema (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . 254
Definicin de un sitio de Dreamweaver (ColdFusion) . . . . . . . . . . . . 260
Conexin con la base de datos de muestra (ColdFusion) . . . . . . . . .266
Apndice D: Configuracin del sitio ASP.NET de muestra . . . . 271
Listas de comprobacin de la configuracin para
desarrolladores de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Configuracin del sistema (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Definicin de un sitio de Dreamweaver (ASP.NET) . . . . . . . . . . . . . . 276
Conexin con la base de datos de muestra (ASP.NET) . . . . . . . . . . .282
Apndice E: Configuracin del sitio ASP de muestra . . . . . . . 285
Listas de comprobacin de la configuracin para
desarrolladores de ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
Configuracin del sistema (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Definicin de un sitio de Dreamweaver (ASP) . . . . . . . . . . . . . . . . . . .292
Conexin con la base de datos de muestra (ASP). . . . . . . . . . . . . . . .298

Contenido

Apndice F: Configuracin del sitio JSP de muestra . . . . . . . . 303


Listas de comprobacin de la configuracin para
desarrolladores de JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Configuracin del sistema (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Definicin de un sitio de Dreamweaver (JSP) . . . . . . . . . . . . . . . . . . . 309
Conexin con la base de datos de muestra (JSP) . . . . . . . . . . . . . . . .314
Apndice G: Configuracin del sitio PHP de muestra . . . . . . . . 321
Listas de comprobacin de la configuracin para
desarrolladores de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Configuracin del sistema (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Definicin de un sitio de Dreamweaver (PHP) . . . . . . . . . . . . . . . . . . 332
Conexin con la base de datos de muestra (PHP) . . . . . . . . . . . . . . . 338
ndice alfabtico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

Contenido

Contenido

PARTE 1

Introduccin a Dreamweaver
La Parte Uno de este libro ofrece una introduccin a Macromedia
Dreamweaver 8 e incluye informacin de instalacin y una breve
descripcin del espacio de trabajo. En ella tambin se ofrece una lista de
recursos disponibles para aprender a utilizar Dreamweaver.
Esta parte contiene las siguientes secciones:
Introduccin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Conocer Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Aspectos bsicos de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . .29

Introduccin
Macromedia Dreamweaver 8 es un editor HTML profesional para disear,
codificar y desarrollar sitios, pginas y aplicaciones Web. Tanto si desea
controlar manualmente el cdigo HTML como si prefiere trabajar en un
entorno de edicin visual, Dreamweaver le proporciona tiles herramientas
que mejorarn su experiencia de creacin Web.
Esta gua es una introduccin para utilizar Macromedia Dreamweaver 8
dirigida a los usuarios que no estn familiarizados con algn aspecto
fundamental de esta aplicacin. Los tutoriales de que consta le guan a
travs del proceso de creacin de un sitio Web sencillo pero funcional.
Este captulo trata los siguientes temas:
Lo que puede hacer con Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . 11
Novedades en Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Instalacin de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Registro de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Convenciones tipogrficas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Lo que puede hacer con


Dreamweaver 8
Las funciones de edicin visual de Dreamweaver permiten crear pginas
Web de forma rpida, sin escribir una sola lnea de cdigo. Puede ver todos
los elementos o activos del sitio y arrastrarlos desde un panel fcil de usar
directamente hasta un documento. Puede agilizar el flujo de trabajo de
desarrollo mediante la creacin y edicin de imgenes en Macromedia
Fireworks o en otra aplicacin de grficos y su posterior importacin
directa a Dreamweaver. Dreamweaver tambin contiene herramientas que
facilitan la adicin de activos de Flash a las pginas web.

11

Adems de las funciones de arrastrar y soltar que le ayudan a crear pginas


web, Dreamweaver le ofrece un entorno de codificacin con todas las
funciones, que incluye herramientas para la edicin de cdigo (tales como
coloreado de cdigo, terminacin automtica de etiquetas, barra de
herramientas para codificacin y contraccin de cdigo) y material de
referencia para lenguajes sobre hojas de estilos en cascada (CSS), JavaScript
y ColdFusion Markup Language (CFML) entre otros. La tecnologa
Roundtrip HTML de Macromedia importa los documentos con cdigo
manual HTML sin modificar el formato del cdigo. Posteriormente, si lo
desea, puede formatear el cdigo con el estilo que prefiera.
Adems, Dreamweaver le permite crear aplicaciones Web dinmicas
basadas en bases de datos empleando tecnologas de servidor como CFML,
ASP.NET, ASP, JSP y PHP. Si prefiere trabajar con datos en XML,
Dreamweaver incorpora herramientas que le permiten crear fcilmente
pginas XSLT, adjuntar archivos XML y mostrar datos XML en sus
pginas.
Dreamweaver se puede personalizar totalmente. Puede crear sus propios
objetos y comandos, modificar mtodos abreviados de teclado e incluso
escribir cdigo JavaScript para ampliar las posibilidades que ofrece
Dreamweaver con nuevos comportamientos, inspectores de propiedades e
informes de sitios.
Para ms informacin sobre los recursos disponibles para el aprendizaje de
Dreamweaver, consulte Captulo 1, Conocer Dreamweaver, en la pgina
15.

Novedades en Dreamweaver 8
Dreamweaver 8 incorpora muchas funciones nuevas que le ayudarn a
disear pginas Web y aplicaciones con un mnimo de tiempo y esfuerzo.
Dreamweaver simplifica las tecnologas ms complejas y las hace accesibles,
ayudndole a conseguir ms en menos tiempo.
stas son algunas de las nuevas funciones de Dreamweaver 8:

12

Introduccin

Herramienta Zoom y guas

Vinculacin de datos visual de XML

Nuevo panel de estilos CSS

Visualizacin de diseo CSS

Contraccin de cdigo

Barra de herramientas de codificacin

Transferencia de archivos en segundo plano

Insercin de comando de Flash Video

Para una lista completa y una descripcin de las nuevas funciones de


Dreamweaver 8, consulte Novedades de Dreamweaver 8 en Utilizacin
de Dreamweaver (Ayuda> Utilizacin de Dreamweaver).

Instalacin de Dreamweaver 8
En esta seccin se explica cmo instalar Dreamweaver.
Asegrese de que ha ledo las notas de la versin en el sitio web de
Macromedia en www.macromedia.com/go/dw_documentation_es, donde
encontrar la informacin o instrucciones ms 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:

3.

En Windows, se iniciar automticamente el programa de


instalacin de Dreamweaver.

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


Dreamweaver que aparece en el escritorio.

Siga las instrucciones que aparecen en pantalla.


El programa de instalacin le indicar que introduzca la informacin
necesaria.

4.

Si el sistema lo solicita, reinicie el sistema.

Instalacin de Dreamweaver 8

13

Registro de Dreamweaver 8
Para obtener soporte adicional de Macromedia, es conveniente que registre
su copia de Macromedia Dreamweaver 8 electrnicamente o por correo.
Al registrarse, podr suscribirse para recibir informacin de ltima hora
sobre actualizaciones y nuevos productos de Macromedia. Tambin puede
suscribirse a los boletines de correo electrnico 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 lnea y complete el formulario


electrnico.

Seleccione Ayuda > Imprimir registro, imprima el formulario y envelo


por correo a la direccin que figura en el formulario.

Convenciones tipogrficas
En esta gua se utilizan las convenciones tipogrficas siguientes:

14

Introduccin

Los elementos de los mens se muestran en este formato: nombre del


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

La fuente de cdigo indica nombres de etiquetas y atributos


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

La fuente de cdigo en cursiva indica elementos reemplazables


(tambin denominados metasmbolos) en el cdigo.

El texto Roman en negrita permite distinguir el texto que debe


introducirse literalmente.

CAPTULO 1

Conocer Dreamweaver

Macromedia Dreamweaver 8 incluye diversos recursos para ayudarle a


aprender rpidamente el funcionamiento del programa y a dominar la
creacin de sus propias pginas Web. Toda la documentacin de
Dreamweaver est disponible en formatos de ayuda electrnica y PDF.
Este captulo contiene los siguientes temas:
Dnde comenzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Cmo sacarle el mximo provecho a la documentacin de
Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Utilizacin del sistema de ayuda de Dreamweaver . . . . . . . . . . . . 24

Dnde comenzar
La documentacin de Dreamweaver contiene informacin para usuarios de
distintos niveles. Esta seccin le ayudar a aprender a utilizar la
documentacin, dependiendo de sus conocimientos anteriores y de lo que
quiera conseguir con Dreamweaver.
Esta seccin trata sobre los siguientes temas:

Principiantes en el diseo Web en la pgina 15

Diseadores de sitios Web con experiencia en la pgina 17

Usuarios con experiencia en codificacin manual en la pgina 18

Diseadores de aplicaciones Web en la pgina 19

Principiantes en el diseo Web


Si usted es un principiante en el diseo Web, esta seccin le informar de
las secciones de la documentacin de Dreamweaver ms adecuadas para su
nivel.

15

Para principiantes en el diseo Web:

16

Conocer Dreamweaver

1.

Para empezar, consulte Captulo 2, Aspectos bsicos de Dreamweaver,


en la pgina 29. Despus contine con los tutoriales de este libro. Los
tutoriales se dividen en dos secciones. Los primeros cinco tutoriales son
para principiantes, y le guiarn a lo largo del proceso de desarrollo de un
sitio Web pequeo pero funcional de principio a fin. La segunda seccin
de los tutoriales se abordan conceptos ms avanzados. Es aconsejable
que no trate de abordar los tutoriales ms avanzados hasta que se haya
familiarizado con la creacin de pginas Web.

2.

En Utilizacin de Dreamweaver (Ayuda > Utilizacin de Dreamweaver),


encontrar una idea ms completa de lo aprendido en esta gua de
Primeros pasos con Dreamweaver consultando Captulo 1, Exploracin
del espacio de trabajo Captulo 2, Configuracin de un sitio de
Dreamweaver Captulo 4, Administracin de archivos y Captulo 3,
Cmo crear y abrir documentos.

3.

Para aprender sobre el diseo de las pginas, consulte Captulo 7,


Diseo de pginas con CSS y Captulo 8, Presentacin de contenido
en tablas en Utilizacin de Dreamweaver.

4.

Para obtener informacin sobre la aplicacin de formato al texto y la


insercin de imgenes en las pginas, consulte Captulo 13, Insercin
y formato de texto y Captulo 14, Insercin de imgenes en
Utilizacin 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
ms avanzadas, podr continuar con el resto de los captulos sobre
pginas estticas en el apartado Utilizacin de Dreamweaver. Es
aconsejable que lea los captulos de pginas dinmicas slo cuando se
haya familiarizado con la creacin de pginas Web.

Diseadores de sitios Web con


experiencia
Si usted es un diseador de sitios Web con experiencia, esta seccin le
informar de las secciones de la documentacin de Dreamweaver ms
adecuadas para su nivel. Existen dos mtodos distintos: uno para
diseadores sin experiencia en Dreamweaver y otro para diseadores que
estn familiarizados con Dreamweaver pero que desean obtener ms
informacin sobre la creacin de pginas dinmicas.
Para diseadores de sitios Web con experiencia que empiezan
a usar Dreamweaver:
1.

Comience leyendo los tutoriales de esta gua de Primeros pasos con


Dreamweaver.

2.

En el apartado Utilizacin de Dreamweaver (Ayuda> Utilizacin de


Dreamweaver), consulte Captulo 1, Exploracin del espacio de
trabajo para ms informacin sobre la interfaz de usuario de
Dreamweaver.

3.

Aunque probablemente ya conoce una buena parte del material del


Captulo 2, Configuracin de un sitio de Dreamweaver y el Captulo
4, Administracin de archivos, puede hojear estos captulos para ver
cmo se aplican en Dreamweaver estos conceptos. Preste especial
atencin a las secciones que tratan sobre la configuracin de un sitio de
Dreamweaver.

4.

Para informacin til y detallada sobre el uso de Dreamweaver para


crear pginas HTML bsicas, consulte Captulo 13, Insercin y
formato de texto y Captulo 14, Insercin de imgenes.

5.

Para informacin sobre la codificacin en Dreamweaver, vase Captulo


19, Configuracin del entorno de codificacin Captulo 20,
Codificacin en Dreamweaver Captulo 21, Optimizacin y
depuracin del cdigo y Captulo 22, Edicin de cdigo en la vista
Diseo.

6.

Lea la introduccin que aparece al comienzo de los dems captulos del


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

Dnde comenzar

17

Para diseadores de sitios Web con experiencia,


familiarizados con Dreamweaver, que deseen obtener
informacin sobre la creacin de pginas dinmicas:
1.

Comience leyendo el Apndice A, Aspectos bsicos de las aplicaciones


Web, en la pgina 231 y el Captulo 11, Tutorial: Desarrollo de una
aplicacin Web, en la pgina 207.

2.

En Utilizacin de Dreamweaver (Ayuda> Utilizacin de Dreamweaver),


consulte por encima el Captulo 1, Exploracin del espacio de trabajo
para conocer nuevos aspectos sobre la interfaz de usuario de
Dreamweaver y lea despus el Captulo 30, Optimizacin del espacio
de trabajo para desarrollo visual.

3.

Familiarcese con el flujo de trabajo de Dreamweaver en las pginas


dinmicas leyendo Captulo 31, Flujo de trabajo para el diseo de
pginas dinmicas.

4.

Configure un servidor Web y un servidor de aplicaciones. (Vase


Captulo 23, Configuracin de una aplicacin Web.)

5.

Conecte con una base de datos. (Vase Conexin con una base de
datos en Captulo 23, Configuracin de una aplicacin Web.)

6.

Lea la introduccin que aparece al comienzo de cada uno de los


captulos de Utilizacin de Dreamweaver para determinar si le interesan
los temas que se abordan en ellos.

Usuarios con experiencia en codificacin


manual
Si usted es un usuario con experiencia en codificacin manual, esta seccin
le informar de las secciones de la documentacin de Dreamweaver ms
adecuadas para su nivel.
Para usuarios con experiencia en codificacin manual:

18

Conocer Dreamweaver

1.

Comience leyendo Captulo 8, Tutorial: Utilizacin de cdigo en esta


gua de Primeros pasos con Dreamweaver.

2.

En el apartado Utilizacin de Dreamweaver (Ayuda> Utilizacin de


Dreamweaver), consulte Captulo 1, Exploracin del espacio de
trabajo para ms informacin sobre la interfaz de usuario de
Dreamweaver.

3.

Aunque probablemente ya conoce una buena parte del material del


Captulo 2, Configuracin de un sitio de Dreamweaver y el Captulo
4, Administracin de archivos, puede hojear estos captulos para ver
cmo se aplican en Dreamweaver estos conceptos. Preste especial
atencin a las secciones sobre la configuracin de un sitio de
Dreamweaver.

4.

Encontrar ms informacin sobre codificacin con Dreamweaver en el


Captulo 19, Configuracin del entorno de codificacin, Captulo 20,
Codificacin en Dreamweaver, Captulo 21, Optimizacin y
depuracin del cdigo y Captulo 22, Edicin de cdigo en la vista
Diseo.

5.

Lea la introduccin que aparece al comienzo de cada uno de los


captulos de Utilizacin de Dreamweaver para determinar si le interesan
los temas que se abordan en ellos.

Diseadores de aplicaciones Web


Si es un diseador de aplicaciones Web con experiencia, esta seccin le
informar de las secciones de la documentacin de Dreamweaver ms
adecuadas para su nivel. Hay dos mtodos distintos, dependiendo de si ha
usado Dreamweaver con anterioridad.
Para los diseadores de aplicaciones Web que no hayan
utilizado Dreamweaver:
1.

Comience con una lectura rpida de esta gua de Primeros pasos con
Dreamweaver para familiarizarse con los aspectos bsicos del uso de
Dreamweaver.

2.

En Utilizacin de Dreamweaver (Ayuda> Utilizacin de Dreamweaver),


consulte el Captulo 1, Exploracin del espacio de trabajo para ms
informacin sobre la interfaz de usuario de Dreamweaver.

3.

Aunque probablemente ya conoce una buena parte del material del


Captulo 2, Configuracin de un sitio de Dreamweaver y el Captulo
4, Administracin de archivos, puede hojear estos captulos para ver
cmo se aplican en Dreamweaver estos conceptos. Preste especial
atencin a las secciones sobre la configuracin de un sitio de
Dreamweaver.

Dnde comenzar

19

4.

Configure un servidor Web y un servidor de aplicaciones utilizando


Dreamweaver. (Vase Captulo 23, Configuracin de una aplicacin
Web.)

5.

Conecte con una base de datos. (Vase Conexin con una base de
datos en Captulo 23, Configuracin de una aplicacin Web.)

6.

Lea la introduccin que aparece al comienzo de cada captulo de


Utilizacin de Dreamweaver para determinar si le interesan los temas que
se abordan en ellos.

Para diseadores de aplicaciones Web con experiencia que


hayan utilizado Dreamweaver:
1.

Comience leyendo Novedades de Dreamweaver 8 en Utilizacin de


Dreamweaver (Ayuda > Utilizacin de Dreamweaver). La seccin
Novedades est en Introduccin.

2.

Lea por encima el Captulo 1, Exploracin del espacio de trabajo para


conocer nuevos aspectos de la interfaz de usuario de Dreamweaver.

Cmo sacarle el mximo


provecho a la documentacin de
Dreamweaver
Dreamweaver incluye diversos medios para ayudarle a aprender
rpidamente el funcionamiento del programa y a dominar la creacin de
pginas Web. El sistema de Ayuda de Dreamweaver contiene diversos
documentos que le ayudarn a aprender a utilizar Dreamweaver,
Dreamweaver Extensibility y ColdFusion. Tambin hay recursos en lnea
adicionales que puede consultar para crear pginas Web.

Acceso a la documentacin de
Dreamweaver
En la siguiente tabla se resume la documentacin que contiene el sistema
de Ayuda de Dreamweaver.

20

Conocer Dreamweaver

Puede comprar versiones impresas de ttulos especficos. Para ms


informacin, consulte www.macromedia.com/go/buy_books (en ingls).
Ttulo

Descripcin/
Audiencia

Dnde encontrarlo

Ver en Dreamweaver:
Primeros
Le ofrece una
Seleccione Ayuda > Primeros
pasos con
introduccin bsica a
pasos con Dreamweaver
Dreamweaver los conceptos de

Ver en lnea: http://


Dreamweaver y a la
livedocs.macromedia.com/go/
interfaz, con detallados
livedocs_dreamweaver_es/
tutoriales para
Descargar el PDF:
principiantes. Dirigido a
www.macromedia.com/go/
usuarios principiantes, y
dw_documentation_es
tambin para usuarios
con nivel intermedio y
avanzado que quieran
conocer las nuevas
funciones.
Utilizacin de Informacin completa
Ver en Dreamweaver:
Seleccione Ayuda > Ayuda de
Dreamweaver sobre todas las
Dreamweaver o Ayuda >
funciones de
Utilizacin de Dreamweaver
Dreamweaver. Dirigida
a todos los usuarios de Ver en lnea: http://
livedocs.macromedia.com/go/
Dreamweaver.
livedocs_dreamweaver_es/
Descargar el PDF:
www.macromedia.com/go/
dw_documentation_es
Ver en Dreamweaver:
Ampliacin de Describe el marco de
Seleccione Ayuda > Ampliacin
Dreamweaver trabajo de
de Dreamweaver
Dreamweaver y la

Ver en lnea: http://


interfaz de
livedocs.macromedia.com/go/
programacin de la
livedocs_dreamweaver_es/
aplicacin (API).
Descargar el PDF:
Destinado a usuarios
www.macromedia.com/go/
avanzados que quieren
dw_documentation_es
crear extensiones o
personalizar la interfaz
de Dreamweaver.

Cmo sacarle el mximo provecho a la documentacin de Dreamweaver

21

Ttulo

Descripcin/
Audiencia

Dnde encontrarlo

Describe la utilidad API Ver en Dreamweaver:


Referencia
Seleccione Ayuda > Referencia
y el JavaScript API, que
API de
API de Dreamweaver
Dreamweaver le permiten realizar
Ver en lnea: http://
diversas tareas de
livedocs.macromedia.com/go/
apoyo al desarrollar
livedocs_dreamweaver_es/
extensiones de
Descargar el PDF:
Dreamweaver.
www.macromedia.com/go/
Destinado a usuarios
dw_documentation_es
avanzados que quieren
crear extensiones o
personalizar la interfaz
de Dreamweaver.

22

Conocer Dreamweaver

Utilizacin de
ColdFusion

Contiene una seleccin Ver en Dreamweaver:


Seleccione Ayuda > Utilizacin
de los libros ms
de ColdFusion
importantes con
Ver en lnea: http://
documentacin sobre
livedocs.macromedia.com/go/
ColdFusion. (La lista
livedocs_coldfusion/
completa est

Descargar el PDF:
disponible en
www.macromedia.com/go/
LiveDocs.) Dirigido a
cf_documentation
todo aquel que est
interesado en
ColdFusion, desde
principiantes hasta
desarrolladores
avanzados.

Referencia

Contiene muchos tipos Ver en Dreamweaver:


Seleccione Ayuda > Referencia.
de manual de referencia
Para una lista completa de
sobre HTML, modelos
manuales, haga clic en el men
de servidores y otros
emergente Libro en el panel
temas, casi todos
Referencia.
publicados por OReilly.
Destinado a todo aquel
que necesite ms
informacin sobre
sintaxis de cdigos,
conceptos, etc.

Acceso a recursos en lnea adicionales de


Dreamweaver
En la siguiente tabla se resumen los recursos en lnea adicionales para el
aprendizaje de Dreamweaver.
Recurso

Descripcin/
Audiencia

Dnde encontrarlo

Notas tcnicas, soporte www.macromedia.com/go/


Centro de
e informacin sobre la dreamweaver_support_es
soporte de
Dreamweaver resolucin de
problemas para
usuarios de
Dreamweaver.
Centro de
Artculos y tutoriales
desarrollo de que le ayudarn a
Dreamweaver mejorar sus
conocimientos y a
adquirir otros nuevos.

www.macromedia.com/go/
developer_dw_es

Centro de
recursos de
documentacin de
Dreamweaver

Manuales del producto


en formato PDF, fe de
errores, tutoriales y
notas de la versin.

www.macromedia.com/go/
dw_documentation_es

Foros en
lnea de
Macromedia

Debates e informacin www.macromedia.com/go/


dreamweaver_newsgroup
sobre resolucin de
problemas
proporcionada por
usuarios de
Dreamweaver,
representantes del
servicio tcnico y el
equipo de desarrollo de
Dreamweaver.

Formacin de Cursos que ofrecen


Macromedia ejercicios prcticos y
situaciones del mundo
real.

www.macromedia.com/go/
dreamweaver_training_es

Cmo sacarle el mximo provecho a la documentacin de Dreamweaver

23

Utilizacin del sistema de ayuda


de Dreamweaver
El sistema de ayuda en lnea disponible a travs del men de Ayuda
contiene informacin detallada sobre todas las operaciones que puede
realizar con Dreamweaver. Para ver una lista de los documentos disponibles
en Ayuda, consulte Acceso a la documentacin de Dreamweaver en
la pgina 20.
Esta seccin trata sobre los siguientes temas:

Cmo abrir la Ayuda en la pgina 24

Bsqueda de ayuda en la pgina 25

Utilizacin del ndice en la pgina 25

Cambio del tamao de la fuente en la pgina 26

Utilizacin de la pgina de inicio en la pgina 26

Impresin de la documentacin de Dreamweaver en la pgina 27

Introduccin de comentarios en la documentacin de Dreamweaver


con LiveDocs en la pgina 27

Cmo abrir la Ayuda


Puede acceder a la ayuda sobre el producto mientras utiliza Dreamweaver.
Para abrir la Ayuda de Dreamweaver:

24

Conocer Dreamweaver

Seleccione Ayuda > Ayuda de Dreamweaver

Bsqueda de ayuda
Puede realizar una bsqueda 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 continuacin haga


clic en Lista de temas.

3.

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


En la Ayuda de Dreamweaver, escriba una palabra o frase en el cuadro
de texto Preguntar y pulse Retorno.

2.

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

Para buscar una


frase especfica,
utilice comillas.

SUGERENCIA

1.

S U G ER E N C I A

Para buscar ayuda sobre el producto (Macintosh):

Puede empezar a
escribir una palabra
clave en el cuadro de
texto para
desplazarse
rpidamente a una
entrada del ndice.

Utilizacin del ndice


El ndice le permite encontrar informacin rpidamente.
Para utilizar el ndice (Windows):
1.

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

2.

Desplcese hasta una entrada del ndice dentro de la lista por orden
alfabtico y haga doble clic sobre ella para que aparezca la informacin
correspondiente.

Para utilizar el ndice (Macintosh):

1.

En Ayuda de Dreamweaver, haga clic en el vnculo ndice de la tabla de


contenidos.

2.

Haga clic en una letra y desplcese a una entrada del ndice dentro de la
lista.

3.

Haga clic sobre un nmero junto a la entrada para que aparezca la


informacin correspondiente.

Utilizacin del sistema de ayuda de Dreamweaver

25

Cambio del tamao de la fuente


Puede cambiar el tamao de la fuente del sistema de ayuda.
Para cambiar el tamao de la fuente en el visor de la ayuda de
Windows:
1.

Abra Internet Explorer.


El tamao de la fuente del visor de la ayuda de Windows se configura
en Internet Explorer.

2.

Seleccione Ver > Tamao de texto y seleccione un tamao.

Para cambiar el tamao de la fuente en el visor de la ayuda de


Apple:

En la ayuda, seleccione Edicin > Reducir tamao de fuente o Edicin >


Aumentar tamao de fuente.

Utilizacin de la pgina de inicio


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

Ejecute Dreamweaver sin abrir un documento.


Aparecer la pgina de inicio.

2.

26

Conocer Dreamweaver

Haga clic en No volver a mostrar.

Impresin de la documentacin de
Dreamweaver
Los libros siguientes estn disponibles en formato PDF en el sitio Web de
Macromedia en www.macromedia.com/go/dw_documentation_es:

Utilizacin de Dreamweaver

Primeros pasos con Dreamweaver

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

Introduccin de comentarios en la
documentacin de Dreamweaver con
LiveDocs
La documentacin de Dreamweaver tambin est disponible en lnea en
formato LiveDocs. La versin de LiveDocs de la ayuda de Dreamweaver se
parece mucho a la ayuda incorporada en el producto, pero adems le
permite comentar el contenido de pginas de ayuda especficas. Puede
agregar informacin til sobre un tema de Dreamweaver especfico segn
su experiencia particular, o pedir consejo a otros diseadores y
desarrolladores de Dreamweaver.
Los LiveDocs de Dreamweaver estn disponibles en
http://livedocs.macromedia.com/go/livedocs_dreamweaver_es/

Utilizacin del sistema de ayuda de Dreamweaver

27

28

Conocer Dreamweaver

CAPTULO 2

Aspectos bsicos de
Dreamweaver

Para sacar el mximo provecho de Macromedia Dreamweaver 8, deber


conocer cules son los conceptos que subyacen al espacio de trabajo de
Dreamweaver. En captulo presenta los elementos ms importantes y
utilizados del espacio de trabajo y explica cmo realizar algunas tareas
bsicas con Dreamweaver.
Este captulo contiene las secciones siguientes:
Conocer el espacio de trabajo de Dreamweaver 8. . . . . . . . . . . . . 29
Personalizacin del espacio de trabajo de Dreamweaver 8. . . . . 42
Realizacin de tareas bsicas 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. Adems, coloca muchas de las operaciones ms
frecuentes en barras de herramientas para que pueda realizar cambios en los
documentos rpidamente.
Esta seccin le proporciona una visin general del espacio de trabajo de
Dreamweaver 8. Si desea obtener informacin detallada sobre cualquiera
de los elementos del espacio de trabajo presentados en esta seccin,
consulte Captulo 1, Exploracin del espacio de trabajo en Utilizacin de
Dreamweaver.
Esta seccin contiene los siguientes temas:

Diseo del espacio de trabajo en la pgina 30

Ventana de documento en la pgina 32

Barra de herramientas de Documento en la pgina 33

Barra de estado en la pgina 34

29

Barra Insertar en la pgina 36

Barra de herramientas de Codificacin en la pgina 38

El Inspector de propiedades en la pgina 39

El panel Archivos en la pgina 40

El panel Estilos CSS en la pgina 41

Diseo del espacio de trabajo


En Windows, Dreamweaver proporciona un diseo integrado en una nica
ventana. En el espacio de trabajo integrado, todas las ventanas y paneles
estn integrados en una nica ventana de la aplicacin de mayor tamao.
Barra Insertar
Barra de herramientas de
documento

Selector de etiquetas

30

Aspectos bsicos de Dreamweaver

Ventana de documento

Inspector de propiedades

Grupos de paneles

Panel Archivos

N O TA

El espacio de trabajo de Windows tambin dispone de la opcin


Codificador, que acopla los grupos de paneles en la parte izquierda y
muestra la ventana de documento en la vista Cdigo de forma
predeterminada. Para ms informacin, consulte Utilizacin del espacio
de trabajo orientado al codificador (slo en Windows) en Utilizacin de
Dreamweaver. Para utilizar esta opcin, consulte Seleccin del diseo
del espacio de trabajo (slo en Windows) en la pgina 43.

En Macintosh, Dreamweaver puede mostrar varios documentos en una


sola ventana con fichas que identifican a cada uno de ellos. Dreamweaver
tambin 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 automticamente, a los lados de la
pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamao.
Barra de herramientas de documento
Ventana de documento

Barra Insertar

Selector de
etiquetas

Inspector de propiedades

Grupos de paneles

Panel Archivos

Conocer el espacio de trabajo de Dreamweaver 8

31

Puede alternar entre diferentes diseos tanto en Windows como en


Macintosh. Para ms informacin, consulte Seleccin del diseo del
espacio de trabajo (slo en Windows) en la pgina 43 y Visualizacin de
documentos en fichas (Macintosh) en la pgina 44.

Ventana de documento
La ventana de documento muestra el documento actual. Puede elegir entre
una de las vistas siguientes:
La vista Diseo es un entorno de diseo para el diseo visual de la pgina,
la edicin visual y el desarrollo rpido de aplicaciones. En esta vista,
Dreamweaver muestra una representacin visual del documento
completamente editable, similar a la que aparecera en un navegador.
La vista Cdigo es un entorno de codificacin manual para escribir y
editar cdigo HTML, JavaScript, cdigo de lenguaje de servidor, como por
ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de
cdigo. Para ms informacin, consulte Captulo 20, Codificacin en
Dreamweaver en Utilizacin de Dreamweaver.
Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en
una sola ventana de documento.
Cuando la ventana de documento tiene una barra de ttulo, sta muestra el
ttulo de la pgina y, entre parntesis, el nombre y la ruta del archivo. Si se
han realizado cambios que an no se han guardado, despus del nombre
del archivo Dreamweaver incluye un asterisco.
Cuando se maximiza la ventana de documento en el diseo integrado de
espacio de trabajo (slo Windows), no aparece la barra de ttulo; en este
caso, el ttulo de la pgina y el nombre y la ruta del archivo aparecen en la
barra de ttulo de la ventana principal del espacio de trabajo.
Adems, 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 ms informacin sobre cmo utilizar la ventana de documento,
consulte Captulo 1, Exploracin del espacio de trabajo en Utilizacin de
Dreamweaver.

32

Aspectos bsicos de Dreamweaver

Barra de herramientas de Documento


La barra de herramientas de Documento contiene botones que permiten
alternar entre diferentes vistas del documento rpidamente: vista Cdigo,
vista Diseo y una vista dividida que muestra las vistas Cdigo y Diseo.
La barra de herramientas contiene tambin algunos comandos y opciones
relativos a la visualizacin del documento y a su transferencia entre los
sitios local y remoto.
Mostrar vista de cdigo
Mostrar vistas de cdigo y diseo

No hay errores de comprobacin de navegador


Validar formato
Administracin de archivos

Mostrar vista de diseo

Depuracin del servidor

Ayudas visuales
Ver opciones
Actualizar vista de diseo
Vista previa/Depurar en explorador

Ttulo del documento

En la barra de herramientas de Documento, aparecen las siguientes


opciones:
Mostrar vista de cdigo

slo muestra la vista Cdigo en la ventana de

documento.
Mostrar vistas de cdigo y diseo muestra la vista Cdigo en una parte
de la ventana de documento y la vista Diseo en la otra parte. Cuando
seleccione esta vista combinada, se encontrar disponible la opcin Vista de
diseo encima del men Ver. Utilice esta opcin para especificar qu vista
debe aparecer en la parte superior de la ventana de documento.
Mostrar vista de diseo

slo muestra la vista Diseo en la ventana de

documento.
muestra un informe que le ayudar a depurar la
pgina de ColdFusion actual. El informe contiene los errores de la pgina,
si los hay.

Depuracin del servidor

Ttulo del documento permite introducir un ttulo para el documento, que

aparecer en la barra de ttulo del navegador. Si el documento ya tiene


ttulo, ste aparecer en dicho campo.
No hay errores de comprobacin de navegador

permite comprobar la

compatibilidad con distintos navegadores.

Conocer el espacio de trabajo de Dreamweaver 8

33

Validar formato

permite validar el documento actual o una etiqueta

seleccionada.
Administracin de archivos

muestra el men emergente Administracin

de archivos.
permite ver una vista previa del
documento o depurarlo en un navegador. Seleccione un navegador en el
men emergente.
Vista previa/Depurar en explorador

actualiza la vista Diseo tras realizar cambios


en la vista Cdigo. Los cambios realizados en la vista Cdigo no aparecern
de forma automtica en la vista Diseo hasta que se efecten determinadas
acciones, como guardar el archivo o hacer clic en este botn.

Actualizar vista de diseo

Ver opciones permite definir las opciones de las vistas Cdigo y Diseo, 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 Diseo, la vista
Cdigo o ambas.
Ayudas visuales permite utilizar distintas ayudas visuales para el diseo de

las pginas.
Para ms informacin sobre cmo utilizar la barra de herramientas de
Documento, consulte Captulo 1, Exploracin del espacio de trabajo en
Utilizacin de Dreamweaver.

Barra de estado
La barra de estado, situada en la parte inferior de la ventana de documento,
proporciona informacin adicional sobre el documento que est creando.
Tamao del documento y
tiempo de descarga estimado

Selector de etiquetas

34

Aspectos bsicos de Dreamweaver

Men emergente Tamao de ventana


Establecer nivel de aumento
Herramienta Zoom
Herramient Mano
Herramienta
Herramienta Seleccionar

El selector de etiquetas muestra la jerarqua de etiquetas que rodea a la


seleccin actual. Haga clic en cualquier etiqueta de la jerarqua 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 botn de
derecho del ratn (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 mtodo ms 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 ampliacin del documento. Para ms
informacin, consulte Utilizacin de Acercar y Alejar en Utilizacin de
Dreamweaver.
El men emergente Tamao de ventana (que slo aparece en la vista
Diseo) permite cambiar el tamao de la ventana de documento para que
adopte dimensiones predeterminadas o personalizadas. Para ms
informacin, consulte Cambio del tamao de la ventana de documento
en Utilizacin de Dreamweaver.
A la derecha del men emergente Tamao de ventana aparecen la
estimacin del tamao del documento y del tiempo de descarga de la
pgina, incluidos todos los archivos dependientes, como imgenes y otros
archivos multimedia. Para ms informacin, consulte Configuracin de
las preferencias de tiempo de descarga y tamao en Utilizacin de
Dreamweaver.
Para ms informacin sobre cmo utilizar la barra de estado, consulte
Captulo 1, Exploracin del espacio de trabajo en Utilizacin de
Dreamweaver.

Conocer el espacio de trabajo de Dreamweaver 8

35

Barra Insertar
La barra Insertar contiene botones para la creacin e insercin de diversos
tipos de objetos, como tablas, capas e imgenes. Al pasar el puntero sobre
un botn, aparece una descripcin de la herramienta con el nombre del
botn.
Los botones estn organizados en categoras, a las que puede cambiar en la
parte izquierda de la barra Insertar. Si el documento actual contiene cdigo
de servidor, como los documentos ASP o CFML, aparecen tambin otras
categoras. Cuando se inicia Dreamweaver, se abre la ltima categora con
la que ha trabajado.

Algunas categoras tienen botones con mens emergentes. Al seleccionar


una opcin de un men emergente, dicha opcin se convierte en la accin
predeterminada del botn. Por ejemplo, si selecciona Marcador de posicin
de imagen en el men emergente del botn Imagen, la siguiente vez que
haga clic en el botn Imagen, Dreamweaver insertar un marcador de
posicin de imagen. Siempre que seleccione una nueva opcin del men
emergente cambiar la accin predeterminada del botn.
La barra Insertar est organizada en las categoras siguientes:
La categora Comn permite crear e insertar los objetos que se utilizan con
ms frecuencia, como las imgenes y las tablas.
La categora Diseo permite insertar tablas, etiquetas div, capas y marcos.
Tambin puede elegir entre las tres vistas de las tablas: Estndar (valor
predeterminado), Tablas expandidas y Diseo. Si se selecciona el modo de
diseo, se pueden utilizar las herramientas de diseo de Dreamweaver:
Dibujar celda de diseo y Dibujar tabla de diseo.
La categora Formularios contiene botones que permiten crear
formularios e insertar elementos de formulario.
La categora Texto permite insertar diversas etiquetas de formato de texto
y listas, como b, em, p, h1 y ul.
La categora HTML permite insertar etiquetas HTML para las reglas
horizontales, el contenido de la seccin head, las tablas, los marcos y los
scripts.

36

Aspectos bsicos de Dreamweaver

Las categoras de cdigo de servidor slo estn disponibles para las


pginas que emplean un lenguaje de servidor determinado, como ASP,
ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada
una de estas categoras contiene objetos de cdigo de servidor que pueden
insertarse en la vista Cdigo.
La categora Aplicacin permite insertar elementos dinmicos como
juegos de registros, regiones repetidas y grabar formularios de insercin y
actualizacin.
La categora Elementos Flash permite insertar elementos de Macromedia

Flash.
La categora Favoritos le permite agrupar y organizar los botones de la
barra Insertar que utiliza con ms frecuencia en un lugar comn.
Para ms informacin sobre cmo utilizar la barra Insertar, consulte
Captulo 1, Exploracin del espacio de trabajo en Utilizacin de
Dreamweaver.

Conocer el espacio de trabajo de Dreamweaver 8

37

Barra de herramientas de Codificacin


La barra de herramientas de Codificacin contiene botones que le permiten
realizar numerosas operaciones de codificacin estndar, como ampliar y
contraer las selecciones de cdigo, resaltar cdigo no vlido, insertar o
eliminar comentarios, aplicar sangra al cdigo e insertar fragmentos de
cdigo utilizados recientemente. La barra de herramientas de Codificacin
slo est visible en la vista Cdigo y aparece verticalmente en el lado
izquierdo de la ventana de documento.

No puede desacoplar ni mover la barra de herramientas de Codificacin,


pero s puede ocultarla. Para ms informacin, consulte Visualizacin de
barras de herramientas en Utilizacin de Dreamweaver.
Para ms informacin sobre cmo utilizar la barra de herramientas de
Codificacin, consulte Insercin rpida de cdigo con la barra de
herramientas Codificacin en Utilizacin de Dreamweaver.

38

Aspectos bsicos de Dreamweaver

El Inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades ms
comunes del elemento de pgina seleccionado actualmente, como texto o
un objeto insertado. El contenido del inspector de propiedades es distinto
en funcin del elemento seleccionado. Por ejemplo, si selecciona una
imagen en la pgina, 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. Tambin puede convertirlo en un panel flotante en el espacio de
trabajo. Para ms informacin sobre cmo mover el Inspector de
propiedades, consulte Acoplamiento y desacoplamiento de paneles y
grupos de paneles en Utilizacin de Dreamweaver.
Para ms informacin sobre cmo utilizar el Inspector de propiedades,
consulte Utilizacin del inspector de propiedades en Utilizacin de
Dreamweaver.

Conocer el espacio de trabajo de Dreamweaver 8

39

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 tamao del rea de visualizacin 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, adems del sitio remoto o el servidor de
prueba. El panel Archivos tambin puede mostrar un mapa visual del sitio
local.
Para sitios de Dreamweaver, tambin puede personalizar el panel Archivos
cambiando la vista (sitio local o sitio remoto) que aparece de forma
predeterminada en el panel contrado.
Para ms informacin sobre cmo utilizar el panel Archivos para
administrar el sitio, consulte Captulo 4, Administracin de archivos en
Utilizacin de Dreamweaver.

40

Aspectos bsicos de Dreamweaver

El panel Estilos CSS


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

Puede cambiar el tamao 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 Seleccin que muestra las propiedades de CSS de la seleccin
actual del documento, un panel Reglas que muestra la ubicacin de las
propiedades seleccionadas (o una cascada de reglas para la etiqueta
seleccionada, en funcin de la seleccin) y un panel Propiedades que le
permite editar las propiedades CSS al definir reglas para la seleccin.

Conocer el espacio de trabajo de Dreamweaver 8

41

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 ms informacin sobre el panel Estilos CSS, consulte Acerca del
panel Estilos CSS en Utilizacin de Dreamweaver.

Personalizacin del espacio de


trabajo de Dreamweaver 8
Existen algunas tcnicas bsicas que permiten personalizar Dreamweaver
para que se ajuste a sus necesidades sin necesidad de conocer cdigo
complejo o editar archivos de texto.
Esta seccin contiene los siguientes temas:

42

Seleccin del diseo del espacio de trabajo (slo en Windows) en


la pgina 43

Visualizacin de documentos en fichas (Macintosh) en la pgina 44

Cmo ocultar y mostrar la pgina de inicio en la pgina 45

Aspectos bsicos de Dreamweaver

Seleccin del diseo del espacio de


trabajo (slo en Windows)
En Windows, puede escoger el diseo del espacio de trabajo del codificador
o el del diseador. La primera vez que se inicia Dreamweaver, un cuadro de
dilogo le permite elegir un diseo para el espacio de trabajo. Puede pasar
de un espacio de trabajo a otro en cualquier momento.
Para elegir un diseo del espacio de trabajo la primera vez que
se inicia Dreamweaver:
1.

Seleccione uno de los siguientes diseos:


Diseador es un espacio de trabajo integrado que utiliza MDI (Interfaz
para Mltiples Documentos, Multiple Document Interface) en el que
todas las ventanas de documentos y todos los paneles estn integrados
en una ventana de aplicacin ms grande, con los grupos de paneles
apilados a la derecha.

es el mismo espacio de trabajo integrado, pero con los


grupos de paneles apilados a la izquierda; es un diseo similar al que
utiliza Macromedia HomeSite y Macromedia ColdFusion Studio, en el
que las ventanas de documentos muestran de forma predeterminada la
vista de cdigo.
Codificador

NO T A

Puede acoplar los grupos de paneles a ambos lados del espacio de


trabajo en cualquiera de los diseos del espacio de trabajo.
2.

Haga clic en Aceptar.

Para cambiar a un espacio de trabajo distinto del que ha


elegido:

Seleccione Ventana > Diseo del espacio de trabajo y seleccione el


diseo del espacio de trabajo que prefiera.

Adems de seleccionar Codificador y Diseador, puede seleccionar Pantalla


doble. Si dispone de un monitor secundario, la opcin Pantalla doble
coloca todos los paneles en el monitor y conserva la ventana de documento
en el monitor principal.

Personalizacin del espacio de trabajo de Dreamweaver 8

43

Visualizacin 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 tambin 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 botn derecho del ratn 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 configuracin predeterminada de documento


en ficha:

N OT A

44

1.

Seleccione Dreamweaver > Preferencias y, posteriormente, seleccione la


categora General.

2.

Seleccione o anule la seleccin de Abrir documentos en fichas y haga clic


en Aceptar.

Dreamweaver no modifica la visualizacin de documentos que estn


actualmente abiertos al cambiar las preferencias. No obstante, los
documentos que se abran despus de seleccionar una nueva preferencia
se mostrarn conforme a la preferencia seleccionada.

Aspectos bsicos de Dreamweaver

Cmo ocultar y mostrar la pgina de inicio


La pgina de inicio de Dreamweaver aparece al iniciar Dreamweaver y
siempre que no se tiene abierto ningn documento. Puede optar por
ocultar la pgina de inicio y volver a mostrarla posteriormente. Cuando la
pgina de inicio est oculta y no se tienen documentos abiertos, la ventana
de documento est en blanco.
Para ocultar la pgina de inicio:

Seleccione en la pgina de inicio la casilla de verificacin No volver a


mostrar.
La pgina de inicio no aparecer al iniciar Dreamweaver ni despus de
abrir y cerrar un documento.

Para mostrar la pgina de inicio:


1.

Seleccione Edicin > Preferencias (Windows) o Dreamweaver >


Preferencias (Macintosh).
El cuadro de dilogo Preferencias aparece y muestra la categora de
preferencias General.

2.

Seleccione la casilla de verificacin Mostrar pgina de inicio.


La pgina de inicio aparece al iniciar Dreamweaver o despus de abrir y
cerrar un documento.

Realizacin de tareas bsicas


con Dreamweaver 8
En esta seccin se explica cmo realizar tareas bsicas como crear, abrir y
guardar archivos. Para ms informacin, consulte Captulo 3, Cmo crear
y abrir documentos en Utilizacin de Dreamweaver.
Esta seccin contiene los siguientes temas:

Archivos de Dreamweaver en la pgina 46

Crear nuevos archivos con Dreamweaver en la pgina 47

Guardar archivos con Dreamweaver en la pgina 48

Apertura de archivos en Dreamweaver en la pgina 48

Realizacin de tareas bsicas 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 pgina
Web a travs del navegador. Puede guardar archivos HTML con las
extensiones .html o .htm. Dreamweaver guarda los archivos utilizando por
defecto la extensin .html.
En Dreamweaver tambin se trabaja con los siguientes tipos de archivo:
CSS, o archivos de hojas de estilos en cascada, que tienen la extensin .css.
Se utilizan para dar formato al contenido HTML y para definir la situacin
de diversos elementos de la pgina. Para ms informacin sobre cmo
trabajar con estos tipos de archivos, consulte Aspectos bsicos de las hojas
de estilos en cascada en Utilizacin de Dreamweaver.
GIF,

o archivos de Formato de intercambio de grficos, que tienen la


extensin .gif. El formato GIF es un formato grfico popular en la Web
para cmics, logotipos, grficos con zonas transparentes y animaciones. Los
GIFs tienen un mximo de 256.

JPEG,

o archivos de Grupo conjunto de expertos fotogrficos (bautizado


con el nombre de la organizacin que cre el formato), que tienen la
extensin .jpg y suelen ser fotografas o imgenes ricas en color. El formato
JPEG es ms adecuado para fotografas digitales o escaneadas, imgenes
con texturas, imgenes con gradaciones de color y cualquier imagen que
necesite ms de 256 colores.

XML, o archivos en lenguaje de formato ampliable, que tienen la extensin


.xml. Estos archivos contienen datos en su forma original que se pueden
formatear utilizando XSL (Lenguaje de hojas de estilo ampliable). Para ms
informacin sobre cmo trabajar con estos tipos de archivos, consulte
Captulo 36, Visualizacin de datos XML en pginas Web en Utilizacin
de Dreamweaver.
XML, o archivos de lenguaje de hojas de estilo ampliable, que tienen la
extensin .xslt. Se utilizan para dar estilo a los datos en formato XML que
se quieran visualizar en una pgina Web. Para ms informacin sobre cmo
trabajar con estos tipos de archivos, consulte Captulo 36, Visualizacin
de datos XML en pginas Web en Utilizacin de Dreamweaver.

46

Aspectos bsicos de Dreamweaver

CFML, o archivos en lenguaje de formato ColdFusion, que tienen la


extensin .cfm. Se utilizan para procesar pginas dinmicas. Para ms
informacin sobre cmo trabajar con estos tipos de archivos, consulte
Captulo 40, Creacin rpida de aplicaciones de ColdFusion en
Utilizacin de Dreamweaver.
ASPX,

o archivos ASP.NET, que tienen la extensin .aspx. Se utilizan para


procesar pginas dinmicas. Para ms informacin sobre cmo trabajar con
estos tipos de archivos, consulte Captulo 41, Creacin rpida de
aplicaciones ASP.NET en Utilizacin de Dreamweaver.

PHP, o PHP: archivos de procesador de hipertexto, que tienen la extensin


.php. Se utilizan para procesar pginas dinmicas. Para ms informacin
sobre cmo trabajar con estos tipos de archivos, consulte Captulo 43,
Creacin rpida de aplicaciones PHP en Utilizacin de Dreamweaver.

Crear nuevos archivos con Dreamweaver


En esta seccin se explica cmo crear un nuevo documento en blanco con
Dreamweaver.
Tambin puede crear nuevos documentos con Dreamweaver basndose en
un archivo de diseo de Dreamweaver o en una plantilla ya existente. Para
ms informacin, consulte Creacin de documentos nuevos en
Utilizacin de Dreamweaver.
Para crear un documento nuevo en blanco:
1.

Seleccione Archivo> Nuevo.


Aparecer el cuadro de dilogo Nuevo documento. La ficha General ya
aparece seleccionada.

2.

En la lista Categora, seleccione Pgina bsica, Pgina dinmica, Pgina


de plantilla, Otro o Conjuntos de marcos. A continuacin, en la lista de
la derecha, seleccione el tipo de documento que desea crear.
Por ejemplo, seleccione Pgina bsica para crear un documento HTML
o elija Pgina dinmica para crear un documento ColdFusion o ASP,
etc.
Para ms informacin sobre las opciones de este cuadro de dilogo,
haga clic en el botn Ayuda del mismo.

3.

Haga clic en el botn Crear.


El documento nuevo se abrir en la ventana del documento.

Realizacin de tareas bsicas con Dreamweaver 8

47

4.

Guarde el documento (vase Guardar archivos con Dreamweaver en


la pgina 48).

Guardar archivos con Dreamweaver


Al crear un documento nuevo, es necesario guardarlo.
Para guardar un documento nuevo:

S U G E R E N CI A

Es recomendable
guardar el archivo en
un sitio de
Dreamweaver. Para
ms informacin,
consulte Captulo 3,
Tutorial:
Configuracin del
sitio y de los archivos
del proyecto, en
la pgina 51.

1.

Seleccione Archivo > Guardar.

2.

En el cuadro de dilogo que aparece a continuacin, vaya hasta la


carpeta en la que desea guardar el archivo.

3.

En el cuadro de texto Nombre de archivo, introduzca un nombre para


el archivo.
Evite utilizar espacios y caracteres especiales en los nombres de archivos
y carpetas. Asimismo, no comience los nombres de los archivos con
nmeros. En concreto, no utilice caracteres especiales (como , o ) ni
signos de puntuacin (como dos puntos, barras inclinadas o puntos) en
los nombres de archivos que desee colocar en un servidor remoto;
muchos servidores cambian estos caracteres durante la carga, lo que
provoca que se rompan los vnculos 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:

48

1.

Seleccione Archivo > Abrir.

2.

En el cuadro de dilogo Abrir, seleccione el archivo y haga clic en Abrir.

Aspectos bsicos de Dreamweaver

PARTE 2

Tutoriales
La Parte Dos de este libro contiene cinco tutoriales bsicos que le ayudan a
realizar los distintos pasos de que consta la creacin de una pgina Web. La
pgina Web que crear es la pgina principal de Cafe Townsend, un
restaurante ficticio.
Esta parte contiene las siguientes secciones:
Tutorial: Configuracin del sitio y de los archivos del proyecto . . 51
Tutorial: Crear un diseo de pgina basado en tablas . . . . . . . . . .59
Tutorial: Adicin de contenido a las pginas . . . . . . . . . . . . . . . . . . 79
Tutorial: Formatear la pgina con CSS . . . . . . . . . . . . . . . . . . . . . . 107
Tutorial: Publicacin del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

49

CAPTULO 3

Tutorial: Configuracin del sitio


y de los archivos del proyecto

Este tutorial le presenta el concepto de sitio de Macromedia Dreamweaver


8 y le ensea 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 ubicacin en un servidor Web remoto donde cargar los archivos
cuando est preparado para ponerlos a disposicin pblica (el sitio
remoto). El panel Archivos de Dreamweaver se utiliza para administrar los
archivos del sitio.
El mtodo ms comn para crear un sitio Web utilizando Dreamweaver
consiste en crear y editar pginas en el disco local y, a continuacin, cargar
copias de esas pginas en un servidor Web remoto para que puedan ser
vistas a travs de la Web. En este tutorial slo aprender a configurar el sitio
local, de manera que pueda comenzar a crear directamente pginas Web.
Ms 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
Configuracin de los archivos del proyecto . . . . . . . . . . . . . . . . . . . 53
Defina una carpeta local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

51

Conozca los sitios de


Dreamweaver
En Dreamweaver, el trmino sitio se emplea para referirse tanto a un sitio
Web como a una ubicacin 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 vnculos, 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 mximo de tres partes, segn el


entorno informtico 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, segn el entorno, para


fines de prueba, produccin, colaboracin y publicacin. 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 pblicamente en la Web.
La carpeta para pginas dinmicas (carpeta del servidor de prueba) es

la carpeta donde Dreamweaver procesa las pginas dinmicas. Esta carpeta


suele coincidir con la carpeta remota. Slo tendr que preocuparse por esta
carpeta si desarrolla una aplicacin Web. Para ms informacin sobre cmo
utilizar la carpeta del servidor de prueba, consulte Especificacin de dnde
pueden procesarse las pginas dinmicas en Utilizacin de Dreamweaver.

52

Tutorial: Configuracin del sitio y de los archivos del proyecto

Puede configurar un sitio de Dreamweaver utilizando el asistente para la


Definicin del sitio, que le orientar paso a paso a travs del proceso de
configuracin, o utilizando las opciones avanzadas de Definicin del sitio,
que le permitirn configurar individualmente, segn sea necesario, las
carpetas local, remota y de pruebas. En este tutorial utilizar las opciones
avanzadas de Definicin del sitio para configurar una carpeta local para los
archivos del proyecto. Ms adelante aprender a configurar una carpeta
remota, para que pueda publicar las pginas en un servidor Web y ponerlas
a disposicin pblica.
Para ms informacin sobre cmo utilizar el asistente para la definicin del
sitio para configurar un sitio de Dreamweaver, consulte Configuracin de
un sitio de Dreamweaver nuevo en Utilizacin de Dreamweaver.
Para ms informacin sobre la configuracin de un sitio remoto, consulte
Captulo 7, Tutorial: Publicacin del sitio.
Para ms informacin sobre los sitios de Dreamweaver en general, consulte
Configuracin de un sitio de Dreamweaver en el apartado Utilizacin de
Dreamweaver.

Configuracin de los archivos del


proyecto
Cuando cree un sitio local, puede colocar los activos existentes (imgenes u
otro tipo de contenido) en la carpeta raz del sitio local (la carpeta principal
del sitio). Posteriormente, cuando est listo para aadir contenido a las
pginas, 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 creacin del sitio es copiar los archivos
de muestra de la carpeta de aplicacin de Dreamweaver en la carpeta
adecuada del disco duro.

Configuracin 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


Settings\su_nombre_de_usuario\Mis documentos\local_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 pginas con el fin de hacerlas
accesibles al pblico cuando utilice Macintosh como servidor Web.
2.

Localice la carpeta cafe_townsend en la carpeta de la aplicacin de


Dreamweaver en el disco duro.
Si ha instalado Dreamweaver en su ubicacin predeterminada, la ruta
de la carpeta ser sta:

En Windows: C:\Archivos de programa\Macromedia\Dreamweaver


8\Tutorial_assets\cafe_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 "raz" La carpeta "raz" local del sitio Dreamweaver suele ser la
carpeta principal o la carpeta de nivel superior de su sitio Web. Suele corresponderse con una carpeta
idntica situada en el sitio remoto (servidor Web). La carpeta raz tambin suele definir la primera parte
de la URL del sitio Web, despus del nombre de dominio. Por ejemplo, si su carpeta raz local se llama
misitioweb, y tiene una carpeta raz idntica en el sitio remoto, la URL de su sitio Web ser algo como
http://www.yahoo.com/misitioweb.
En algunos casos, la carpeta raz local podra no tener un nombre exacto equivalente en el sitio remoto.
Por ejemplo, si usted es propietario del dominio www.misitioweb.com, con un directorio raz remoto
llamado public_html, su carpeta raz local podra seguir llamndose misitioweb. Los archivos en los
directorios local y remoto raz seran idnticos; lo nico diferente sera 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
raz (carpeta principal) para su sitio de Dreamweaver.

54

Tutorial: Configuracin del sitio y de los archivos del proyecto

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 podran no funcionar
correctamente.
Adems, al definir una carpeta local podr tambin administrar archivos y
transferirlos entre el disco local y el servidor Web utilizando distintos
mtodos 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 dilogo Administrar sitios.

2.

Haga clic en el botn Nuevo y seleccione Sitio.


Aparecer el cuadro de dilogo Definicin del sitio.

3.

Si aparece el asistente (ficha Bsicas), haga clic en la ficha Avanzadas y


seleccione Datos locales en la lista Categora (que debe ser la opcin
predeterminada).

4.

En el cuadro de texto Nombre del sitio, introduzca Cafe Townsend


como nombre del sitio.

5.

En el cuadro de texto Carpeta raz 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 raz local.

6.

En el cuadro de texto Carpeta predeterminada de imgenes, especifique


la carpeta de imgenes 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 imgenes.

Defina una carpeta local

55

El cuadro de dilogo Definicin de sitio debe parecerse ahora al


siguiente.

7.

Haga clic en Aceptar.


Aparecer el cuadro de dilogo Administrar sitios, en el que se muestra
el nuevo sitio.

8.

56

Haga clic en Listo para cerrar el cuadro de dilogo Administrar sitios.

Tutorial: Configuracin del sitio y de los archivos del proyecto

El panel Archivos mostrar ahora la nueva carpeta raz local


correspondiente al sitio actual. La lista de archivos del panel Archivos acta
como administrador de archivos, ya que permite copiar, pegar, eliminar,
mover y abrir archivos como si se tratara del escritorio del PC.

Para ms informacin sobre cmo funciona el panel Archivos, consulte El


panel Archivos en la pgina 40.
Ya ha definido una carpeta raz local para el sitio. La carpeta raz local es el
punto de su equipo local donde almacena las copias de trabajo de sus
pginas Web. Ms adelante, si quiere publicar sus pginas y hacerlas
pblicas, 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 gua para crear el sitio de
muestra de Cafe Townsend, o bien puede trabajar en sus propias pginas
Web. Cuando acabe de crear y editar las pginas, contine con la definicin
de una carpeta remota en un servidor y con la publicacin de las pginas.
Para ms informacin, consulte Captulo 7, Tutorial: Publicacin
del sitio.

Defina una carpeta local

57

58

Tutorial: Configuracin del sitio y de los archivos del proyecto

CAPTULO 4

Tutorial: Crear un diseo de


pgina basado en tablas

Este tutorial explica cmo crear un diseo de pgina basado en tablas con
Macromedia Dreamweaver 8. Un diseo de pgina determina cmo va a
aparecer la pgina en el navegador, mostrando, por ejemplo, la situacin de
los mens, las imgenes, y el contenido de Macromedia Flash.
Las tablas constituyen una herramienta muy eficaz para presentar datos de
tabla y establecer el diseo de texto y grficos en una pgina HTML. Puede
utilizar las tablas para crear su propio diseo de un modo rpido 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 aadir posteriormente.
En este tutorial va a realizar las tareas siguientes:
Examen de la maqueta de diseo. . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Creacin y almacenamiento de una pgina nueva . . . . . . . . . . . . . 61
Insercin de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Establecimiento de las propiedades de una tabla. . . . . . . . . . . . . . 66
Insercin de un marcador de posicin de imagen. . . . . . . . . . . . . . 72
Adicin de color a la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Examen de la maqueta de diseo


Lo habitual no es empezar a construir un sitio Web iniciando
Dreamweaver y creando pginas directamente. Los primeros pasos para
crear un sitio Web debe darlos sobre una hoja de papel, o en una aplicacin
de edicin grfica como Macromedia Fireworks. Los diseadores grficos
suelen crear un boceto artstico general del sitio Web (tambin conocido
como maqueta), con el fin de mostrrselo al cliente y asegurarse de que la
idea inicial para el sitio Web recibe la aprobacin del cliente.

59

Una maqueta est formada por una cantidad indeterminada de elementos


de pginas que el cliente ha solicitado para su sitio Web. Por ejemplo, el
cliente podra haber dicho: "quiero un logotipo en la parte superior de la
pgina, una zona de navegacin que enlace con estas otras pginas, una
seccin para una tienda online y una parte donde pueda insertar
videoclips. A partir de esto, el diseador comienza a planificar el diseo de
la pgina y realiza bocetos de pginas 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 diseador Web consiste en transformar el comp en una
pgina web activa (probablemente contando con la ayuda de otros
diseadores grficos y desarrolladores de Flash).

60

Tutorial: Crear un diseo de pgina basado en tablas

Ver que el diseador grfico le ha proporcionado un comp para una


pgina Web que incluye varias zonas de contenido, as como algunas ideas
grficas. A lo largo de los apartados siguientes, va a utilizar Dreamweaver
para desarrollar este diseo.
Tambin 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 Captulo 3, Tutorial: Configuracin del sitio y
de los archivos del proyecto. Si lo prefiere, tambin puede imprimir el
comp para tenerlo delante mientras crea la pgina.

Creacin y almacenamiento de
una pgina nueva
Despus de crear un sitio nuevo y examinar los comps, ya puede empezar a
crear pginas Web. Comience creando una pgina nueva y guardndola en
la carpeta raz local cafe_townsend de su sitio Web. Ms adelante esta
pgina ser la pgina de inicio de Cafe Townsend, un restaurante ficticio.
Si no ha creado una carpeta raz local llamada cafe_townsend, deber
hacerlo antes de continuar. Para instrucciones, consulte Captulo 3,
Tutorial: Configuracin del sitio y de los archivos del proyecto.
1.

En Dreamweaver, Seleccione Archivo > Nuevo.

2.

En la ficha General del cuadro de dilogo Nuevo documento, seleccione


Pgina bsica en la lista Categora, seleccione HTML en la lista Pgina
bsica y haga clic en Crear.

3.

Seleccione Archivo > Guardar como.

4.

En el cuadro de dilogo Guardar como, busque y abra la carpeta


cafe_townsend que defini como carpeta raz local del sitio.
Esta carpeta la cre en Captulo 3, Tutorial: Configuracin 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 ttulo en la parte
superior de la ventana de la aplicacin.

Creacin y almacenamiento de una pgina nueva

61

6.

En el cuadro de texto Ttulo del documento en la parte superior del


nuevo documento, escriba Cafe Townsend.

ste es el ttulo de la pgina (distinto al nombre de archivo). Los


visitantes del sitio vern este ttulo en la barra del ttulo del navegador
cuando accedan a ella a travs de su navegador Web.
7.

Seleccione Archivo > Guardar para guardar la pgina.

Insercin de tablas
A continuacin, vamos a introducir una tabla que incluir texto, grficos y
activos de Macromedia Flash.

62

1.

Haga clic una vez en la pgina para colocar el punto de insercin en la


esquina superior izquierda de la pgina.

2.

Seleccione Insertar> Tabla.

3.

En el cuadro de dilogo 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 Pxeles 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.

Tutorial: Crear un diseo de pgina basado en tablas

4.

Haga clic en Aceptar.


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

Insercin de tablas

63

A c er c a d e. . .

Ms informacin sobre las tablas Las tablas constituyen una herramienta muy eficaz para presentar
datos de tabla y establecer el diseo de texto y grficos en una pgina HTML. Una tabla consta de una o
varias filas, cada una de las cuales consta, a su vez, de una o ms celdas. Al crear filas mltiples con
celdas mltiples, las celdas formal columnas. Tcnicamente, una celda es una divisin dentro de una fila
horizontal, y una columna es una acumulacin vertical de estas divisiones de celdas.
Dreamweaver muestra el ancho de la tabla y de cada columna en el Selector de tablas (marcado con
lneas verdes) cuando se selecciona una tabla o cuando el punto de insercin est en ella.

Junto a los anchos se encuentran flechas para el men de encabezado de la tabla y los mens de
encabezado de las columnas. Puede utilizar los mens para acceder rpidamente a determinados
comandos relacionados con tablas. Tambin puede activar o desactivar la vista de los anchos y los
mens 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 nmero de pxeles entre el contenido de una celda y los lmites de la misma.
El espacio entre celdas determina el nmero de pxeles entre celdas contiguas de una tabla.
Si no se especifican de forma explcita los valores de relleno y espaciado de celda, la mayora 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 ms informacin sobre tablas, consulte el Captulo 8, Presentacin de contenido en tablas en
Utilizacin de Dreamweaver.
5.

Haga clic una vez a la derecha de la tabla para anular la seleccin.

6.

Seleccione Insertar> Tabla para insertar otra tabla.

7.

En el cuadro de dilogo Insertar tabla, siga este procedimiento para la


segunda tabla:

8.

64

Escriba 1 en el cuadro de texto Filas.

Escriba 3 en el cuadro de texto Columnas.

Escriba 700 en el cuadro de texto Ancho de tabla.

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

Haga clic en Aceptar.

Tutorial: Crear un diseo de pgina basado en tablas

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

10. Inserte una tercera tabla seleccionando Insertar > tabla e introduciendo

los siguientes valores en el cuadro de dilogo Insertar tabla:

11.

Escriba 1 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 Pxeles 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.

Haga clic en Aceptar.


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 seleccin. La pgina


creada debe ser parecida a la siguiente:

Insercin de tablas

65

N O TA

Es posible que se vea el Selector de tablas (sealado con lneas verdes)


despus de insertar una tabla. Puede hacer desaparecer el Selector de
tablas haciendo clic fuera de la tabla. Tambin 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 especficas de la tabla utilizando el modo de
tablas expandidas, una funcin que aade temporalmente relleno y
espaciado de celdas a las tablas y aumenta los bordes, para as simplificar la
edicin. Especficamente, permite colocar el punto de insercin de manera
precisa, sin seleccionar accidentalmente la tabla equivocada o el contenido
de otra tabla.
N OT A

Una vez concluida la definicin de propiedades de la tabla en el modo de


tablas expandidas, regrese siempre al Modo estndar. El modo de tablas
expandidas no es un entorno WYSIWYG, por lo que algunas operaciones,
como el cambio de tamao, no producirn el resultado esperado.
1.

NO TA

66

Seleccione Ver > Modo de tabla > Modo de tablas expandidas.

Si aparece el cuadro de dilogo Introduccin al modo de tablas


expandidas, haga clic en Aceptar.

Tutorial: Crear un diseo de pgina basado en tablas

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


ampliacin 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 continuacin vamos a definir las propiedades de la segunda tabla (la


que consta de tres columnas).

68

Tutorial: Crear un diseo de pgina basado en tablas

8.

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

9.

En el inspector de propiedades, introduzca 140 en el cuadro de texto


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.

Establecimiento de las propiedades de una tabla

69

11.

En el inspector de propiedades, introduzca 230 en el cuadro de texto


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

12. Defina

el ancho de la tercera columna con un valor de 230 pxeles.

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 pxeles 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 ms adelante.
13.

70

Por ltimo, haga clic dentro de la ltima tabla (la que tiene una fila y
una columna).

Tutorial: Crear un diseo de pgina basado en tablas

14. En el inspector de propiedades, introduzca 24 en el cuadro de texto Alto

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


El diseo creado debe ser parecido al siguiente:

15.

Haga clic en el vnculo Salir de modo de tablas expandidas en la parte


superior de la ventana de documento para regresar al Modo estndar.

16.

Guarde la pgina.

Establecimiento de las propiedades de una tabla

71

Insercin de un marcador de
posicin de imagen
Un marcador de posicin de imagen es un grfico que se utiliza hasta que el
grfico definitivo est listo para su incorporacin a la pgina Web. Un
marcador de posicin de imagen puede resultar til al crear el diseo de
pgina, pues permite colocar una imagen en una pgina 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 posicin de


imagen.

3.

En el cuadro de dilogo Marcador de posicin 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 marrn 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 descripcin textual de una imagen en una
pgina Web. Forma parte del cdigo HTML y no se muestra en la pgina. Es importante proporcionar
texto alternativo para la mayora de sus imgenes, con el fin de ofrecer la informacin proporcionada por
la imagen a los visitantes del sitio que utilicen lectores de pantalla o navegadores que slo admiten texto.
En los grficos de rtulo, que slo suelen mostrar el logotipo en la pgina Web, no es esencial
proporcionar texto alternativo. Si deja el cuadro de texto Texto alternativo en blanco en el cuadro de
dilogo Marcador de posicin de imagen, Dreamweaver aade un atributo alt="" a la etiqueta img. Si
posteriormente decide que quiere aadir texto alternativo a una imagen, puede seleccionar la imagen e
introducir el texto alternativo en el inspector de propiedades. Por ejemplo, si ms adelante cambia el
logotipo aadiendo un nmero de telfono direccin, podra incluir esta informacin en el texto
alternativo.

72

Tutorial: Crear un diseo de pgina basado en tablas

A ce r ca d e . ..

Marcadores de posicin de imagen Un marcador de posicin de imagen es un grfico que se utiliza


hasta que el grfico definitivo est listo para su incorporacin a la pgina Web; no es una imagen grfica
que se puede ver en el navegador. Antes de publicar el sitio, reemplace todos los marcadores de posicin
de imgenes que haya aadido por archivos grficos aptos para la Web, como archivos GIF o JPEG.
Si dispone de Macromedia Fireworks, puede crear un nuevo grfico desde un marcador de posicin de
imagen de Dreamweaver. Al seleccionar el marcador de posicin de imagen y hacer clic en el botn Crear
del inspector de propiedades, Fireworks abre un nuevo lienzo. Las dimensiones de la nueva imagen se
configuran con el mismo tamao que la imagen del marcador de posicin. Puede crear y editar la imagen
como desee y reemplazar la imagen del marcador de posicin en Dreamweaver. Para informacin sobre
cmo crear una imagen en Fireworks a partir de un marcador de posicin de imagen, consulte
Utilizacin de Fireworks para modificar marcadores de posicin de imagen de Dreamweaver en
Utilizacin de Dreamweaver.

4.

Haga clic en Aceptar.


El marcador de posicin de imagen aparece dentro de la primera tabla.
El marcador de posicin de imagen muestra una etiqueta y los atributos
de tamao 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 tamao del


marcador de posicin de imagen no aparecen.
5.

Guarde la pgina.

Insercin de un marcador de posicin de imagen

73

Adicin de color a la pgina


A continuacin va a aadir ms color a la pgina configurando los colores
de algunas de las celdas de la tabla y del fondo de la pgina.
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

74

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


ampliacin situada en la esquina inferior derecha del inspector de
propiedades.

Tutorial: Crear un diseo de pgina basado en tablas

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

7.

En el cuadro de texto Color de fondo, introduzca el valor hexadecimal


#F7EEDF y presione Intro (Windows) o Retorno (Macintosh).
La celda de la tabla se volver de color marrn claro.

8.

Repita los pasos de 5 a 7 para cambiar tambin el color de la tercera celda


de la tabla a un marrn claro.

9.

Una vez definidos los colores de las tres celdas, haga clic una vez fuera
de la tabla para anular la seleccin.

A continuacin cambiar el color de fondo de toda la pgina modificando


las propiedades de la pgina. El cuadro de dilogo Propiedades de la pgina
le permite configurar varias propiedades de la pgina, incluyendo, entre
otros, el tamao y el color de las fuentes de la pgina, el color de los
vnculos visitados y los mrgenes de la pgina.

Adicin de color a la pgina

75

1.

Seleccione Modificar > Propiedades de la pgina.

2.

En la categora Aspecto del cuadro de dilogo Propiedades de la pgina,


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 aqul 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.
Tambin puede utilizar el selector de color para igualar colores. Por ejemplo, si una imagen de su pgina
incluye un todo de azul especfico y quiere aplicar el mismo color al color de fondo de una celda de la
tabla, seleccione la celda en cuestin, 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 botn del ratn. El selector de color
rellenar la zona seleccionada con el color ms parecido al que marc con el cuentagotas. No obstante,
al seleccionar colores con este mtodo, el color seleccionado por el selector de color podra no ser un
color seguro para la Web.

76

Tutorial: Crear un diseo de pgina basado en tablas

3.

Haga clic en Aceptar.


El color de fondo de la pgina se vuelve negro.

4.

Guarde su trabajo.

Su diseo de pgina quedar definido. El diseo incluye varias tablas que


pueden albergar activos como imgenes, texto y archivos de Flash Video
(FLV). En el siguiente tutorial, Captulo 5, Tutorial: Adicin de
contenido a las pginas, aprender a aadir activos a la pgina utilizando
las diferentes funciones de insercin que le ofrece Dreamweaver.

Adicin de color a la pgina

77

78

Tutorial: Crear un diseo de pgina basado en tablas

CAPTULO 5

Tutorial: Adicin de
contenido a las pginas

Este tutorial le muestra cmo aadir contenido a las pginas Web en


Macromedia Dreamweaver 8. Puede aadir a las pginas Web contenidos
de diversa ndole incluyendo, entre otros, grficos, archivos de Macromedia
Flash, vdeos de Macromedia Flash y texto. Una vez aadido el contenido a
las pginas, puede obtener una vista previa con un navegador, para ver
cmo va a aparecer en la Web.
En este tutorial va a realizar las tareas siguientes:
Localizacin de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Repaso de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Insercin de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Insercin y reproduccin de un archivo Flash . . . . . . . . . . . . . . . . . 90
Insercin de Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Insercin de texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Creacin de vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Vista previa de la pgina en un navegador . . . . . . . . . . . . . . . . . . . 103

Localizacin de los archivos


Este tutorial comienza con la pgina basada en tablas (index.html) que cre
en el apartado Captulo 4, Tutorial: Crear un diseo de pgina basado en
tablas. Si no complet ese tutorial, puede volver atrs y completarlo antes
de continuar o abrir la versin completada del tutorial y trabajar con ella.

79

Encontrar la versin 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 Captulo 3, Tutorial: Configuracin del
sitio y de los archivos del proyecto.
N OT A

80

Si comienza este tutorial con el archivo completado table_layout.html y no


con el archivo index.html de Captulo 4, Tutorial: Crear un diseo de
pgina basado en tablas, algunos pasos e ilustraciones del tutorial no
coincidirn con lo que aparece en su pantalla.

Tutorial: Adicin de contenido a las pginas

Repaso de la tarea
En este tutorial incorporar activos a la pgina de inicio de Cafe Townsend,
un restaurante ficticio. Aprender a aadir imgenes, archivos de
Macromedia Flash, archivos de Macromedia Flash Video y texto. Cuando
haya terminado, la pgina se parecer a sta:

Como podr ver, el texto de la pgina todava 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 raz cafe_townsend que copi en su disco duro en Captulo 3,
Tutorial: Configuracin 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 dnde puede encontrar los activos a medida que vaya
avanzando.

Insercin de imgenes
Una vez creado su diseo de pgina, ya puede aadir activos a la pgina.
Vamos a comenzar aadiendo imgenes. Hay varias formas de aadir
imgenes a una pgina Web en Dreamweaver. En este apartado va a aadir
cuatro imgenes distintas a la pgina index de Cafe Townsend siguiendo
varios mtodos.

Reemplazo del marcador de posicin de


imagen
1.

NO T A

82

En Dreamweaver, abra el archivo index.html que cre en Captulo 4,


Tutorial: Crear un diseo de pgina basado en tablas.

Si no ha completado Captulo 4, Tutorial: Crear un diseo de pgina


basado en tablas, consulte los pasos a seguir en Localizacin de los
archivos en la pgina 79.

Tutorial: Adicin de contenido a las pginas

2.

Haga doble clic en el marcador de posicin de imagen banner_graphic,


en la parte superior de la pgina.

3.

En el cuadro de dilogo Seleccionar origen de imagen, acceda a la


carpeta de imgenes dentro de la carpeta cafe_townsend que defini
como carpeta raz del sitio.

4.

Seleccione el archivo banner_graphic.jpg y haga clic en Aceptar.

Insercin de imgenes

83

Dreamweaver sustituye el marcador de posicin de imagen por el


grfico de rtulo de Cafe Townsend.

5.

Haga clic una vez fuera de la tabla para anular la seleccin de la imagen.

6.

Guarde el archivo (Archivo > Guardar).

Insertar una imagen utilizando el men


Insertar

NO T A

84

1.

Haga clic una vez dentro de la tercera fila de la primera tabla (dos filas
por debajo del grfico de rtulo que acaba de insertar, justo encima de
las celdas coloreadas de la tabla).

2.

Seleccione Insertar > Imagen.

3.

En el cuadro de dilogo Seleccionar origen de imagen, acceda a la


carpeta de imgenes dentro de la carpeta cafe_townsend, seleccione el
archivo body_main_header.gif y haga clic en Aceptar.

Se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de


imagen, haga clic en Aceptar.

Tutorial: Adicin de contenido a las pginas

Aparece en la tabla un grfico largo y coloreado. Parece ms un color de


fondo para la celda de la tabla que un grfico, pero si lo mira con ms
atencin ver que el grfico tiene las esquinas redondeadas. El efecto de
equinas redondeadas le dar un aspecto interesante a la parte inferior de
la pgina una vez haya aadido todos los activos.

Insercin de una imagen arrastrando


1.

Haga clic una vez dentro de la ltima fila de la ltima tabla de la pgina
(justo debajo de las celdas coloreadas de la tabla).

Insercin de imgenes

85

2.

En el panel Archivos (Ventana > Archivos) busque el archivo


body_main_footer.gif (dentro de la carpeta de imgenes), y arrstrelo
hasta el punto de insercin de la ltima tabla.

NO TA

Se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de


imagen, haga clic en Aceptar.

3.

Haga clic una vez fuera de la tabla y guarde la pgina (Archivo >
Guardar).

Insertar una imagen desde el panel Activos


1.

86

Haga clic una vez dentro de la columna central de la tabla de tres


columnas (la primera celda de la tabla de color marrn claro).

Tutorial: Adicin de contenido a las pginas

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 mens emergentes Vert o Horiz, haga clic en la flecha


de ampliacin situada en la esquina inferior derecha del inspector de
propiedades.
3.

Presione Intro (Windows) o Retorno (Macintosh) una vez para crear


ms espacio.

Insercin de imgenes

87

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 ms informacin, consulte
Captulo 3, Tutorial: Configuracin del sitio y de los archivos del proyecto o Utilizacin 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 explcita. Para aadir un
activo a la lista Favoritos, seleccione el activo en la lista Sitio y, a continuacin, seleccione Aadir 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 tamao del rea de vista previa, arrastre la lnea que separa el rea de vista previa de los
encabezados de columna de activos.
Para ms informacin, consulte Utilizacin de activos en Utilizacin de Dreamweaver.
4.

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

Botn Imgenes

88

5.

Si no est seleccionada la vista Imgenes, haga clic en Imgenes para ver


sus activos de imagen.

6.

En el panel Activos, seleccione el archivo street_sign.jpg.

Tutorial: Adicin de contenido a las pginas

7.

Siga uno de estos procedimientos:

Arrastre el archivo street_sign.jpg hasta el punto de insercin 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 dilogo Atributos de accesibilidad de la etiqueta de


imagen, haga clic en Aceptar.

El grfico street_sign.jpg aparece en la pgina.

8.

Haga clic una vez fuera de la tabla para anular la seleccin de la imagen.

9.

Guarde la pgina.

Insercin de imgenes

89

Insercin y reproduccin de un
archivo Flash
A continuacin va a insertar un archivo Flash que reproduce una serie de
fotografas de alimentos ofrecidos por Cafe Townsend. El archivo Flash que
va a insertar es un archivo FMA, o rea de mensajera flexible. Un FMA es
un tipo de aplicacin Flash comn que muestra un mensaje informativo. El
mensaje puede cambiar segn las necesidades especficas. Por ejemplo, si
Cafe Townsend va a celebrar un acontecimiento especial, el FMA se podra
cambiar fcilmente (sin afectar al resto de la pgina) para mostrar
informacin sobre el evento en lugar de mostrar los alimentos ofrecidos.
Para insertar el archivo FMA de Flash necesita insertar cdigo HTML para
incrustar el archivo en la pgina de Dreamweaver. Para hacer esto, lo ms
sencillo es insertar el archivo SWF (el archivo de pelcula Flash exportado)
en la pgina. Cuando se inserta un archivo SWF en Dreamweaver,
Dreamweaver escribe por usted todo el cdigo Flash HTML necesario.
1.

Con la pgina 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 grfico de rtulo introducido en el
apartado anterior.

2.

En el inspector de propiedades (Ventana > Propiedades), seleccione


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

90

Si no aparecen los mens emergentes Vert o Horiz, haga clic en la flecha


de ampliacin situada en la esquina inferior derecha del inspector de
propiedades.

Tutorial: Adicin de contenido a las pginas

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 aplicacin Flash. Los archivos FLA tienen la extensin .fla. Por ejemplo, si est
trabajando con un logotipo animado para un sitio Web, el nombre del archivo Flash podra 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 extensin .swf. Los archivos SWF (no FLA) reproducen contenido Flash en un navegador; es el tipo de
archivo que se debe introducir en una pgina Web que se est diseando con Dreamweaver.

3.

Seleccione Insertar > Media > Flash.


En el cuadro de dilogo Seleccionar archivo, acceda al archivo
flash_fma.swf (est en la carpeta raz cafe_townsend del sitio)
seleccione el archivo y haga clic en Aceptar.
Si se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta
de objeto, haga clic en Aceptar.

En la ventana de documento aparecer un marcador de posicin del


contenido Flash en lugar de una escena de FMA. Esto es debido a que
el cdigo HTML apunta al archivo SWF flash_fma.swf. Al cargar la
pgina index.html, el navegador muestra el archivo SWF.

Insercin y reproduccin de un archivo Flash

91

4.

El marcador de posicin del contenido Flash se mantendr seleccionado


despus de insertar un archivo SWF mientras no haga clic en ningn
otro punto de la pgina.
Si no est seleccionado, seleccione el marcador de posicin 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 botn Reproducir de Flash, haga clic en la flecha de


ampliacin situada en la esquina inferior derecha del inspector de
propiedades.

Dreamweaver reproduce el archivo Flash en la ventana de documento,


mostrando lo que podrn ver los visitantes de la pgina cuando la vean
a travs de un navegador.

92

6.

En el inspector de propiedades, haga clic en Detener para detener la


reproduccin del archivo Flash.

7.

Guarde la pgina.

Tutorial: Adicin de contenido a las pginas

Insercin de Flash Video


A continuacin va a insertar un archivo de vdeo Flash utilizando el activo
proporcionado.
1.

Con la pgina index.html abierta en la ventana de documento de


Dreamweaver, haga clic una vez sobre el grfico que introdujo en la
columna central de la tabla de tres columnas.
En el apartado anterior, se cre espacio antes de insertar el grfico; es
aqu donde debe hacer clic.

2.

Seleccione Insertar > Media > Flash Video.

Insercin de Flash Video

93

3.

En el cuadro de dilogo Insertar de Flash Video, seleccione Vdeo de


descarga progresiva en el men emergente Tipo de vdeo.

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 pginas Web sin tener que utilizar la herramienta de autora de Flash. El comando inserta un
componente de Flash, que muestra el contenido de Flash Video seleccionado, adems de un conjunto de
mandos de reproduccin cuando se muestra en un navegador.
El comando Insertar Flash Video le permite ofrecer contenido de vdeo a los visitantes de su sitio a travs
de una de estas opciones:
El vdeo de descarga progresiva descarga el archivo de Flash Video (FLV) al disco duro del usuario y lo
reproduce. Sin embargo, a diferencia de los mtodos tradicionales de entrega de vdeo de tipo "descarga
y reproduccin", la descarga progresiva permite iniciar la reproduccin del archivo de vdeo antes de que
haya finalizado la descarga.
El vdeo de flujo transfiere el contenido de Flash Video y lo reproduce en la pgina Web de inmediato
cuando se solicite. No obstante, para poder utilizar el vdeo de flujo en pginas Web, es necesario tener
acceso a Macromedia Servidor de comunicaciones de Flash, el nico servidor que puede transferir
contenido de Flash Video.
Para ms informacin sobre cmo utilizar Flash Video, consulte Insercin de contenido de Flash Video
en Utilizacin de Dreamweaver.
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 raz
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 opcin Apariencia determina el aspecto y
funcionamiento del componente de Flash Video que incluir el
contenido de Flash Video.
Para ms informacin sobre cmo seleccionar los diferentes
aspectos para los componentes de Flash Video, consulte
www.macromedia.com/go/flv_tutorial_es.

94

Tutorial: Adicin de contenido a las pginas

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

N OT A

"Total con aspecto" es el valor del ancho y alto del archivo FLV ms el
ancho y alto del aspecto seleccionado.
7.

En el resto de opciones, deje los valores predeterminados:


mantiene la misma relacin de aspecto entre el ancho y alto
del componente de Flash Video. Esta opcin est activada de forma
predeterminada.

Restringir

Reproduccin automtica especifica

si el archivo se va a reproducir al
abrir la pgina Web. Esta opcin est desactivada de forma
predeterminada.

S U G E R E N CI A

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


altura en pxeles del archivo FLV. Puede ajustar los valores
arbitrariamente para cambiar el tamao del Flash Video en su pgina
Web. Al aumentar las dimensiones de un vdeo, suele deteriorarse la
calidad del vdeo.

Puede hacer clic en


Detectar tamao
para especificar el
ancho y alto exacto
del archivo FLV. No
obstante, en
ocasiones
Dreamweaver no
puede determinar las
dimensiones del
archivo FLV. En
estos casos, deber
introducir
manualmente los
valores de ancho y
alto.

Rebobinado automtico especifica

si el control de reproduccin
vuelve al punto de inicio cuando finalice la reproduccin. Esta opcin
est desactivada de forma predeterminada.

Insercin de Flash Video

95

8.

Haga clic en Aceptar para cerrar el cuadro de dilogo y aadir el


contenido de Flash Video a la pgina Web.
El comando Insertar Flash Video crea un archivo de reproduccin de
vdeo SWF y un archivo de skin SWF que se utilizan para reproducir el
contenido de Flash Video en una pgina Web. (Quizs tenga que hacer
clic en el botn Actualizar del panel Archivos para ver los nuevos
archivos.) Estos archivos se almacenan en el mismo directorio que el
archivo HTML al que est aadiendo contenido de Flash Video (en
este caso, la carpeta raz cafe_townsend). Al cargar la pgina HTML
con el contenido de Flash Video, Dreamweaver carga estos archivos
como archivos dependientes (siempre que haga clic en S en el cuadro
de dilogo Colocar archivos dependientes).

9.

Guarde la pgina.

Insercin de texto
A continuacin, va a aadir texto a la pgina. 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).

96

Tutorial: Adicin de contenido a las pginas

Insercin del texto del cuerpo


1.

En el panel Archivos, localice el archivo sample_text.txt (en la carpeta


raz cafe_townsend) y haga doble clic en el icono del archivo para abrirlo
en Dreamweaver.
Esta ventana se muestra en la vista Cdigo y no se puede cambiar a la
vista Diseo (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 continuacin, elija Edicin > 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 grfico y el vdeo de Flash).

5.

Seleccione Edicin> Pegar.


El texto del archivo de texto aparece en la celda de la tabla seleccionada.

Insercin de texto

97

Dependiendo de la resolucin 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.

98

Asegrese de que el punto de insercin contina 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.

Tutorial: Adicin de contenido a las pginas

7.

En el inspector de propiedades (Ventana > Propiedades), seleccione


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 ampliacin situada en la esquina inferior
derecha del inspector de propiedades.

8.

Guarde la pgina.

Insercin de texto de una barra de


navegacin
A continuacin va a insertar texto para una barra de navegacin. Tenga en
cuenta que el texto no va a tener aspecto de barra de navegacin 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 marrn rojizo).

Insercin de texto

99

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

100 Tutorial: Adicin de contenido a las pginas

5.

Manteniendo el punto de insercin en la primera celda de la tabla de tres


columnas, haga clic en la etiqueta <td> del selector de etiquetas.

6.

En el inspector de propiedades (Ventana > Propiedades), seleccione


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


ampliacin situada en la esquina inferior derecha del inspector de
propiedades.
7.

Guarde la pgina.

Insercin de texto

101

Creacin de vnculos
Un vnculo es una referencia insertada en una pgina Web que seala a otro
documento. Puede convertir prcticamente cualquier tipo de activo en un
vnculo, pero el tipo de vnculo ms comn es el de texto.
Puede crear vnculos en cualquier etapa del proceso de creacin del sitio.
En este apartado va a crear vnculos para la barra de navegacin, aunque
todava no lo haya formateado para que aparezca como barra de
navegacin.
La carpeta raz de cafe_townsend incluye una pgina HTML completada a
la que puede enlazar con el vnculo (una pgina con un men de Cafe
Townsend). Esta pgina se utilizar para todos los vnculos de navegacin,
aunque si estuviera creando un sitio real tendra pginas diferentes para
estos vnculos.
1.

Con la pgina index.html abierta en la ventana de documento de


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

102 Tutorial: Adicin de contenido a las pginas

3.

En el cuadro de dilogo 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 pgina para anular la seleccin de la palabra


Cuisine. El texto Cuisine aparecer subrayado y de color azul, lo que
indica que se ha convertido en un vnculo.

5.

Repita los pasos anteriores para vincular cada palabra o conjunto de


palabras escritas para as poder navegar. Tendr que crear seis vnculos
ms: para Chef Ipsum, Articles, Special Events, Location, Menu, y
Contact Us.
Enlace con vnculos cada palabra o conjunto de palabras a la pgina
menu.html, y al crear los vnculos tengacuidado de no incluir los
espacios antes y despus de las palabras o grupos de palabras. Se trata
slo de un conjunto de vnculos ficticios; en un sitio real, enlazara cada
palabra de la barra de navegacin con una pgina especfica diferente.

N OT A

Los vnculos no funcionan cuando se hace clic en ellos en la ventana de


documento en Dreamweaver; slo funcionan en los navegadores. Para
asegurarse de que los vnculos funcionan correctamente, tendr que
obtener una vista previa de la pgina en un navegador. Para instrucciones
sobre cmo hacerlo, pase a Vista previa de la pgina en un navegador
en la pgina 103.
6.

Guarde la pgina.

Vista previa de la pgina en un


navegador
La vista de Diseo le da una idea aproximada de cmo se ver la pgina en
la Web, pero debe hacer una visualizacin 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 pginas HTML.
Dreamweaver procura producir HTML que tenga el aspecto ms 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 pgina una vez publicada, es visualizndola previamente en
un navegador.

Vista previa de la pgina en un navegador 103

1.

Asegrese de que el archivo index.html est activo en la ventana de


documento.

2.

Presione F12 (Windows) u Opcin+F12 (Macintosh).


Si no est abierto, su navegador principal se iniciar mostrando la
pgina index.

NO T A

Dreamweaver detecta automticamente 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 dilogo de preferencias de Vista previa en
el navegador, aada el navegador adecuado a la lista. Para ms
informacin, haga clic en el botn Ayuda del cuadro de dilogo
Preferencias.
3.

(Opcional) Vuelva a Dreamweaver para realizar los cambios necesarios.


A continuacin, guarde su trabajo y pulse de nuevo la tecla F12 para
asegurarse de que sus cambios surten efecto.

104 Tutorial: Adicin de contenido a las pginas

Ya ha creado una pgina Web con contenidos. El paso siguiente consiste en


formatear el contenido para darle un aspecto ms atractivo. En el siguiente
tutorial, aprender a formatear el texto que ha aadido utilizando hojas de
estilos CSS.

Vista previa de la pgina en un navegador 105

106 Tutorial: Adicin de contenido a las pginas

CAPTULO 6

Tutorial: Formatear la
pgina con CSS

Este tutorial explica cmo formatear el texto de la pgina utilizando hojas


de estilos en cascadas (CSS) con Dreamweaver. CSS le proporciona un
mayor control sobre el aspecto de la pgina, ya que le permite formatear y
situar el texto ofrecindole posibilidades que no existen en HTML.
En este tutorial va a realizar las tareas siguientes:
Localizacin 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 navegacin . . . . . . . . . . . . . . . . 122
(Opcional) Centrar el contenido de la pgina. . . . . . . . . . . . . . . . . .131

107

Localizacin de los archivos


Este tutorial comienza con la pgina ndice de Cafe Townsend a la que
aadi contenido en el apartado Captulo 5, Tutorial: Adicin de
contenido a las pginas. Si no complet ese tutorial, puede volver atrs y
completarlo antes de continuar o abrir la versin completada del tutorial y
trabajar con ella. Encontrar la versin 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
Captulo 3, Tutorial: Configuracin 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 Captulo 5, Tutorial: Adicin de contenido
a las pginas, algunos pasos e ilustraciones del tutorial no coincidirn
con lo que aparece en su pantalla.

108 Tutorial: Formatear la pgina con CSS

Repaso de la tarea
En este tutorial utilizar hojas de estilos en cascada (CSS) para formatear el
texto de la pgina de inicio de Cafe Townsend, un restaurante ficticio. Va a
crear distintos tipos de reglas CSS para formatear el texto del cuerpo.
Tambin va a formatear el texto del vnculo a la izquierda de la pgina,
creando una barra de navegacin. Cuando haya terminado, la pgina se
parecer al siguiente ejemplo:

Repaso de la tarea 109

Para ms informacin sobre CSS, pase a la seccin siguiente. Para empezar


a crear CSS directamente, pase a Crear una nueva hoja de estilos en
la pgina 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 pgina Web. Cuando se
utiliza CSS para formatear una pgina, se separa el contenido de la
presentacin. El contenido de su pgina (el cdigo HTML) reside en el
archivo HTML, mientras que las reglas CSS que definen la presentacin
del cdigo residen en otro archivo (una hoja de estilo externa) o en otra
parte del documento HTML (normalmente en la seccin <head>). Los
estilos CSS aportan gran flexibilidad y control sobre el aspecto exacto que
se busca en una pgina, desde la colocacin precisa de elementos hasta el
diseo de fuentes y estilos concretos.
CSS permite definir muchas propiedades que no se pueden controlar
utilizando slo HTML. Por ejemplo, puede especificar distintos tamaos y
unidades de fuente (pxeles, puntos, etc.) para el texto seleccionado. Si
utiliza CSS para definir el tamao de fuente en pxeles, tambin conseguir
un tratamiento ms coherente del diseo y el aspecto de la pgina en
mltiples navegadores.
Una regla de formato CSS consta de dos partes: el selector y la declaracin.
El selector es un trmino (como P, H1, el nombre de una clase o un ID)
que identifica el elemento formateado, y la declaracin define los
elementos de estilo. En el siguiente ejemplo, H1 es el selector y todo lo que
queda entre las llaves ({}) es la declaracin:
H1 {
font-size: 16 pxeles;
font-family: Helvetica;
font-weight: bold;
}

La declaracin, 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 tamao de 16 pxeles, fuente Helvetica y
negrita.

110

Tutorial: Formatear la pgina con CSS

La expresin en cascada hace referencia a la posibilidad de aplicar varios


estilos al mismo elemento o pgina Web. Por ejemplo, puede crear una
regla CSS que aplique color y otra que aplique los mrgenes y aplicarlas las
dos al mismo texto en una pgina. Los estilos definidos se distribuyen en
cascada hacia los elementos de la pgina Web, lo que le permite obtener
finalmente el diseo deseado.
Una de las grandes ventajas de las CSS reside en que pueden actualizarse
fcilmente; cuando actualiza una regla CSS en un sitio, el formato de todos
los documentos que usan ese estilo se actualiza automticamente con el
nuevo estilo.
Puede definir los siguientes tipos de reglas en Dreamweaver:

Las reglas CSS personalizadas, tambin 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 porcin de texto de
prrafo 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 combinacin particular de elementos o de otras formas selectores
segn 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 tambin pueden redefinir el formato de etiquetas
que contengan un atributo id especfico (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 ms informacin, consulte Aplicacin de formato a texto en


Dreamweaver en Utilizacin 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 prrafo. Al crear estilos en una
hoja de estilos externa, puede controlar el aspecto de varias pginas Web
desde un punto central, en ligar de definir estilos para cada pgina
individualmente.
1.

Seleccione Archivo> Nuevo.

2.

En el cuadro de dilogo Nuevo documento, seleccione Pgina bsica en


la columna Categora, seleccione CSS en la columna Pgina bsica y
haga clic en Crear.

Aparecer una hoja de estilos en blanco en la ventana de documento La


vista Diseo y los botones de vista de Cdigo estn desactivados. Las
hojas de estilos CSS son archivos slo texto, es decir, su contenido no se
puede ver a travs de un navegador.

112

Tutorial: Formatear la pgina con CSS

A ce r ca d e . ..

Ms informacin 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 pginas de un sitio
Web mediante un vnculo situado en la seccin head de un documento.
Las hojas de estilos CSS internas (o incrustadas) son grupos de reglas CSS incluidos en una etiqueta
style en la seccin head de un documento HTML. Por ejemplo, el siguiente ejemplo define el tamao de
la fuente de todo el texto del documento formateado con la etiqueta de prrafo:
<head>
<style>
p{
font-size:80px
}
</style>
</head>
Los estilos en lnea se definen con instancias especficas de etiquetas en un documento HTML. Por
ejemplo, <p style=font-size: 9px> define el tamao de la fuente slo para el prrafo formateado
con una etiqueta que contenga el estilo en lnea.
Dreamweaver representa la mayora de atributos de estilo aplicados y los muestra en la ventana de
documento. Tambin 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 pgina (Archivo > Guardar) como cafe_townsend.css.


Cuando guarde la hoja de estilos, asegrese de que la guarda en la
carpeta cafe_townsend (la carpeta raz de su sitio Web).

4.

Escriba el siguiente cdigo 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


cdigo que le darn opciones para completarlo. Presione Intro
(Windows) o Retorno (Macintosh) cuando vea el cdigo 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 lnea, despus de los


valores de propiedad.
Cuando haya terminado, el cdigo se parecer al siguiente ejemplo:

S UG E R E N CI A
114

5.
Para ms
informacin sobre
cualquier propiedad
de CSS, consulte la
gua de referencia de
OReilly que
acompaa a
Dreamweaver. Para
mostrar la gua,
seleccione Ayuda >
Referencia y
seleccione OReilly
CSS Reference en el
men emergente del
panel Referencia.

Guarde la hoja de estilos.

A continuacin va a adjuntar la hoja de estilos a la pgina index.html.

Adjuntar una hoja de estilos


Al adjuntar una hoja de estilos a una pgina Web, las reglas definidas en la
hoja de estilos se aplican a los elementos correspondientes de la pgina. Por
ejemplo, al adjuntar la hoja de estilos cafe_townsend.css a la pgina
index.html, todo el texto de prrafo (texto formateado con la etiqueta <p>
en el cdigo HTML) se formatear de acuerdo a la regla CSS definida.
1.

El la ventana de documento, abra el archivo de Cafe Townsend


index.html. (si ya est abierto, puede hacer clic en su ficha)

2.

Seleccione el texto del primer prrafo que peg en la pgina en el


apartado Captulo 5, Tutorial: Adicin de contenido a las pginas.

Tutorial: Formatear la pgina con CSS

3.

Consulte el inspector de propiedades y asegrese de que el prrafo est


formateado con la etiqueta de prrafo.
Si el men emergente Formato del inspector de propiedades dice
"Prrafo", significa que el prrafo est formateado con la etiqueta de
prrafo. Si el men emergente Formato del inspector de propiedades
dice "Ninguno" o algo diferente, seleccione Prrafo para formatear el
prrafo.

4.

Repita el paso 3 para el segundo prrafo.

5.

En el panel Estilos CSS (Ventana> Estilos CSS), haga clic en el botn


Adjuntar hoja de estilos en la esquina inferior derecha del panel.

6.

En el cuadro de dilogo Adjuntar hoja de estilos externa, haga clic en


Examinar y busque el archivo cafe_townsend.css que cre en el apartado
anterior.

7.

Haga clic en Aceptar.


El texto de la ventana de documento est formateado segn 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 pgina actualmente seleccionado o las reglas y
propiedades que afectan a todo un documento. Tambin le permite
modificar propiedades CSS sin tener que abrir una hoja de estilos externa.
1.

Asegrese de que la pgina 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 estn
en una hoja de estilos externa o en el mismo documento. En el panel
Todas las reglas ver dos categoras principales: una categora de
etiquetas <estilo> y una categora cafe_townsend.css.

3.

Haga clic en el signo ms (+) para ampliar la categora 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

116

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

Tutorial: Formatear la pgina con CSS

El color de fondo de la pgina se define en Captulo 4, Tutorial: Crear


un diseo de pgina basado en tablas utilizando el cuadro de dilogo
Modificar propiedades de la pgina. Al definir las propiedades de la
pgina con este mtodo, Dreamweaver escribe un estilo CSS interno al
documento.
5.

Haga clic en el signo ms (+) para ampliar la categora


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 prrafos 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 seleccin 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 seccin siguiente, va a utilizar los Estilos CSS para crear una
nueva regla. Es mucho ms 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 seccin 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 ms informacin sobre los diferentes
tipos de regla CSS, consulte Conocer las CSS en la pgina 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 dilogo 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.


Asegrese tambin de escribir el punto (.) delante de la palabra bold.
Todos los estilos de clase deben comenzar por un punto.

118

Tutorial: Formatear la pgina con CSS

4.

Seleccione cafe_townsend.css en el men emergente Definir en. Deber


estar seleccionado de forma predeterminada.

5.

Haga clic en Aceptar.


Aparecer el cuadro de dilogo Definicin 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 dilogo Definicin de reglas de CSS, siga este


procedimiento:

En el cuadro de texto Fuente, escriba Verdana, sans-serif.

En el cuadro de texto Tamao , introduzca 11 y seleccione pxeles en el


men emergente que aparece inmediatamente a la derecha.

En el cuadro de texto Alto de lnea, introduzca 18 y seleccione pxeles


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 ms
informacin sobre
cualquier propiedad
de CSS, consulte la
gua de referencia de
OReilly que
acompaa a
Dreamweaver. Para
mostrar la gua,
seleccione Ayuda >
Referencia y
seleccione OReilly
CSS Reference en el
men emergente del
panel Referencia.

7.

Haga clic en Aceptar.

8.

Haga clic en Todo en la parte superior del panel Estilos CSS.

9.

Haga clic en el signo ms (+) junto a la categora cafe_townsend.css si


todava no est expandida.
Ver que Dreamweaver ha aadido el estilo de clase .bold a la lista de
reglas definidas en la hoja de estilos externa. Si hace clic en la regla
.bold en el panel Todas las reglas, se mostrarn las propiedades de la
regla en el panel Propiedades. La nueva regla tambin aparece en el
men emergente Estilo del inspector de propiedades.

120 Tutorial: Formatear la pgina con CSS

Aplicar un estilo de clase al texto


Una vez creada una regla de clase, puede aplicarla a texto de prrafo.
1.

En la ventana de documento, seleccione las cuatro primeras palabras de


texto del primer prrafo. Cafe Townsends 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 prrafo.

4.

Guarde la pgina.

Aplicar un estilo de clase al texto

121

Formatear el texto de la barra de


navegacin
A continuacin va a utilizar CSS para aplicar estilos al texto del vnculo de
una barra de navegacin. Muchas pginas Web utilizan imgenes de
rectngulos coloreados con texto en su interior para crear una barra de
navegacin, pero con CSS todo lo que necesita es un texto de vnculo con
formato. Utilizando display: block y asignndole una anchura al
bloque, podr crear rectngulos sin tener que utilizar imgenes separadas.

Crear una nueva regla para la navegacin


1.

Abra el archivo cafe_townsend.css si todava no est abierto o haga clic


en su ficha para verlo.

2.

Defina una nueva regla escribiendo en el archivo el cdigo siguiente


despus del estilo de clase .bold:
.navigation {
}

Esta regla est vaca.


El cdigo del archivo ser parecido al del ejemplo siguiente:

122 Tutorial: Formatear la pgina con CSS

3.

Guarde el archivo cafe_townsend.css.


A continuacin, va a ver el panel Estilos CSS para aadir propiedades a
la regla.

4.

Abra el archivo index.htm si an no est abierto.

5.

En el panel Estilos CSS, asegrese 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 dilogo Definicin de reglas de CSS, siga este


procedimiento:

En el cuadro de texto Fuente, escriba Verdana, sans-serif.

Seleccione 16 en el men emergente Tamao, y seleccione pxeles en el


men emergente situado inmediatamente a la derecha del men
emergente Tamao.

Seleccione Normal en el men emergente Estilo.

Seleccione Ninguno en la lista Decoracin.

Seleccione Negrita en el men emergente Grosor.

Escriba #FFFFFF en el cuadro de texto Color.

Formatear el texto de la barra de navegacin 123

S UG E R E N CI A

7.
Para ms
informacin sobre
cualquier propiedad
de CSS, consulte la
gua de referencia de
OReilly que
acompaa a
Dreamweaver. Para
mostrar la gua,
seleccione Ayuda >
Referencia y
seleccione OReilly
CSS Reference en el
men emergente del
panel Referencia.

Haga clic en Aceptar.


A continuacin, va a utilizar el panel Estilos CSS para aadir ms
propiedades a la regla .navigation.

8.

En el panel Estilos CSS, asegrese de que la regla .navigation est


seleccionada y haga clic en Mostrar vista de lista.

124 Tutorial: Formatear la pgina con CSS

La vista de lista reconoce el panel Propiedades y muestra una lista


ordenada alfabticamente de todas las propiedades disponibles (a
diferencia de la vista anterior de propiedades establecidas, que slo
muestra las propiedades ya definidas).
9.

Haga clic en la columna a la derecha de la propiedad backgroundcolor.


Para ver el texto completo de una propiedad, coloque el ratn sobre la
propiedad.
#993300 como valor hexadecimal y presione la tecla Intro
(Windows) o Retorno (Macintosh).

10. Escriba

Localice la propiedad display (es posible que tenga que desplazarse


hacia abajo), haga clic una vez en la columna de la derecha y seleccione
block en el men emergente.

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
Retorno (Macintosh).

13.

SUGERENCIA

11.

Para ver cmo


afecta su trabajo a la
hoja de estilos
externa, mientras
trabaja mantenga
abierto el archivo
cafe_townsend.css
en la ventana de
documento. Cuando
realice una seleccin
en el panel Estilos
CSS, ver cmo
Dreamweaver
escribe al mismo
tiempo el cdigo de
CSS en la hoja de
estilos.

Localice la propiedad width, haga clic una vez en la columna de la


derecha, introduzca 140 en el primer cuadro de texto, seleccione pxeles
en el men emergente y presione la tecla Intro (Windows) o Retorno
(Macintosh).

Formatear el texto de la barra de navegacin 125

14. Haga

clic en Mostrar propiedades establecidas para que slo aparezcan


las propiedades establecidas en el panel Propiedades.

15.

Haga clic en el archivo cafe_townsend.css para verlo. Como puede ver,


Dreamweaver ha aadido al archivo todas las propiedades definidas.

16.

Guarde el archivo cafe_townsend.css y cirrelo.

Ya ha creado una regla para formatear el texto de la barra de navegacin.


A continuacin va a aplicar la regla a los vnculos seleccionados.

126 Tutorial: Formatear la pgina con CSS

Aplique la regla
1.

Con la pgina index.html abierta en la ventana de documento, haga clic


en la palabra Cuisine para que el punto de insercin quede en algn
lugar de la palabra.

2.

En el selector de etiquetas, haga clic en la etiqueta <a> ms hacia la


derecha.
Esta accin selecciona todo el texto de una etiqueta <a> especfica o
vnculo.

3.

En el inspector de propiedades (Ventana > Propiedades), seleccione


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 botn
de la barra de navegacin, de acuerdo a las propiedades de la regla
.navigation definida en la seccin anterior.

Formatear el texto de la barra de navegacin 127

4.

Repita los pasos 1 a 3 para cada vnculo de la barra de navegacin.


Debe asignarle un estilo de clase de navegacin a cada etiqueta <a> o
vnculo; por ello, es importante que utilice el selector de etiquetas para
seleccionar cada vnculo individualmente y que despus asigne los
estilos de clase de uno en uno.

Si tiene problemas para formatear el texto del vnculo, asegrese de que


hay un espacio (no un salto de lnea) entre cada palabra o palabras
vinculadas. Asegrese tambin de que el espacio entre los dos vnculos
no forma parte de los mismos. Si forma parte de stos, seleccione
cuidadosamente el espacio en cuestin, borre el cuadro de texto
Vnculo en el inspector de propiedades y presione Intro (Windows) o
Retorno (Macintosh).
5.

Cuando haya terminado de formatear todas las palabras para la barra de


navegacin, guarde la pgina y abra una vista previa de su trabajo en un
navegador (Archivo > Vista previa en el navegador).
Si lo desea, haga clic en los vnculos para comprobar que funcionan.

128 Tutorial: Formatear la pgina con CSS

Aadir un efecto sustitucin


A continuacin va a aadir un efecto sustitucin de manera que el color de
fondo de los bloques de la barra de navegacin cambie cuando el puntero
del ratn pase sobre uno de los vnculos. Para aadir el efecto sustitucin,
aada 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, basndose no en el cdigo HTML del documento en s sino en otras condiciones
externas aplicadas por el navegador. Las pseudoclases pueden ser dinmicas, en el sentido de que un
elemento de la pgina podra adquirir o peder la pseudoclase mientras el usuario interacta con el
documento.
La pseudoclase :activable produce un cambio en un elemento formateado de la pgina cuando el usuario
mantiene el ratn 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 cambiarn segn las propiedades de la regla .navigation:activable.
1.

Abra el archivo cafe_townsend.css.

2.

Seleccione toda la regla .navigation.

3.

Copie el texto (Edicin > Copiar).

Formatear el texto de la barra de navegacin 129

4.

Haga clic una vez al final de la regla y presione Intro (Windows) o


Retorno (Macintosh) unas cuantas veces para crear ms espacio.

5.

Pegue (Edicin > pegar) el texto copiado en el espacio que acaba de


crear.

6.

Aada la pseudoclase :activable al selector pegado de .navigation


siguiendo este procedimiento:

130 Tutorial: Formatear la pgina con CSS

7.

En la nueva regla .navigation:activable, sustituya el color de fondo actual


(#993300) por #D03D03.

8.

Guarde el archivo y cirrelo.

9.

Abra el archivo index.html en la ventana de documento y compruebe la


vista previa de la pgina en un navegador (Archivo > Vista previa en el
navegador.
Cuando mantenga el ratn sobre cualquiera de los vnculos, podr ver
el efecto sustitucin.

(Opcional) Centrar el contenido


de la pgina
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


pgina dentro del contexto de las celdas de tabla cuando se utiliza el
mtodo descrito en esta seccin. Si no le gusta el resultado al consultar la
vista previa en el navegador, ignore esta seccin y deje el contenido de su
pgina alineado a la izquierda.

(Opcional) Centrar el contenido de la pgina

131

1.

Con la pgina index.html abierta en la ventana de documento de


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 seleccin, haga clic en la vista Cdigo en la
parte superior de la ventana de documento.

132 Tutorial: Formatear la pgina con CSS

2.

En el inspector de propiedades (Ventana > Propiedades), haga clic en el


botn Alinear al centro.

Dreamweaver inserta las etiquetas <div> de CSS que centran el


contenido del cuerpo de la pgina. En la vista Diseo, aparece una lnea
de puntos alrededor de la zona centrada por las etiquetas <div>.
3.

Guarde la pgina.

Su pgina ya est terminada. El ltimo paso para crear su sitio Web es


publicar la pgina. Para publicar la pgina, 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 pgina 133

134 Tutorial: Formatear la pgina con CSS

CAPTULO 7

Tutorial: Publicacin
del sitio

En este tutorial se explica cmo definir un sitio remoto con Macromedia


Dreamweaver 8 y cmo publicar sus pginas 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 pginas en un
navegador.
En este tutorial va a realizar las tareas siguientes:
Los sitios remotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Definir una carpeta remota. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Cargar los archivos locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Solucin de problemas de configuracin de carpetas remotas
(opcional) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Los sitios remotos


Despus 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, produccin, colaboracin y publicacin
(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 an no tiene acceso a dicho
servidor, pngase en contacto con su ISP, su cliente o el administrador del
sistema.

135

Tambin puede ejecutar un servidor Web en su equipo local, como IIS


(Windows) o Apache (Macintosh). Para ms informacin sobre la
configuracin de un servidor Web en el equipo local, consulte Apndice B,
Instalacin de un servidor Web, en la pgina 247.
El procedimiento descrito en este tutorial funciona mejor si la carpeta raz
remota est vaca. Si el sitio remoto ya contiene archivos, cree una carpeta
vaca en el sitio remoto (en el servidor) y utilice esa carpeta vaca como
carpeta raz remota.
Antes de continuar tambin necesita haber definido un sitio local. Para ms
informacin, consulte Tutorial: Configuracin del sitio y de los archivos
del proyecto en la pgina 51.
Para ms informacin sobre sitios de Dreamweaver, consulte Captulo 2,
Configuracin de un sitio de Dreamweaver en Utilizacin de
Dreamweaver.

Definir una carpeta remota


A continuacin va a definir una carpeta remota para poder publicar sus
pginas 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 enve a la carpeta remota son copias
de los archivos y subcarpetas creadas localmente.
1.

En el servidor remoto, cree una carpeta vaca dentro de la carpeta raz


Web del servidor.
Llame a la nueva carpeta vaca cafe_townsend (el mismo nombre que
su carpeta raz local).

136 Tutorial: Publicacin del sitio

A c e r ca d e .. .

Crear una carpeta remota con Dreamweaver Si Dreamweaver es su nico mtodo de acceso al
servidor remoto, no podr crear una carpeta vaca en el servidor remoto hasta que haya completado la
configuracin remota en Dreamweaver y se haya establecido una conexin. Si se fuera el caso, puede
definir su directorio de servidor como carpeta remota o crear una carpeta remota despus de haber
establecido una conexin con el servidor. En cualquier caso, siga las instrucciones de este tutorial hasta
que est conectado a un servidor remoto. Una vez establecida la conexin, puede usar el panel Archivos
de Dreamweaver para crear una nueva carpeta remota.
Al establecer una conexin 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 simultneamente la Vista local y la Vista remota.
Para aadir una carpeta vaca en Vista remota, muestre primero la Vista remota siguiendo uno de los
mtodos descritos anteriormente. (Si al principio no puede ver su conexin, haga clic en Actualizar en la
barra de herramientas del panel Archivos.) Cuando vea que est conectado al servidor Web, haga clic
con el botn derecho (Windows) o haga clic manteniendo presionada la tecla de Control (Macintosh) en
Vista remota y seleccione Nueva carpeta.
Botn Actualizar

Botn Expandir/contraer

Para ms informacin, consulte Captulo 4, Administracin de archivos en Utilizacin de Dreamweaver.

2.

En Dreamweaver, seleccione Sitio > Administrar sitios.

3.

En el cuadro de dilogo Administrar sitios, seleccione el sitio de Cafe


Townsend.
Si todava no ha definido el sitio de Cafe Townsend, cree una carpeta
local para el sitio antes de continuar. Para ms informacin, consulte
Tutorial: Configuracin del sitio y de los archivos del proyecto en
la pgina 51.

4.

Haga clic en Editar.

5.

En el cuadro de dilogo Definicin del sitio, haga clic en la ficha


Avanzadas si las opciones avanzadas no estn visibles.

Definir una carpeta remota 137

6.

Seleccione Datos remotos en la lista Categora que aparece en la parte


izquierda.

7.

Seleccione una opcin de acceso.


Los mtodos ms habituales para conectarse a un servidor en Internet
son FTP y SFTP; el mtodo ms 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 opcin debe elegir,
consulte con el administrador del sistema del servidor.
Para ms informacin, haga clic en la Ayuda del cuadro de dilogo.

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 raz FTP hasta la carpeta raz 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 contrasea en los cuadros de


texto correspondientes.

Si el servidor admite SFTP, seleccione la opcin Utilizar FTP


seguro (SFTP).

Haga clic en Prueba para comprobar la conexin.

Si no consigue establecer conexin, consulte con el administrador


del sistema.

Para ms informacin, haga clic en la Ayuda del cuadro de dilogo.


9.

Si elige Local/red, haga clic en el icono de carpeta situado junto al


cuadro de texto y acceda a la carpeta raz del sitio remoto.
Para ms informacin, haga clic en la Ayuda del cuadro de dilogo.

10. Haga

clic en Aceptar.

Dreamweaver crea una conexin con la carpeta remota.


11.

138 Tutorial: Publicacin del sitio

Haga clic en Listo para cerrar el cuadro de dilogo Administrar sitios.

Cargar los archivos locales


Despus de configurar las carpetas local y remota, puede cargar los archivos
de la carpeta local al servidor Web. Para que las pginas sean accesibles
pblicamente, debe cargarlas incluso aunque el servidor Web se ejecute en
el equipo local.
1.

En el panel Archivos (Windows > Archivos), seleccione la carpeta raz


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 pgina 136. Esta operacin 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

Solucin de problemas de
configuracin de carpetas
remotas (opcional)
Un servidor Web se puede configurar de muchas formas. En la siguiente
lista se ofrece informacin sobre algunos problemas habituales que pueden
surgir al configurar una carpeta remota y sobre cmo solucionarlos:

Es posible que la implementacin 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 implementacin FTP de Dreamweaver, debe conectar con la


carpeta raz 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.)
Asegrese de indicar la carpeta raz del sistema remoto como el
directorio del servidor.
Si tiene algn 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 raz remota.
Por ejemplo, si la carpeta raz 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 apstrofo ('). Los caracteres especiales en los nombres de archivo
o carpeta tambin pueden impedir que Dreamweaver cree un mapa del
sitio.

140 Tutorial: Publicacin del sitio

Si experimenta problemas con nombres de archivo largos, acrtelos.


En Macintosh, los nombres de archivo no pueden tener ms de
31 caracteres.

Muchos servidores utilizan vnculos simblicos (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 vnculo con cualquier parte del
servidor. En la mayora de los casos, estos alias no tienen ninguna
repercusin sobre la capacidad de establecer conexin 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 ms informacin, 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.

Solucin de problemas de configuracin de carpetas remotas (opcional)

141

142 Tutorial: Publicacin del sitio

PARTE 3

Tutoriales avanzados
La Parte Tres de este libro incluye tutoriales que presentan funciones
avanzadas de Dreamweaver. No se necesita ningn conocimiento previo de
HTML ni de ningn otro lenguaje para realizar estos tutoriales, pero
deber tener presente que los tutoriales de esta parte son ms complejos
que los de la parte anterior.
Esta parte contiene las siguientes secciones:
Tutorial: Utilizacin de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Tutorial: Crear un diseo de pgina basado en CSS . . . . . . . . . . 159
Tutorial: Visualizacin de datos XML. . . . . . . . . . . . . . . . . . . . . . . . 183
Tutorial: Desarrollo de una aplicacin Web . . . . . . . . . . . . . . . . . 207

143

CAPTULO 8

Tutorial: Utilizacin de
cdigo

A medida que aade texto, imgenes y otro contenido a una pgina Web,
Dreamweaver 8 genera cdigo HTML. En este tutorial se explica cmo
utilizar la vista Cdigo para mostrar el cdigo subyacente de un
documento, as como para aadir y editar el cdigo 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: Configuracin del sitio y de los archivos del
proyecto en la pgina 51. A continuacin, 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 Captulo 6, Tutorial:
Formatear la pgina con CSS, en la pgina 107.
N OT A

Si comienza este tutorial con el archivo completado index_code.html y no


con el archivo index.html de Captulo 6, Tutorial: Formatear la pgina con
CSS, en la pgina 107, algunos pasos e ilustraciones del tutorial no
coincidirn con lo que aparece en su pantalla.

En este tutorial va a realizar las tareas siguientes:


Consulta del cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Cambio al espacio de trabajo de edicin de cdigo (slo
Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Aadir una etiqueta con el Selector de etiquetas . . . . . . . . . . . . 148
Edicin de una etiqueta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Consulta de informacin sobre una etiqueta . . . . . . . . . . . . . . . . 153
Aadir una imagen con sugerencias para el cdigo . . . . . . . . . . 154
Comprobacin de los cambios . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Imprimir el cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

145

Consulta del cdigo


Dreamweaver permite ver la pgina de dos formas distintas: la vista Diseo
(donde el documento aparece de forma muy similar a como lo hara en un
navegador) y la vista Cdigo (donde se puede ver el cdigo HTML
subyacente). Tambin puede utilizar una vista dividida que muestra
simultneamente las vistas de Cdigo y de Diseo.
1.

NO T A

Si no complet el archivo index.html a lo largo de los tutoriales anteriores,


consulte la introduccin a este tutorial, donde se indica cmo proceder.
2.

NO TA
146 Tutorial: Utilizacin de cdigo

Asegrese de que el archivo index.html est activo en la ventana de


documento.

En la barra de herramientas Documento, haga clic en Mostrar vistas de


cdigo y diseo (etiquetado con el texto Dividir).

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


de herramientas > Documento.

La ventana se divide y muestra tanto la vista Diseo como el cdigo


HTML subyacente.
Botn
Actualizar

Puede editar el cdigo en la vista Cdigo. Los cambios realizados en el


cdigo no se mostrarn en la vista Diseo hasta que haga clic en
Actualizar en la barra de herramientas Documento o haga clic en
cualquier punto de la vista Diseo.
3.

(Opcional) Para mostrar slo la vista Diseo, haga clic en vista Diseo.

4.

(Opcional) Para mostrar slo la vista Cdigo, haga clic en vista Cdigo.

Cuando trabaje con sus propias pginas, podr utilizar la vista que le resulte
ms cmoda. En la mayora de los tutoriales de esta gua se presupone que
el usuario emplea la vista Diseo.

Consulta del cdigo 147

Cambio al espacio de
trabajo de edicin de cdigo
(slo Windows)
Si no lo hizo durante la instalacin, 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 codificacin 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 edicin de cdigo:

Seleccione Ventana > Diseo del espacio de trabajo > Codificador.

Aadir una etiqueta con el


Selector de etiquetas
A continuacin, va a utilizar el Selector de etiquetas para ajustar una
etiqueta div alrededor de una de las imgenes de la pgina. Despus podr
asignarle a la imagen mrgenes, bordes o colores. Existen diversas maneras
de ajustar una etiqueta div alrededor de una imagen; en esta seccin se
explica cmo utilizar el Selector de etiquetas, que ayuda a insertar cualquier
etiqueta y a aadir los valores de atributo adecuados.
1.

148 Tutorial: Utilizacin de cdigo

Abra el archivo index.html si an no est abierto.

2.

En la vista Diseo, haga clic en el grfico de rtulo de Cafe Townsend


(banner_graphic.jpg) para seleccionarlo.

3.

Cambie a la vista Cdigo haciendo clic en vista Cdigo en la barra de


herramientas Documento, o seleccionando Ver > Vista cdigo.
El cdigo de la imagen seleccionada aparecer seleccionado en la vista
Cdigo. Asegrese de que la etiqueta img completa est seleccionada,
incluidos los parntesis angulares de apertura y cierre.

4.

Seleccione Ver > Opciones de vista de Cdigo > Ajustar texto para
activar el ajuste del texto en el caso de que no est activado.

5.

Haga clic con el botn derecho del ratn (Windows) o, con la tecla
Control presionada (Macintosh), haga clic en el texto seleccionado y, a
continuacin, seleccione Insertar etiqueta en el men emergente.
Aparecer el Selector de etiquetas.

6.

En el Selector de etiquetas, expanda la categora Etiquetas HTML,


a continuacin Formato y diseo y, por ltimo, General.

Aadir 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

Tambin puede seleccionar la categora Etiquetas HTML y, en el panel derecho,


la etiqueta div, sin expandir primero Formato y diseo.
7.

Haga clic en Insertar.


Aparecer un editor de etiquetas para la etiqueta div.

150 Tutorial: Utilizacin de cdigo

8.

En el editor de etiquetas, seleccione la categora 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 pgina y la ajusta alrededor


de la etiqueta de imagen.

10. Haga
11.

clic en Cerrar para cerrar el Selector de etiquetas.

Guarde la pgina.

Edicin de una etiqueta


A continuacin, utilizar el inspector de etiquetas para modificar
rpidamente los atributos de una etiqueta. El inspector de etiquetas
muestra los atributos de la etiqueta seleccionada en la ventana de
documento.
1.

Abra la pgina index.html en la vista Cdigo si an 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 alfabtico.

Edicin de una etiqueta

151

5.

En la vista Cdigo de la ventana de documento, haga clic en cualquier


lugar situado entre los parntesis de apertura y cierre de cualquier
etiqueta.
La ficha Atributos del inspector de etiquetas muestra informacin sobre
los atributos HTML de las etiquetas.

6.

Sin dejar la vista Cdigo, encuentre y haga clic en la etiqueta img de la


imagen banner_graphic.jpg en la parte superior de la pgina.

La ficha Atributos del inspector de etiquetas muestra informacin sobre


los atributos de la etiqueta img.
7.

En el inspector de etiquetas, haga clic en el cuadro de texto vaco situado


junto al atributo alt y escriba Cafe Townsend; despus, presione Intro
(Windows) o Retorno (Macintosh).

Dreamweaver muestra el nuevo valor en el inspector de etiquetas y


modifica el cdigo en la ventana de documento.
8.

152 Tutorial: Utilizacin de cdigo

Guarde la pgina.

Consulta de informacin sobre


una etiqueta
Si necesita ayuda con los atributos y los valores de atributo de una etiqueta,
puede consultar informacin de referencia en Dreamweaver.
1.

Abra la pgina index.html en la vista Cdigo si an 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 botn derecho del ratn (Windows) o, con la tecla
Control presionada (Macintosh), haga clic en el texto seleccionado y a
continuacin elija Referencia en el men emergente.

Se abrir el panel Referencia y mostrar informacin sobre el atributo


alt.
NO T A

Tambin puede seleccionar Ventana > Referencia para acceder al panel


Referencia.

Consulta de informacin sobre una etiqueta 153

4.

Para informacin sobre otra etiqueta u otro atributo, seleccione la


etiqueta o el atributo en el men emergente correspondiente del panel
Referencia.

Aadir una imagen con


sugerencias para el cdigo
Para aadir cdigo a la pgina manualmente, haga clic en la vista Cdigo y
comience a escribir. Puede utilizar la funcin de sugerencias para el cdigo
si desea acelerar su trabajo.
En esta leccin, utilizar sugerencias para el cdigo y aadir la imagen del
cartel de la calle a la pgina ndice de Cafe Townsend.
1.

Abra la pgina index.html si an no est abierta.

2.

En la vista Diseo, seleccione la imagen street_sign.jpg (debajo del


marcador de posicin Flash Video) y pulse Eliminar.
A continuacin va a utilizar sugerencias para el cdigo para volver a
insertar una imagen, en lugar de arrastrarla desde el panel Activos como
en el apartado Captulo 5, Tutorial: Adicin de contenido a
las pginas, en la pgina 79.

154 Tutorial: Utilizacin de cdigo

3.

Cambie a la vista Cdigo haciendo clic en vista Cdigo en la barra de


herramientas Documento, o seleccionando Ver > Vista cdigo.
En vista Cdigo, el punto de insercin deber estar entre una etiqueta
de apertura de prrafo y una de cierre, tal y como se muestra a
continuacin:

Si no ve una etiqueta de apertura de prrafo y una de cierre antes de la


etiqueta de cierre de celda de la tabla </td>, escrbalas como se indica a
continuacin:

Coloque el punto de insercin 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
(&nbsp;).

5.

Con el punto de insercin entre la etiqueta <p> de apertura y la etiqueta


</p> de cierre, escriba un parntesis angular de apertura (<).

Aadir una imagen con sugerencias para el cdigo 155

Aparecer una lista de etiquetas en el punto de insercin.

NO TA

SUGERENCIA

Para desplazarse
rpidamente a una
etiqueta, escriba las
primeras letras del
nombre de la misma.

Puede establecer la duracin de la demora antes de que aparezca la lista


seleccionando Edicin > Preferencias (Windows) o Dreamweaver >
Preferencias (Macintosh) y, a continuacin, seleccionando Sugerencias
para el cdigo en la lista Categora de la izquierda. En la vista Cdigo,
puede mostrar un men de sugerencias para el cdigo 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


etiqueta.

8.

Comience a escribir src y presione Intro (Windows) o Retorno


(Macintosh) cuando est seleccionado el atributo src en el men de
sugerencias.

La palabra Examinar aparece seleccionada bajo el cdigo que acaba de


escribir.
9.

156 Tutorial: Utilizacin de cdigo

Presione Intro (Windows) o Retorno (Macintosh) para localizar un


archivo.

10. En

el cuadro de dilogo Seleccionar archivo, acceda al archivo


street_sign.jpg (est en la carpeta imgenes de la carpeta raz
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 insercin aparecer despus de las comillas de cierre.
11.

Presione la barra espaciadora, seleccione el atributo alt en el men de


sugerencias y a continuacin presione Intro (Windows) o Retorno
(Macintosh).

12. Deje

las comillas vacas, ya que esta imagen es nicamente una


ilustracin.
Utilice la tecla de flecha derecha para mover el punto de insercin a la
derecha de las comillas.

13.

Escriba un parntesis angular de cierre (>) para completar la etiqueta.

14. Guarde

la pgina.

Aadir una imagen con sugerencias para el cdigo 157

S U G E R E N C IA

Para aadir un
atributo a una
etiqueta ya creada,
coloque el punto de
insercin justo
despus del valor del
atributo final de la
etiqueta y presione la
barra espaciadora.
Cuando aparezca
una lista de atributos,
aada un atributo y
especifique su valor
si lo tiene.

Comprobacin de los cambios


Despus de realizar cambios en el cdigo, puede ver inmediatamente los
resultados.
Para obtener una representacin visual del cdigo, siga uno de
estos procedimientos:

Haga clic en la vista Diseo o en las vistas Cdigo y Diseo (etiquetado


con el texto Dividir) en la barra de herramientas Documento.

Previsualice la pgina en un navegador Web presionando F12


(Windows) u Opcin+F12 (Macintosh). Para cerrar el navegador y
volver al cdigo, presione Alt+F4 (slo Windows).

Imprimir el cdigo
Puede imprimir el cdigo para editarlo fuera de lnea, archivarlo o
distribuirlo.
Para imprimir cdigo:

158 Tutorial: Utilizacin de cdigo

1.

Abra una pgina en la vista Cdigo.

2.

Seleccione Archivo > Imprimir cdigo.

3.

Especifique las opciones de impresin y haga clic en Aceptar (Windows)


o en Imprimir (Macintosh).

CAPTULO 9

Tutorial: Crear un diseo de


pgina basado en CSS

En Captulo 4, Tutorial: Crear un diseo de pgina basado en tablas ha


aprendido a utilizar las funciones del diseo de tabla de Dreamweaver para
crear un diseo de pgina. En este tutorial va a aprender a utilizar hojas de
estilos en cascada (CSS) para crear un diseo similar. Muchos diseadores
prefieren los diseos basados en CSS, porque CSS ofrece un mayor control
sobre la situacin de elementos, reduce la cantidad de cdigo necesario y
permite formatear bloques de diseo con mrgenes, bordes, colores, etc..
Si no ha definido un sitio de Dreamweaver ni creado la carpeta raz local
cafe_townsend, deber hacerlo antes de continuar. Para instrucciones,
consulte Captulo 3, Tutorial: Configuracin del sitio y de los archivos del
proyecto.
En este tutorial, llevar a cabo las tareas siguientes:
Diseo de pgina basado en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Examen de la maqueta de diseo. . . . . . . . . . . . . . . . . . . . . . . . . . . .161
Creacin y almacenamiento de una pgina nueva . . . . . . . . . . . . 163
Insertar capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Aadir color a la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

159

Diseo de pgina basado en


CSS
Muchos sitios Web utilizan diseos basados en tablas para mostrar la
informacin en las pginas. Las tablas son tiles a la hora de presentar datos
tabulares (como filas y columnas de elementos recurrentes) y son muy
fciles de introducir en la pgina. Pero las tablas tambin tienden a generar
una gran cantidad de cdigo que es difcil de leer y de mantener. Adems,
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 pginas.
Un diseo basado en CSS, es decir, un diseo que utiliza elementos de
bloques en lugar de filas y columnas de tabla, contiene mucho menos
cdigo que un diseo similar basado en tablas. Los diseos basados en CSS
suelen utilizar etiquetas <div> en lugar de <table> para crear los bloques
CSS utilizados para el diseo. Puede colocar estos bloques CSS en
cualquier lugar de la pgina y asignarles propiedades como bordes,
mrgenes, colores de fondo, etc. Adems, a los usuarios que utilizan
lectores de pantalla les ser mucho ms sencillo acceder al contenido de las
pginas Web creadas con CSS, porque el cdigo es ms sencillo y ms
corto.
Dreamweaver le permite utilizar capas. Una capa de Dreamweaver es un
elemento de pgina HTML que se puede colocar en cualquier lugar del
documento. Especficamente, es una etiqueta <div> (o cualquier otra
etiqueta) con una posicin absoluta. Las capas se arrastran hasta su pgina
con Dreamweaver y despus las coloca donde quiera. Las capas funcionan
como bloques de contenido que pueden albergar activos como imgenes,
archivos Flash, texto, etc.
Las capas de Dreamweaver son elementos que tienen una posicin
absoluta. Es decir, tienen una posicin especfica que se define de manera
relativa a los mrgenes superior e izquierdo de la pgina. No puede crear un
diseo basado en CSS con capas y despus centrar el contenido de la
pgina. Por ello, el diseo de este tutorial ser algo diferente al creado en
Captulo 4, Tutorial: Crear un diseo de pgina basado en tablas.

Para ms informacin sobre capas de Dreamweaver, consulte Captulo 7,


Diseo de pginas con CSS en Utilizacin de Dreamweaver.

160 Tutorial: Crear un diseo de pgina basado en CSS

Examen de la maqueta de diseo


N OT A

Si ya ha completado el apartado Captulo 4, Tutorial: Crear un diseo de


pgina basado en tablas y ha examinado el diseo de maqueta, puede
pasar a la seccin siguiente para empezar a crear su diseo basado en
CSS.

Lo habitual no es empezar a construir un sitio Web iniciando


Dreamweaver y creando pginas directamente. Los primeros pasos para
crear un sitio Web debe darlos sobre una hoja de papel, o en una aplicacin
de edicin grfica como Macromedia Fireworks. Los diseadores grficos
suelen crear un boceto artstico general del sitio Web (tambin conocido
como maqueta), con el fin de mostrrselo al cliente y asegurarse de que la
idea inicial para el sitio Web recibe la aprobacin del cliente.
Un comp est formado por una cantidad indeterminada de elementos de
pginas que el cliente ha solicitado para su sitio Web. Por ejemplo, el
cliente podra haber dicho: "quiero un logotipo en la parte superior de la
pgina, una zona de navegacin que enlace con estas otras pginas, una
seccin para una tienda en lnea y una parte donde pueda insertar
videoclips. A partir de esto, el diseador comienza a planificar el diseo de
la pgina y realiza bocetos de pginas de muestra que cumplen los
requisitos del cliente.

Examen de la maqueta de diseo

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 diseador Web consiste en transformar el comp en una
pgina web activa (probablemente contando con la ayuda de otros
diseadores grficos y desarrolladores de Flash).

Ver que el diseador grfico le ha proporcionado un comp para una


pgina Web que incluye varias zonas de contenido, as como algunas ideas
grficas. A lo largo de los apartados siguientes, va a utilizar Dreamweaver
para desarrollar este diseo.

162 Tutorial: Crear un diseo de pgina basado en CSS

Tambin 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 Captulo 3, Tutorial: Configuracin del sitio y
de los archivos del proyecto. Si lo prefiere, tambin puede imprimir el
comp consultarlo mientras crea la pgina.

Creacin y almacenamiento de
una pgina nueva
Despus de crear un sitio nuevo y examinar los comps, ya puede empezar a
crear pginas Web. Comience creando una pgina nueva y guardndola en
la carpeta raz local cafe_townsend de su sitio Web. Ms adelante esta
pgina ser la pgina de inicio de Cafe Townsend, un restaurante ficticio.
Si no ha creado una carpeta raz local llamada cafe_townsend, deber
hacerlo antes de continuar. Para instrucciones, consulte Captulo 3,
Tutorial: Configuracin del sitio y de los archivos del proyecto.
1.

En Dreamweaver, Seleccione Archivo > Nuevo.

2.

En la ficha General del cuadro de dilogo Nuevo documento, seleccione


Pgina bsica en la lista Categora, seleccione HTML en la lista Pgina
bsica y haga clic en Crear.

3.

Seleccione Archivo > Guardar como.

4.

En el cuadro de dilogo Guardar como, busque y abra la carpeta


cafe_townsend que defini como carpeta raz local del sitio.
Esta carpeta la cre en Captulo 3, Tutorial: Configuracin 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 ttulo en la parte
superior de la ventana de la aplicacin, entre parntesis.

Creacin y almacenamiento de una pgina nueva 163

6.

En el cuadro de texto Ttulo del documento en la parte superior del


nuevo documento, escriba Cafe Townsend.

ste es el ttulo de la pgina (distinto al nombre de archivo). Los


visitantes del sitio vern este ttulo en la barra del ttulo del navegador
cuando accedan a ella a travs de su navegador Web.
7.

Seleccione Archivo > Guardar para guardar la pgina.

Insertar capas
A continuacin, va a insertar capas en la pgina. Una capa es un elemento
con posicin absoluta que puede utilizar para albergar imgenes, texto
archivos Flash y otro tipo de contenido. Para ms informacin sobre capas,
consulte Diseo de pgina basado en CSS en la pgina 160.

Dibujar una capa nueva


1.

Con la pgina index_css.html abierta en la ventana de documento,


seleccione el modo de diseo en la barra Insertar.

2.

Haga clic en Dibujar capa.

164 Tutorial: Crear un diseo de pgina basado en CSS

El puntero del ratn se convertir en un puntero en cruz cuando lo


mueva sobre la pgina.
3.

Arrastre una capa de cualquier tamao sobre la pgina y suelte el botn


del ratn.

4.

Haga clic en el manejador de seleccin 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 tamao y la situacin a la nueva capa


banner_graphic. La capa banner_graphic tiene 700 pxeles de ancho
por 90 pxeles de alto. Adems, est situada a 20 pxeles del margen
izquierdo de la pgina y a 20 del margen superior de la pgina.

Insertar capas 165

S U G E R E N C IA

Para colocar la capa


banner_graphic ha
utilizado valores
precisos en pxeles
en el inspector de
propiedades, pero
puede colocar una
capa en cualquier
lugar de la pgina
arrastrando el
manejador de
seleccin situado en
la esquina superior
izquierda de la capa
seleccionada.

6.

Abra el panel Capas (Ventana > Capas). Como puede ver, Dreamweaver
ha aadido la nueva capa (banner_graphic) a la lista de capas.

7.

Haga clic una vez fuera de la nueva capa para anular su seleccin.

8.

Guarde la pgina.

Aadir ms capas
A continuacin, va a aadir ms capas a la pgina. Va a utilizar la primera
capa (banner_graphic) como punto de referencia para colocar el resto de
capas. Tambin va utilizar la funcin de fondos de capas de CSS para
ayudarle a colocar las capas y a distinguirlas.
1.

En la categora Capa de la barra Insertar, haga clic en Dibujar capa y


arrastre hasta la pgina otra capa de cualquier tamao.

2.

Haga clic en el manejador de seleccin de la nueva capa para


seleccionarla.

166 Tutorial: Crear un diseo de pgina basado en CSS

3.

Una vez seleccionada la nueva capa, siga este procedimiento en el


inspector de propiedades:

Haga clic en el cuadro de texto ID de capa y cambie el nombre de la


capa a flash_fma.

En el cuadro de texto Ancho (An), escriba 700px..

En el cuadro de texto Alto (Al), escriba 166px.

En el cuadro de texto Izquierda (Iz), escriba 20px.

En el cuadro de texto Superior (Sup), escriba 111px.

Presione Intro (Windows) o Retorno (Macintosh) para aplicar su


ltima entrada.

Dreamweaver aplicar el tamao y la situacin a la nueva capa


flash_fma.
.

La capa flash_fma tiene 700 pxeles de ancho por 166 pxeles de alto.
Adems, est situada a 20 pxeles del margen izquierdo de la pgina y a
111 del margen superior de la pgina. Ha colocado esta capa a 111
pxeles del margen superior de la pgina 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 lnea de puntos.
4.

Haga clic una vez fuera de la nueva capa para anular su seleccin.

5.

Seleccione Ver > Ayudas visuales > Fondos de diseo CSS.

Dreamweaver inserta colores de fondo en las capas. Estos colores se


seleccionan aleatoriamente y no aparecen en la pgina Web publicada.
Se trata simplemente de ayudas visuales que ofrece Dreamweaver para
ayudarle a ver en qu punto de la pgina estarn las capas y otros tipos
de elementos de bloques.
Si lo desea, puede volver a desactivar los Fondos de diseo CSS
seleccionando Ver > Ayudas visuales y anulando la seleccin de Fondos
de diseo CSS.

168 Tutorial: Crear un diseo de pgina basado en CSS

6.

A continuacin, arrastre tres capas ms hasta la pgina, 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.

NO TA

S U G E R E N CI A

Para seleccionar una


capa, haga clic en
algn punto del
borde de la capa o
del manejador de
seleccin de la capa,
pero no dentro de la
misma. Para
asegurarse de que la
capa ha sido
seleccionada,
compruebe que
aparecen
manejadores de
cambio de tamao
sobre los bordes de
la capa y que puede
ver las propiedades
de ancho y alto en el
inspector de
propiedades.
Tambin puede
seleccionar una capa
haciendo clic sobre
su nombre en el
panel Capas
(Ventana > Capas).

Cuando tenga tres capas ms en la pgina, utiliza el inspector de


propiedades para hacer lo siguiente:

Seleccione la primera capa, llmela header y asgnele el tamao


700 pxeles de ancho por 24 pxeles de alto.

Presione Intro (Windows) o Retorno (Macintosh) para aplicar su


ltima entrada.

Seleccione la segunda capa, llmela center_content y asgnele el


tamao 700 pxeles de ancho por 350 pxeles de alto.

Presione Intro (Windows) o Retorno (Macintosh) para aplicar su


ltima entrada.

Cuando cambie el tamao de la capa center_content a 350 pxeles de


alto, se solapar sobre la otra capa de la pgina. Antes de proceder con el
siguiente paso, mueva la otra capa debajo de la capa center_content
seleccionndola y arrastrando el manejador de seleccin hasta la parte
inferior de la pgina.

Seleccione la tercera capa, llmela footer y asgnele el tamao 700


pxeles de ancho por 24 pxeles de alto. Presione Intro (Windows) o
Retorno (Macintosh) para aplicar su ltima entrada.

Cuando haya terminado, la pgina se parecer a sta:

170 Tutorial: Crear un diseo de pgina basado en CSS

8.

A continuacin, seleccione la capa header y arrastre el manejador de


seleccin hasta que la capa est justo debajo de la capa flash_fma.
Si desea comprobar la posicin de la capa mientras la arrastra, haga clic
fuera de sta para anular su seleccin.

Insertar capas

171

S U G E R E N C IA
S UG E R E N CI A

9.
Tambin puede
mover una distancia
de un pxel las capas
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
pxeles del margen
izquierdo de la
pgina. A
continuacin, utilice
la tecla Flecha arriba
para mover la capa
hacia arriba hasta
que toque el borde
inferior de la capa
flash_fma.
Tambin puede
utilizar el botn
Ayudas visuales en
la barra de
herramientas
Documento para
activar o desactivar
los Fondos de
diseo CSS.

Seleccione y arrastre la capa center_content y la capa footer, o utilice las


teclas de flecha de su equipo para situar las capas, como muestra el
ejemplo siguiente:

10. Una vez colocadas las capas en posicin, desactive los Fondos de diseo

CSS (si todava no lo estn) seleccionando Ver > Ayudas visuales y


anulando la seleccin de Fondos de diseo CSS.

Aadir capas dentro de una capa


Las ltimas capas que va a dibujar estarn dentro de la capa ms grande
center_content. Estas capas son el equivalente a las celdas de tablas que
aadi a la pgina en el apartado Captulo 4, Tutorial: Crear un diseo de
pgina basado en tablas.
1.

Haga clic una vez a la derecha de sus capas para asegurarse de que no hay
nada seleccionado.

172 Tutorial: Crear un diseo de pgina basado en CSS

2.

En la categora Diseo 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 seleccin de la nueva capa para asegurarse


de que la capa est seleccionada.

4.

Una vez seleccionada la nueva capa, siga este procedimiento en el


inspector de propiedades:

Haga clic en el cuadro de texto ID de capa y cambie el nombre de la


capa a navigation.

En el cuadro de texto Ancho (An), escriba 140px..

En el cuadro de texto Alto (Al), escriba 350px.

En el cuadro de texto Izquierda (Iz), escriba 20px.

Presione Intro (Windows) o Retorno (Macintosh) para aplicar su


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:

174 Tutorial: Crear un diseo de pgina basado en CSS

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:

7.

Haga clic en el manejador de seleccin de la nueva capa para asegurarse


de que la capa est seleccionada.

8.

Una vez seleccionada la nueva capa, siga este procedimiento en el


inspector de propiedades:

Haga clic en el cuadro de texto ID de capa y cambie el nombre de la


capa a flash_video.

En el cuadro de texto Ancho (An), escriba 230px..

En el cuadro de texto Alto (Al), escriba 350px.

Presione Intro (Windows) o Retorno (Macintosh) para aplicar su


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:

176 Tutorial: Crear un diseo de pgina basado en CSS

10. Cree

una capa ms en la capa center_content haciendo clic en Dibujar


capa y arrastrando otra capa, tal y como muestra el ejemplo siguiente:

11.

Haga clic en el manejador de seleccin de la nueva capa para asegurarse


de que la capa est seleccionada.

12. Una

vez seleccionada la nueva capa, siga este procedimiento en el


inspector de propiedades:

Haga clic en el cuadro de texto ID de capa y cambie el nombre de la


capa a text.

En el cuadro de texto Ancho (An), escriba 330px..

En el cuadro de texto Alto (Al), escriba 350px.

Presione Intro (Windows) o Retorno (Macintosh) para aplicar su


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 lneas de puntos en los bordes de una capa, no hay ningn


problema. Slo significa que sus capas estn solapadas por uno o dos
pxeles.
14. Guarde

la pgina.

178 Tutorial: Crear un diseo de pgina basado en CSS

Aadir color a la pgina


1.

Seleccione la capa navigation haciendo clic sobre su nombre en el panel


Capas (Ventana > Capas).

2.

En el inspector de propiedades, haga clic una vez dentro del cuadro de


texto Color de fondo.

S U G E R E N CI A

A continuacin va a aadir color a la pgina configurando los colores de


fondo de algunas capas y del fondo de la pgina.

Puede cambiar el
ancho de la columna
Nombre en el panel
Capas arrastrando el
borde derecho del
ttulo de la columna
hacia la izquierda o
la derecha.

El cuadro de texto est situado justo al lado del cuadro de color del
Color de fondo (Col. Fondo).
3.

En el cuadro de texto Color de fondo, introduzca el valor hexadecimal


#993300 y presione Intro (Windows) o Retorno (Macintosh).

El color de fondo de la capa navigation se volver de color marrn


rojizo.
4.

Seleccione la capa flash_video haciendo clic sobre su nombre en el panel


Capas.

5.

En el cuadro de texto Color de fondo, introduzca el valor hexadecimal


#F7EEDF y presione Intro (Windows) o Retorno (Macintosh).
La celda de la capa flash_video se volver de color marrn claro.

Aadir color a la pgina 179

6.

Repita los pasos anteriores para cambiar tambin el color de la capa text
a un marrn 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 continuacin cambiar el color de fondo de toda la pgina
modificando las propiedades de la pgina. El cuadro de dilogo
Propiedades de la pgina le permite configurar varias propiedades de la
pgina, incluyendo, entre otros, el tamao y el color de las fuentes de la
pgina, el color de los vnculos visitados, los mrgenes de la pgina.

8.

Seleccione Modificar > Propiedades de la pgina.

9.

En la categora Aspecto del cuadro de dilogo Propiedades de la pgina,


haga clic en el cuadro de color Color de fondo y seleccione negro
(#000000) en el selector de color.

10. Haga

clic en Aceptar.

El color de fondo de la pgina se vuelve negro.


11.

Guarde la pgina.

Su diseo de pgina CSS ya est terminado. El diseo incluye varias capas


que pueden albergar activos como imgenes, texto y archivos de Flash
Video. El siguiente paso consiste en aadir contenido.

180 Tutorial: Crear un diseo de pgina basado en CSS

Si ya ha completado el apartado Captulo 5, Tutorial: Adicin de


contenido a las pginas, sabr que puede utilizar Dreamweaver para
insertar fcilmente activos en la pgina. Si no complet el tutorial, puede
utilizar las ilustraciones como referencia mientras va aadiendo contenido
al diseo de pgina basado en CSS que acaba de realizar.
La versin final de este tutorial se encuentra en la carpeta cafe_townsend/
completed_files/dreamweaver.

Aadir color a la pgina

181

182 Tutorial: Crear un diseo de pgina basado en CSS

CAPTULO 10

Tutorial: Visualizacin de
datos XML

10

Este tutorial le muestra cmo crear una pgina Web que muestre datos
XML. La visualizacin de datos XML implica recuperar informacin
almacenada en un archivo XML local o remoto para, posteriormente,
mostrar dicha informacin en la pgina. La ventaja importante que supone
el uso de datos XML en pginas Web es la posibilidad de separar el
contenido de la presentacin: el contenido de la pgina (los datos) son
totalmente independientes de la presentacin de la pgina (el diseo, el
estilo del texto, etc.). De este modo, cualquiera puede trabajar con el
archivo XML sin necesidad de alterar la presentacin de la pgina, 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 debera realizar Captulo 6, Tutorial:
Formatear la pgina con CSS, en la pgina 107.
En este tutorial, llevar a cabo las tareas siguientes:
Localizacin de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Repaso de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Ms informacin sobre el uso de XML y XSL en pginas
Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Ms informacin sobre las pginas XSLT . . . . . . . . . . . . . . . . . . . 188
Conversin de una pgina HTML en una pgina XSLT . . . . . . . 190
Adjuntar una fuente de datos XML a la pgina XSLT . . . . . . . . . .191
Modificacin del diseo de la pgina XSLT. . . . . . . . . . . . . . . . . . 193
Vinculacin de datos XML a la pgina XSLT. . . . . . . . . . . . . . . . . 195
Aplicacin de estilos a los datos XML . . . . . . . . . . . . . . . . . . . . . . . 196
Creacin de un vnculo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Aadir un objeto XSLT Repetir regin . . . . . . . . . . . . . . . . . . . . . 200

183

Adjuntar la pgina XSLT a la pgina XML . . . . . . . . . . . . . . . . . . 203


Ms informacin sobre otras opciones de implementacin . . . 205

Localizacin de los archivos


Los archivos necesarios para poder realizar este tutorial se encuentran en la
carpeta xml, dentro de la carpeta raz cafe_townsend que copi en el
equipo en el tutorial Captulo 3, Tutorial: Configuracin 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 pgina del men
(xml_menu.css), un archivo con los datos XML (specials.xml), una carpeta
de imgenes y varias pginas HTML ms.
La versin final del tutorial, xml_menu.xsl, se encuentra en el directorio
cafe_townsend/completed_files/dreamweaver/xml.

184 Tutorial: Visualizacin 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 informacin. La columna situada a la
izquierda de cada fila muestra el nombre del artculo y su descripcin. La
columna situada a la derecha de cada fila muestra el precio de cada artculo.
Toda la informacin de la pgina proviene de cdigo manual (es decir, no
procede de una fuente de datos dinmicos) 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 da. Gracias al
XML es posible separar el contenido de la pgina (las especialidades del
men) de la presentacin (el diseo, el estilo del texto, etc.). Un empleado
sin conocimientos de HTML ni de mantenimiento de pginas Web puede
actualizar fcilmente la informacin editando el archivo XML, mientras los
estilos de la pgina que muestra la informacin del men permanecen
intactos.

Repaso de la tarea 185

En este tutorial convertir la pgina de especialidades existente (una pgina


HTML) en una pgina XSLT para poder mostrar los datos XML en la
pgina. Asimismo, aplicar estilos a los datos XML para que el aspecto de
los datos sea coherente con el del resto de la pgina.
Si ya est familiarizado con el uso de XML, XSLT y transformaciones en el
lado del cliente, puede omitir este tutorial y continuar con Conversin de
una pgina HTML en una pgina XSLT en la pgina 190. Si, por el
contrario, estos conceptos suponen una novedad, lea las siguientes
secciones.

Ms informacin sobre el uso de


XML y XSL en pginas Web
El lenguaje de formato ampliable (XML) es un lenguaje que permite al
usuario estructurar la informacin. Al igual que ocurre con HTML, XML
permite estructurar la informacin con ayuda de etiquetas; pero las
etiquetas XML no estn 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 mayora 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 bsica de un archivo XML:
<?xml version=1.0>
<mybooks>
<book bookid=1>
<pubdate>03/01/2004</pubdate>
<title>Visualizacin de datos XML con Macromedia
Dreamweaver</title>
<author>Charles Brown</author>
</book>
<book bookid=2>
<pubdate>04/08/2004</pubdate>
<title>Aspectos bsicos de XML</title>
<author>John Thompson</author>
</book>
</mybooks>

186 Tutorial: Visualizacin de datos XML

En este ejemplo, cada etiqueta padre <book> contiene tres etiquetas hijo:
<pubdate>, <title> y <author>. Pero cada etiqueta <book> tambin 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 informacin estructurada. (Observar que el cdigo 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 informacin. 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 pgina, el diseo, 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 estn formateados segn lo que haya
definido en el archivo XSL. El contenido (los datos XML) y la presentacin
(definida por el archivo XSL) son totalmente independientes, y
proporcionan un mayor control sobre el modo en que aparece la
informacin en una pgina Web. Esencialmente, XSL es una tecnologa de
presentacin para XML, en la que el resultado principal es una pgina
HTML.
XSLT (Transformaciones de lenguaje de hojas de estilo ampliable) es un
subconjunto del lenguaje XSL que permite mostrar los datos XML en una
pgina Web y transformarlos (junto con los estilos XSL) en informacin
legible y con estilos en formato HTML. Se puede utilizar Dreamweaver
para crear pginas XSLT que permitan realizar transformaciones XSL
mediante un servidor de aplicaciones o un navegador. Al llevar a cabo una
transformacin XSL en el lado del servidor, ste realiza el trabajo de
transformacin de XML y XSL, y muestra los datos en la pgina. Cuando
esta transformacin se produce en el lado del cliente, todo el trabajo corre a
cargo del navegador (por ejemplo, Internet Explorer).

Ms informacin sobre el uso de XML y XSL en pginas Web 187

El mtodo 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 tecnologa disponible, del nivel de acceso a los
archivos de origen XML y de otros factores. Los dos mtodos 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 estn limitadas solamente a los
navegadores ms 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 dinmicamente desde su propio servidor o desde
cualquier otra ubicacin 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 pginas en un servidor de aplicaciones
configurado, mientras que las transformaciones en el lado del cliente slo
requieren acceso a un servidor Web.
En este tutorial recorrer los pasos necesarios para crear una pgina XSLT y
realizar una transformacin en el lado del cliente (fundamentalmente
debido a que el flujo de trabajo en el lado del cliente es mucho ms sencillo
de ejecutar y no requiere la utilizacin de un servidor de aplicaciones). Para
ms informacin sobre otras formas de desarrollar pginas XSLT, consulte
Ms informacin sobre otras opciones de implementacin en
la pgina 205.

Ms informacin sobre las


pginas XSLT
Al trabajar con transformaciones XSL en el lado del servidor, se puede
utilizar Dreamweaver para crear pginas XSLT que produzcan documentos
HTML completos (pginas XSLT completas) o fragmentos de XSLT que
generen porciones de un documento HTML.

188 Tutorial: Visualizacin de datos XML

Una pgina XSLT completa es parecida a una pgina HTML normal.


Contiene una etiqueta <body> y una etiqueta <head>, y permite visualizar
una combinacin de datos HTML y XML en la pgina. Un fragmento de
XSLT es una porcin de cdigo (utilizada por un documento
independiente) que muestra los datos XML formateados. Al contrario de lo
que sucede en una pgina XSLT completa, los fragmentos son archivos
independientes que no contienen etiquetas <body> ni <head>.
Si quiere mostrar datos XML en una pgina propia, debe crear una pgina
XSLT completa y vincular los datos XML. Por el contrario, si quiere
mostrar datos XML en una seccin concreta de una pgina dinmica
existente (por ejemplo, una pgina de inicio dinmica para una tienda de
productos deportivos, con informacin de la clasificacin de resultados
desde un agregador RSS que se muestren en un lado de la pgina) deber
crear un fragmento de XSLT e insertar una referencia a l en la pgina
dinmica. La creacin de fragmentos de XSLT y su uso en combinacin
con otras pginas dinmicas para mostrar datos XML es el caso ms
habitual cuando se trabaja con transformaciones en el lado del servidor.
En este tutorial crear una pgina XSLT completa y la utilizar para
transformar un archivo XML de muestra. La transformacin ser una
transformacin 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 ms 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 transformacin.
Para obtener una completa introduccin 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 Utilizacin de Dreamweaver (Ayuda > Utilizacin de
Dreamweaver).
Para obtener recursos adicionales, incluidos los tutoriales que ofrecen
informacin ms detallada sobre las transformaciones en el lado del
servidor, consulte www.macromedia.com/go/dw_xsl_es.

Ms informacin sobre las pginas XSLT 189

Conversin de una pgina HTML


en una pgina XSLT
Empezar por convertir la pgina de especialidades existente del Caf
Townsend (una pgina HTML) en una pgina 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 raz
cafe_townsend. Para ms informacin, consulte Localizacin de los
archivos en la pgina 184.

2.

Seleccione Archivo > Convertir > XSLT 1.0.

Dreamweaver abre una copia de la pgina xml_menu en la ventana de


documento. La nueva pgina es una hoja de estilos XSL y se guarda con
la extensin .xsl.
3.

Haga clic en la pgina xml_menu.html y cirrela para que slo se


muestre la nueva pgina xml_menu.xsl en la ventana de documento.

190 Tutorial: Visualizacin de datos XML

Adjuntar una fuente de datos


XML a la pgina XSLT
A continuacin, adjuntar una fuente de datos XML a la pgina utilizando
el panel Vinculaciones.
1.

En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el


vnculo XML.

NO TA

Tambin puede hacer clic en el vnculo Origen situado en la esquina


superior derecha del panel Vinculaciones para aadir una fuente de datos
XML.
2.

Seleccione Adjuntar un archivo local en mi equipo o en la red de rea


local (debera aparecer seleccionado de forma predeterminada), haga clic
en el botn Examinar, busque el archivo specials.xml en su equipo
(tambin se encuentra en la carpeta cafe_townsend/xml) y, por ltimo,
haga clic en Aceptar.

Adjuntar una fuente de datos XML a la pgina XSLT

191

3.

Haga clic en Aceptar para cerrar el cuadro de dilogo Buscar origen


XML.
Dreamweaver muestra el esquema de la fuente de datos XML en el
panel Vinculaciones.

Para obtener una gua de los smbolos que aparecen en el esquema,


consulte Creacin de pginas XSLT en Utilizacin de Dreamweaver
(Ayuda > Utilizacin de Dreamweaver).

192 Tutorial: Visualizacin de datos XML

Modificacin del diseo de la


pgina XSLT
Ahora que va a utilizar los datos XML en la pgina en vez de utilizar texto
esttico, no necesita todas las filas de la tabla. A continuacin, 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 ms 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, debera quedar
nicamente una fila en la pgina: la fila Summer Salad.

4.

Seleccione todo el texto en la celda de la tabla situada a la izquierda.

Modificacin del diseo de la pgina XSLT 193

5.

En el inspector de propiedades (Ventana > Propiedades), seleccione


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 sera necesario realizar
este paso. Aqu estamos borrando todos los estilos para que sepa cmo
aplicarlos a los datos XML ms adelante.
6.

Con el texto an seleccionado, presione Eliminar.

7.

Guarde el trabajo (Archivo > Guardar).

194 Tutorial: Visualizacin de datos XML

Vinculacin de datos XML a la


pgina XSLT
Ahora est preparado para vincular datos XML a la pgina.
1.

En el panel Vinculaciones (Ventana > Vinculaciones), seleccione el


elemento y arrstrelo hasta la celda vaca de la tabla.

Aparece en la pgina un marcador de posicin de los datos XML. Este


marcador de posicin se muestra resaltado y encerrado entre llaves.
Utiliza la sintaxis XPath (Lenguaje de rutas XML) para describir la
estructura jerrquica del esquema XML.
2.

Presione la tecla de flecha derecha del teclado para desplazar el punto de


insercin a la derecha del marcador de posicin de datos XML.

3.

Presione la barra espaciadora, introduzca un guin y presione de nuevo


la barra espaciadora.

Vinculacin de datos XML a la pgina XSLT 195

4.

En el panel Vinculaciones, seleccione el elemento descriptivo y


arrstrelo hasta el punto de insercin.
Aparece en la pgina otro marcador de posicin de los datos XML. En
funcin de la resolucin del monitor, es posible que el marcador de
posicin aparezca desplazado en la lnea siguiente. No debe preocuparse
por esto ahora. Ms adelante, cuando visualice la pgina en un
navegador, los datos se repartirn 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 ms, el marcador de posicin de los datos XML afecta al
diseo de la pgina. No debe preocuparse por esto ahora.

NO TA

El marcador de posicin 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 pgina y obtenga una vista previa del trabajo en un navegador.


Para ello, presione F12 (Windows) u Opcin + F12 (Macintosh).
El navegador mostrar la pgina con una fila de datos del archivo XML.

Aplicacin de estilos a los datos


XML
Ahora aplicar los estilos a los marcadores de posicin de datos XML de
elementos y descripciones. Al aplicar estilos a un marcador de posicin de
datos XML, el texto del propio marcador de posicin muestra los estilos.
Ms adelante, cuando se obtiene la vista previa de la pgina en un
navegador, los datos XML resultantes tambin mostrarn los estilos
asignados.

196 Tutorial: Visualizacin de datos XML

1.

Haga clic una vez en la celda de la tabla de la izquierda y haga clic en la


etiqueta <td> situada ms 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 guin.
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 seleccin.

4.

Haga clic una vez en el marcador de posicin de datos XML del


elemento para seleccionarlo.

5.

En el inspector de propiedades, haga clic en el botn Cursiva.

Aplicacin de estilos a los datos XML 197

6.

Guarde la pgina y obtenga una vista previa del trabajo en un navegador.


Para ello, presione F12 (Windows) u Opcin + F12 (Macintosh).

Para ms informacin sobre la aplicacin de estilos a datos XML, consulte


Aplicacin de estilos a fragmentos de XSLT en Utilizacin de
Dreamweaver (Ayuda > Utilizacin de Dreamweaver).

Creacin de un vnculo dinmico


Ahora crear un vnculo dinmico para que el nombre del elemento del
men de especialidades quede vinculado a una pgina que contenga una
imagen del elemento.
1.

En la ventana de documento, haga clic en el marcador de posicin 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 Vnculo.

198 Tutorial: Visualizacin de datos XML

3.

En el cuadro de dilogo Seleccionar archivo, seleccione Fuentes de


datos.
Si trabaja con un sistema Windows, la opcin se encuentra en la parte
superior del cuadro de dilogo. Si trabaja con un sistema Macintosh, la
opcin se encuentra en la parte inferior del cuadro de dilogo.

4.

Cuando aparezca el esquema XML en el cuadro de dilogo, seleccione


el elemento del vnculo.

Creacin de un vnculo dinmico 199

5.

Haga clic en Aceptar.


Dreamweaver crea un vnculo dinmico. En el archivo XML, cada
elemento de vnculo apunta a una pgina HTML que contiene una
imagen del elemento de men correspondiente.

NO TA

Si abre el archivo specials.xml y analiza el cdigo, 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 pginas HTML que contienen
las imgenes se encuentran en el mismo directorio xml que la pgina
XSLT que est creando. El elemento de vnculo siempre es una ruta de
acceso completa a la pgina vinculada y, a menudo, se escribe igual que
las direcciones HTTP.
6.

Guarde la pgina y obtenga una vista previa del trabajo en un navegador.


Para ello, presione F12 (Windows) u Opcin + F12 (Macintosh).
El navegador muestra la pgina con un vnculo dinmico. Si hace clic
en l, acceder a una nueva pgina.

Aadir un objeto XSLT Repetir


regin
El objeto XSLT Repetir regin permite mostrar elementos repetidos de una
fuente de datos XML en una pgina. A continuacin, aadir el objeto
XSLT Repetir regin a la fila de la tabla para poder mostrar varias
especialidades en la pgina.
1.

En la ventana de documento, haga clic una vez en cualquier lugar de la


fila de la tabla que contiene los marcadores de posicin de datos XML.

2.

En el selector de etiquetas, haga clic en la etiqueta <tr> situada ms a la


derecha para seleccionar la fila de la tabla.

200 Tutorial: Visualizacin de datos XML

3.

Seleccione Insertar > Objetos XSLT > Repetir regin.

Aadir un objeto XSLT Repetir regin 201

4.

En el Creador de expresiones XPATH, seleccione el elemento repetido


menu_item. (Los elementos repetidos se reconocen por un pequeo
signo ms).

5.

Haga clic en Aceptar.


En la ventana de documento, aparecer un contorno delgado
delimitado con tabulaciones de color gris alrededor de la regin
repetida. (Deber anular la seleccin de la tabla para verlo.) Ms
adelante, al obtener una vista previa de su trabajo en un navegador, el
contorno gris desaparece y la seleccin se ampla para mostrar los
elementos repetidos especificados del archivo XML.
Dreamweaver tambin acorta la longitud del marcador de posicin de
datos XML. Esto se debe a que Dreamweaver actualiza la sintaxis XPath
del marcador de posicin de datos XML para que est relacionado con
la ruta de acceso del elemento repetido. Para ms informacin sobre
este tema, consulte Acerca de los datos XML y elementos repetidos en
Utilizacin de Dreamweaver.

6.

Guarde la pgina y obtenga una vista previa del trabajo en un navegador.


Para ello, presione F12 (Windows) u Opcin + F12 (Macintosh).

202 Tutorial: Visualizacin de datos XML

El navegador mostrar ahora la pgina con cada elemento de men.

Adjuntar la pgina XSLT a la


pgina XML
Una vez terminada la pgina XSLT, debe adjuntarla a la pgina XML. Al
utilizar Dreamweaver para adjuntar la pgina, el programa inserta un
vnculo a la pgina XSLT en la parte superior de la pgina XML.
La pgina XML es la pgina a la que accedern los visitantes del sitio
cuando visualicen la pgina en lnea. Esto se debe a que deben acceder a la
pgina de "contenido" que contiene los datos (el archivo XML) y no a la
pgina que contiene los estilos (la pgina 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 pgina XSLT para la
transformacin, pero no podr encontrar los activos (hojas de estilos,
imgenes, etc.) definidos por los vnculos relacionados en la pgina XSLT.
1.

Con la pgina xml_menu.xsl abierta en la ventana de documento, abra


el panel Vinculaciones (Ventana > Vinculaciones) si todava 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 pgina.)

3.

Seleccione Comandos > Adjuntar una hoja de estilos XSLT.

4.

En el cuadro de dilogo correspondiente, haga clic en el botn


Examinar, navegue hasta la pgina xml_menu.xsl, seleccinela y haga
clic en Aceptar.

5.

Haga clic en Aceptar para cerrar el cuadro de dilogo Adjuntar hoja de


estilos XSLT.

Adjuntar la pgina XSLT a la pgina XML 203

Dreamweaver inserta la referencia en la pgina XSLT en la parte


superior del documento XML.

6.

Guarde la pgina specials.xml.

7.

Obtenga una vista previa de la pgina XML (no de la pgina XSLT) en


un navegador. Para ello, presione F12 (Windows) u Opcin + F12
(Macintosh).
La pgina XML se visualiza en un navegador con los estilos de la pgina
XSLT que ha creado.

204 Tutorial: Visualizacin de datos XML

Recuerde que los visitantes del sitio accedern a la pgina XML (no la
pgina XSLT) una vez que ambas pginas estn implementadas en el
servidor. Para ms informacin, consulte Acerca de las
transformaciones XSL en el lado del cliente en Utilizacin de
Dreamweaver (Ayuda > Utilizacin de Dreamweaver).

Ms informacin sobre otras


opciones de implementacin
En este tutorial ha aprendido a crear una pgina XSLT completa para
utilizarla como parte de la transformacin en el lado del cliente. Pero
tambin puede utilizar pginas completas XSLT para transformaciones en
el lado del servidor. Al utilizar una pgina completa XSLT para una
transformacin en el lado del servidor, la pgina se construye exactamente
igual.
No obstante, el mtodo ms habitual para realizar transformaciones en el
lado del servidor son los fragmentos de XSLT. Un fragmento de XSLT es
una porcin de cdigo (utilizada por un documento independiente) que
muestra los datos XML formateados.
Para una breve introduccin de las pginas completas XSLT y fragmentos
de XSLT, consulte Ms informacin sobre las pginas XSLT en
la pgina 188. Para una introduccin ms detallada sobre el
funcionamiento de las pginas completas XSLT y los fragmentos de XSLT,
consulte Acerca de las transformaciones XSL en el lado del servidor en
Utilizacin de Dreamweaver (Ayuda > Utilizacin 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 continuacin se muestra el flujo de trabajo para realizar transformaciones
en el lado del servidor con pginas XSLT:

Configure un sitio de Dreamweaver. Consulte Captulo 2,


Configuracin de un sitio de Dreamweaver en Utilizacin de
Dreamweaver.

Seleccione una tecnologa de servidor y configure el servidor de


aplicacin. Consulte Configuracin de un servidor de aplicaciones en
Utilizacin de Dreamweaver.

Ms informacin sobre otras opciones de implementacin 205

Pruebe el servidor de aplicaciones para garantizar que funciona


correctamente. Por ejemplo, cree una pgina que requiera
procesamiento y verifique que el servidor de aplicaciones procesa la
pgina 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


pgina completa XSLT. Consulte Creacin de pginas XSLT en
Utilizacin de Dreamweaver.

Convierta una pgina HTML existente en una pgina completa


XSLT. Consulte Conversin de pginas HTML en pginas XSLT
en Utilizacin de Dreamweaver.

Si an no lo ha hecho, adjunte una fuente de datos XML a la pgina.


Consulte Adjuntar fuentes de datos XML en Utilizacin de
Dreamweaver.

Vincule los datos XML al fragmento de XSLT o a la pgina completa


XSLT. Consulte Visualizacin de datos XML en pginas XSLT en
Utilizacin de Dreamweaver.

Si procede, aada un objeto XSLT Repetir regin a la tabla, o bien una


fila de tabla que contenta los marcadores de posicin de datos XML.
Consulte Visualizacin de elementos XML repetidos en Utilizacin
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 pgina
dinmica. Consulte Insercin de fragmentos de XSLT en pginas
dinmicas en Utilizacin de Dreamweaver.

Elimine todo el cdigo HTML de una pgina dinmica y, a


continuacin, utilice el comportamiento de servidor XSL
Transformation para insertar una referencia a la pgina completa
XSLT de la pgina dinmica.

Publique tanto la pgina dinmica como el fragmento de XSLT (o la


pgina completa XSLT) en el servidor de aplicaciones. Si utiliza un
archivo XML local, deber publicarlo tambin.

Visualice la pgina dinmica en un navegador. Al hacerlo, el servidor de


aplicaciones transforma los datos XML, los inserta en la pgina
dinmica y la muestra en el navegador.

206 Tutorial: Visualizacin de datos XML

CAPTULO 11

Tutorial: Desarrollo de
una aplicacin Web

11

En este tutorial, aprender a utilizar Macromedia Dreamweaver 8 para


empezar a desarrollar rpidamente aplicaciones Web dinmicas gestionadas
por bases de datos, que le permitirn presentar informacin recuperada de
una base de datos en las pginas Web.
Visualizar pginas Web para el sitio de Cafe Townsend utilizando una
base de datos de muestra suministrada con Dreamweaver. Tambin
utilizar Dreamweaver para crear un formulario de insercin de registro
para permitir a los visitantes dejar comentarios.
En este tutorial va a realizar las tareas siguientes:
Antes de comenzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207
Repaso de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Apertura de un documento para trabajar en l . . . . . . . . . . . . . . . 210
Definicin de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . .211
Visualizacin de los registros de la base de datos . . . . . . . . . . . . 215
Adicin de campos dinmicos a la tabla . . . . . . . . . . . . . . . . . . . . . 217
Definicin de una regin repetida. . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Visualizacin de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Creacin de un formulario de insercin 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 informacin
de configuracin, consulte el captulo de configuracin correspondiente a
su servidor de aplicacin de la siguiente lista. Si no est seguro del servidor
de aplicaciones que utiliza, consulte al administrador del sistema.

207

Apndice C, Configuracin del sitio ColdFusion de muestra, en


la pgina 253

Apndice D, Configuracin del sitio ASP.NET de muestra, en


la pgina 271

Apndice E, Configuracin del sitio ASP de muestra, en la pgina


285

Apndice F, Configuracin del sitio JSP de muestra, en la pgina 303

Apndice G, Configuracin del sitio PHP de muestra, en la pgina


321

Los captulos de configuracin le ensearn a desempear las tareas


siguientes:

Configurar el sistema.

Configurar Dreamweaver para que funcione con el servidor de


aplicaciones elegido.

Definir una conexin con la base de datos.

No habr completado este tutorial hasta haber llevado a cabo esas tareas.
Las pantallas de ejemplo de este captulo muestran cuadros de dilogo 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 pginas dinmicas para el sitio Web
de Cafe Townsend:

Una pgina con los comentarios que ya se encuentran en la base de


datos.

Una pgina 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 aplicacin Web

La pgina que permite al personal de Cafe Townsend ver los comentarios


de la base de datos tendr el siguiente aspecto:

La pgina que permite a los visitantes enviar comentarios tendr el


siguiente aspecto:

Repaso de la tarea 209

Apertura de un documento para


trabajar en l
Un buen punto de partida para desarrollar una aplicacin de base de datos
consiste en crear una lista de los registros almacenados en la base de datos.
En la aplicacin que genera en este tutorial crear una pgina Web
dinmica que muestre la informacin extrada de la tabla de comentarios
de clientes de la base de datos. Posteriormente, crear otra pgina Web
dinmica 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 pginas.
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 configuracin.
Para ms informacin, consulte los captulos de configuracin que se
muestran en Antes de comenzar en la pgina 207.

3.

En el panel Archivos, haga doble clic en el archivo view para abrirlo.


El documento se abrir en la ventana de documento.

210 Tutorial: Desarrollo de una aplicacin Web

4.

Si en este momento est viendo el documento en la vista Cdigo, haga


clic en Mostrar vista de diseo (con la etiqueta Diseo) o Mostrar
vistas de cdigo y diseo (con la etiqueta Dividir) en la barra de
herramientas Documento para poder utilizar las pantallas
proporcionadas como referencia mientras realiza el tutorial.

Definicin de un juego de
registros
A continuacin crear un juego de registros para seleccionar los datos que
desea mostrar. Un juego de registros es un conjunto de informacin
extrada 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 bsqueda especificados, normalmente en un lenguaje
denominado SQL. A continuacin, utilice la informacin extrada como
origen del contenido de las pginas dinmicas.
Dreamweaver ofrece una interfaz fcil de usar para la creacin 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 conexin a


la base de datos. Para ms informacin, consulte Antes de comenzar en
la pgina 207.
1.

En el documento Cafe Townsend abierto en Dreamweaver, site el


punto de insercin debajo del encabezado Customer Comments.

2.

Abra el cuadro de dilogo Juego de registros o (para ASP.NET) el


cuadro de dilogo Conjunto de datos siguiendo uno de
estos procedimientos:

En la categora Aplicacin de la barra Insertar, haga clic en Juego de


registros o (para ASP.NET) en el botn Conjunto de datos.

Seleccione Ventana > Vinculaciones para abrir el panel


Vinculaciones y, a continuacin, haga clic en el signo ms (+) y
seleccione Juego de registros o (para ASP.NET) Conjunto de datos.

Definicin de un juego de registros

211

Aparecer el cuadro de dilogo Juego de registros o (para ASP.NET)


Conjunto de datos.

N OT A

Si el cuadro de dilogo que aparece es ms 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 Conexin


(otros tipos de pginas del servidor), seleccione connTownsend.

212 Tutorial: Desarrollo de una aplicacin Web

El cuadro de dilogo 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 contrasea asociados con la fuente


de datos o la conexin, introdzcalos. Si no ha facilitado un nombre de
usuario o una contrasea 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, asegrese de que se haya seleccionado Todo para


seleccionar todas las columnas de la tabla.

8.

Seleccione la opcin 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.

Definicin de un juego de registros 213

Este paso especifica que los registros recuperados se muestren en una


lista en orden alfabtico por el apellido del cliente.

10. Haga clic en Prueba

para comprobar el juego de registros o el conjunto

de datos.

En la ventana Declaracin SQL de prueba, se mostrarn los registros de


la base de datos que coincidan con los criterios de seleccin 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 Declaracin SQL de prueba.

214 Tutorial: Desarrollo de una aplicacin Web

12. Haga

clic en Aceptar o cierre el cuadro de dilogo 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

Visualizacin de los registros de


la base de datos

Si no ve todos los
campos de juegos de
registros en el panel
Vinculaciones, haga
clic en el signo ms
(+) (Windows) o en la
flecha de ampliacin
(Macintosh) situada
junto a Juego de
registros
(rs_Comment) para
expandir la estructura
del juego de
registros.

A continuacin crear una pgina que incluya los registros que contiene la
tabla COMMENTS. Generar dinmicamente la pgina en lugar de
introducir manualmente la informacin.
Comenzar creando una tabla para estructurar la lista de datos.
1.

En el documento Cafe Townsend, site el punto de insercin en la lnea


en blanco despus del encabezado Customer Comments.

2.

Inserte una tabla siguiendo uno de estos procedimientos:

En la barra Insertar, haga clic en la categora Comn y, a


continuacin, haga clic en el botn Tabla o arrastre el botn hasta
el documento.

Seleccione Insertar > Tabla.

Se mostrar el cuadro de dilogo Tabla.


3.

En el cuadro de dilogo, defina las siguientes opciones:

En Filas, introduzca 2.

En Columnas, introduzca 4.

Mantenga el Ancho de tabla configurado con 100 por cien.

Visualizacin 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 seccin Encabezado, seleccione la opcin Superior.

En el cuadro de dilogo 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 dilogo terminado deber asemejarse al del siguiente
ejemplo:

4.

Haga clic en Aceptar.


La tabla se inserta en el documento.

5.

En la fila superior de la tabla, aada 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.

216 Tutorial: Desarrollo de una aplicacin Web

6.

Guarde la pgina.

Adicin de campos dinmicos a


la tabla
Ahora est preparado para aadir los campos del juego de registros a la
tabla.
1.

2.

3.

Abra el panel Vinculaciones si no est abierto siguiendo uno de estos


procedimientos.

Seleccione Ventana > Vinculaciones.

Haga clic en la flecha de ampliacin del grupo de paneles


Aplicacin y seleccione el panel Vinculaciones.

Aada el campo FIRST_NAME a la tabla siguiendo uno de estos


procedimientos:

Site el punto de insercin 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.

Repita el paso 2 para aadir LAST_NAME, EMAIL y COMMENTS a


la tabla.
Su tabla debe tener el aspecto siguiente. Quizs deba aumentar el ancho
de la ventana Documento para ver la tabla completa.

4.

Guarde la pgina.

Adicin de campos dinmicos a la tabla 217

Definicin de una regin repetida


La tabla que ha creado slo contiene una fila para datos. Para visualizar
todos los registros, debe establecer esa fila de la tabla como regin repetida.
Cuando se visualice en un navegador, la tabla contendr una fila para cada
registro que coincida con los criterios de bsqueda del juego de registros.
1.

2.

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 continuacin, en el selector de


etiquetas, haga clic en la etiqueta <tr> de la lista.

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

Cree una regin repetida siguiendo uno de estos procedimientos:

En el panel Comportamientos del servidor, haga clic en el signo


ms (+) y seleccione Repetir regin.

En la categora Aplicacin de la barra Insertar, haga clic en Regin


repetida.

Seleccione Insertar > Objetos de aplicacin > Regin repetida.

Aparecer el cuadro de dilogo Repetir regin.

3.

En el cuadro de dilogo, 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 regin repetida. La etiqueta
de la ficha vara segn la tecnologa de servidor que est utilizando.

4.

Guarde la pgina.

218 Tutorial: Desarrollo de una aplicacin Web

Visualizacin de la pgina
A continuacin, ver la pgina. Para ver una pgina en Dreamweaver con la
apariencia que tendra al ser procesada por el servidor. puede utilizar la vista
Live Data.
Con el documento Cafe Townsend an activo, siga uno de estos
procedimientos para ver los datos en sus pginas:

En la barra de herramientas Documento, haga clic en Vista Live Data.

Seleccione Ver > Live Data.


La pgina se actualiza para mostrar los datos extrados de la base de
datos.

Visualizacin de la pgina 219

Creacin de un formulario de
insercin de registro
La pgina siguiente que cree para el sitio Web de Cafe Townsend permitir
a los clientes aadir comentarios a la base de datos.
Dreamweaver incluye diversos objetos de aplicacin para ayudarle a crear
pginas de aplicacin Web de forma rpida y sencilla. En este ejercicio,
usted utilizar un objeto de aplicacin para crear la pgina de insercin. El
objeto de aplicacin 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 pgina dinmica.

Adicin de un objeto de aplicacin


Formulario de insercin de registro
Puede utilizar un objeto de aplicacin Formulario de insercin de registro
para crear un formulario que permita a los visitantes introducir datos en
una base de datos. El objeto de aplicacin 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 botn
Enviar, se inserta un nuevo registro en la base de datos. Tambin se puede
definir que se abra una pgina 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.

220 Tutorial: Desarrollo de una aplicacin Web

El documento se abrir en la ventana de documento.

2.

Site el punto de insercin en una fila vaca de la tabla, debajo de la fila


que contiene el prrafo.
El objeto de aplicacin se insertar en la fila vaca.

3.

Para aadir un objeto de insercin de registro a su pgina, realice una de


las operaciones siguientes:

En la categora Aplicacin de la barra Insertar, seleccione


Formulario de insercin de registro del men emergente Insertar
registro.

Seleccione Insertar > Objetos de aplicacin > Insertar registro >


Asistente de formulario de insercin de registro.

Creacin de un formulario de insercin de registro 221

Aparecer el cuadro de dilogo Formulario de insercin de registro.

4.

En el men emergente Fuente de datos (ColdFusion) o Conexin,


seleccione connTownsend.

5.

Si existe un nombre de usuario y una contrasea asociados con la fuente


de datos o la conexin, introdzcalos.
Si no facilita un nombre de usuario o una contrasea al configurar la
fuente de datos o la conexin, 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 dilogo que aparece, seleccione el archivo llamado


view y haga clic en Aceptar para cerrar el cuadro de dilogo.
Con el fin de realizar pruebas, deber ver la pgina que muestra todos
los comentarios despus de introducir un comentario. Tras probar la
aplicacin Web, cambie esta configuracin para que se muestre una
pgina en la que se agradezca al visitante el envo del comentario.

9.

Complete el resto del asistente siguiendo el procedimiento de la seccin


siguiente.

222 Tutorial: Desarrollo de una aplicacin Web

Creacin del formulario de insercin


En la seccin Campos de formulario del Asistente de formulario de
insercin de registro, defina el formulario en el que el visitante introducir
datos.
1.

2.

En el Asistente de formulario de insercin 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 (-).

Si est creando una pgina para ASP.NET, cambie el orden alfabtico


de los campos del formulario siguiendo uno de estos procedimientos:

En la lista Columna, seleccione COMMENTS y haga clic en el


botn de flecha abajo para situar COMMENTS debajo de
LAST_NAME.

En la lista Columna, seleccione EMAIL y, a continuacin, haga clic


en el botn de flecha abajo para situar EMAIL debajo de
LAST_NAME.

3.

En la lista Campos de formulario, seleccione FIRST_NAME para


especificar cmo 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 tecnologa 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.

Creacin de un formulario de insercin de registro 223

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
informacin 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, mostrndolo como campo de texto y
envindolo como texto.

8.

Repita los pasos del 3 al 6 para el campo de formulario EMAIL, con una
etiqueta Email, mostrndolo como campo de texto y envindolo como
texto.

9.

En la lista Campos de formulario, seleccione COMMENTS.

10. En
11.

el campo Etiqueta, introduzca Comments.

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 tecnologa de servidor, seleccione rea de


texto en el men emergente Mostrar como y acepte el valor
predeterminado Texto en el men emergente Enviar como.

224 Tutorial: Desarrollo de una aplicacin Web

Cuando haya acabado, el cuadro de dilogo debe ser similar al


siguiente:

12. Haga

clic en Aceptar para cerrar el cuadro de dilogo y crear el


formulario de insercin de registro.
El objeto de aplicacin Formulario de insercin de registro se insertar
en el documento.

13.

Guarde la pgina.

Creacin de un formulario de insercin de registro 225

Copia de los archivos en el


servidor
A continuacin copiar en el servidor los archivos actualizados. Despus de
copiar los archivos, ver la pgina de insercin de registro, aadir un
comentario o una pregunta y enviar los datos para comprobar la
aplicacin.
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 tambin esa carpeta en el
servidor remoto para que funcione la aplicacin 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 pgina 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 informacin enviada, actualizar
la base de datos y mostrar la pgina de comentarios con la informacin
actualizada.

Lecturas adicionales
En este tutorial se ha facilitado informacin sobre un pequeo conjunto de
herramientas que se pueden utilizar para crear pginas dinmicas
gestionadas por datos. En esta leccin ha aprendido a crear juegos de
registros para definir los datos que desea emplear en el sitio Web. Tambin
ha utilizado un objeto de aplicacin de Dreamweaver para crear una
aplicacin Web efectiva que permite interactuar con los datos almacenados
en la base de datos.

226 Tutorial: Desarrollo de una aplicacin Web

Para ms informacin sobre el desarrollo de aplicaciones Web, consulte los


temas siguientes en Utilizacin de Dreamweaver:

Obtencin de datos para la pgina

Definicin de fuentes de contenido dinmico

Adicin de contenido dinmico a pginas Web

Visualizacin de registros de la base de datos

Lecturas adicionales 227

228 Tutorial: Desarrollo de una aplicacin Web

PARTE 4

Apndices
La Parte Cuatro de este libro contiene apndices que ofrecen informacin
adicional sobre los conceptos que se utilizan en las secciones precedentes.
Esta parte contiene las siguientes secciones:
Aspectos bsicos de las aplicaciones Web . . . . . . . . . . . . . . . . . . 231
Instalacin de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Configuracin del sitio ColdFusion de muestra . . . . . . . . . . . . . . 253
Configuracin del sitio ASP.NET de muestra . . . . . . . . . . . . . . . . 271
Configuracin del sitio ASP de muestra . . . . . . . . . . . . . . . . . . . . 285
Configuracin del sitio JSP de muestra . . . . . . . . . . . . . . . . . . . . 303
Configuracin del sitio PHP de muestra . . . . . . . . . . . . . . . . . . . . . 321

229

APNDICE A

Aspectos bsicos de las


aplicaciones Web

Una aplicacin Web es un conjunto de pginas Web que interactan 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 captulo.
Este captulo contiene los siguientes temas:
Aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Funcionamiento de una aplicacin Web. . . . . . . . . . . . . . . . . . . . 234
Creacin de pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Eleccin de una tecnologa de servidor. . . . . . . . . . . . . . . . . . . . . . 241
Terminologa de aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . 242

Aplicaciones Web
Una aplicacin Web es un sitio Web que contiene pginas con contenido
sin determinar, parcialmente o en su totalidad. El contenido final de una
pgina se determina slo cuando el usuario solicita una pgina del servidor
Web. Dado que el contenido final de la pgina vara de una peticin a otra
en funcin de las acciones del visitante, este tipo de pgina se denomina
pgina dinmica.
Las aplicaciones Web se crean en respuesta a diversas necesidades o
problemas. En esta seccin se describen los usos ms 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 informacin de forma rpida y sencilla


en un sitio Web en el que se almacena gran cantidad de contenido.
Este tipo de aplicacin 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 electrnico a los empleados o a
aplicaciones CGI para su procesamiento. Una aplicacin Web permite
guardar datos de formularios directamente en una base de datos,
adems de extraer datos y crear informes basados en la Web para su
anlisis. Ejemplos de ello son las pginas de los bancos en lnea, las
pginas de tiendas en lnea, las encuestas y los formularios con datos
suministrados por el usuario.

Actualizar sitios Web cuyo contenido cambia constantemente.


Una aplicacin Web evita al diseador Web tener que actualizar
continuamente el cdigo HTML del sitio. Los proveedores
de contenido, como los editores de noticias, proporcionan el contenido
a la aplicacin Web y sta actualiza el sitio automticamente. Entre los
ejemplos figuran Economist (www.economist.com) y CNN
(www.cnn.com).

232 Aspectos bsicos de las aplicaciones Web

Ejemplo de aplicacin Web


Ana es una diseadora Web profesional y usuaria experimentada de
Dreamweaver cuya tarea consiste en mantener los sitios de intranet e
Internet de una empresa de tamao medio en la que trabajan 1.000
empleados. Un da, Pedro, del departamento de RR.HH., le expone un
problema. Su departamento administra un programa de promocin de la
salud por el que los empleados reciben puntos por cada kilmetro recorrido
a pie, en bicicleta o corriendo. Cada empleado debe informar a Pedro del
nmero total de kilmetros recorridos cada mes a travs del correo
electrnico. A finales de mes, Pedro rene todos los mensajes de correo
electrnico y entrega a los empleados pequeos regalos en metlico en
funcin del total de puntos acumulados.
El problema de Pedro es que el programa de salud ha tenido demasiado
xito. Es tal el nmero 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 solucin basada en la Web.
Ana le propone una aplicacin Web basada en la intranet, que puede
realizar las siguientes tareas:

Permitir a los empleados introducir los kilmetros recorridos en una


pgina Web mediante un formulario HTML sencillo

Almacenar los kilmetros recorridos por cada empleado en una base de


datos

Calcular los puntos en funcin 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 aplicacin lista y en funcionamiento antes de la hora del


almuerzo gracias a Dreamweaver, que proporciona las herramientas
necesarias para crear este tipo de aplicacin con rapidez y facilidad.

Aplicaciones Web 233

Funcionamiento de una
aplicacin Web
Una aplicacin Web es un conjunto de pginas Web estticas y dinmicas.
Una pgina Web esttica es aqulla que no cambia cuando un usuario la
solicita: el servidor Web enva la pgina al navegador Web solicitante sin
modificarla. Por el contrario, el servidor modifica las pginas Web dinmicas
antes de enviarlas al navegador solicitante. La naturaleza cambiante de este
tipo de pgina es la que le da el nombre de dinmica.
Por ejemplo, podra disear una pgina para que mostrara los resultados del
programa de salud y dejara cierta informacin fuera (como el nombre del
empleado y sus resultados) para calcularla cuando la pgina la solicite un
empleado en particular.

Procesamiento de pginas Web estticas


Un sitio Web esttico consta de un conjunto de pginas y de archivos
HTML relacionados alojados en un equipo que ejecuta un servidor Web.
Un servidor Web es un software que suministra pginas Web en respuesta a
las peticiones de los navegadores Web. La peticin de una pgina se genera
cuando el usuario hace clic en un vnculo de una pgina Web, elige un
marcador en un navegador o introduce una URL en el cuadro de texto
Direccin del navegador.
El contenido final de una pgina Web esttica lo determina el diseador de
la pgina y no cambia cuando se solicita la pgina. A continuacin 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>

234 Aspectos bsicos de las aplicaciones Web

El diseador escribe todas y cada una de las lneas de cdigo HTML de la


pgina antes de colocarla en el servidor. El cdigo HTML no cambia una
vez colocado en el servidor y por ello, este tipo de pginas se denomina
pgina esttica.
N OT A

E sentido estricto, una pgina "esttica" puede no ser esttica en


absoluto. Por ejemplo, una imagen de sustitucin o contenido de Flash
(un archivo SWF) puede hacer que una pgina esttica tome vida. No
obstante, en esta gua se habla de pgina esttica cuando sta se enva al
navegador sin modificaciones.

Cuando el servidor Web recibe una peticin de una pgina esttica, el


servidor lee la solicitud, localiza la pgina y la enva al navegador
solicitante, como se muestra en la siguiente figura:

Paso 1: el
navegador Web
solicita la pgina
esttica.

Servidor Web

Peticin

Respuesta

SERVIDOR WEB
Paso 2: el
servidor
localiza la
pgina.

Paso 3: el servidor
Web enva la pgina
al navegador
solicitante.

<HTML>
<p>Hi
</HTML>

Pgina esttica

En el caso de las aplicaciones Web, algunas lneas de cdigo no estn


determinadas cuando el usuario solicita la pgina. Estas lneas deben
determinarse mediante algn mecanismo antes de enviar la pgina al
navegador. En la siguiente seccin se describe dicho mecanismo.

Funcionamiento de una aplicacin Web 235

Procesamiento de pginas dinmicas


Cuando un servidor Web recibe una peticin para mostrar una pgina Web
esttica, el servidor la enva directamente al navegador que la solicita.
Cuando el servidor Web recibe una peticin para mostrar una pgina
dinmica, sin embargo, reacciona de distinta forma: transfiere la pgina a
un software especial encargado de finalizar la pgina. Este software especial
se denomina servidor de aplicaciones.
El servidor de aplicaciones lee el cdigo de la pgina, finaliza la pgina en
funcin de las instrucciones del cdigo y elimina el cdigo de la pgina. El
resultado es una pgina esttica que el servidor de aplicaciones devuelve al
servidor Web, que a su vez la enva al navegador solicitante. Lo nico que el
navegador recibe cuando llega la pgina es cdigo HTML puro. A
continuacin se incluye una vista de este proceso:

Navegador Web

Paso 1 - el
navegador Web
solicita la pgina
dinmica.

Peticin

Respuesta

Paso 5- el servidor
Web enva la pgina
finalizada al
navegador
solicitante.

SERVIDOR WEB

Paso 2 - el
servidor Web
localiza la pgina
y la enva al
servidor de
aplicaciones.

Paso 3 - el
servidor de
aplicaciones busca
instrucciones en la
pgina y la termina.

236 Aspectos bsicos de las aplicaciones Web

<HTML>
<code>
</HTML>

<HTML>
<p>Hi
</HTML>

Servidor de aplicaciones

Paso 4- el servidor
de aplicaciones
pasa la pgina
terminada al
servidor Web.

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 pgina dinmica puede
indicar al servidor de aplicaciones que extraiga datos de una base de datos y
los inserte en el cdigo HTML de la pgina. Para ms informacin,
consulte Apndice A, Gua de bases de datos para principiantes en
Utilizacin de Dreamweaver.
La instruccin para extraer datos de una base de datos recibe el nombre de
consulta de base de datos. Una consulta consta de criterios de bsqueda
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 pgina.
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 slo se puede comunicar con la base de datos a
travs de un controlador que acte de intermediario con la base de datos: el
software acta entonces como un intrprete entre el servidor de
aplicaciones y la base de datos.
Una vez que el controlador establece la comunicacin, 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 extrados 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 pgina.
A continuacin se ofrece una consulta de base de datos sencilla escrita en
SQL:
SELECT lastname, firstname, fitpoints
FROM employees

Esta instruccin crea un juego de registros de tres columnas y lo completa


con filas que contienen el apellido, el nombre y los puntos de forma fsica
de todos los empleados de la base de datos. Para ms informacin, consulte
Apndice B, Nociones bsicas de SQL en Utilizacin de Dreamweaver.

Funcionamiento de una aplicacin Web 237

A continuacin se ofrece una ilustracin del proceso de consulta de base de


datos y de devolucin de los datos al navegador.

Paso 1 - el navegador
Web solicita la pgina
dinmica.

Navegador Web

Peticin

Respuesta
Paso 9- el servidor
Web enva la pgina
finalizada al
navegador
solicitante.

SERVIDOR WEB
Paso 2 - el servidor
Web localiza la
pgina y la enva al
servidor de
aplicaciones.

<HTML>
<code>
</HTML>

Paso 3- el servidor
de aplicaciones
busca instrucciones
en la pgina.

<HTML>
<p>Hi
</HTML>

Paso 8- el servidor
de aplicaciones
inserta los datos en
una pgina y luego
pasa la pgina al
servidor Web.

Servidor de aplicaciones

Paso 4- el servidor
de aplicaciones enva
la consulta al
controlador de la
base de datos.

Paso 5- el
controlador ejecuta la
consulta en la base
de datos.

Consulta

Juego de registros

Controlador de base de datos

Paso 7- el
controlador pasa el
juego de registros al
servidor de
aplicaciones.
Paso 6 - el juego de
registros se devuelve al
controlador.

Base de datos

Puede utilizar prcticamente cualquier base de datos con su aplicacin


Web, siempre y cuando se haya instalado el controlador de base de datos
correcto en el servidor.

238 Aspectos bsicos de las aplicaciones Web

Si tiene intencin de desarrollar pequeas 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
crticas, 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,
asegrese de disponer de una conexin rpida entre ambos sistemas para
que la aplicacin Web pueda funcionar de forma rpida y eficiente.

Creacin de pginas dinmicas


La creacin de una pgina dinmica implica, en primer lugar, escribir el
cdigo HTML y, despus, aadir los scripts o etiquetas del lado del
servidor al cdigo HTML para crear la pgina dinmica. Al visualizar el
cdigo resultante, el lenguaje aparece incrustado en el cdigo HTML de la
pgina. Por esta razn, estos lenguajes se conocen como lenguajes de
programacin incrustados en HTML. En el siguiente ejemplo bsico se
utiliza ColdFusion Markup Language (CFML):
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<!--- embedded instructions start here --->
<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>
<!--- embedded instructions end here --->
</body>
</html>

Las instrucciones incrustadas de esta pgina 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 cdigo HTML.

Creacin de pginas dinmicas 239

El servidor de aplicaciones devuelve la siguiente pgina al servidor Web:


<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<p>Be sure to visit our Sales page.</p>
</body>
</html>

El servidor Web enva la pgina al navegador solicitante, que la muestra de


la siguiente forma:
Acerca de Trio Motors
Trio Motors es un fabricante lder de automviles.
No olvide visitar nuestra pgina de Ventas.
La utilizacin de un lenguaje basado en etiquetas o en scripts se decide en
funcin de la tecnologa de servidor disponible en el servidor. A
continuacin se enumeran los lenguajes ms utilizados para las cinco
tecnologas de servidor que admite Dreamweaver:
Tecnologa 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 ms informacin, consulte Eleccin de una tecnologa de servidor


en la pgina 241.
Dreamweaver puede crear los scripts (archivos de comando) o las etiquetas
del lado del servidor necesarias para que sus pginas funcionen, o puede
escribirlos usted manualmente en el entorno de codificacin de
Dreamweaver.

240 Aspectos bsicos de las aplicaciones Web

Eleccin de una tecnologa de


servidor
Puede utilizar Dreamweaver para crear aplicaciones Web mediante
cualquiera de las cinco tecnologas de servidor: ColdFusion, ASP.NET,
ASP, JSP o PHP. Cada una de estas tecnologas corresponde a un tipo de
documento en Dreamweaver. La eleccin de una de ellas para una
aplicacin 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 aplicacin Web o una aplicacin en
general, es probable que prefiera ColdFusion, pues proporciona un entorno
de scripts de servidor fcil de aprender y que est plenamente integrado en
Dreamweaver. Si conoce otras tecnologas de servidor, como JSP, PHP, ASP
o ASP.NET, Dreamweaver ofrece un excelente soporte para todas ellas.
La tecnologa de servidor que seleccione tambin depende del servidor de
aplicaciones que vaya a utilizar para su aplicacin Web. Un servidor de
aplicaciones es un software que ayuda al servidor Web a procesar las
pginas que contienen scripts o etiquetas del lado del servidor. Por ejemplo,
si tiene ColdFusion MX 7 Server, puede seleccionar ColdFusion como su
tecnologa 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 edicin para desarrolladores de ColdFusion MX 7 est disponible en el
CD de Dreamweaver (slo versin para Windows) y en el sitio Web de
Macromedia www.macromedia.com/go/coldfusion/.
Para ms informacin, consulte Configuracin de un servidor de
aplicaciones en Utilizacin de Dreamweaver.
Para obtener informacin sobre ColdFusion, seleccione Utilizacin de
ColdFusion del men Ayuda.
Para obtener ms informacin sobre ASP.NET, visite el sitio Web de
Microsoft http://msdn.microsoft.com/asp.net/.

Eleccin de una tecnologa de servidor 241

Para obtener ms informacin 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 ms informacin sobre JSP, visite el sitio Web de Sun
Microsystems en java.sun.com/products/jsp/.
Para obtener ms informacin sobre PHP, visite el sitio Web de PHP en
www.php.net/.

Terminologa de aplicaciones
Web
En esta seccin se definen trminos utilizados con frecuencia relacionados
con las aplicaciones Web.
es un software que ayuda al servidor Web a
procesar las pginas que contienen scripts o etiquetas del lado del servidor.
Cuando se solicita al servidor una pgina de este tipo, el servidor Web pasa
la pgina al servidor de aplicaciones para su procesamiento antes de
enviarla al navegador. Para ms informacin, consulte Funcionamiento de
una aplicacin Web en la pgina 234.

Un servidor de aplicaciones

Entre los servidores de aplicaciones ms habituales se encuentran


Macromedia ColdFusion, Macromedia JRun Server, Microsoft .NET
Framework, IBM WebSphere y Apache Tomcat.
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.

Una base de datos

Campos (columnas)
Nmero

Apellido

Nombre

Cargo

Objetivo
Registros
(filas)

242 Aspectos bsicos de las aplicaciones Web

es un software que acta como


intrprete entre una aplicacin 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 aplicacin Web leer y
manipular datos que, de otro modo, resultaran indescifrables.

Un controlador 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 ms habituales figuran Microsoft
Access, Oracle 9i y MySQL.

Un sistema de administracin de base de datos

es la operacin mediante la cual se extrae


un juego de registros de una base de datos. Una consulta consta de criterios
de bsqueda expresados en un lenguaje de base de datos denominado SQL.
Por ejemplo, la consulta puede especificar que slo se incluyan
determinadas columnas o determinados registros en el juego de registros.

Una consulta de base de datos

es una pgina Web personalizada por el servidor de


aplicaciones antes de que la pgina se enve a un navegador. Para ms
informacin, consulte Funcionamiento de una aplicacin Web en
la pgina 234.

Una pgina dinmica

es un conjunto de datos extrados de una o varias


tablas de una base de datos, como se ilustra en el siguiente ejemplo:

Un juego de registros

Nmero

Apellido

Nombre

Cargo

Objetivos

Tabla de base de datos

Apellido

Nombre

Cargo

Tabla de juego de registros

Terminologa de aplicaciones Web 243

Una base de datos relacional es una base de datos que contiene mltiples

tablas que comparten datos. La siguiente base de datos es relacional porque


dos tablas comparten la columna DepartmentID.

La tecnologa de servidor es la tecnologa que utiliza un servidor de


aplicaciones para modificar pginas dinmicas en tiempo de ejecucin.

El entorno de desarrollo de Dreamweaver admite las siguientes tecnologas


de servidor:

Macromedia ColdFusion

Microsoft ASP.NET

Microsoft Active Server Pages (ASP)

Sun Java Server Pages (JSP)

PHP: Hypertext Preprocessor (PHP)

Tambin puede utilizar el entorno de codificacin de Dreamweaver para


desarrollar pginas para cualquier otra tecnologa de servidor no incluida
en la lista.
Una pgina esttica es una pgina Web que el servidor de aplicaciones no
modifica antes de enviarla a un navegador. Para ms informacin, consulte
Procesamiento de pginas Web estticas en la pgina 234.
Una aplicacin Web es un sitio Web que contiene pginas con contenido
sin determinar parcialmente o en su totalidad. El contenido final de estas
pginas se determina slo cuando un visitante solicita una pgina del
servidor Web. Dado que el contenido final de la pgina vara de una
peticin a otra en funcin de las acciones del visitante, este tipo de pgina
se denomina pgina dinmica.

es un software que suministra pginas Web en respuesta


a las peticiones de los navegadores Web. La peticin de una pgina se
genera cuando un visitante hace clic en un vnculo de una pgina Web en el
navegador, elige un marcador en el navegador o introduce una URL en el
cuadro de texto Direccin del navegador.
Un servidor Web

244 Aspectos bsicos de las aplicaciones Web

Entre los servidores Web ms utilizados se encuentran Microsoft Internet


Information Server, Microsoft Personal Web Server, Apache HTTP Server,
Netscape Enterprise Server y Sun ONE Web Server.

Terminologa de aplicaciones Web 245

246 Aspectos bsicos de las aplicaciones Web

APNDICE B

Instalacin de un
servidor Web

Para desarrollar y comprobar pginas Web dinmicas, necesitar un


servidor Web en funcionamiento. En este captulo se describe cmo la
mayora 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 edicin para desarrolladores
del servidor de aplicaciones Macromedia ColdFusion MX 7, que puede
instalar y utilizar gratuitamente. Para ms informacin, consulte
Apndice C, Configuracin del sitio ColdFusion de muestra, en
la pgina 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 captulo contiene las secciones siguientes:
Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Instalacin de Internet Information Server . . . . . . . . . . . . . . . . . . 248
Comprobacin de IIS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Comprobacin del servidor Web de Macintosh
(desarrolladores PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Aspectos bsicos de los servidores Web . . . . . . . . . . . . . . . . . . . . 251
NO T A

Macromedia no ofrece asistencia tcnica para productos de software de


terceros fabricantes como Microsoft Internet Information Server. Si
necesita ayuda sobre un producto de Microsoft, pngase en contacto con
el servicio tcnico de Microsoft.

247

Introduccin
Si es usted usuario de Windows, puede instalar y ejecutar Internet
Information Server (IIS) en su equipo. Tambin 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 edicin
para desarrolladores de ColdFusion MX 7. Para ms informacin, consulte
Apndice C, Configuracin del sitio ColdFusion de muestra, en
la pgina 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 instalacin.
Si la carpeta no existe, instale IIS. Para ms informacin, consulte
Instalacin de Internet Information Server en la pgina 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 ms informacin, consulte Comprobacin del
servidor Web de Macintosh (desarrolladores PHP) en la pgina 250.

Instalacin 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 ejecucin 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:

248 Instalacin de un servidor Web

1.

Seleccione Inicio > Configuracin > 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.

4.

Siga las instrucciones de instalacin.

Puede comprobar el servidor Web una vez instalado.

Comprobacin de IIS
Para comprobar el servidor Web, cree una pgina HTML sencilla llamada
myTestFile.htm y gurdela en la carpeta Inetpub\wwwroot del equipo en el
que se ejecuta el servidor Web. La pgina HTML puede constar de una sola
lnea, como, por ejemplo:
<p>My web server is working.</p>

A continuacin, abra la pgina de prueba en el navegador Web con una


peticin 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 ejecucin 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 ms informacin sobre nombres de equipos, consulte Aspectos


bsicos de los servidores Web en la pgina 251.

Si el navegador muestra la pgina, el servidor Web se estar ejecutando con


normalidad.
Si el navegador no muestra la pgina, asegrese de que el servidor est en
ejecucin. Si la pgina contina sin abrirse, asegrese de que la pgina de
prueba est situada en la carpeta Inetpub\wwwroot y que tiene la extensin
de archivo .htm o .html.

Comprobacin de IIS 249

Comprobacin 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 pgina HTML sencilla con el nombre
myTestFile.htm; gurdela en la carpeta /Users/su_nombre_de_usuario/Sites/
de su Macintosh (donde su_nombre_de_usuario es su nombre de usuario
Macintosh). La pgina HTML puede constar de una sola lnea, como, por
ejemplo:
<p>My web server is working.</p>

A continuacin, abra la pgina de prueba en el navegador Web con una


peticin 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 pgina, el servidor Web se estar ejecutando con


normalidad. Si el navegador no puede mostrar la pgina, asegrese de que
el servidor Web se inicie abriendo Preferencias del sistema y mirando el
panel Compartir. La opcin Compartir Web personal debe estar habilitada.
Su servidor Web Apache no funcionar con PHP de forma
predeterminada; debe configurarlo antes de utilizar PHP. Para ms
informacin, consulte Configuracin del sistema (PHP) en
la pgina 322.

250 Instalacin de un servidor Web

Aspectos bsicos de los


servidores Web
Un servidor Web es un software que suministra pginas Web en respuesta a
las peticiones de los navegadores Web. En ocasiones, tambin 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 ningn nombre asignado, el servidor utilizar como nombre la
palabra localhost.
El nombre del servidor corresponde a la carpeta raz del servidor (en un
equipo Windows), que es muy probable que sea C:\Inetpub\wwwroot.
Puede abrir cualquier pgina Web almacenada en la carpeta raz
introduciendo la siguiente URL en un navegador que se encuentre en
ejecucin en su equipo:
http://nombre_de_servidor/nombre_de_archivo
Por ejemplo, si el nombre del servidor es mer_noire y la pgina Web
denominada soleil.htm est almacenada en C:\Inetpub\wwwroot\, puede
abrir la pgina introduciendo la siguiente URL en un navegador que se
encuentre en ejecucin en el equipo local:
http://mer_noire/soleil.html
NO T A

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


invertidas.

Tambin puede abrir cualquier pgina Web almacenada en cualquier


subcarpeta de la carpeta raz 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 continuacin:
C:\Inetpub\wwwroot\gamelan\soleil.htm
Puede abrir esta pgina introduciendo la siguiente URL en un navegador
que se encuentre en ejecucin en su equipo:
http://mer_noire/gamelan/soleil.htm

Aspectos bsicos de los servidores Web 251

Cuando el servidor Web se encuentre en ejecucin en el equipo, podr


sustituir el nombre del servidor por localhost. Por ejemplo, las siguientes
URL abren la misma pgina en un navegador:
http://mer_noire/gamelan/soleil.htm
http://localhost/gamelan/soleil.htm
NO T A
252 Instalacin de un servidor Web

Otra expresin 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).

APNDICE C

Configuracin del sitio


ColdFusion de muestra

Macromedia Dreamweaver 8 incluye pginas ColdFusion de muestra que


le permitirn crear una pequea aplicacin Web. En este captulo se
describe cmo configurar la aplicacin de muestra.
El proceso de configuracin de una aplicacin Web consta de tres pasos. En
primer lugar, configure el sistema. En segundo lugar, defina un sitio de
Dreamweaver. En tercer lugar, conecte la aplicacin a la base de datos. En
esta gua de configuracin se realizan los tres pasos de que consta el
proceso.
Este captulo contiene las siguientes secciones:
Listas de comprobacin de la configuracin para
desarrolladores de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . 253
Configuracin del sistema (ColdFusion) . . . . . . . . . . . . . . . . . . . . 254
Definicin de un sitio de Dreamweaver (ColdFusion) . . . . . . . . 260
Conexin con la base de datos de muestra (ColdFusion). . . . . 266

Listas de comprobacin de la
configuracin para
desarrolladores de ColdFusion
Para configurar una aplicacin Web, debe configurar el sistema, definir un
sitio de Dreamweaver y conectar con una base de datos. En esta seccin se
ofrecen las listas de comprobacin para cada una de estas tareas. Las tareas
se describen detalladamente en el resto del captulo.

253

Configure el sistema:
1.

Instale el servidor de aplicaciones ColdFusion (que incluye un servidor


Web).

2.

Cree una carpeta raz.

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

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 conexin en Dreamweaver.

Configuracin del sistema


(ColdFusion)
En esta seccin 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 configuracin diferente, consulte Configuracin de una
aplicacin Web en Utilizacin de Dreamweaver.

254 Configuracin del sitio ColdFusion de muestra

La ilustracin siguiente muestra las dos configuraciones descritas en esta


seccin:
Configuracin local
(slo para usuarios de Windows)

PC de WINDOWS
Dreamweaver

Configuracin del servidor remoto


(para usuarios de Macintosh o de Windows)

MAC o PC de WINDOWS
Dreamweaver

Servidor ColdFusion

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\
Acceso de red o ftp

SERVIDOR DE WINDOWS
Servidor ColdFusion

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Para configurar el sistema:


1.

Instale el servidor de aplicaciones ColdFusion .

2.

Cree una carpeta raz .

N O TA

La instalacin del servidor de aplicaciones es una tarea que se ejecuta una


sola vez.

Configuracin del sistema (ColdFusion) 255

Instalacin de ColdFusion MX 7
Para procesar pginas Web dinmicas, necesitar un servidor Web y un
servidor de aplicaciones. ColdFusion MX 7 le proporciona los dos. Un
servidor Web es un software que suministra pginas 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 pginas que contienen
scripts o etiquetas del lado del servidor. Cuando un navegador solicita una
pgina de este tipo, el servidor Web remite la pgina al servidor de
aplicaciones para su procesamiento antes de enviarla al navegador. Para ms
informacin, consulte Aspectos bsicos de las aplicaciones Web en
la pgina 231.
Puede descargar e instalar una versin de ColdFusion MX 7 para
desarrolladores con todas las funciones desde el sitio Web de Macromedia
www.macromedia.com/go/coldfusion/. Asegrese de que selecciona la
versin de Windows de ColdFusion MX 7 Developer Edition. Tambin
dispone de una copia de ColdFusion MX 7 Developer Edition en el CD de
Dreamweaver (slo para Windows).
N OT A

Tambin puede instalar ColdFusion en un equipo Mac OS X que ejecute


un servidor J2EE, como JRun o Tomcat. Para ms informacin, consulte
el sitio Web de Macromedia en www.macromedia.com/go/cfmx7_mac.
Sin embargo, el proceso de instalacin es complicado, y Dreamweaver no
se ha probado con ColdFusion en Macintosh. Adems, puede ser difcil
conectar ColdFusion a sistemas de bases de datos como MySQL en
Macintosh.

Para instalar ColdFusion MX 7:


1.

Si es necesario, inicie la sesin 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.

256 Configuracin del sitio ColdFusion de muestra

4.

Siga las instrucciones de instalacin que aparecen en pantalla.


Algunas de las pantallas del asistente de instalacin son sencillas y no
precisan ninguna explicacin adicional. No obstante, deber
seleccionar estas opciones para las siguientes pantallas:

En la pantalla Installer Configuration (configuracin del


instalador), seleccione la opcin Server Configuration
(configuracin del servidor).

Configuracin del sistema (ColdFusion) 257

En la pantalla Select Installation Directory (seleccionar directorio


de instalacin), acepte la carpeta predeterminada C:\CFusionMX7
haciendo clic en Next (siguiente).

En la pantalla Configure Web Server (configurar el servidor Web),


seleccione la opcin Built-in Web Server (servidor Web
incorporado) situada en la parte inferior de la pantalla.

258 Configuracin del sitio ColdFusion de muestra

En la pantalla RDS Password (contrasea RDS), asegrese de que


est seleccionada la opcin Enable RDS (activar RDS) y luego
introduzca y confirme una contrasea.

Para ms informacin, consulte la documentacin de ColdFusion en


Dreamweaver (Ayuda > Utilizacin de ColdFusion).
Tras instalar e iniciar ColdFusion, cree una carpeta raz para la aplicacin
Web.

Creacin de una carpeta raz


Despus de instalar el software del servidor, cree una carpeta raz para la
aplicacin Web en el sistema que ejecuta ColdFusion y asegrese de que la
carpeta cuenta con los permisos necesarios.
Para crear una carpeta raz para la aplicacin Web:

Cree una carpeta y asgnele el nombre MySampleApps en la carpeta


CFusionMX7\wwwroot del sistema en el que se ejecuta ColdFusion.

N OT A

Anote el nombre de esta carpeta para utilizarlo posteriormente. Cuando lo


escriba ms adelante, asegrese de utilizar exactamente la misma
combinacin de maysculas y minsculas que la empleada al crearlo.

Configuracin del sistema (ColdFusion) 259

De forma predeterminada, ColdFusion configura su servidor Web para que


utilice pginas de la carpeta CFusionMX7\wwwroot. El servidor Web
servir cualquier pgina 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.

Definicin 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 (vase
Copia de los archivos de muestra en la pgina 261).

2.

Defina la carpeta como carpeta local de Dreamweaver (vase


Definicin de una carpeta local en la pgina 262).

3.

Defina la carpeta raz del servidor Web como carpeta remota de


Dreamweaver (vase Definicin de una carpeta remota en
la pgina 263).

4.

Especifique una carpeta para procesar pginas dinmicas (vase


Especificacin del lugar en el que deben procesarse las pginas
dinmicas en la pgina 264).

5.

Cargue los archivos de muestra en el servidor Web (vase Carga de los


archivos de muestra en la pgina 265).

260 Configuracin del sitio ColdFusion de muestra

Copia de los archivos de muestra


Si an no lo ha hecho, copie los archivos de muestra de la carpeta de la
aplicacin de Dreamweaver en una carpeta del disco duro.
Para copiar los archivos de muestra:
1.

Cree una carpeta nueva y asgnele el nombre local_sites en la carpeta de


usuario de su disco duro.
Por ejemplo, cree una de las carpetas siguientes:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites (Windows).

/Users/su_nombre_de_usuario/Documents/local_sites (Macintosh).

NO TA

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 pginas con el fin de hacerlas
accesibles al pblico cuando utilice Macintosh como servidor Web.
2.

Localice la carpeta cafe_townsend en la carpeta de la aplicacin


Dreamweaver en el disco duro.
Si ha instalado Dreamweaver en su ubicacin predeterminada, la ruta
de la carpeta ser sta:

3.

En Windows: C:\Archivos de programa\Macromedia\Dreamweaver


8\Tutorial_assets\cafe_townsend\

En Macintosh: Macintosh HD/Applications/Macromedia


Dreamweaver 8/Tutorial_assets/cafe_townsend

Copie la carpeta cafe_townsend en la carpeta local_sites.


La carpeta cafe_townsend es la carpeta que va a utilizar como carpeta
raz (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.

Definicin de un sitio de Dreamweaver (ColdFusion) 261

Definicin 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 dilogo Administrar sitios, haga clic en Nuevo y
seleccione Sitio.
Aparecer el cuadro de dilogo Definicin del sitio.

2.

Si se muestra la ficha Bsicas, 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.

5.

Haga clic en el icono de carpeta situado junto al campo de texto Carpeta


raz local y vaya a la siguiente carpeta, que contiene los archivos de
muestra de ColdFusion:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites\cafe_townsend \contact\coldfusion
(Windows)

/Users/su_nombre_de_usuario/Documents/local_sites/
cafe_townsend/contact/coldfusion (Macintosh)

Haga clic en Seleccionar para finalizar la definicin de la carpeta local de


Dreamweaver.

Deje abierto el cuadro de dilogo Definicin del sitio. Defina una carpeta
del servidor Web como carpeta remota de Dreamweaver.

262 Configuracin del sitio ColdFusion de muestra

Definicin de una carpeta remota


Despus 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 dilogo Definicin del sitio,


seleccione Datos remotos en la lista Categora.
Aparecer la pantalla Datos remotos.

2.

En el men emergente Acceso, seleccione cmo desea mover sus


archivos hacia y desde el servidor: por una red local (la opcin 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 informacin sobre las dems opciones,
vase Utilizacin de Dreamweaver.
3.

Introduzca la ruta o la configuracin de FTP de la carpeta del servidor


remoto creada en la seccin Creacin de una carpeta raz en
la pgina 259.
La carpeta puede encontrarse en el disco duro o en un equipo remoto.
Aunque haya creado la carpeta en el disco duro, seguir considerndose
como una carpeta remota vlida. 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:\CFusionMX7\wwwroot\MySampleApps
Para ms informacin sobre FTP, consulte Configuracin de las
opciones remotas para acceso FTP en Utilizacin de Dreamweaver de
la Ayuda.

Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin,


defina una carpeta para procesar pginas dinmicas.

Definicin de un sitio de Dreamweaver (ColdFusion) 263

Especificacin del lugar en el que deben


procesarse las pginas dinmicas
Despus de definir la carpeta remota de Dreamweaver, especifique una
carpeta para el procesamiento de pginas dinmicas. Dreamweaver utiliza
esta carpeta para mostrar pginas dinmicas y conectar con bases de datos
mientras se desarrolla una aplicacin.
Para especificar la carpeta en la que deben procesarse las
pginas dinmicas:
1.

En la ficha Avanzadas del cuadro de dilogo Definicin del sitio, haga


clic en Servidor de prueba en la lista Categora.
Aparecer la pantalla Servidor de prueba. Dreamweaver necesita los
servicios de un servidor de prueba para generar y mostrar contenido
dinmico mientras se trabaja. El servidor de prueba puede ser su equipo
local, un servidor de desarrollo, un servidor en funcionamiento o un
servidor de produccin, siempre que pueda procesar pginas de
ColdFusion. En muchas situaciones, incluida la configuracin del sitio
Cafe Townsend, puede utilizar la misma configuracin que en la
categora Datos remotos (vase Definicin de una carpeta remota en
la pgina 263), ya que dicha configuracin apunta a un servidor con
capacidad para procesar pginas de ColdFusion.

2.

Seleccione ColdFusion en el men emergente Modelo de servidor.

3.

En el men emergente Acceso, elija el mismo mtodo (Local/red o FTP)


que ha especificado para acceder a la carpeta remota.
Dreamweaver introduce los parmetros especificados en la categora
Datos remotos. No modifique dichos parmetros.

4.

En el cuadro de texto Prefijo de URL, introduzca la URL raz que


introducira en un navegador Web para solicitar una pgina en la
aplicacin Web.
Con el fin de mostrar datos dinmicos en las pginas mientras trabaja,
Dreamweaver crea un archivo temporal, lo copia en la carpeta raz del
sitio Web e intenta solicitarlo utilizando el prefijo de URL.

N OT A

Dreamweaver proporciona el prefijo de URL ms probable basndose en


la informacin proporcionada en el cuadro de dilogo Definicin del sitio.
Sin embargo, si el prefijo URL es incorrecto, debe corregir el URL o
introducir un nuevo prefijo URL. Para ms informacin, consulte
Configuracin del prefijo de URL en Utilizacin de Dreamweaver.

264 Configuracin del sitio ColdFusion de muestra

Por ejemplo, si la carpeta especificada en el cuadro de texto Carpeta


remota es c:\CFusionMX7\wwwroot\MySampleApps, 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.

Haga clic en Aceptar para definir el sitio y cerrar el cuadro de dilogo


Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el
cuadro de dilogo Administrar sitios.

Una vez especificada una carpeta en la que procesar las pginas dinmicas,
cargue los archivos de muestra al servidor Web.

Carga de los archivos de muestra


Una vez especificada una carpeta en la que procesar las pginas dinmicas,
cargue los archivos de muestra al servidor Web. Deber cargar los archivos
aunque el servidor Web se est ejecutando en el equipo local.
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
pginas dinmicas. Por ejemplo, los vnculos de imgenes podran
romperse en la vista Live Data, ya que los archivos de imagen an no estn
en el servidor. De igual forma, al hacer clic en un vnculo con una pgina
detalle tras obtener una vista previa de una pgina maestra en un
navegador, se producir un error si la pgina detalle no est presente en el
servidor.

SUGERENCIA

5.

El prefijo de URL
debe especificar
siempre una carpeta
en lugar de una
pgina concreta del
sitio. Asimismo,
asegrese de utilizar
la misma
combinacin de
maysculas y
minsculas que la
empleada al crear la
carpeta.

Para cargar los archivos de muestra en el servidor Web:


1.

En el panel Archivos (Ventana > Archivos), seleccione la carpeta raz del


sitio en el panel Vista local.
La carpeta raz 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 Definicin de una carpeta remota en la pgina 263.

El sitio de Dreamweaver quedar definido. El siguiente paso consiste en


conectar con la base de datos de muestra instalada con Dreamweaver.

Definicin de un sitio de Dreamweaver (ColdFusion) 265

Conexin con la base de datos


de muestra (ColdFusion)
Durante la instalacin, Dreamweaver copia en el disco duro una base de
datos de muestra de Microsoft Access. En esta seccin se explica cmo crear
una conexin con la base de datos de muestra.
NO T A

Para ms informacin sobre cmo conectarse a otra base de datos,


consulte Conexiones de base de datos para desarrolladores de
ColdFusion en Utilizacin de Dreamweaver.

Para crear una conexin de base de datos:


1.

Si utiliza un equipo remoto como servidor, copie la base de datos de


muestra en el equipo remoto. (Vase Configuracin de la base de datos
(servidor en un equipo remoto) en la pgina 266).

2.

Cree una fuente de datos de ColdFusion y visualice la conexin en


Dreamweaver (consulte Conexin con la base de datos en
la pgina 267).

Configuracin de la base de datos


(servidor en un equipo remoto)
Esta seccin slo 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, contine con la seccin Conexin con la base de datos en
la pgina 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 ubicacin predeterminada, la ruta del disco duro local al archivo de base
de datos (tutorial.mdb) ser la siguiente:

C:\Archivos de
programa\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend
\data\tutorial.mdb (Windows)

/Applications/Macromedia Dreamweaver 8/Tutorial_assets/


cafe_townsend/data/tutorial.mdb (Macintosh)

266 Configuracin del sitio ColdFusion de muestra

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

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

Conexin con la base de datos


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


vnculo Conexin RDS, introduzca su contrasea RDS y haga clic en
Aceptar.

3.

Haga clic en el signo ms (+) de la barra de herramientas del panel Bases


de datos y seleccione Conexin de Microsoft Access en el men
emergente.

N OT A

Si no aparece el botn de signo ms 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 ubicacin predeterminada, la ruta es la siguiente:

Conexin con la base de datos de muestra (ColdFusion) 267

C:\Archivos de programa\Macromedia\Dreamweaver
8\Tutorial_assets\cafe_townsend\data\tutorial.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 seccin
Configuracin de la base de datos (servidor en un equipo remoto) en
la pgina 266.
Para ms informacin, consulte la documentacin de ColdFusion en
Dreamweaver (Ayuda > Utilizacin de ColdFusion).
6.

Haga clic en Aceptar para crear la conexin.


La conexin se muestra en el panel Bases de datos.

Si la conexin no aparece en el panel, siga uno de estos procedimientos:

Compruebe la configuracin de la carpeta que Dreamweaver utiliza


para procesar las pginas dinmicas (vase Especificacin del lugar
en el que deben procesarse las pginas dinmicas en
la pgina 264).

Vase Solucin de problemas de conexiones de base de datos en


Utilizacin de Dreamweaver (Ayuda > Utilizacin
de Dreamweaver).

268 Configuracin del sitio ColdFusion de muestra

7.

Expanda la rama connTownsend branch y luego la rama Tablas.


Si la rama Tablas contiene las tres tablas siguientes, la aplicacin
ColdFusion de muestra estar configurada para los tutoriales de
Primeros pasos con Dreamweaver. Para ms informacin, consulte
Tutorial: Desarrollo de una aplicacin Web en la pgina 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 parmetros de conexin en Configuring and
Administering ColdFusion MX. En concreto, asegrese de que la ruta del
archivo de base de datos es correcta.

Conexin con la base de datos de muestra (ColdFusion) 269

270 Configuracin del sitio ColdFusion de muestra

APNDICE D

Configuracin del sitio


ASP.NET de muestra

Macromedia Dreamweaver 8 incluye pginas ASP.NET de muestra que le


permitirn crear una pequea aplicacin Web. En este captulo se describe
un modo de configurar la aplicacin de muestra.
Este captulo se ha concebido para desarrolladores de ASP.NET. Para ms
informacin sobre ASP, consulte Configuracin del sitio ASP de muestra
en la pgina 285.
El proceso de configuracin de una aplicacin Web consta de tres pasos. En
primer lugar, configure el sistema. En segundo lugar, defina un sitio de
Dreamweaver. En tercer lugar, conecte la aplicacin a la base de datos. En
este captulo de configuracin se realizan los tres pasos de que consta el
proceso.
Este captulo contiene las siguientes secciones:
Listas de comprobacin de la configuracin para
desarrolladores de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Configuracin del sistema (ASP.NET) . . . . . . . . . . . . . . . . . . . . . .272
Definicin de un sitio de Dreamweaver (ASP.NET). . . . . . . . . . .276
Conexin con la base de datos de muestra (ASP.NET) . . . . . . 282

Listas de comprobacin de la
configuracin para
desarrolladores de ASP.NET
Para configurar una aplicacin Web, debe configurar el sistema, definir un
sitio de Dreamweaver y conectar con una base de datos. En esta seccin se
ofrecen las listas de comprobacin para cada una de estas tareas. Las tareas
se describen detalladamente en el resto del captulo.

271

Configure el sistema:
1.

Asegrese de que dispone de un servidor Web.

2.

Instale Microsoft .NET Framework.

3.

Cree una carpeta raz.

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

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 conexin en Dreamweaver.

Configuracin del sistema


(ASP.NET)
En esta seccin se proporcionan instrucciones para dos configuraciones de
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 configuracin diferente, consulte Captulo 23, Configuracin de una
aplicacin Web en Utilizacin de Dreamweaver.

272 Configuracin del sitio ASP.NET de muestra

La ilustracin siguiente muestra las dos configuraciones descritas en esta


seccin:
Configuracin local
(slo para usuarios de Windows 2000 o XP)

WINDOWS 2000 o XP

Configuracin del servidor remoto


(para usuarios de Macintosh o de Windows)

MAC o PC de WINDOWS

Dreamweaver

Dreamweaver

IIS 5 o superior

.NET Framework

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Acceso de red o ftp

SERVIDOR DE WINDOWS
IIS 5 o superior

.NET Framework

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Para configurar el sistema:


1.

Asegrese de que dispone de un servidor Web (vase Comprobacin de


un servidor Web en la pgina 274).

2.

Instale .NET Framework (vase Instalacin de .NET Framework en


la pgina 274).

3.

Cree una carpeta raz (vase Creacin de una carpeta raz en


la pgina 275).

NO T A

La instalacin del servidor Web y de .NET Framework slo debe


realizarse una vez.

Configuracin del sistema (ASP.NET) 273

Comprobacin de un servidor Web


Para desarrollar y comprobar pginas Web dinmicas, necesitar un
servidor Web. Un servidor Web es un software que suministra pginas Web
en respuesta a las peticiones de los navegadores Web.
Las pginas ASP.NET slo 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, slo 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 rpida 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 instalacin.
Si IIS no est instalado, instlelo ahora. Para ms informacin, consulte
Instalacin de Internet Information Server en la pgina 248.
Despus de instalar el servidor Web, instale .NET Framework.

Instalacin de .NET Framework


Para procesar pginas Web dinmicas, necesitar un servidor de
aplicaciones. Un servidor de aplicaciones es un software que ayuda al
servidor Web a procesar las pginas que contienen scripts o etiquetas del
lado del servidor. Cuando un navegador solicita una pgina de este tipo, el
servidor Web remite la pgina al servidor de aplicaciones para su
procesamiento antes de enviarla al navegador. Para ms informacin,
consulte Aspectos bsicos de las aplicaciones Web en la pgina 231.
En ASP.NET, el servidor de aplicaciones se denomina Microsoft .NET
Framework 1.1. Para desarrollar aplicaciones Web ASP.NET, tambin
deber instalar Microsoft .NET Framework 1.1 Software Development Kit
(SDK). Asegrese de que Framework y SDK estn instalados y en
funcionamiento en un sistema Windows 2000 o Windows XP Professional
que ejecute IIS 5 o superior.

274 Configuracin del sitio ASP.NET de muestra

Para instalar .NET Framework y SDK:


1.

Compruebe si .NET Framework est instalado en el sistema revisando


la lista de aplicaciones del cuadro de dilogo 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. Contine
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 instalacin que aparecen en el sitio Web.
Framework se instala como una actualizacin de Windows.

3.

Descargue Microsoft .NET Framework 1.1 Software Development Kit


(SDK) del mismo sitio Web y siga las instrucciones de instalacin.

Despus de instalar Framework y SDK, cree una carpeta raz para la


aplicacin Web.

Creacin de una carpeta raz


Despus de instalar el software del servidor, cree una carpeta raz para la
aplicacin Web en el sistema que ejecuta Microsoft IIS y asegrese de que
la carpeta cuenta con los permisos necesarios.
Para crear una carpeta raz para la aplicacin Web:
1.

Cree una carpeta llamada MySampleApps en el sistema que ejecuta IIS.

N OT A

Anote el nombre de esta carpeta para utilizarlo posteriormente. Cuando lo


escriba ms adelante, asegrese de utilizar exactamente la misma
combinacin de maysculas y minsculas que la empleada al crearlo.

Un lugar idneo para crear la carpeta es en C:\Inetpub\wwwroot\. De


forma predeterminada, el servidor Web IIS se configura para que utilice
pginas de la carpeta Inetpub\wwwroot. El servidor Web servir
cualquier pgina de esta carpeta o de cualquiera de sus subcarpetas en
respuesta a las peticiones HTTP de un servidor Web.

Configuracin del sistema (ASP.NET) 275

2.

Para asegurarse de que el permiso de ejecucin 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 >
Configuracin >Panel de control; a continuacin, haga doble clic en
Herramientas administrativas y, despus, haga doble clic en Servicios de
Internet Information Server. Expanda la lista del equipo local, luego la
carpeta Web Sites y despus la carpeta Default Web Site. Haga clic con
el botn derecho en la carpeta MySampleApps y seleccione Properties
(propiedades) en el men emergente. En el men emergente Execute
Permissions (permisos de ejecucin), asegrese de que la opcin
Scripts Only (slo scripts) est seleccionada. Por razones de seguridad,
no seleccione la opcin Scripts and Executables (scripts y ejecutables).
A continuacin, haga clic en Aceptar.

El servidor Web est ya configurado para facilitar pginas Web de la carpeta


raz en respuesta a las peticiones HTTP de los navegadores Web.
Una vez que haya configurado el sistema, deber definir un sitio de
Dreamweaver.

Definicin de un sitio de
Dreamweaver (ASP.NET)
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 (vase
Copia de los archivos de muestra en la pgina 277).

2.

Defina la carpeta como carpeta local de Dreamweaver (vase


Definicin de una carpeta local en la pgina 278).

3.

Defina la carpeta raz del servidor Web como carpeta remota de


Dreamweaver (vase Definicin de una carpeta remota en
la pgina 278).

4.

Especifique una carpeta para procesar pginas dinmicas (vase


Especificacin de dnde pueden procesarse las pginas dinmicas en
la pgina 279).

276 Configuracin del sitio ASP.NET de muestra

5.

Cargue los archivos de muestra en el servidor Web (vase Carga de los


archivos de muestra en la pgina 281).

Copia de los archivos de muestra


Si an no lo ha hecho, copie los archivos de muestra de la carpeta de la
aplicacin Dreamweaver en una carpeta del disco duro.
Para copiar los archivos de muestra:
1.

Cree una carpeta nueva y asgnele el nombre local_sites en la carpeta de


usuario de su disco duro.
Por ejemplo, cree una de las carpetas siguientes:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites (Windows).

/Users/su_nombre_de_usuario/Documents/local_sites (Macintosh).

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 pginas con el fin de hacerlas
accesibles al pblico cuando utilice Macintosh como servidor Web.
2.

Localice la carpeta cafe_townsend en la carpeta de la aplicacin


Dreamweaver en el disco duro.
Si ha instalado Dreamweaver en su ubicacin predeterminada, la ruta
de la carpeta ser sta:

3.

En Windows: C:\Archivos de programa\Macromedia\Dreamweaver


8\Tutorial_assets\ cafe_townsend\.

En Macintosh: Macintosh HD/Applications/Macromedia


Dreamweaver 8/Tutorial_assets/cafe_townsend.

Copie la carpeta cafe_townsend en la carpeta local_sites.


La carpeta cafe_townsend es la carpeta que va a utilizar como carpeta
raz (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.

Definicin de un sitio de Dreamweaver (ASP.NET) 277

Definicin de una carpeta local


Despus de copiar la carpeta cafe_townsend, defina la carpeta que contiene
los archivos de muestra de ASP.NET como una carpeta local de
Dreamweaver.
Para definir la carpeta local de Dreamweaver:
1.

En Dreamweaver, seleccione Sitio > Administrar sitios. En el cuadro de


dilogo Administrar sitios, haga clic en el botn Nuevo y seleccione
Sitio.
Aparecer el cuadro de dilogo Definicin del sitio.

2.

Si se muestra la ficha Bsicas, haga clic en la ficha Avanzadas.

3.

En el cuadro de texto Nombre del sitio, escriba Cafe Townsend


ASP.NET.
El nombre identifica el sitio en Dreamweaver.

4.

5.

Haga clic en el icono de carpeta situado junto al campo de texto Carpeta


raz local y vaya a la siguiente carpeta, que contiene los archivos de
muestra de ASP.NET:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites\cafe_townsend\contact\aspnet (Windows)

/Users/su_nombre_de_usuario/Documents/local_sites/
cafe_townsend/contact/aspnet (Macintosh)

Haga clic en Seleccionar para finalizar la definicin de la carpeta local de


Dreamweaver.

Deje abierto el cuadro de dilogo Definicin del sitio. Defina una carpeta
del servidor Web como carpeta remota de Dreamweaver.

Definicin de una carpeta remota


Despus 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 dilogo Definicin del sitio,


seleccione Datos remotos en la lista Categora.
Aparecer la pantalla Datos remotos.

278 Configuracin del sitio ASP.NET de muestra

2.

En el men emergente Acceso, seleccione cmo desea mover sus


archivos hacia y desde el servidor: por una red local (la opcin Local/red)
o mediante FTP.

NO TA

En el men emergente Acceso aparecen otras opciones que no se tratan


en este manual. Para informacin sobre ellas, consulte Utilizacin de
Dreamweaver (Ayuda > Utilizacin de Dreamweaver).
3.

Introduzca la ruta o la configuracin de FTP de la carpeta del servidor


remoto creada en la seccin Creacin de una carpeta raz en
la pgina 275.
La carpeta puede encontrarse en el disco duro o en un equipo remoto.
Aunque haya creado la carpeta en el disco duro, seguir considerndose
como una carpeta remota vlida. 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:\Inetpub\wwwroot\MySampleApps
Para ms informacin sobre FTP, consulte Configuracin de las
opciones remotas para acceso FTP en Utilizacin de Dreamweaver de
la Ayuda.

Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin,


defina una carpeta para procesar pginas dinmicas.

Especificacin de dnde pueden


procesarse las pginas dinmicas
Una vez que haya definido la carpeta remota de Dreamweaver, especifique
una carpeta en la que procesar las pginas dinmicas. Dreamweaver utiliza
esta carpeta para mostrar pginas dinmicas y conectar con bases de datos
mientras usted desarrolla la aplicacin.

Definicin de un sitio de Dreamweaver (ASP.NET) 279

Para especificar la carpeta en la que deben procesarse las


pginas dinmicas:
1.

En la ficha Avanzadas del cuadro de dilogo Definicin del sitio, haga


clic en Servidor de prueba en la lista Categora.
Aparecer la pantalla Servidor de prueba. Dreamweaver necesita los
servicios de un servidor de prueba para generar y mostrar contenido
dinmico mientras se trabaja. El servidor de prueba puede ser el equipo
local, un servidor de desarrollo, un servidor en funcionamiento o un
servidor de produccin, siempre que pueda procesar pginas ASP.NET.
En muchas situaciones, incluida la configuracin del sitio Cafe
Townsend, puede utilizar la misma configuracin que en la categora
Datos remotos (vase Definicin de una carpeta remota en
la pgina 278), ya que dicha configuracin apunta a un servidor con
capacidad para procesar pginas de ASP.NET.

2.

Seleccione ASP.NET VB o ASP.NET C# en el men emergente


Modelo de servidor.

3.

En el men emergente Acceso, elija el mismo mtodo (Local/red o FTP)


que ha especificado para acceder a la carpeta remota.
Dreamweaver introduce los parmetros especificados en la categora
Datos remotos. No modifique dichos parmetros.

4.

En el cuadro de texto Prefijo de URL, introduzca la URL raz que


introducira en un navegador Web para solicitar una pgina en la
aplicacin Web.
Con el fin de mostrar datos dinmicos en las pginas mientras trabaja,
Dreamweaver crea un archivo temporal, lo copia en la carpeta raz del
sitio Web e intenta solicitarlo utilizando el prefijo de URL.
Dreamweaver proporciona el prefijo de URL ms probable basndose
en la informacin proporcionada en el cuadro de dilogo Definicin
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 ms informacin, consulte
Configuracin del prefijo de URL en Utilizacin de Dreamweaver.
Si la carpeta especificada en el cuadro de texto Carpeta remota es
C:\Inetpub\wwwroot\MySampleApps, el prefijo de URL deber ser el
siguiente:
http://localhost/MySampleApps/

280 Configuracin del sitio ASP.NET de muestra

Haga clic en Aceptar para definir el sitio y cerrar el cuadro de dilogo


Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el
cuadro de dilogo Administrar sitios.

Una vez especificada una carpeta en la que procesar las pginas dinmicas,
cargue los archivos de muestra al servidor Web.

Carga de los archivos de muestra


Una vez que haya especificado una carpeta en la que procesar las pginas
dinmicas, cargue los archivos de muestra al servidor Web. Deber cargar
los archivos aunque el servidor Web se est ejecutando en el equipo local.
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
pginas dinmicas. Por ejemplo, los vnculos de imgenes podran
romperse en la vista Live Data, ya que los archivos de imagen an no estn
en el servidor. De igual forma, al hacer clic en un vnculo con una pgina
detalle tras obtener una vista previa de una pgina maestra en un
navegador, se producir un error si la pgina detalle no est presente en
el servidor.

S U G E R E N C IA

5.

El prefijo de URL
debe especificar
siempre un directorio
en lugar de una
pgina concreta del
sitio. Asimismo,
asegrese de utilizar
la misma
combinacin de
maysculas y
minsculas que la
empleada al crear la
carpeta.

Para cargar los archivos de muestra en el servidor Web:


1.

En el panel Archivos (Ventana > Archivos), seleccione la carpeta raz del


sitio en el panel Vista local.
La carpeta raz 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 Definicin de una carpeta remota en la pgina 278.

El sitio de Dreamweaver quedar definido. El siguiente paso consiste en


conectar con la base de datos de muestra instalada con Dreamweaver.

Definicin de un sitio de Dreamweaver (ASP.NET) 281

Conexin con la base de datos


de muestra (ASP.NET)
Durante la instalacin, Dreamweaver copia en el disco duro una base de
datos de muestra de Microsoft Access. En esta seccin se explica cmo crear
una conexin con la base de datos de muestra.
NO T A

Para obtener informacin sobre la conexin con otra base de datos,


consulte el Captulo 25, Conexiones de base de datos para
desarrolladores de ASP.NET de Utilizacin de Dreamweaver (Ayuda >
Utilizacin de Dreamweaver).

Para crear una conexin de base de datos:


1.

Si utiliza un equipo remoto como servidor, copie la base de datos de


muestra en el equipo remoto. (Vase Configuracin de la base de datos
(servidor en el equipo remoto) en la pgina 282).

2.

Cree la conexin en Dreamweaver (vase Creacin de una conexin de


base de datos en la pgina 283).

Configuracin de la base de datos


(servidor en el equipo remoto)
Esta seccin slo 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, contine con la seccin Creacin de una conexin de base
de datos en la pgina 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 ubicacin predeterminada, la ruta del disco duro local al archivo de base
de datos (tutorial.mdb) ser la siguiente:

C:\Archivos de
programa\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend
\data\tutorial.mdb (Windows)

/Applications/Macromedia Dreamweaver 8/Tutorial_assets/


cafe_townsend/data/tutorial.mdb (Macintosh)

282 Configuracin del sitio ASP.NET de muestra

Puede colocar el archivo en cualquier carpeta del equipo remoto o crear


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

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

Cuando la base de datos est en su lugar, conctese a ella.

Creacin de una conexin de base de


datos
El ltimo paso del proceso de configuracin es crear una conexin con la
base de datos.
Para crear una conexin con la base de datos en
Dreamweaver:
1.

Abra cualquier pgina de ASP.NET en Dreamweaver y, a continuacin,


abra el panel Bases de datos (Ventana > Bases de datos).

2.

Haga clic en el botn del signo ms (+) del panel Bases de datos y
seleccione Conexin de base de datos OLE en el-men emergente.
Aparecer el cuadro de dilogo Conexin de base de datos OLE.

3.

Introduzca connTownsend como nombre de conexin.

4.

Haga clic en el botn Plantillas.


Aparecer el cuadro de dilogo Plantilla de cadena de conexin.

5.

En la lista de plantillas, seleccione Microsoft Access 2000 (Microsoft Jet


4.0 Provider) y haga clic en Aceptar.
Dreamweaver aadir una plantilla de cadena de conexin al cuadro de
dilogo Conexin de base de datos OLE. La plantilla contiene
marcadores de posicin para la informacin ausente en la cadena de
conexin.

Conexin 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 ubicacin predeterminada, utilice la siguiente ruta:
C:\Archivos de
programa\Macromedia\Dreamweaver 8\Tutorial_assets\data\tutorial.mdb

NO T A

La ruta puede variar segn dnde 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 programa\Macromedia\Dreamweaver 8\Tutorial_assets\data\tutoria
l.mdb;
Tambin puede introducir esta ruta para una base de datos en un
servidor remoto:
Fuente de datos=C:\users\Denman\Sites\data\tutorial.mdb;
7.

Borre las lneas ID de usuario y Contrasea.


La base de datos Access no requiere un ID de usuario ni una contrasea.

8.

Haga clic en Prueba.


Dreamweaver intentar conectarse con la base de datos. Si falla la
conexin, siga este procedimiento:

9.

Compruebe la ruta de la base de datos.

Compruebe la configuracin de la carpeta que Dreamweaver utiliza


para procesar las pginas dinmicas (vase Especificacin de dnde
pueden procesarse las pginas dinmicas en la pgina 279).

Para desplegar los archivos de soporte, seleccione Sitio > Avanzadas


> Desplegar archivos de soporte.

Consulte el Captulo 29, Solucin de problemas de conexiones de


base de datos de Utilizacin de Dreamweaver (Ayuda > Utilizacin
de Dreamweaver).

Haga clic en Aceptar.


La nueva conexin se muestra en el panel Bases de datos.

Ahora la aplicacin ASP.NET de muestra est configurada para los


tutoriales de Primeros pasos con Dreamweaver. Para ms informacin,
consulte Tutorial: Desarrollo de una aplicacin Web en la pgina 207.

284 Configuracin del sitio ASP.NET de muestra

APNDICE E

Configuracin del sitio


ASP de muestra

Macromedia Dreamweaver 8 incluye pginas Microsoft Active Server


(ASP) de muestra que le permitirn crear una pequea aplicacin Web.
En este captulo se describe cmo configurar la aplicacin de muestra
empleando Microsoft Internet Information Server (IIS). Para ms
informacin sobre estos servidores Web, consulte Instalacin de un
servidor Web en la pgina 247.
Este captulo se ha concebido exclusivamente para desarrolladores de ASP.
Para ms informacin sobre ASP.NET, consulte Configuracin del sitio
ASP.NET de muestra en la pgina 271.
El proceso de configuracin de una aplicacin Web consta de tres pasos.
En primer lugar, configure el sistema. En segundo lugar, defina un sitio de
Dreamweaver. En tercer lugar, conecte la aplicacin a la base de datos. En
este captulo de configuracin se realizan los tres pasos de que consta el
proceso.
Este captulo contiene las siguientes secciones:
Listas de comprobacin de la configuracin para
desarrolladores de ASP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Configuracin del sistema (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . .287
Definicin de un sitio de Dreamweaver (ASP) . . . . . . . . . . . . . . 292
Conexin con la base de datos de muestra (ASP) . . . . . . . . . . . 298

285

Listas de comprobacin de la
configuracin para
desarrolladores de ASP
Para configurar una aplicacin Web, debe configurar el sistema, definir un
sitio de Dreamweaver y conectar con una base de datos. En esta seccin se
ofrecen las listas de comprobacin para cada una de estas tareas. Las tareas
se describen detalladamente en el resto del captulo.
Configure el sistema:
1.

Asegrese de que dispone de un servidor Web.

2.

Instale un servidor de aplicaciones.

3.

Compruebe la instalacin.

4.

Cree una carpeta raz.

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

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 conexin en Dreamweaver.

286 Configuracin del sitio ASP de muestra

Configuracin del sistema (ASP)


En esta seccin 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.
La ilustracin siguiente muestra las dos configuraciones descritas en esta
seccin:
Configuracin local
(slo para usuarios de Windows)

PC de WINDOWS
Dreamweaver

Configuracin del servidor remoto


(para usuarios de Macintosh o de Windows)

MAC o PC de WINDOWS
Dreamweaver

IIS

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Acceso de red o ftp

SERVIDOR DE WINDOWS
IIS

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Configuracin del sistema (ASP) 287

Para configurar el sistema:


1.

Asegrese de que dispone de un servidor Web (vase Comprobacin de


un servidor Web en la pgina 288).

2.

Si es necesario, instale un servidor de aplicaciones (vase Instalacin de


un servidor de aplicaciones ASP en la pgina 289).

3.

Compruebe la instalacin (vase Comprobacin de la instalacin en


la pgina 289).

4.

Cree una carpeta raz (vase Creacin de una carpeta raz en


la pgina 291).

NO TA

La instalacin del servidor Web y del servidor de aplicaciones slo debe


realizarse una vez.

Comprobacin de un servidor Web


Para desarrollar y comprobar pginas Web dinmicas, necesitar un
servidor Web. Un servidor Web es un software que suministra pginas Web
en respuesta a las peticiones de los navegadores Web.
Asegrese de que Microsoft IIS est instalado y en ejecucin en el disco
duro o en un equipo Windows remoto. (Los usuarios de Macintosh
debern instalar Microsoft IIS en un equipo Windows remoto.) Una forma
rpida 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 instalacin.
Si IIS no est instalado, instlelo ahora. Para instrucciones, consulte
Instalacin de un servidor Web en la pgina 247.
Despus de instalar el servidor Web, deber instalar un servidor de
aplicaciones.

288 Configuracin del sitio ASP de muestra

Instalacin de un servidor de aplicaciones


ASP
Para procesar pginas Web dinmicas, necesitar un servidor de
aplicaciones. Un servidor de aplicaciones es un software que ayuda al
servidor Web a procesar las pginas que contienen scripts o etiquetas del
lado del servidor. Cuando un navegador solicita una pgina de este tipo, el
servidor Web remite la pgina al servidor de aplicaciones para su
procesamiento antes de enviarla al navegador. Para ms informacin,
consulte Aspectos bsicos de las aplicaciones Web en la pgina 231.
Si ha instalado IIS en un equipo Windows, no necesita un servidor de
aplicaciones ASP distinto. IIS tambin funciona con un servidor de
aplicaciones ASP. Para ms informacin sobre la instalacin y
comprobacin de IIS, consulte Instalacin de un servidor Web en
la pgina 247.
Debe comprobar el servidor para asegurarse de que funciona
correctamente.

Comprobacin de la instalacin
Puede comprobar el motor ASP de IIS ejecutando una pgina de prueba.
Para comprobar el motor ASP de IIS:
1.

En Dreamweaver o cualquier editor de texto, cree un archivo de texto


normal y asgnele el nombre timetest.asp.

2.

En el archivo, introduzca el cdigo siguiente:


<p>This page was created at <b>
<%= Time %>
</b> on the computer running ASP.</p>

Este cdigo mostrar la hora en que la pgina se proces en el servidor.


3.

Copie el archivo en la carpeta C:\Inetpub\wwwroot del equipo


Windows donde se ejecute IIS.

4.

En el navegador Web, introduzca el URL de la pgina de prueba y,


a continuacin, presione Intro.
Si se est ejecutando IIS en el equipo local, puede introducir el
siguiente URL:
http://localhost/timetest.asp

Configuracin del sistema (ASP) 289

La pgina de prueba deber abrirse y mostrar una hora del da de este


modo:

La hora especificada se considera contenido dinmico porque cambia cada


vez que se solicita la pgina. Haga clic en el botn Actualizar del navegador
para generar una nueva pgina con otra hora.
NO TA

Si examina el cdigo fuente (Ver > Cdigo fuente en Internet Explorer)


observar que la pgina no utiliza ningn JavaScript del lado del cliente
para conseguir este efecto.

Si la pgina no funciona de la forma deseada, compruebe los siguientes


errores posibles:

El archivo no tiene la extensin .asp.

Ha escrito la ruta del archivo de la pgina


(C:\Inetput\wwwroot\timetest.asp) en lugar de su URL (por ejemplo,
http://localhost/timetest.asp) en el cuadro de texto Direccin del
navegador.
Si escribe una ruta de archivo en el navegador (como quiz est
acostumbrado a hacer con las pginas HTML normales), omite el
servidor Web y el servidor de aplicaciones. Como consecuencia, el
servidor nunca procesa la pgina.

El URL contiene un error de escritura. Compruebe si hay errores y no


introduzca una barra diagonal despus del nombre de archivo, como
http://localhost/timetest.asp/.

El cdigo de la pgina contiene un error de escritura.

290 Configuracin del sitio ASP de muestra

Despus de instalar y comprobar el software del servidor, cree una carpeta


raz para la aplicacin Web.

Creacin de una carpeta raz


Despus de instalar el software del servidor, cree una carpeta raz para la
aplicacin Web en el sistema que ejecuta Microsoft IIS y asegrese de que
la carpeta cuenta con los permisos necesarios.
Para crear una carpeta raz para la aplicacin Web:
1.

Cree una carpeta llamada MySampleApps en el sistema que ejecuta IIS.

NO TA

Anote el nombre de esta carpeta para utilizarlo posteriormente. Cuando lo


escriba ms adelante, asegrese de utilizar exactamente la misma
combinacin de maysculas y minsculas que la empleada al crearlo.

Un lugar idneo para crear la carpeta es en C:\Inetpub\wwwroot\. De


forma predeterminada, el servidor Web IIS se configura para que utilice
pginas de la carpeta Inetpub\wwwroot. El servidor Web
servir cualquier pgina 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 ejecucin 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 >
Configuracin > Panel de Control; a continuacin, haga doble clic
en Herramientas administrativas y despus haga doble clic en
Internet Information Services).

b.

Expanda la lista del equipo local, luego la carpeta Web Sites y


despus la carpeta Default Web Site.

c.

Haga clic con el botn derecho en la carpeta MySampleApps y


seleccione Properties (propiedades) en el men emergente.

d.

En el men emergente Execute Permissions (permisos de


ejecucin), asegrese de que la opcin Scripts Only (slo scripts)
est seleccionada. Por razones de seguridad, no seleccione la opcin
Scripts and Executables (scripts y ejecutables).

e.

Haga clic en Aceptar.

El servidor Web est ya configurado para facilitar pginas Web de la carpeta


raz en respuesta a las peticiones HTTP de los navegadores Web.

Configuracin del sistema (ASP) 291

Una vez que haya configurado el sistema, deber definir un sitio de


Dreamweaver.

Definicin de un sitio de
Dreamweaver (ASP)
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 (vase
Copia de los archivos de muestra en la pgina 293).

2.

Defina la carpeta como carpeta local de Dreamweaver (vase


Definicin de una carpeta local en la pgina 294).

3.

Defina la carpeta raz del servidor Web como carpeta remota de


Dreamweaver (vase Definicin de una carpeta remota en
la pgina 294).

4.

Especifique una carpeta para procesar pginas dinmicas (vase


Especificacin de dnde pueden procesarse las pginas dinmicas en
la pgina 296).

5.

Cargue los archivos de muestra en el servidor Web (vase Carga de los


archivos de muestra en la pgina 297).

292 Configuracin del sitio ASP de muestra

Copia de los archivos de muestra


Si an no lo ha hecho, copie los archivos de muestra de la carpeta de la
aplicacin Dreamweaver en una carpeta del disco duro.
Para copiar los archivos de muestra:
1.

Cree una carpeta nueva y asgnele el nombre local_sites en la carpeta de


usuario de su disco duro.
Por ejemplo, cree una de las carpetas siguientes:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites (Windows).

/Users/su_nombre_de_usuario/Documents/local_sites (Macintosh).

NO TA

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 pginas con el fin de hacerlas
accesibles al pblico cuando utilice Macintosh como servidor Web.
2.

Localice la carpeta cafe_townsend en la carpeta de la aplicacin


Dreamweaver en el disco duro.
Si ha instalado Dreamweaver en su ubicacin predeterminada, la ruta
de la carpeta ser sta:

3.

En Windows: C:\Archivos de programa\Macromedia\Dreamweaver


8\Tutorial_assets\cafe_townsend\.

En Macintosh: Macintosh HD/Applications/Macromedia


Dreamweaver 8/Tutorial_assets/cafe_townsend.

Copie la carpeta cafe_townsend en la carpeta local_sites.


La carpeta cafe_townsend es la carpeta que va a utilizar como carpeta
raz (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.

Definicin de un sitio de Dreamweaver (ASP) 293

Definicin de una carpeta local


Despus de copiar la carpeta cafe_townsend, defina la carpeta que contiene
los archivos de muestra de ASP como una carpeta local de Dreamweaver.
Para definir la carpeta local de Dreamweaver:
1.

En Dreamweaver, seleccione Sitio > Administrar sitios. En el cuadro de


dilogo Administrar sitios, haga clic en el botn Nuevo y seleccione
Sitio.
Aparecer el cuadro de dilogo Definicin del sitio.

2.

Si se muestra la ficha Bsicas, haga clic en la ficha Avanzadas.

3.

En el cuadro de texto Nombre del sitio, escriba Cafe Townsend ASP.


El nombre identifica el sitio en Dreamweaver.

4.

5.

Haga clic en el icono de carpeta situado junto al campo de texto Carpeta


raz local y vaya a la siguiente carpeta, que contiene los archivos de
muestra de ASP:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites\cafe_townsend\contact\asp (Windows)

/Users/su_nombre_de_usuario/Documents/local_sites/
cafe_townsend/contact/asp (Macintosh)

Haga clic en Seleccionar para finalizar la definicin de la carpeta local de


Dreamweaver.

Deje abierto el cuadro de dilogo Definicin del sitio. Defina una carpeta
del servidor Web como carpeta remota de Dreamweaver.

Definicin de una carpeta remota


Despus 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 dilogo Definicin del sitio,


seleccione Datos remotos en la lista Categora.
Aparecer el cuadro de dilogo Datos remotos.

294 Configuracin del sitio ASP de muestra

2.

En el men emergente Acceso, seleccione cmo desea mover sus


archivos hacia y desde el servidor: por una red local (la opcin Local/red)
o mediante FTP.

NO TA

En el men emergente Acceso aparecen otras opciones que no se tratan


en este manual. Para ms informacin sobre ellas, consulte el apartado
Utilizacin de Dreamweaver.
3.

Introduzca la ruta o la configuracin de FTP de la carpeta del servidor


remoto creada en la seccin Creacin de una carpeta raz en
la pgina 291.
La carpeta puede encontrarse en el disco duro o en un equipo remoto.
Aunque haya creado la carpeta en el disco duro, seguir considerndose
como una carpeta remota vlida. 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:\Inetpub\wwwroot\MySampleApps
Para ms informacin sobre FTP, consulte Configuracin de las
opciones remotas para acceso FTP en Utilizacin de Dreamweaver de
la Ayuda.

Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin,


defina una carpeta para procesar pginas dinmicas.

Definicin de un sitio de Dreamweaver (ASP) 295

Especificacin de dnde pueden


procesarse las pginas dinmicas
Despus de definir la carpeta remota de Dreamweaver, especifique una
carpeta para el procesamiento de pginas dinmicas. Dreamweaver utiliza
esta carpeta para mostrar pginas dinmicas y conectar con bases de datos
mientras se desarrolla una aplicacin.
Para especificar la carpeta en la que deben procesarse las
pginas dinmicas:
1.

En la ficha Avanzadas del cuadro de dilogo Definicin del sitio, haga


clic en Servidor de prueba en la lista Categora.
Aparecer la pantalla Servidor de prueba. Dreamweaver necesita los
servicios de un servidor de prueba para generar y mostrar contenido
dinmico mientras se trabaja. El servidor de prueba puede ser el equipo
local, un servidor de desarrollo, un servidor en funcionamiento o un
servidor de produccin, siempre y cuando permita procesar pginas
ASP. En muchas situaciones, incluida la configuracin del sitio Cafe
Townsend, puede utilizar la misma configuracin que en la categora
Datos remotos (vase Definicin de una carpeta remota en
la pgina 294), ya que dicha configuracin apunta a un servidor con
capacidad para procesar pginas de ASP.

2.

Seleccione ASP JavaScript o ASP VBScript en el men emergente


Modelo de servidor.

3.

En el men emergente Acceso, elija el mismo mtodo (Local/red o FTP)


que ha especificado para acceder a la carpeta remota.
Dreamweaver introduce los parmetros especificados en la categora
Datos remotos. No modifique dichos parmetros.

296 Configuracin del sitio ASP de muestra

4.

En el cuadro de texto Prefijo de URL, introduzca la URL raz que


introducira en un navegador Web para solicitar una pgina en la
aplicacin Web.
Con el fin de mostrar datos dinmicos en las pginas mientras trabaja,
Dreamweaver crea un archivo temporal, lo copia en la carpeta raz del
sitio Web e intenta solicitarlo utilizando el prefijo de URL.
Dreamweaver proporciona el prefijo de URL ms probable basndose
en la informacin proporcionada en el cuadro de dilogo Definicin
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 ms informacin, consulte
Configuracin del prefijo de URL en Utilizacin de Dreamweaver.
Si la carpeta especificada en el cuadro de texto Carpeta remota es
C:\Inetpub\wwwroot\MySampleApps, el prefijo de URL deber ser el
siguiente:
http://localhost/MySampleApps/
Haga clic en Aceptar para definir el sitio y cerrar el cuadro de dilogo
Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el
cuadro de dilogo Administrar sitios.

Una vez especificada una carpeta en la que procesar las pginas dinmicas,
cargue los archivos de muestra al servidor Web.

Carga de los archivos de muestra


Una vez que haya especificado una carpeta en la que procesar las pginas
dinmicas, cargue los archivos de muestra al servidor Web. Deber cargar
los archivos aunque el servidor Web se est ejecutando en el equipo local.

SUGERENCIA

5.

El prefijo de URL
debe especificar
siempre un directorio
en lugar de una
pgina concreta del
sitio. Asimismo,
asegrese de utilizar
la misma
combinacin de
maysculas y
minsculas que la
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
pginas dinmicas. Por ejemplo, los vnculos de imgenes podran
romperse en la vista Live Data, ya que los archivos de imagen an no estn
en el servidor. De igual forma, al hacer clic en un vnculo con una pgina
detalle tras obtener una vista previa de una pgina maestra en un
navegador, se producir un error si la pgina detalle no est presente en el
servidor.

Definicin de un sitio de Dreamweaver (ASP) 297

Para cargar los archivos de muestra en el servidor Web:


1.

En el panel Archivos (Ventana > Archivos), seleccione la carpeta raz del


sitio en el panel Vista local.
La carpeta raz 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 Definicin de una carpeta remota en la pgina 294.

El sitio de Dreamweaver quedar definido. El siguiente paso consiste en


conectar con la base de datos de muestra instalada con Dreamweaver.

Conexin con la base de datos


de muestra (ASP)
Durante la instalacin, Dreamweaver copia en el disco duro una base de
datos de muestra de Microsoft Access. En esta seccin se explica cmo crear
una conexin con la base de datos de muestra.
N OT A

Para obtener informacin sobre la conexin con otra base de datos,


consulte el Captulo 26, Conexiones de base de datos para
desarrolladores de ASP de Utilizacin de Dreamweaver.

Para crear una conexin de base de datos:


1.

Si utiliza un equipo remoto como servidor, configure la base de datos de


muestra en el equipo remoto (vase Configuracin de la base de datos
(servidor en el equipo remoto) en la pgina 299).

2.

Cree la conexin en Dreamweaver (vase Creacin de una conexin de


base de datos en la pgina 300).

298 Configuracin del sitio ASP de muestra

Configuracin de la base de datos


(servidor en el equipo remoto)
Esta seccin slo 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, contine con la seccin Creacin de una conexin de base
de datos en la pgina 300.
Antes de crear una conexin 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 seala 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 ubicacin predeterminada, la ruta del
disco duro local al archivo de base de datos (tutorial.mdb) ser la
siguiente:

C:\Archivos de
programa\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_towns
end\data\tutorial.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 pblico.

Conexin con la base de datos de muestra (ASP) 299

2.

Compruebe que est instalado el Controlador de Microsoft Access


versin 4.0 o superior en el equipo remoto.
Para averiguar si el controlador ya est instalado, consulte
Visualizacin de los controladores ODBC instalados en un sistema
Windows en Utilizacin 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 seale a la base de datos


de muestra del equipo remoto.
Para instrucciones, vanse los artculos siguientes en el sitio Web de
Microsoft:

Si el equipo remoto se ejecuta en Windows 2000, vase el artculo


300596 en
http://support.microsoft.com/default.aspx?scid=kb;en-us;300596.

Si el equipo remoto se ejecuta en Windows XP, vase el artculo


305599 en
http://support.microsoft.com/default.aspx?scid=kb;en-us;305599.

Despus de instalar la base de datos, el controlador de base de datos y el


DSN, cree una conexin con la base de datos en Dreamweaver.

Creacin de una conexin de base de


datos
El ltimo paso del proceso de configuracin es crear una conexin con la
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
instalacin para conectarse rpidamente a la base de datos de muestra. Para
obtener ms informacin sobre DSN, consulte Utilizacin de un DSN
en Utilizacin de Dreamweaver.

300 Configuracin del sitio ASP de muestra

Para crear una conexin con la base de datos en


Dreamweaver:
1.

Abra cualquier pgina de ASP en Dreamweaver y, a continuacin, abra


el panel Bases de datos (Ventana > Bases de datos).

2.

Haga clic en el botn de signo ms (+) en el panel y seleccione Nombre


de fuente de datos (DSN) en el men emergente.
Aparecer el cuadro de dilogo Nombre de fuente de datos (DSN).

3.

Introduzca connTownsend como nombre de conexin.

4.

(Slo en Windows) Lleve a cabo una de estas operaciones:

Si el servidor se encuentra en el equipo local, seleccione la opcin


Utilizando DSN local.

Si el servidor se encuentra en un sistema remoto, seleccione la


opcin 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 botn DSN y elija CafeTownsend en la lista de DSN.


Si est utilizando Dreamweaver en un equipo Windows, Dreamweaver
habr creado durante la instalacin un DSN llamado CafeTownsend,
que apunta a la base de datos de Microsoft Access de la carpeta de la
aplicacin Dreamweaver.

6.

Haga clic en Prueba.


Dreamweaver intentar conectarse con la base de datos. Si falla la
conexin, siga este procedimiento:

7.

Compruebe el DSN.

Compruebe la configuracin de la carpeta que Dreamweaver utiliza


para procesar las pginas dinmicas (vase Especificacin de
dnde pueden procesarse las pginas dinmicas en la pgina 296).

Consulte el Captulo 29, Solucin de problemas de conexiones de


base de datos de Utilizacin de Dreamweaver.

Haga clic en Aceptar.


La nueva conexin se muestra en el panel Bases de datos.

Ahora la aplicacin ASP de muestra est configurada para los tutoriales de


Primeros pasos con Dreamweaver. Para ms informacin, consulte Tutorial:
Desarrollo de una aplicacin Web en la pgina 207.

Conexin con la base de datos de muestra (ASP) 301

302 Configuracin del sitio ASP de muestra

APNDICE F

Configuracin del sitio


JSP de muestra

Macromedia Dreamweaver 8 incluye pginas Web Java Server Pages (JSP)


de muestra que le permitirn crear una pequea aplicacin Web. En este
captulo se describe una forma de configurar la aplicacin de muestra
empleando Microsoft Internet Information Server (IIS). Para ms
informacin sobre estos servidores Web, consulte Instalacin de un
servidor Web en la pgina 247. Si utiliza un servidor Web diferente,
consulte el Captulo 23, Configuracin de una aplicacin Web de
Utilizacin de Dreamweaver (Ayuda > Utilizacin de Dreamweaver).
El proceso de configuracin de una aplicacin Web consta de tres
pasos. En primer lugar, configure el sistema. En segundo lugar, defina
un sitio de Dreamweaver. En tercer lugar, conecte la aplicacin a la
base de datos. En este captulo de configuracin se realizan los tres
pasos de que consta el proceso.
Este captulo contiene las siguientes secciones:
Listas de comprobacin de la configuracin para
desarrolladores de JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Configuracin del sistema (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Definicin de un sitio de Dreamweaver (JSP). . . . . . . . . . . . . . . 309
Conexin con la base de datos de muestra (JSP) . . . . . . . . . . . . 314

303

Listas de comprobacin de la
configuracin para
desarrolladores de JSP
Para configurar una aplicacin Web, debe configurar el sistema, definir un
sitio de Dreamweaver y conectar con una base de datos. En esta seccin se
ofrecen las listas de comprobacin para cada una de estas tareas. Las tareas
se describen detalladamente en el resto del captulo.
Configure el sistema:
1.

Asegrese de que dispone de un servidor Web.

2.

Instale el servidor de aplicaciones JSP.

3.

Cree una carpeta raz.

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

5.

Cargue los archivos de muestra en el servidor Web.

Conecte con la base de datos:


1.

Instale un controlador de puente JDBC-ODBC.

2.

Si utiliza un equipo remoto como servidor, copie la base de datos de


muestra en el equipo remoto.

3.

Cree la conexin en Dreamweaver.

Configuracin del sistema (JSP)


En esta seccin se proporcionan instrucciones para dos configuraciones de
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 configuracin diferente, consulte Captulo 23, Configuracin
de una aplicacin Web en Utilizacin de Dreamweaver.

304 Configuracin del sitio JSP de muestra

La ilustracin siguiente muestra las dos configuraciones descritas en esta


seccin:
Configuracin local
(slo para usuarios de Windows)

PC de WINDOWS

Configuracin del servidor remoto


(para usuarios de Macintosh o de Windows)

MAC o PC de WINDOWS

Dreamweaver

Dreamweaver

IIS

Servidor de aplicaciones JSP

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Acceso de red o ftp

SERVIDOR DE WINDOWS
IIS

Servidor de aplicaciones JSP

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Para configurar el sistema:


1.

Asegrese de que dispone de un servidor Web (vase Comprobacin de


un servidor Web en la pgina 306).

2.

Instale el servidor de aplicaciones JSP (vase Instalacin de un servidor


de aplicaciones JSP en la pgina 306).

3.

Cree una carpeta raz (vase Creacin de una carpeta raz en


la pgina 308).

NO T A

La instalacin del servidor Web y del servidor de aplicaciones slo debe


realizarse una vez.

Configuracin del sistema (JSP) 305

Comprobacin de un servidor Web


Para desarrollar y comprobar pginas Web dinmicas, necesitar un
servidor Web. Un servidor Web es un software que suministra pginas Web
en respuesta a las peticiones de los navegadores Web.
Asegrese de que Microsoft IIS est instalado y en ejecucin en el disco
duro o en un equipo Windows remoto. (Los usuarios de Macintosh
debern instalar Microsoft IIS en un equipo Windows remoto.) Una forma
rpida 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 instalacin.
Si IIS no est instalado, instlelo ahora. Para instrucciones, consulte
Instalacin de un servidor Web en la pgina 247.
Tras instalar el servidor Web, instale el servidor de aplicaciones.

Instalacin de un servidor de aplicaciones


JSP
Para procesar pginas Web dinmicas, necesitar un servidor de
aplicaciones. Un servidor de aplicaciones es un software que ayuda al
servidor Web a procesar las pginas que contienen scripts o etiquetas del
lado del servidor. Cuando un navegador solicita una pgina de este tipo, el
servidor Web remite la pgina al servidor de aplicaciones para su
procesamiento antes de enviarla al navegador. Para ms informacin,
consulte Aspectos bsicos de las aplicaciones Web en la pgina 231.
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
versin 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 gua no se describe la utilizacin de JRun en un sistema Macintosh.

306 Configuracin del sitio JSP de muestra

Para instalar JRun:


1.

Si es necesario, inicie la sesin en el sistema Windows utilizando la


cuenta Administrador.

2.

Cierre todas las aplicaciones abiertas.

3.

Haga doble clic en el archivo de instalacin de JRun Developer Edition.


Aparecer la pantalla de bienvenida.

4.

Si no tiene un Java Runtime Environment (JRE) en el sistema,


seleccione la opcin 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. Despus de instalar el JRE podr instalar el servidor de
aplicaciones JRun.

5.

Seleccione la opcin 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 instalacin, cree un conector JRun


con el servidor Web IIS seleccionando Inicio > Programas >
Macromedia JRun 4 > Web Server Configuration.
Para instrucciones, vase la documentacin de JRun.

Despus de instalar e iniciar JRun, cree una carpeta raz para la aplicacin
Web.

Configuracin del sistema (JSP) 307

Creacin de una carpeta raz


Despus de instalar el software del servidor, cree una carpeta raz para la
aplicacin Web en el sistema que ejecuta Microsoft IIS y asegrese de que
la carpeta cuenta con los permisos necesarios.
Para crear una carpeta raz para la aplicacin Web:
1.

Cree una carpeta llamada MySampleApps en el sistema que ejecuta IIS.

NO T A

Anote el nombre de esta carpeta para utilizarlo posteriormente. Cuando lo


escriba ms adelante, asegrese de utilizar exactamente la misma
combinacin de maysculas y minsculas que la empleada al crearlo.

Un lugar idneo para crear la carpeta es en C:\Inetpub\wwwroot\. De


forma predeterminada, el servidor Web IIS se configura para que utilice
pginas de la carpeta Inetpub\wwwroot. El servidor Web
servir cualquier pgina 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 ejecucin 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 >
Configuracin > Panel de Control, haga doble clic en
Herramientas administrativas y despus haga doble clic en Internet
Information Services).

b.

Expanda la lista del equipo local, luego la carpeta Web Sites y


despus la carpeta Default Web Site.

c.

Haga clic con el botn derecho en la carpeta MySampleApps y


seleccione Properties (propiedades) en el men emergente.

d.

En el men emergente Execute Permissions (permisos de


ejecucin), asegrese de que la opcin Scripts Only(slo scripts)
est seleccionada. Por razones de seguridad, no seleccione la opcin
Scripts and Executables (scripts y ejecutables).

e.

Haga clic en Aceptar.

El servidor Web est ya configurado para facilitar pginas Web de la carpeta


raz en respuesta a las peticiones HTTP de los navegadores Web.
Una vez que haya configurado el sistema, deber definir un sitio de
Dreamweaver.

308 Configuracin del sitio JSP de muestra

Definicin de un sitio de
Dreamweaver (JSP)
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 (vase
Copia de los archivos de muestra en la pgina 309).

2.

Defina la carpeta como carpeta local de Dreamweaver (vase


Definicin de una carpeta local en la pgina 310).

3.

Defina la carpeta raz del servidor Web como carpeta remota de


Dreamweaver (vase Definicin de una carpeta remota en
la pgina 311).

4.

Especifique una carpeta para procesar pginas dinmicas (vase


Especificacin de dnde pueden procesarse las pginas dinmicas en
la pgina 312).

5.

Cargue los archivos de muestra en el servidor Web (vase Carga de los


archivos de muestra en la pgina 313).

Copia de los archivos de muestra


Si an no lo ha hecho, copie los archivos de muestra de la carpeta de la
aplicacin Dreamweaver en una carpeta del disco duro.
Para copiar los archivos de muestra:
1.

Cree una carpeta nueva y asgnele el nombre local_sites en la carpeta de


usuario de su disco duro.
Por ejemplo, cree una de las carpetas siguientes:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites (Windows).

/Users/su_nombre_de_usuario/Documents/local_sites (Macintosh).

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 pginas con el fin de hacerlas
accesibles al pblico cuando utilice Macintosh como servidor Web.

Definicin de un sitio de Dreamweaver (JSP) 309

2.

Localice la carpeta cafe_townsend en la carpeta de la aplicacin


Dreamweaver en el disco duro.
Si ha instalado Dreamweaver en su ubicacin predeterminada, la ruta
de la carpeta ser sta:

3.

En Windows: C:\Archivos de programa\Macromedia\


Dreamweaver 8\Tutorial_assets\cafe_townsend\.

En Macintosh: Macintosh HD/Applications/Macromedia


Dreamweaver 8/Tutorial_assets/cafe_townsend.

Copie la carpeta cafe_townsend en la carpeta local_sites.


La carpeta cafe_townsend es la carpeta que va a utilizar como carpeta
raz (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.

Definicin de una carpeta local


Despus de copiar la carpeta cafe_townsend, defina la carpeta que contiene
los archivos de muestra de JSP como una carpeta local de Dreamweaver.
Para definir la carpeta local de Dreamweaver:
1.

En Dreamweaver, seleccione Sitio > Administrar sitios. En el cuadro de


dilogo Administrar sitios, haga clic en el botn Nuevo y seleccione
Sitio.
Aparecer el cuadro de dilogo Definicin del sitio.

2.

Si se muestra la ficha Bsicas, haga clic en la ficha Avanzadas.

3.

En el cuadro de texto Nombre del sitio, escriba Cafe Townsend JSP.


El nombre identifica el sitio en Dreamweaver.

4.

5.

Haga clic en el icono de carpeta situado junto al campo de texto Carpeta


raz local y vaya a la siguiente carpeta, que contiene los archivos de
muestra de JSP:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites\cafe_townsend \contact\jsp (Windows)

/Users/su_nombre_de_usuario/Documents/local_sites/
cafe_townsend/contact/jsp (Macintosh)

Haga clic en Seleccionar para finalizar la definicin de la carpeta local de


Dreamweaver.

310 Configuracin del sitio JSP de muestra

Deje abierto el cuadro de dilogo Definicin del sitio. Defina una carpeta
del servidor Web como carpeta remota de Dreamweaver.

Definicin de una carpeta remota


Despus 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 dilogo Definicin del sitio,


seleccione Datos remotos en la lista Categora.
Aparecer la pantalla Datos remotos.

2.

En el men emergente Acceso, seleccione cmo desea mover sus


archivos hacia y desde el servidor: por una red local (la opcin Local/red)
o mediante FTP.

NO TA

En el men emergente Acceso aparecen otras opciones que no se tratan


en este manual. Para ms informacin sobre ellas, consulte el apartado
Utilizacin de Dreamweaver.
3.

Introduzca la ruta o la configuracin de FTP de la carpeta del servidor


remoto creada en la seccin Creacin de una carpeta raz en
la pgina 308.
La carpeta puede encontrarse en el disco duro o en un equipo remoto.
Aunque haya creado la carpeta en el disco duro, seguir considerndose
como una carpeta remota vlida. 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:\Inetpub\wwwroot\MySampleApps
Para ms informacin sobre FTP, consulte Configuracin de las
opciones remotas para acceso FTP en Utilizacin de Dreamweaver
(Ayuda > Utilizacin de Dreamweaver).

Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin,


defina una carpeta para procesar pginas dinmicas.

Definicin de un sitio de Dreamweaver (JSP)

311

Especificacin de dnde pueden


procesarse las pginas dinmicas
Despus de definir la carpeta remota de Dreamweaver, especifique una
carpeta para el procesamiento de pginas dinmicas. Dreamweaver utiliza
esta carpeta para mostrar pginas dinmicas y conectar con bases de datos
mientras se desarrolla una aplicacin.
Para especificar la carpeta en la que deben procesarse las
pginas dinmicas:
1.

En la ficha Avanzadas del cuadro de dilogo Definicin del sitio, haga


clic en Servidor de prueba en la lista Categora.
Aparecer la pantalla Servidor de prueba. Dreamweaver necesita los
servicios de un servidor de prueba para generar y mostrar contenido
dinmico mientras se trabaja. El servidor de prueba puede ser el equipo
local, un servidor de desarrollo, un servidor en funcionamiento o un
servidor de produccin, siempre y cuando permita procesar pginas
JSP. En muchas situaciones, incluida la configuracin del sitio Cafe
Townsend, puede utilizar la misma configuracin que en la categora
Datos remotos (vase Definicin de una carpeta remota en
la pgina 311), ya que dicha configuracin apunta a un servidor con
capacidad para procesar pginas de JSP.

2.

Seleccione JSP en el men emergente Modelo de servidor.

3.

En el men emergente Acceso, elija el mismo mtodo (Local/red o FTP)


que ha especificado para acceder a la carpeta remota.
Dreamweaver introduce los parmetros especificados en la categora
Datos remotos. No modifique dichos parmetros.

312 Configuracin del sitio JSP de muestra

4.

En el cuadro de texto Prefijo de URL, introduzca la URL raz que


introducira en un navegador Web para solicitar una pgina en la
aplicacin Web.
Con el fin de mostrar datos dinmicos en las pginas mientras trabaja,
Dreamweaver crea un archivo temporal, lo copia en la carpeta raz del
sitio Web e intenta solicitarlo utilizando el prefijo de URL.
Dreamweaver proporciona el prefijo de URL ms probable basndose
en la informacin proporcionada en el cuadro de dilogo Definicin
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 ms informacin, consulte
Configuracin del prefijo de URL en Utilizacin de Dreamweaver.
Si la carpeta especificada en el cuadro de texto Carpeta remota es
C:\Inetpub\wwwroot\MySampleApps, el prefijo de URL deber ser el
siguiente:
http://localhost/MySampleApps/
Haga clic en Aceptar para definir el sitio y cerrar el cuadro de dilogo
Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el
cuadro de dilogo Administrar sitios.

Una vez especificada una carpeta en la que procesar las pginas dinmicas,
cargue los archivos de muestra al servidor Web.

Carga de los archivos de muestra


Una vez que haya especificado una carpeta en la que procesar las pginas
dinmicas, cargue los archivos de muestra al servidor Web. Deber cargar
los archivos aunque el servidor Web se est ejecutando en el equipo local.
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
pginas dinmicas. Por ejemplo, los vnculos de imgenes podran
romperse en la vista Live Data, ya que los archivos de imagen an no estn
en el servidor. De igual forma, al hacer clic en un vnculo con una pgina
detalle tras obtener una vista previa de una pgina maestra en un
navegador, se producir un error si la pgina detalle no est presente en
el servidor.

SUGERENCIA

5.

El prefijo de URL
debe especificar
siempre un directorio
en lugar de una
pgina concreta del
sitio. Asimismo,
asegrese de utilizar
la misma
combinacin de
maysculas y
minsculas que la
empleada al crear la
carpeta.

Definicin de un sitio de Dreamweaver (JSP) 313

Para cargar los archivos de muestra en el servidor Web:


1.

En el panel Archivos (Ventana > Archivos), seleccione la carpeta raz del


sitio en el panel Vista local.
La carpeta raz 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 Definicin de una carpeta remota en la pgina 311.

El sitio de Dreamweaver quedar definido. El siguiente paso consiste en


conectar con la base de datos de muestra instalada con Dreamweaver.

Conexin con la base de datos


de muestra (JSP)
Durante la instalacin, Dreamweaver copia en el disco duro una base de
datos de muestra de Microsoft Access. En esta seccin se explica cmo
crear una conexin con la base de datos de muestra.
N OT A

Para obtener informacin sobre la conexin con otra base de datos,


consulte el Captulo 27, Conexiones de base de datos para
desarrolladores de JSP de Utilizacin de Dreamweaver.

Para crear una conexin de base de datos:


1.

Instale el controlador puente (vase Instalacin del controlador


puente en la pgina 315).

2.

Si utiliza un equipo remoto como servidor, configure la base de datos de


muestra en el equipo remoto (vase Configuracin de la base de datos
(servidor en el equipo remoto) en la pgina 316).

3.

Cree la conexin en Dreamweaver (vase Creacin de una conexin de


base de datos en la pgina 318).

314 Configuracin del sitio JSP de muestra

Instalacin 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 trmino Java 2 se refiere a Java 1.2 y a versiones posteriores.

Si no dispone de SDK, descrguelo del sitio Web de Sun en


http://java.sun.com/j2se/. Despus de descargar el archivo de instalacin,
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 dilogo Seleccionar componente. Deber estar
seleccionado de forma predeterminada. El controlador se instalar
automticamente 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
produccin. Por ejemplo, slo permite conectar con la base de datos a
una pgina JSP a la vez (es decir, no admite el uso compartido de varios
thread). Para ms informacin sobre las limitaciones del controlador,
consulte la nota tcnica 17392 del Centro de soporte de Macromedia en
www.macromedia.com/go/17392.
Despus de instalar el controlador puente, configure la base de datos si es
preciso y, a continuacin, cree una conexin con la base de datos en
Dreamweaver.

Conexin con la base de datos de muestra (JSP) 315

Configuracin de la base de datos


(servidor en el equipo remoto)
Esta seccin slo 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, contine con la seccin Creacin de una conexin de base
de datos en la pgina 318.
Antes de crear una conexin 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 seala 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 ubicacin predeterminada, la ruta del
disco duro local al archivo de base de datos (tutorial.mdb) ser la
siguiente:

C:\Archivos de
programa\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_towns
end\data\tutorial.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.
N OT 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 pblico.
2.

Compruebe que est instalado el Controlador de Microsoft Access


versin 4.0 o superior en el equipo remoto.
Para averiguar si el controlador ya est instalado, consulte
Visualizacin de los controladores ODBC instalados en un sistema
Windows en Utilizacin de Dreamweaver.

316 Configuracin del sitio JSP de muestra

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 seale a la base de datos


de muestra del equipo remoto.
Para instrucciones, vanse los artculos siguientes en el sitio Web de
Microsoft:

4.

Si el equipo remoto se ejecuta en Windows 2000, vase el artculo


300596 en http://support.microsoft.com/default.aspx?scid=kb;enus;300596.

Si el equipo remoto se ejecuta en Windows XP, vase el artculo


305599 en http://support.microsoft.com/default.aspx?scid=kb;enus;305599.

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 conexin
con la base de datos. Para instrucciones, consulte Instalacin del
controlador puente en la pgina 315.

Despus de instalar la base de datos, el DSN y el controlador puente, cree


una conexin con la base de datos en Dreamweaver.

Conexin con la base de datos de muestra (JSP) 317

Creacin de una conexin de base de


datos
El ltimo paso del proceso de configuracin es crear una conexin con la
base de datos.
Para crear una conexin con la base de datos en
Dreamweaver:
1.

Abra cualquier pgina de JSP en Dreamweaver y, a continuacin, abra


el panel Bases de datos (Ventana > Bases de datos).

2.

Haga clic en el botn de signo ms (+) del panel y elija Base de datos
ODBC (controlador JDBC-ODBC Sun) en el men emergente.
Aparecer el cuadro de dilogo Base de datos ODBC (controlador
JDBC-ODBC Sun).

3.

Introduzca connTownsend como nombre de conexin.

4.

(Slo en Windows) Lleve a cabo una de estas operaciones:

Si el servidor se encuentra en el equipo local, seleccione la opcin


Utilizando un controlador de este equipo.

Si el servidor se encuentra en un sistema remoto, seleccione la


opcin 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 posicin [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 instalacin un DSN llamado CafeTownsend,
que apunta a la base de datos de Microsoft Access de la carpeta de la
aplicacin Dreamweaver.

318 Configuracin del sitio JSP de muestra

6.

Haga clic en Prueba.


Dreamweaver intentar conectarse con la base de datos. Si falla la
conexin, siga este procedimiento:

7.

Compruebe-de nuevo el DSN y los dems parmetros de conexin.

Compruebe la configuracin de la carpeta que Dreamweaver utiliza


para procesar las pginas dinmicas (vase Especificacin de dnde
pueden procesarse las pginas dinmicas en la pgina 312).

Consulte el Captulo 29, Solucin de problemas de conexiones de


base de datos de Utilizacin de Dreamweaver (Ayuda >Utilizacin
deDreamweaver).

Haga clic en Aceptar.


La nueva conexin se muestra en el panel Bases de datos.

Ahora la aplicacin JSP de muestra est configurada para los tutoriales de


Primeros pasos con Dreamweaver. Para ms informacin, consulte Tutorial:
Desarrollo de una aplicacin Web en la pgina 207.

Conexin con la base de datos de muestra (JSP) 319

320 Configuracin del sitio JSP de muestra

APNDICE G

Configuracin del sitio


PHP de muestra

Macromedia Dreamweaver 8 incluye pginas PHP de muestra que le


permitirn crear una pequea aplicacin Web. En este captulo se describe
una forma de configurar la aplicacin de muestra empleando Microsoft
Internet Information Server (IIS). Para ms informacin sobre estos
servidores Web, consulte Instalacin de un servidor Web en
la pgina 247. Si utiliza un servidor Web diferente, consulte el Captulo
23, Configuracin de una aplicacin Web de Utilizacin 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 informacin sobre la configuracin, consulte
los siguientes sitios Web:

http://developer.apple.com/internet/opensource/php.html

www.entropy.ch/software/macosx/php/

El proceso de configuracin de una aplicacin Web consta de tres pasos. En


primer lugar, configure el sistema. En segundo lugar, defina un sitio de
Dreamweaver. En tercer lugar, conecte la aplicacin a la base de datos. En
esta gua de configuracin se realizan los tres pasos de que consta el
proceso.
Este captulo contiene las siguientes secciones:
Listas de comprobacin de la configuracin para
desarrolladores de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Configuracin del sistema (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Definicin de un sitio de Dreamweaver (PHP) . . . . . . . . . . . . . . 332
Conexin con la base de datos de muestra (PHP) . . . . . . . . . . . 338

321

Listas de comprobacin de la
configuracin para
desarrolladores de PHP
Para configurar una aplicacin Web, debe configurar el sistema, definir un
sitio de Dreamweaver y conectar con una base de datos. En esta seccin se
ofrecen las listas de comprobacin para cada una de estas tareas. Las tareas
se describen detalladamente en el resto del captulo.
Configure el sistema:
1.

Asegrese de que dispone de un servidor Web.

2.

Instale el servidor de aplicaciones PHP.

3.

Compruebe la instalacin.

4.

Cree una carpeta raz.

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

5.

Cargue los archivos de muestra en el servidor Web.

Conecte con la base de datos:


1.

Cree una base de datos MySQL de muestra.

2.

Cree la conexin en Dreamweaver.

Configuracin del sistema (PHP)


Debe configurar el sistema para poder ejecutar pginas PHP en l. En
concreto, compruebe que un servidor Web y un servidor de aplicaciones
PHP estn instalados y ejecutndose en el sistema y, despus, cree una
carpeta raz para los archivos PHP.

322 Configuracin del sitio PHP de muestra

Configuracin del sistema Windows (PHP)


En esta seccin 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 configuracin diferente, consulte Captulo 23,
Configuracin de una aplicacin Web en Utilizacin de Dreamweaver.
La ilustracin siguiente muestra las dos configuraciones descritas en esta
seccin:
Configuracin local
(slo para usuarios de Windows)

PC de WINDOWS
Dreamweaver

Configuracin del servidor remoto


(para usuarios de Macintosh o de Windows)

MAC o PC de WINDOWS
Dreamweaver

IIS

Servidor de aplicaciones PHP

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Acceso de red o ftp

SERVIDOR DE WINDOWS
IIS

Servidor de aplicaciones PHP

Carpeta raz del sitio web en


c:\Inetpub\wwwroot\

Configuracin del sistema (PHP) 323

Para configurar el sistema:


1.

Asegrese de que dispone de un servidor Web (vase Comprobacin de


un servidor Web (Windows) en la pgina 324).

2.

Instale el servidor de aplicaciones PHP (vase Instalacin de un


servidor de aplicaciones PHP (Windows) en la pgina 325).

3.

Compruebe la instalacin (vase Comprobacin de la instalacin PHP


(Windows) en la pgina 327).

4.

Cree una carpeta raz (vase Creacin de una carpeta raz (Windows)
en la pgina 329).

NO TA

La instalacin del servidor Web y del servidor de aplicaciones slo debe


realizarse una vez.

Comprobacin de un servidor Web (Windows)


Para desarrollar y comprobar pginas Web dinmicas, necesitar un
servidor Web. Un servidor Web es un software que suministra pginas Web
en respuesta a las peticiones de los navegadores Web.
Asegrese de que Microsoft IIS est instalado y en ejecucin en el disco
duro o en un equipo Windows remoto. Una forma rpida 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 instalacin.
Si IIS no est instalado, instlelo ahora. Para instrucciones, consulte
Instalacin de un servidor Web en la pgina 247.
Tras instalar el servidor Web, instale el servidor de aplicaciones.

324 Configuracin del sitio PHP de muestra

Instalacin de un servidor de aplicaciones PHP


(Windows)
Para procesar pginas Web dinmicas, necesitar un servidor de
aplicaciones. Un servidor de aplicaciones es un software que ayuda al
servidor Web a procesar las pginas que contienen scripts o etiquetas del
lado del servidor. Cuando un navegador solicita una pgina de este tipo, el
servidor Web remite la pgina al servidor de aplicaciones para su
procesamiento antes de enviarla al navegador. Para ms informacin,
consulte Aspectos bsicos de las aplicaciones Web en la pgina 231.
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 extensin 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:
1.

Si es necesario, inicie la sesin en el sistema Windows utilizando la


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 instalacin 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 extensin necesaria para trabajar con
MySQL.

5.

En la carpeta temporal que contiene los archivos descomprimidos,


localice la carpeta ext y cpiela a la carpeta C:\PHP\.
La carpeta ext contiene extensiones PHP comunes, entre ellas, la
extensin MySQL.

Configuracin del sistema (PHP) 325

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

7.

Localice la siguiente lnea en el archivo php.ini:


extension_dir = "./"
Esta lnea especifica el lugar en el que PHP busca las extensiones.

8.
S U G E R E N CI A

No olvide incluir la
barra final.

Edite la lnea de la siguiente forma:


extension_dir = "C:\PHP\ext\"

9.

Localice la siguiente lnea en el archivo php.ini:


;extension=php_mysql.dll
El punto y coma (;) del principio de la lnea indica a PHP que ignore la
lnea.

10. Elimine

el punto y coma del principio de la lnea para activar la


extensin.
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 cpielo a la carpeta


C:\Windows\system32.
Este archivo es necesario para que IIS funcione con PHP 5 y MySQL.
13.

Reinicie IIS.

Para ms informacin sobre la activacin de la extensin MySQL,


consulte el sitio Web de PHP http://www.php.net/manual/es/
ref.mysql.php. Para ms informacin sobre el servidor de
aplicaciones, consulte la documentacin de PHP, que puede
descargar del sitio Web de PHP www.php.net/download-docs.php.
Despus de instalar PHP, puede comprobar el servidor para asegurarse de
su correcto funcionamiento.

326 Configuracin del sitio PHP de muestra

Comprobacin de la instalacin PHP (Windows)


Puede comprobar el servidor de aplicaciones PHP ejecutando una pgina
de prueba.
Para comprobar el servidor de aplicaciones PHP:
1.

En Dreamweaver o cualquier editor de texto, cree un archivo de texto


normal con el nombre timetest.php.

2.

En el archivo, introduzca el cdigo siguiente:


<p>This page was created at <b>
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

Este cdigo mostrar la hora en que la pgina se proces en el servidor.


3.

Copie el archivo en la carpeta C:\Inetpub\wwwroot del equipo


Windows donde se ejecute IIS.

4.

En el navegador Web, introduzca el URL de la pgina de prueba y, a


continuacin, presione Intro.
Si ha instalado PHP en el equipo local, puede introducir el siguiente
URL:
http://localhost/timetest.php

La pgina de prueba deber abrirse y mostrar una hora del da de este


modo:

Configuracin del sistema (PHP) 327

La hora especificada se considera contenido dinmico porque cambia cada


vez que se solicita la pgina. Haga clic en el botn Actualizar del navegador
para generar una nueva pgina con otra hora.
NO TA

Si examina el cdigo fuente (Ver > Cdigo fuente en Internet Explorer)


observar que la pgina no utiliza ningn JavaScript del lado del cliente
para conseguir este efecto.

Si la pgina no funciona de la forma deseada, compruebe los siguientes


errores posibles:

El archivo no tiene la extensin .php.

Ha escrito la ruta del archivo de la pgina


(C:\Inetput\wwwroot\timetest.php) en lugar de su URL (por ejemplo,
http://localhost/timetest.php) en el cuadro de texto Direccin del
navegador.
Si escribe una ruta de archivo en el navegador (como quiz est
acostumbrado a hacer con las pginas HTML normales), omite el
servidor Web y el servidor de aplicaciones. Como consecuencia, el
servidor nunca procesa la pgina.

El URL contiene un error de escritura. Compruebe si hay errores y no


introduzca una barra diagonal despus del nombre de archivo, como
http://localhost/timetest.php/.

El cdigo de la pgina contiene un error de escritura.

Despus de instalar y comprobar el software del servidor, cree una carpeta


raz para la aplicacin Web.

328 Configuracin del sitio PHP de muestra

Creacin de una carpeta raz (Windows)


Despus de instalar el software del servidor, cree una carpeta raz para la
aplicacin Web en el sistema que ejecuta Microsoft IIS y asegrese de que
la carpeta cuenta con los permisos necesarios.
Para crear una carpeta raz para la aplicacin Web:
1.

Cree una carpeta llamada MySampleApps en el sistema que ejecuta IIS.

NO T A

Anote el nombre de esta carpeta para utilizarlo posteriormente. Cuando lo


escriba ms adelante, asegrese de utilizar exactamente la misma
combinacin de maysculas y minsculas que la empleada al crearlo.

Un lugar idneo para crear la carpeta es en C:\Inetpub\wwwroot\. De


forma predeterminada, el servidor Web IIS se configura para que utilice
pginas de la carpeta Inetpub\wwwroot. El servidor Web servir
cualquier pgina de esta carpeta o de cualquiera de sus subcarpetas en
respuesta a las peticiones HTTP de un navegador.
2.

Compruebe que dispone de permisos de lectura y de ejecucin 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 > Configuracin
> Panel de Control, haga doble clic en
Herramientas administrativas y despus haga doble clic en Internet
Information Services).

b.

Expanda la lista del equipo local, luego la carpeta Web Sites y


despus la carpeta Default Web Site.

c.

Haga clic con el botn derecho en la carpeta MySampleApps y


seleccione Properties (propiedades) en el men emergente.

d.

En el men emergente Execute Permissions (permisos de


ejecucin), asegrese de que la opcin Scripts Only(slo scripts)
est seleccionada. Por razones de seguridad, no seleccione la opcin
Scripts and Executables (scripts y ejecutables).

e.

Haga clic en Aceptar.

El servidor Web est ya configurado para facilitar pginas Web de la carpeta


raz en respuesta a las peticiones HTTP de los navegadores Web.
Una vez que haya configurado el sistema, deber definir un sitio de
Dreamweaver. (Vase Definicin de un sitio de Dreamweaver (PHP) en
la pgina 332.)

Configuracin del sistema (PHP) 329

Configuracin del sistema Macintosh


(PHP)
Si est trabajando en un equipo Macintosh, puede ejecutar pginas 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 estn en
funcionamiento y, despus, debe crear una carpeta raz para los archivos
PHP.
Esta seccin contiene los siguientes temas:

Comprobacin de la instalacin PHP (Macintosh) en la pgina 330

Creacin de una carpeta raz (Macintosh) en la pgina 332

Para ms informacin 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/

Comprobacin de la instalacin PHP (Macintosh)


Para comprobar el servidor Web Apache y el servidor de aplicaciones PHP
en el equipo Macintosh, puede ejecutar una pgina de prueba.
Sin embargo, si desea utilizar el servidor Web para servir pginas PHP y
contenido de bases de datos MySQL, antes debe configurar el servidor para
que funcione con PHP y MySQL. Para informacin 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 artculo del sitio Web de


Macromedia.

2.

En Dreamweaver o cualquier editor de texto, cree un archivo de texto


normal con el nombre timetest.php.

3.

En el archivo, introduzca el cdigo siguiente:


<p>This page was created at <b>
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

Este cdigo mostrar la hora en que la pgina se proces en el servidor.

330 Configuracin del sitio PHP de muestra

4.

Copie el archivo en la carpeta /Users/su_nombre_de_usuario/Sites del


equipo Macintosh.
La carpeta Sites es su carpeta raz 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 pgina de prueba deber abrirse y mostrar una hora del da.


La hora especificada se considera contenido dinmico porque cambia cada
vez que se solicita la pgina. Haga clic en el botn Actualizar del navegador
para generar una nueva pgina con otra hora.
NO T A

Si examina el cdigo fuente (View > View Source en Safari) observar que
la pgina no utiliza ningn JavaScript del lado del cliente para conseguir
este efecto.

Si la pgina no funciona de la forma deseada, compruebe los siguientes


errores posibles:

El archivo no tiene la extensin .php.

El URL contiene un error de escritura. Compruebe si hay errores y


verifique que no haya una barra inclinada despus 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 cdigo de la pgina contiene un error de escritura.

El servidor Apache no est ejecutndose. Vaya a Preferencias del


sistema, categora Compartir, para ver si la opcin Compartir Web
personal est activada.

Despus de instalar y comprobar el software del servidor, cree una carpeta


raz para la aplicacin Web.

Configuracin del sistema (PHP) 331

Creacin de una carpeta raz (Macintosh)


Despus de instalar el software de servidor, cree una carpeta raz para la
aplicacin Web en el equipo Macintosh.
Para crear una carpeta raz para la aplicacin Web:

Cree una carpeta denominada MySampleApps en la carpeta /Users/


su_nombre_de_usuario/Sites.
Apache procesar todas las pginas de esta carpeta o de cualquiera de
sus subcarpetas en respuesta a una peticin http de un navegador Web.

Una vez que haya configurado el sistema, deber definir un sitio de


Dreamweaver.

Definicin de un sitio de
Dreamweaver (PHP)
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 (vase
Copia de los archivos de muestra en la pgina 333).

2.

Defina la carpeta como carpeta local de Dreamweaver (vase


Definicin de una carpeta local en la pgina 334).

3.

Defina la carpeta raz del servidor Web como carpeta remota de


Dreamweaver (vase Definicin de una carpeta remota en
la pgina 335).

4.

Especifique una carpeta para procesar pginas dinmicas (vase


Especificacin de dnde pueden procesarse las pginas dinmicas
(PHP) en la pgina 336).

5.

Cargue los archivos de muestra en el servidor Web (vase Carga de los


archivos de muestra en la pgina 338).

332 Configuracin del sitio PHP de muestra

Copia de los archivos de muestra


Si an no lo ha hecho, copie los archivos de muestra de la carpeta de la
aplicacin Dreamweaver en una carpeta del disco duro.
Para copiar los archivos de muestra:
1.

Cree una carpeta nueva y asgnele el nombre local_sites en la carpeta de


usuario de su disco duro.
Por ejemplo, cree una de las carpetas siguientes:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites (Windows).

/Users/su_nombre_de_usuario/Documents/local_sites (Macintosh).

NO TA

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 pginas con el fin de hacerlas
accesibles al pblico cuando utilice Macintosh como servidor Web.
2.

Localice la carpeta cafe_townsend en la carpeta de la aplicacin


Dreamweaver en el disco duro.
Si ha instalado Dreamweaver en su ubicacin predeterminada, la ruta
de la carpeta ser sta:

3.

En Windows: C:\Archivos de programa\Macromedia\Dreamweaver


8\Tutorial_assets\cafe_townsend\.

En Macintosh: Macintosh HD/Applications/Macromedia


Dreamweaver 8/Tutorial_assets/cafe_townsend.

Copie la carpeta cafe_townsend en la carpeta local_sites.


La carpeta cafe_townsend es la carpeta que va a utilizar como carpeta
raz (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.

Definicin de un sitio de Dreamweaver (PHP) 333

Definicin de una carpeta local


Despus de copiar la carpeta cafe_townsend, defina la carpeta que contiene
los archivos de muestra de PHP como una carpeta local de Dreamweaver.
Para definir la carpeta local de Dreamweaver:
1.

En Dreamweaver, seleccione Sitio > Administrar sitios. En el cuadro de


dilogo Administrar sitios, haga clic en el botn Nuevo y seleccione
Sitio.
Aparecer el cuadro de dilogo Definicin del sitio.

2.

Si se muestra la ficha Bsicas, haga clic en la ficha Avanzadas.

3.

En el cuadro de texto Nombre del sitio, escriba Cafe Townsend PHP.


El nombre identifica el sitio en Dreamweaver.

4.

5.

Haga clic en el icono de carpeta situado junto al campo de texto Carpeta


raz local y vaya a la siguiente carpeta, que contiene los archivos de
muestra de PHP:

C:\Documents and Settings\su_nombre_de_usuario\Mis


documentos\local_sites\cafe_townsend\contact\php (Windows)

/Users/su_nombre_de_usuario/Documents/local_sites/
cafe_townsend/contact/php (Macintosh)

Haga clic en Seleccionar para finalizar la definicin de la carpeta local de


Dreamweaver.

Deje abierto el cuadro de dilogo Definicin del sitio. Defina una carpeta
del servidor Web como carpeta remota de Dreamweaver.

334 Configuracin del sitio PHP de muestra

Definicin de una carpeta remota


Despus 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 dilogo Definicin del sitio,


seleccione Datos remotos en la lista Categora.
Aparecer la pantalla Datos remotos.

2.

En el men emergente Acceso, seleccione cmo desea mover sus


archivos hacia y desde el servidor: por una red local (la opcin Local/red)
o mediante FTP.

NO T A

En el men emergente Acceso aparecen otras opciones, que no se tratan


en este captulo. Para ms informacin sobre ellas, consulte el apartado
Utilizacin de Dreamweaver.
3.

Introduzca la ruta o la configuracin de FTP de la carpeta del servidor


remoto creada en la seccin Creacin de una carpeta raz (Windows)
en la pgina 329.
La carpeta puede encontrarse en el disco duro o en un equipo remoto.
Aunque haya creado la carpeta en el disco duro, seguir considerndose
como una carpeta remota vlida. 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:\Inetpub\wwwroot\MySampleApps
En Macintosh, la carpeta podra ser la siguiente:
Carpeta remota: /Users/su_nombre_de_usuario/Sites/
MySampleApps

Para ms informacin sobre FTP, consulte Configuracin de las


opciones remotas para acceso FTP en Utilizacin de Dreamweaver de
la Ayuda.
Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin,
defina una carpeta para procesar pginas dinmicas.

Definicin de un sitio de Dreamweaver (PHP) 335

Especificacin de dnde pueden


procesarse las pginas dinmicas (PHP)
Despus de definir la carpeta remota de Dreamweaver, especifique una
carpeta para el procesamiento de pginas dinmicas. Dreamweaver utiliza
esta carpeta para mostrar pginas dinmicas y conectar con bases de datos
mientras se desarrolla una aplicacin.
Para especificar la carpeta en la que deben procesarse las
pginas dinmicas:
1.

En la ficha Avanzadas del cuadro de dilogo Definicin del sitio, haga


clic en Servidor de prueba en la lista Categora.
Aparecer la pantalla Servidor de prueba. Dreamweaver necesita los
servicios de un servidor de prueba para generar y mostrar contenido
dinmico mientras se trabaja. El servidor de prueba puede ser el equipo
local, un servidor de desarrollo, un servidor en funcionamiento o un
servidor de produccin, siempre y cuando permita procesar pginas
PHP. En muchas situaciones, incluida la configuracin del sitio Cafe
Townsend, puede utilizar la misma configuracin que en la categora
Datos remotos (vase Definicin de una carpeta remota en
la pgina 335), ya que dicha configuracin apunta a un servidor con
capacidad para procesar pginas de PHP.

2.

Seleccione PHP MySQL en el men emergente Modelo de servidor.

3.

En el men emergente Acceso, elija el mismo mtodo (Local/red o FTP)


que ha especificado para acceder a la carpeta remota.
Dreamweaver introduce los parmetros especificados en la categora
Datos remotos. No modifique dichos parmetros.

336 Configuracin del sitio PHP de muestra

4.

En el cuadro de texto Prefijo de URL, introduzca la URL raz que


introducira en un navegador Web para solicitar una pgina en la
aplicacin Web.
Con el fin de mostrar datos dinmicos en las pginas mientras trabaja,
Dreamweaver crea un archivo temporal, lo copia en la carpeta raz del
sitio Web e intenta solicitarlo utilizando el prefijo de URL.
Dreamweaver proporciona el prefijo de URL ms probable basndose
en la informacin proporcionada en el cuadro de dilogo Definicin
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 ms informacin, consulte
Configuracin del prefijo de URL en Utilizacin de Dreamweaver
(Ayuda > Utilizacin 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/

Haga clic en Aceptar para definir el sitio y cerrar el cuadro de dilogo


Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el
cuadro de dilogo Administrar sitios.

Una vez especificada una carpeta en la que procesar las pginas dinmicas,
cargue los archivos de muestra al servidor Web.

S U G E R E N CI A

5.

El prefijo de URL
debe especificar
siempre un directorio
en lugar de una
pgina concreta del
sitio. Asimismo,
asegrese de utilizar
la misma
combinacin de
maysculas y
minsculas que la
empleada al crear la
carpeta.

Definicin de un sitio de Dreamweaver (PHP) 337

Carga de los archivos de muestra


Una vez que haya especificado una carpeta en la que procesar las pginas
dinmicas, cargue los archivos de muestra al servidor Web. Deber cargar
los archivos aunque el servidor Web se est ejecutando en el equipo local.
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
pginas dinmicas. Por ejemplo, los vnculos de imgenes podran
romperse en la vista Live Data, ya que los archivos de imagen an no estn
en el servidor. De igual forma, al hacer clic en un vnculo con una pgina
detalle tras obtener una vista previa de una pgina maestra en un
navegador, se producir un error si la pgina 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 raz del


sitio en el panel Vista local.
La carpeta raz 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 Definicin de una carpeta remota en la pgina 335.

El sitio de Dreamweaver quedar definido. El siguiente paso consiste en


conectar con la base de datos de muestra instalada con Dreamweaver.

Conexin con la base de datos


de muestra (PHP)
Durante la instalacin, Dreamweaver copia un script SQL en el disco duro.
Puede utilizar este script para crear automticamente una base de datos
MySQL de muestra. En esta seccin se explica cmo crear una conexin
con la base de datos de muestra.
En esta seccin 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.

338 Configuracin del sitio PHP de muestra

Para crear una conexin de base de datos:


1.

Cree la base de datos MySQL de muestra con el script de SQL (vase


Creacin de la base de datos MySQL en la pgina 339).

2.

Cree la conexin en Dreamweaver (vase Creacin de una conexin de


base de datos en la pgina 341).

Creacin 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 versin ms reciente del sitio Web
de MySQL http://dev.mysql.com/downloads/. Para fines de desarrollo,
descargue e instale la versin 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 ubicacin predeterminada, la ruta al
archivo de script ser la siguiente:

C:\Archivos de
programa\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_towns
end\data\insert.sql (Windows)

/Applications/Macromedia Dreamweaver 8/Tutorial_assets/


cafe_townsend/data/insert.sql (Macintosh)

Si el equipo que ejecuta MySQL es Windows, copie el script insert.sql


en Archivos de programa\MySQL\MySQL Server 4.x\bin. 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.

Conexin con la base de datos de muestra (PHP) 339

3.

En Windows, introduzca su nombre de usuario (si lo tiene) y su


contrasea 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 (tambin llamado


nombre de cuenta) y su contrasea son Tara y Telly3, introduzca el
comando siguiente:
mysql -uTara -pTelly3

Si no tiene contrasea, omita el argumento -p de este modo:


mysql -uTara

Si no ha definido un nombre de usuario mientras configuraba la


instalacin 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 dilogo Ejecutar.

340 Configuracin del sitio PHP de muestra

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 Files\MySQL\MySQL Server 4.x\bin
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 aadir tablas y registros a


la base de datos CafeTownsend que ha creado en el paso 5.
Despus de crear la base de datos MySQL, cree una conexin con ella en
Dreamweaver.

Creacin de una conexin de base de


datos
El ltimo paso del proceso de configuracin es crear una conexin con la
base de datos.
Para crear una conexin con la base de datos en
Dreamweaver:
1.

Abra cualquier pgina de PHP en Dreamweaver y, a continuacin, abra


el panel Bases de datos (Ventana > Bases de datos).

2.

Haga clic en el botn de signo ms (+) del panel y elija Conexin


MySQL en el men emergente.
Aparecer el cuadro de dilogo de conexin Conexin MySQL.

3.

Introduzca connTownsend como nombre de conexin.

4.

En el cuadro de texto Servidor MySQL, especifique el equipo que aloja


MySQL.
Introduzca una direccin IP o un nombre de servidor. Si se est
ejecutando MySQL en el mismo equipo que Dreamweaver, introduzca
localhost.

Conexin con la base de datos de muestra (PHP) 341

5.

Introduzca su nombre de usuario y contrasea de MySQL.


Si no ha definido un nombre de usuario mientras configuraba la
instalacin de MySQL, introduzca root en el cuadro de texto Nombre
de usuario. Si no tiene contrasea, deje el cuadro de texto Contrasea
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 (vase Creacin de la base de datos MySQL en
la pgina 339).

7.

Haga clic en Prueba.


Dreamweaver intentar conectarse con la base de datos. Si falla la
conexin, siga este procedimiento:

8.

Compruebe-el nombre del servidor, el nombre de usuario y la


contrasea.

Compruebe la configuracin de la carpeta que Dreamweaver utiliza


para procesar las pginas dinmicas (vase Especificacin de dnde
pueden procesarse las pginas dinmicas (PHP) en la pgina 336).

Consulte el Captulo 29, Solucin de problemas de conexiones de


base de datos de Utilizacin de Dreamweaver (Ayuda >Utilizacin
deDreamweaver).

Haga clic en Aceptar.


La nueva conexin se muestra en el panel Bases de datos.

Ahora la aplicacin PHP de muestra est configurada para los tutoriales de


Primeros pasos con Dreamweaver. Para ms informacin, consulte Tutorial:
Desarrollo de una aplicacin Web en la pgina 207.

342 Configuracin del sitio PHP de muestra

ndice alfabtico
Smbolos
.NET Framework
instalar 274

A
Access. Vase Microsoft Access
Active Server Pages. Vase ASP
activos, aadir a un sitio 53
Activos, panel 88
Actualizar, botn 147
Apache Tomcat, servidor de aplicaciones 242
Aplicacin, categora de la barra Insertar 218, 221
aplicaciones Web
acerca de
ASP, configurar 285
ASP.NET, configurar 271
ColdFusion, configurar 253
definicin 244
desarrollar 207
JSP, configurar 303
PHP, configurar 321
usos comunes 232
aplicaciones Web. Vase Aplicaciones Web
Apple. Vase Mac OS X
archivos
cargar al servidor 226
cargar desde la carpeta local 139
cargar muestra 265, 281, 297, 313
archivos de texto en vista Cdigo 97
ASP
aplicaciones Web, configurar 285
hora, mostrar 289
servidores de aplicaciones, instalar 289
solucionar problemas 290
ASP.NET
aplicaciones Web, configurar 271

conjuntos de datos 211


lenguajes utilizados 240
.NET Framework 274
servidores compatibles 274
atributos, informacin de referencia 153
ayuda
cambiar el tamao de la fuente 26
utilizar 15

B
barra de estado
acerca de 34
men emergente Tamao de ventana 35
Barra de herramientas de codificacin 38
barras de herramientas
Codificacin 38
Documento 33, 219
base de datos de muestra, conectarse a
ASP 298, 300
ASP.NET 282
ColdFusion 266
JSP 318
PHP 341
base de datos MySQL 239
descargar 338
base de datos Oracle 9i 239
bases de datos
acerca de 242
basadas en archivos
basadas en servidor
conectarse a (ASP) 300, 318, 341
conectarse a (ASP.NET) 282
conectarse a (ColdFusion) 266
consultas 237, 243
controladores 237, 243
elegir
juegos de registros para

343

mostrar datos 215, 237


relacionales 244
tablas
usar con aplicaciones Web 232
bases de datos relacionales 244

C
C# (lenguaje) 240
capas 160
anidar 172
insertar 164
cargar archivos
muestra 338
carpetas locales
carpetas raz 262
definir 5557, 278, 294, 310, 334
carpetas raz
crear (ASP) 291
crear (ASP.NET) 275
crear (ColdFusion) 259
crear (JSP) 308
crear (PHP) 329
definir 278, 294, 310, 334
Vase tambin Carpetas locales
carpetas remotas 136
crear con Dreamweaver 137
definir (ASP) 294
definir (ASP.NET) 278
definir (ColdFusion) 263
definir (JSP) 311
definir (PHP) 335
solucionar problemas de configuracin 140
CFML (ColdFusion Markup Language) 239
cdigo
crear con el Selector de etiquetas 148
imprimir 158
cdigo, sugerencias 154
Cdigo, vista
Diseo, vista y especificar una u otra 33
mostrar archivos de texto 97
mostrar con vista Diseo 146, 147
ColdFusion
aplicaciones Web, configurar 253
instalar 256
ColdFusion Administrator 267
ColdFusion Markup Language (CFML) 239
ColdFusion MX Server Developer Edition 256
ColdFusion Studio 148
ColdFusion, lenguajes utilizados 240

344

ndice alfabtico

Colocar archivos, botn 226


color de fondo, establecer 74, 179
Comportamientos de servidor, panel 218
conectarse
a bases de datos (ASP) 300, 318, 341
a bases de datos (ASP.NET) 282
a bases de datos (ColdFusion) 266
Conexin de prueba, botn 138
configurar
ASP 285
ASP.NET 271
ColdFusion 253
JSP 303
PHP 321
sistemas con .NET Framework 272
sistemas con ColdFusion MX 254
sistemas con un servidor de aplicaciones ASP 287
sistemas con un servidor de aplicaciones JSP 304
sistemas con un servidor de aplicaciones PHP 322
conjuntos de datos (juegos de registros ASP.NET) 211
consultas
base de datos 237
comprobar 214
definicin 243
controladores para bases de datos 237, 243
CSS. Consulte Hojas de estilos en cascada

D
datos
dinmico, insertar 217
extraer de bases de datos 237
DBMS (sistemas de administracin de bases de datos).
Vase sistemas de administracin de bases de
datos
definicin de carpetas remotas 263, 278, 294, 311,
335
definiciones de trminos de aplicaciones Web 242
descargar, ajustar el tiempo 35
dinmicos, campos 217
direcciones de red numricas 252
direcciones IP y nmero (127.0.0.1) 252
diseo
basado en CSS 159
basado en tablas 5977
diseo del espacio de trabajo, codificacin 148
Diseo, vista
Documento, barra de herramientas
acerca de 33
vista Live Data 219

documentos
guardar 61, 163
mostrar en fichas (Macintosh) 44

E
edicin, etiquetas 151
ejemplos de aplicaciones Web 232
espacio de trabajo
acerca de 29
diseo 43
diseo flotante 30
espacio de trabajo de edicin de cdigo 148
especificar servidores de prueba 264, 279, 296, 312,
336
Estilos CSS, panel 41, 116
etiquetas
buscar informacin de referencia 153
editar 151
elegir 148
lado del servidor 237
Selector de etiquetas 148
sugerencias 154
extraer datos de las bases de datos 237

F
Flash
insertar archivos SWF 90
reproducir contenido en Dreamweaver 92
Flash Video, insertar 93
Formulario de insercin de registro, cuadro de dilogo
222
formularios de insercin de registros, crear 220
fuentes de datos
ColdFusion 267
fuentes, cambiar el tamao en ayuda 26

G
generales, preferencias 148
glosario de trminos comunes de aplicaciones Web 242

H
Herramienta Mano 35
Hojas de estilos en cascada (CSS)
acerca de 110
adjuntar 114

crear 112
Estilos CSS, panel 41
formatear con 107133
y diseo 159
HomeSite 148
hora, mostrar en ASP 289
HTML
lenguajes de programacin incrustados 239
Vase tambin Cdigo

I
IBM WebSphere, servidor de aplicaciones 242
IIS (Internet Information Services) 241
acerca de 248
herramienta administrativa, iniciar 276
instalar 248
soporte de ASP.NET 274
imgenes, insertar 8289
Insertar registro, objeto 220
Insertar, barra
Aplicacin, categora 218, 221
categoras 36
inspector de etiquetas 151
instalar
.NET Framework 274
ColdFusion MX 256
Dreamweaver 13
IIS (Internet Information Services) 248
servidores de aplicaciones, ASP 289
servidores de aplicaciones, JSP 306
servidores de aplicaciones, PHP 325

J
Java 240
Java Server Pages (JSP) 240
JavaScript 240
JRun
JSP (Java Server Pages)
aplicaciones Web, configurar 303
servidores de aplicaciones, instalar 306
juegos de registros
comprobar 214
crear 211
definicin 243
Vase tambin Bases de datos

ndice alfabtico

345

L
Lenguaje de consulta estructurado (SQL) 237
lenguajes de scripts del lado del servidor 240
lenguajes, lado del servidor 239, 240
listas de comprobacin
ASP.NET, configurar 272
configuracin de ColdFusion 254
configurar ASP 286
configurar JSP 304
configurar PHP 322
localhost 251

M
Macintosh
Mac OS X con Apache y PHP
servidores 250
Macintosh, documentos en fichas 44
Macromedia JRun
instalar 307
marcadores de posicin de imagen
acerca de 73
crear imgenes desde 83
insertar 72
men de encabezado de columna 64
men emergente Tamao de ventana 35
Microsoft Access 239
Microsoft Internet Information Server (IIS). Vase IIS
Microsoft Personal Web Server (PWS) 245, 248
Microsoft SQL Server 239
modelos de servidor. Vase Tecnologas de servidor
modificar, etiquetas 151
modo de tablas expandidas 66

N
Netscape Enterprise Server 245
nmero de IP 127.0.0.1 252

O
objeto XSLT Repetir regin 200
opcin de prefijo de URL 264, 280, 297, 313, 337

P
pginas
dinmicas, crear 239

346

ndice alfabtico

dinmicas, definidas
dinmicas, procesar 236
estticas 235
insercin de registros 220
mostrar datos de bases de datos 237
pginas dinmicas
acerca de 243
procesar en ASP 296
procesar en ASP.NET 279
procesar en ColdFusion 264
procesar en JSP 312
procesar en PHP 336
utilizar 236, 239
pginas estticas 235
Vase tambin Pginas
pginas Web. Vase Pginas
paneles
Activos 88
Comportamientos de servidor, panel 218
vinculaciones, panel 211
PHP
aplicaciones Web, configurar 321
Mac OS X, configurar
servidores de aplicaciones (Windows), instalar 325
solucionar problemas (Macintosh) 331
solucionar problemas (Windows) 328
PHP, tecnologa de servidor 240
preferencias, cuadro de dilogo, categora General 148
publicar 135141
PWS (Microsoft Personal Web Server) 245
acerca de 248
soporte de ASP.NET 274

R
Referencia, panel 153
regiones repetidas, crear 218
registrar Dreamweaver 14
registros
insertar 220
mostrar 215

S
scripts, lado del servidor 237
selector de color 76
Selector de etiquetas 148
selector de etiquetas 101
Sequel (SQL) 237

servicio tcnico para servidores 247


servidor Web Apache en equipos Mac OS X 250
servidores
acerca de
cargar archivos 139, 265, 297, 313, 338
ASP.NET 281
carpetas raz 263, 278, 294, 311, 335
comprobar 249
direcciones IP 252
HTTP
opciones de acceso 138
servidores de aplicaciones 236
servidores Web, definicin 244
solucionar problemas 249
soporte de ASP.NET 274
Vanse tambin Servidores Web, Servidores de
aplicaciones
servidores de aplicaciones 236, 242
ColdFusion MX, instalar 256
instalar para ASP 289
instalar para JSP 306
.NET Framework (ASP.NET), instalar 274
PHP, instalar 325
servidores de prueba
acerca de
especificar 264, 279, 296, 312, 336
servidores HTTP. Vase Servidores
servidores Web
comprobar que el servidor Web se est ejecutando
274, 288, 306, 324
definicin 244
Vanse tambin Servidores, Servidores de
aplicaciones
sistemas de administracin de bases de datos 243
sistemas, configurar 254, 272, 287, 304, 322
sitios
acerca de 52
activos, aadir 53
definir 5557
ASP 292
ASP.NET 276
ColdFusion 260
JSP 309
PHP 332
locales 52
remotos 52, 136
solucionar problemas 297
acerca de 331
ASP 290
las pginas no se abren 249

no se visualizan pginas 290, 328


pginas dinmicas 265, 281, 297, 313, 338
PHP (Macintosh) 331
PHP (Windows) 328
servidores 247, 249
SQL (Lenguaje de consulta estructurado) 237
Sun ONE Web Server 245

T
tabla, men de encabezado 64
tablas
acerca de 64
base de datos 237
configurar propiedades 6671
crear un diseo con 5977
insertar 6266, 215
modo de tablas expandidas 66
tecnologas de servidor
compatibles 240
definicin 244
elegir 241
terminologa para aplicaciones Web 242
trminos comunes de aplicaciones Web, definiciones
242
texto
dinmico 217
insertar 97
insertar, dinmico 217
seleccionar 97
texto alternativo 72
texto dinmico, insertar 217
tipogrficas, convenciones 14
Tomcat, servidor de aplicaciones 242

V
variables de CFML 239
VBScript 240
Ventana de documento
aspectos bsicos 32
barra de estado 34
barra de ttulo 32
men emergente Tamao de ventana 35
selector de etiquetas 35
tamao del documento y tiempo de descarga 35
vinculaciones, panel 211
vnculos, crear 102
vista Live Data 219
solucionar problemas 265, 281, 297, 313, 338

ndice alfabtico

347

Vista previa en el navegador


acerca de 103
cambiar Preferencias 104
Vista previa en el navegador, solucionar problemas con
pginas dinmicas
ASP 297
ASP.NET 281
ColdFusion 265
JSP 313
PHP 338
vistas
Cdigo, vista
vista Live Data 219
Visual Basic 240

W
WebSphere 242

X
XML (Lenguaje de formato ampliable)
acerca de 186
aplicar estilos 196
crear vnculos con 198
visualizar en pginas Web 183
XSL (Lenguaje de hojas de estilo ampliable) 187
transformaciones del lado del cliente 189
Vase tambin XSLT
XSLT (Transformaciones de lenguaje de hoja de estilos
extensible)
acerca de 187
fragmentos 189
objeto XSLT Repetir regin 200
pginas 189
pginas, adjuntar datos XML a 191
pginas, convertir a 190
pginas, mostrar datos XML en 195
pginas, vincular a archivos XML 203
y transformaciones en el lado del cliente 189

348

ndice alfabtico