Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual Dreamweaver 8 Spanish
Manual Dreamweaver 8 Spanish
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.
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
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
PARTE 2: TUTORIALES
3
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
4 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
Contenido 5
Lecturas adicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226
PARTE 4: APNDICES
6 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
Contenido 7
8 Contenido
1
PARTE 1
Introduccin a Dreamweaver
9
Introduccin
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:
Herramienta Zoom y guas
Vinculacin de datos visual de XML
Nuevo panel de estilos CSS
Visualizacin de diseo CSS
12 Introduccin
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.
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.
Convenciones tipogrficas
En esta gua se utilizan las convenciones tipogrficas siguientes:
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.
14 Introduccin
CAPTULO 1
Conocer Dreamweaver 1
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
15
Para principiantes en el diseo Web:
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.
16 Conocer Dreamweaver
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.
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.
18 Conocer 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.
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.
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/ Dnde encontrarlo
Audiencia
Primeros Le ofrece una Ver en Dreamweaver:
pasos con introduccin bsica a Seleccione Ayuda > Primeros
Dreamweaver los conceptos de pasos con Dreamweaver
Dreamweaver y a la Ver en lnea: http://
interfaz, con detallados livedocs.macromedia.com/go/
livedocs_dreamweaver_es/
tutoriales para
Descargar el PDF:
principiantes. Dirigido a
www.macromedia.com/go/
usuarios principiantes, y
dw_documentation_es
tambin para usuarios
con nivel intermedio y
avanzado que quieran
conocer las nuevas
funciones.
22 Conocer Dreamweaver
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/ Dnde encontrarlo
Audiencia
Centro de Notas tcnicas, soporte www.macromedia.com/go/
soporte de e informacin sobre la dreamweaver_support_es
Dreamweaver resolucin de
problemas para
usuarios de
Dreamweaver.
24 Conocer Dreamweaver
Bsqueda de ayuda
Puede realizar una bsqueda de texto completa en la Ayuda de
Dreamweaver.
S U G ER E N C I A
Para buscar una
1. En la Ayuda de Dreamweaver, escriba una palabra o frase en el cuadro
frase especfica,
de texto Preguntar y pulse Retorno. utilice comillas.
2. Haga doble clic sobre un tema de la lista de resultados para abrirlo.
Puede empezar a
1. En Ayuda de Dreamweaver, haga clic en el vnculo ndice de la tabla de
escribir una palabra
contenidos. clave en el cuadro de
2. Haga clic en una letra y desplcese a una entrada del ndice dentro de la texto para
lista. desplazarse
rpidamente a una
3. Haga clic sobre un nmero junto a la entrada para que aparezca la entrada del ndice.
informacin correspondiente.
26 Conocer Dreamweaver
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/
Aspectos bsicos de
Dreamweaver
2
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
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
Barra Insertar
Barra de herramientas de
documento Ventana de documento Grupos de paneles
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.
Ayudas visuales
Depuracin del servidor Ttulo del documento
Ver opciones
Actualizar vista de diseo
Vista previa/Depurar en explorador
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.
Es recomendable
carpeta en la que desea guardar el archivo.
guardar el archivo en
un sitio de 3. En el cuadro de texto Nombre de archivo, introduzca un nombre para
Dreamweaver. Para el archivo.
ms informacin,
Evite utilizar espacios y caracteres especiales en los nombres de archivos
consulte Captulo 3,
Tutorial: y carpetas. Asimismo, no comience los nombres de los archivos con
Configuracin del nmeros. En concreto, no utilice caracteres especiales (como , o ) ni
sitio y de los archivos signos de puntuacin (como dos puntos, barras inclinadas o puntos) en
del proyecto, en los nombres de archivos que desee colocar en un servidor remoto;
la pgina 51.
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.
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
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
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).
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).
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.
Insercin de tablas
A continuacin, vamos a introducir una tabla que incluir texto, grficos y
activos de Macromedia Flash.
1. Haga clic una vez en la pgina para colocar el punto de insercin en la
esquina superior izquierda de la pgina.
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.
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
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.
5. Guarde la pgina.
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.
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.
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.
Tutorial: Adicin de
contenido a las pginas
5
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
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.
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.
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).
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).
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
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
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.
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.
S U G E R E N CI A
Puede hacer clic en
altura en pxeles del archivo FLV. Puede ajustar los valores
Detectar tamao
arbitrariamente para cambiar el tamao del Flash Video en su pgina para especificar el
Web. Al aumentar las dimensiones de un vdeo, suele deteriorarse la ancho y alto exacto
calidad del vdeo. del archivo FLV. No
obstante, en
N OT A
"Total con aspecto" es el valor del ancho y alto del archivo FLV ms el ocasiones
ancho y alto del aspecto seleccionado. Dreamweaver no
puede determinar las
7. En el resto de opciones, deje los valores predeterminados: dimensiones del
archivo FLV. En
Restringirmantiene la misma relacin de aspecto entre el ancho y alto
estos casos, deber
del componente de Flash Video. Esta opcin est activada de forma introducir
predeterminada. manualmente los
Reproduccin automtica especifica si el archivo se va a reproducir al valores de ancho y
abrir la pgina Web. Esta opcin est desactivada de forma alto.
predeterminada.
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 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).
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. 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.
8. Guarde la pgina.
Insercin de texto 99
2. Escriba la palabra Cuisine.
7. Guarde la pgina.
6. Guarde la pgina.
Tutorial: Formatear la
pgina con CSS
6
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
Para ms
informacin sobre A continuacin va a adjuntar la hoja de estilos a la pgina index.html.
cualquier propiedad
de CSS, consulte la
gua de referencia de Adjuntar una hoja de estilos
OReilly que
acompaa a Al adjuntar una hoja de estilos a una pgina Web, las reglas definidas en la
Dreamweaver. Para hoja de estilos se aplican a los elementos correspondientes de la pgina. Por
mostrar la gua, ejemplo, al adjuntar la hoja de estilos cafe_townsend.css a la pgina
seleccione Ayuda > index.html, todo el texto de prrafo (texto formateado con la etiqueta <p>
Referencia y
en el cdigo HTML) se formatear de acuerdo a la regla CSS definida.
seleccione OReilly
CSS Reference en el 1. El la ventana de documento, abra el archivo de Cafe Townsend
men emergente del index.html. (si ya est abierto, puede hacer clic en su ficha)
panel Referencia.
2. Seleccione el texto del primer prrafo que peg en la pgina en el
apartado Captulo 5, Tutorial: Adicin de contenido a las pginas.
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.
Para ms
informacin sobre 8. Haga clic en Todo en la parte superior del panel Estilos CSS.
cualquier propiedad 9. Haga clic en el signo ms (+) junto a la categora cafe_townsend.css si
de CSS, consulte la todava no est expandida.
gua de referencia de
OReilly que Ver que Dreamweaver ha aadido el estilo de clase .bold a la lista de
acompaa a reglas definidas en la hoja de estilos externa. Si hace clic en la regla
Dreamweaver. Para .bold en el panel Todas las reglas, se mostrarn las propiedades de la
mostrar la gua, regla en el panel Propiedades. La nueva regla tambin aparece en el
seleccione Ayuda >
men emergente Estilo del inspector de propiedades.
Referencia y
seleccione OReilly
CSS Reference en el
men emergente del
panel Referencia.
4. Guarde la pgina.
Para ms
informacin sobre A continuacin, va a utilizar el panel Estilos CSS para aadir ms
cualquier propiedad propiedades a la regla .navigation.
de CSS, consulte la 8. En el panel Estilos CSS, asegrese de que la regla .navigation est
gua de referencia de
seleccionada y haga clic en Mostrar vista de lista.
OReilly que
acompaa a
Dreamweaver. Para
mostrar la gua,
seleccione Ayuda >
Referencia y
seleccione OReilly
CSS Reference en el
men emergente del
panel Referencia.
11. Localice la propiedad display (es posible que tenga que desplazarse
SUGERENCIA
Para ver cmo
hacia abajo), haga clic una vez en la columna de la derecha y seleccione
afecta su trabajo a la
block en el men emergente. hoja de estilos
externa, mientras
trabaja mantenga
abierto el archivo
cafe_townsend.css
en la ventana de
documento. Cuando
realice una seleccin
en el panel Estilos
CSS, ver cmo
Dreamweaver
escribe al mismo
tiempo el cdigo de
CSS en la hoja de
estilos.
12. Localice la propiedad padding, haga clic una vez en la columna de la
derecha, introduzca el valor 8px y presione la tecla Intro (Windows) o
Retorno (Macintosh).
13. 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).
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.
Tutorial: Publicacin
del sitio
7
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
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.
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.
Tutoriales avanzados
143
CAPTULO 8
Tutorial: Utilizacin de
cdigo
8
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
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. Asegrese de que el archivo index.html est activo en la ventana de
documento.
NO T A
Botn
Actualizar
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.
NO TA
NO TA
Para desplazarse
etiqueta.
rpidamente a una
etiqueta, escriba las 8. Comience a escribir src y presione Intro (Windows) o Retorno
primeras letras del (Macintosh) cuando est seleccionado el atributo src en el men de
nombre de la misma. sugerencias.
La 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.
Para aadir un
atributo a una
Despus de realizar cambios en el cdigo, puede ver inmediatamente los
etiqueta ya creada,
coloque el punto de resultados.
insercin justo
despus del valor del
Para obtener una representacin visual del cdigo, siga uno de
atributo final de la
estos procedimientos:
etiqueta y presione la Haga clic en la vista Diseo o en las vistas Cdigo y Diseo (etiquetado
barra espaciadora. con el texto Dividir) en la barra de herramientas Documento.
Cuando aparezca
Previsualice la pgina en un navegador Web presionando F12
una lista de atributos,
aada un atributo y
(Windows) u Opcin+F12 (Macintosh). Para cerrar el navegador y
especifique su valor volver al cdigo, presione Alt+F4 (slo Windows).
si lo tiene.
Imprimir el cdigo
Puede imprimir el cdigo para editarlo fuera de lnea, archivarlo o
distribuirlo.
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.
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.
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.
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.
Tambin puede
teclas de flecha de su equipo para situar las capas, como muestra el
mover una distancia
de un pxel las capas
ejemplo siguiente:
seleccionadas
pulsando las teclas
de flecha del
teclado. Pruebe a
utilizar el inspector
de propiedades para
alinear la capa
header a una
distancia de 20
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.
10. Una vez colocadas las capas en posicin, desactive los Fondos de diseo
S UG E R E N CI A
Tambin puede
CSS (si todava no lo estn) seleccionando Ver > Ayudas visuales y
utilizar el botn
Ayudas visuales en
anulando la seleccin de Fondos de diseo CSS.
la barra de
herramientas
Documento para
Aadir capas dentro de una capa
activar o desactivar Las ltimas capas que va a dibujar estarn dentro de la capa ms grande
los Fondos de
center_content. Estas capas son el equivalente a las celdas de tablas que
diseo CSS.
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.
N O TA
S U G E R E N CI A
Puede cambiar el
fondo de algunas capas y del fondo de la pgina.
ancho de la columna
1. Seleccione la capa navigation haciendo clic sobre su nombre en el panel Nombre en el panel
Capas (Ventana > Capas). Capas arrastrando el
borde derecho del
ttulo de la columna
hacia la izquierda o
la derecha.
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.
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
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.
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.
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
N OT A
S U G E R E N C IA
Si no ve todos los
campos de juegos de
registros en el panel
Vinculaciones, haga
clic en el signo 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.
Visualizacin de los registros de
la base de datos
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.
4. Guarde la pgina.
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.
Apndices
229
APNDICE A
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).
Servidor Web
Paso 1: el
navegador Web
solicita la pgina
esttica. Peticin Respuesta
Paso 3: el servidor
Web enva la pgina
SERVIDOR WEB al navegador
solicitante.
Paso 2: el
servidor
localiza la <HTML>
pgina. <p>Hi
</HTML>
Pgina esttica
Navegador Web
Paso 1 - el
navegador Web
solicita la pgina
dinmica. Peticin Respuesta
Paso 5- el servidor
Web enva la pgina
finalizada al
SERVIDOR WEB navegador
solicitante.
Paso 2 - el
servidor Web <HTML> <HTML>
localiza la pgina <code> <p>Hi
y la enva al </HTML> </HTML>
servidor de
aplicaciones.
Paso 4- el servidor
de aplicaciones
pasa la pgina
Paso 3 - el terminada al
servidor de Servidor de aplicaciones servidor Web.
aplicaciones busca
instrucciones en la
pgina y la termina.
Peticin Respuesta
Paso 9- el servidor
Web enva la pgina
finalizada al
SERVIDOR WEB navegador
solicitante.
Paso 2 - el servidor
Web localiza la <HTML> <HTML>
pgina y la enva al <code> <p>Hi
servidor de
aplicaciones. </HTML> </HTML>
Paso 8- el servidor
de aplicaciones
inserta los datos en
una pgina y luego
Paso 3- el servidor pasa la pgina al
de aplicaciones servidor Web.
busca instrucciones
en la pgina. Servidor de aplicaciones
Paso 4- el servidor
de aplicaciones enva Paso 7- el
la consulta al controlador pasa el
controlador de la juego de registros al
base de datos. servidor de
Consulta Juego de registros
aplicaciones.
Base de datos
PHP PHP
Terminologa de aplicaciones
Web
En esta seccin se definen trminos utilizados con frecuencia relacionados
con las aplicaciones 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 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.
Entre los servidores de aplicaciones ms habituales se encuentran
Macromedia ColdFusion, Macromedia JRun Server, Microsoft .NET
Framework, IBM WebSphere y Apache Tomcat.
Una base de datos es un conjunto de datos almacenados en tablas. Cada
fila de una tabla constituye un registro de datos, y cada columna constituye
un campo del registro, como se indica en el siguiente ejemplo.
Campos (columnas)
Registros
(filas)
Instalacin de un
servidor Web
B
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
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.
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>
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).
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.
Dreamweaver Dreamweaver
Servidor ColdFusion
SERVIDOR DE WINDOWS
Servidor ColdFusion
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.
SUGERENCIA
El prefijo de URL
Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el
debe especificar
cuadro de dilogo Administrar sitios. siempre una carpeta
Una vez especificada una carpeta en la que procesar las pginas dinmicas, en lugar de una
cargue los archivos de muestra al servidor Web. pgina concreta del
sitio. Asimismo,
asegrese de utilizar
Carga de los archivos de muestra la misma
combinacin de
Una vez especificada una carpeta en la que procesar las pginas dinmicas, maysculas y
cargue los archivos de muestra al servidor Web. Deber cargar los archivos minsculas que la
aunque el servidor Web se est ejecutando en el equipo local. empleada al crear la
carpeta.
Si no carga los archivos, es posible que algunas funciones, como la vista
Live Data y Vista previa en el navegador, no funcionen correctamente con
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.
Cuando la base de datos est en el equipo remoto, cree una fuente de datos
de ColdFusion.
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.
Dreamweaver Dreamweaver
IIS 5 o superior
.NET Framework
SERVIDOR DE WINDOWS
IIS 5 o superior
.NET Framework
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.
S U G E R E N C IA
El prefijo de URL
Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el
debe especificar
cuadro de dilogo Administrar sitios. siempre un directorio
Una vez especificada una carpeta en la que procesar las pginas dinmicas, en lugar de una
cargue los archivos de muestra al servidor Web. pgina concreta del
sitio. Asimismo,
asegrese de utilizar
Carga de los archivos de muestra la misma
combinacin de
Una vez que haya especificado una carpeta en la que procesar las pginas maysculas y
dinmicas, cargue los archivos de muestra al servidor Web. Deber cargar minsculas que la
los archivos aunque el servidor Web se est ejecutando en el equipo local. empleada al crear la
carpeta.
Si no carga los archivos, es posible que algunas funciones, como la vista
Live Data y Vista previa en el navegador, no funcionen correctamente con
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.
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:
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).
9. 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.
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.
Dreamweaver Dreamweaver
IIS
SERVIDOR DE WINDOWS
IIS
Comprobacin de la instalacin
Puede comprobar el motor ASP de IIS ejecutando una pgina de prueba.
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.
SUGERENCIA
El prefijo de URL
Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el debe especificar
cuadro de dilogo Administrar sitios. siempre un directorio
en lugar de una
Una vez especificada una carpeta en la que procesar las pginas dinmicas,
pgina concreta del
cargue los archivos de muestra al servidor Web. sitio. Asimismo,
asegrese de utilizar
la misma
Carga de los archivos de muestra combinacin de
Una vez que haya especificado una carpeta en la que procesar las pginas maysculas y
minsculas que la
dinmicas, cargue los archivos de muestra al servidor Web. Deber cargar
empleada al crear la
los archivos aunque el servidor Web se est ejecutando en el equipo local. carpeta.
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.
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.
Dreamweaver Dreamweaver
IIS
SERVIDOR DE WINDOWS
IIS
SUGERENCIA
El prefijo de URL
Definicin del sitio y, a continuacin, haga clic en Listo para cerrar el
debe especificar
cuadro de dilogo Administrar sitios. siempre un directorio
Una vez especificada una carpeta en la que procesar las pginas dinmicas, en lugar de una
cargue los archivos de muestra al servidor Web. pgina concreta del
sitio. Asimismo,
asegrese de utilizar
Carga de los archivos de muestra la misma
combinacin de
Una vez que haya especificado una carpeta en la que procesar las pginas maysculas y
dinmicas, cargue los archivos de muestra al servidor Web. Deber cargar minsculas que la
los archivos aunque el servidor Web se est ejecutando en el equipo local. empleada al crear la
carpeta.
Si no carga los archivos, es posible que algunas funciones, como la vista
Live Data y Vista previa en el navegador, no funcionen correctamente con
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.
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.
Dreamweaver Dreamweaver
IIS
SERVIDOR DE WINDOWS
IIS
No olvide incluir la
barra final.
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.
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 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.
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.
343
mostrar datos 215, 237 Colocar archivos, botn 226
relacionales 244 color de fondo, establecer 74, 179
tablas Comportamientos de servidor, panel 218
usar con aplicaciones Web 232 conectarse
bases de datos relacionales 244 a bases de datos (ASP) 300, 318, 341
a bases de datos (ASP.NET) 282
a bases de datos (ColdFusion) 266
C Conexin de prueba, botn 138
C# (lenguaje) 240 configurar
capas 160 ASP 285
anidar 172 ASP.NET 271
insertar 164 ColdFusion 253
cargar archivos JSP 303
muestra 338 PHP 321
carpetas locales sistemas con .NET Framework 272
carpetas raz 262 sistemas con ColdFusion MX 254
definir 5557, 278, 294, 310, 334 sistemas con un servidor de aplicaciones ASP 287
carpetas raz sistemas con un servidor de aplicaciones JSP 304
crear (ASP) 291 sistemas con un servidor de aplicaciones PHP 322
crear (ASP.NET) 275 conjuntos de datos (juegos de registros ASP.NET) 211
crear (ColdFusion) 259 consultas
crear (JSP) 308 base de datos 237
crear (PHP) 329 comprobar 214
definir 278, 294, 310, 334 definicin 243
Vase tambin Carpetas locales controladores para bases de datos 237, 243
carpetas remotas 136 CSS. Consulte Hojas de estilos en cascada
crear con Dreamweaver 137
definir (ASP) 294
definir (ASP.NET) 278 D
definir (ColdFusion) 263 datos
definir (JSP) 311 dinmico, insertar 217
definir (PHP) 335 extraer de bases de datos 237
solucionar problemas de configuracin 140 DBMS (sistemas de administracin de bases de datos).
CFML (ColdFusion Markup Language) 239 Vase sistemas de administracin de bases de
cdigo datos
crear con el Selector de etiquetas 148 definicin de carpetas remotas 263, 278, 294, 311,
imprimir 158 335
cdigo, sugerencias 154 definiciones de trminos de aplicaciones Web 242
Cdigo, vista descargar, ajustar el tiempo 35
Diseo, vista y especificar una u otra 33 dinmicos, campos 217
mostrar archivos de texto 97 direcciones de red numricas 252
mostrar con vista Diseo 146, 147 direcciones IP y nmero (127.0.0.1) 252
ColdFusion diseo
aplicaciones Web, configurar 253 basado en CSS 159
instalar 256 basado en tablas 5977
ColdFusion Administrator 267 diseo del espacio de trabajo, codificacin 148
ColdFusion Markup Language (CFML) 239 Diseo, vista
ColdFusion MX Server Developer Edition 256 Documento, barra de herramientas
ColdFusion Studio 148 acerca de 33
ColdFusion, lenguajes utilizados 240 vista Live Data 219
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