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:

Introducci

Lo que pueNovedadeInstalacinRegistro dConvencio

Captulo 1:

Dnde comCmo sacaDreamweaUtilizacin

Captulo 2

Conocer ePersonalizRealizaci

PARTE 2:

Captulo 3archivos d

Conozca loConfiguracDefina una

Captulo 4en tablas .

Examen de la maqueta de diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Creacin y almacenamiento de una pgina nueva . . . . . . . . . . . . . . . . . 613INTRODUCCIN A DREAMWEAVER

n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

de hacer con Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . .11s en Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13e Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14nes tipogrficas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

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

enzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15rle el mximo provecho a la documentacin de ver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 del sistema de ayuda de Dreamweaver. . . . . . . . . . . . . . . . 24

: Aspectos bsicos de Dreamweaver . . . . . . . . . . . . . 29

l espacio de trabajo de Dreamweaver 8 . . . . . . . . . . . . . . . . 29acin del espacio de trabajo de Dreamweaver 8 . . . . . . . . 42n de tareas bsicas con Dreamweaver 8 . . . . . . . . . . . . . . . 45

TUTORIALES

: Tutorial: Configuracin del sitio y de los el proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

s sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52in de los archivos del proyecto . . . . . . . . . . . . . . . . . . . . . . 53 carpeta local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

: Tutorial: Crear un diseo de pgina basado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

4 Contenid

Insercin de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Establecimiento de las propiedades de una tabla . . . . . . . . . . . . . . . . . 66Insercin de un marcador de posicin de imagen . . . . . . . . . . . . . . . . . 72Adicin de color a la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Captulo 5

LocalizaciRepaso deInsercin dInsercin yInsercin dInsercin dCreacin dVista previ

Captulo 6

LocalizaciRepaso deConocer laCrear una nAdjuntar unExplorar elCrear una nAplicar un Formatear(Opcional)

Captulo 7

Los sitios rDefinir unaCargar los Solucin d(opcional).

PARTE 3:

Captulo 8

Consulta dCambio al Windows)o

: Tutorial: Adicin de contenido a las pginas . . . . . . . 79

n de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 la tarea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81e imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 reproduccin de un archivo Flash . . . . . . . . . . . . . . . . . . . . . 90e Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93e texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96e vnculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102a de la pgina en un navegador. . . . . . . . . . . . . . . . . . . . . . . 103

: Tutorial: Formatear la pgina con CSS . . . . . . . . . . 107

n de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 la tarea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109s CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110ueva hoja de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112a hoja de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114

panel Estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116ueva regla CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118

estilo de clase al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 el texto de la barra de navegacin . . . . . . . . . . . . . . . . . . . . 122 Centrar el contenido de la pgina . . . . . . . . . . . . . . . . . . . . .131

: Tutorial: Publicacin del sitio. . . . . . . . . . . . . . . . . . . 135

emotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 carpeta remota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136archivos locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139e problemas de configuracin de carpetas remotas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

TUTORIALES AVANZADOS

: Tutorial: Utilizacin de cdigo . . . . . . . . . . . . . . . . . . 145

el cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146espacio de trabajo de edicin de cdigo (slo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Aadir una etiqueta con el Selector de etiquetas . . . . . . . . . . . . . . . . .148Edicin de una etiqueta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Consulta de informacin sobre una etiqueta . . . . . . . . . . . . . . . . . . . . .153Aadir una imagen con sugerencias para el cdigo . . . . . . . . . . . . . . .154Comprobacin de los cambios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158Imprimir el

Captulo 9en CSS .

Diseo de Examen deCreacin yInsertar caAadir colo

Captulo 10

LocalizaciRepaso deMs informMs informConversinAdjuntar unModificaciVinculaciAplicacinCreacin dAadir un oAdjuntar laMs inform

Captulo 11

Antes de cRepaso deApertura dDefinicin VisualizaciAdicin deDefinicin VisualizaciCreacin dCopia de loContenido 5

cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158

: Tutorial: Crear un diseo de pgina basado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

pgina basado en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160 la maqueta de diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

almacenamiento de una pgina nueva . . . . . . . . . . . . . . . .163pas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164r a la pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

: Tutorial: Visualizacin de datos XML . . . . . . . . . . . 183

n de los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184 la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185acin sobre el uso de XML y XSL en pginas Web . . . . .186acin sobre las pginas XSLT . . . . . . . . . . . . . . . . . . . . . . .188 de una pgina HTML en una pgina XSLT . . . . . . . . . . .190a fuente de datos XML a la pgina XSLT . . . . . . . . . . . . . 191

n del diseo de la pgina XSLT . . . . . . . . . . . . . . . . . . . . . .193n de datos XML a la pgina XSLT. . . . . . . . . . . . . . . . . . . . .195 de estilos a los datos XML . . . . . . . . . . . . . . . . . . . . . . . . . . .196e un vnculo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198bjeto XSLT Repetir regin. . . . . . . . . . . . . . . . . . . . . . . . . . 200

pgina XSLT a la pgina XML . . . . . . . . . . . . . . . . . . . . . . 203acin sobre otras opciones de implementacin . . . . . . . 205

: Tutorial: Desarrollo de una aplicacin Web. . . . . . 207

omenzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208e un documento para trabajar en l. . . . . . . . . . . . . . . . . . . .210de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211n de los registros de la base de datos . . . . . . . . . . . . . . . .215 campos dinmicos a la tabla . . . . . . . . . . . . . . . . . . . . . . . . . 217de una regin repetida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218n de la pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219e un formulario de insercin de registro . . . . . . . . . . . . . . 220s archivos en el servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

6 Contenid

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

PARTE 4: APNDICES

Apndice

AplicacionFuncionamCreacin dEleccin dTerminolog

Apndice

IntroducciInstalacinComprobaComproba(desarrollaAspectos b

Apndicemuestra . .

Listas de cdesarrolladConfiguracDefinicin Conexin c

Apndice

Listas de cdesarrolladConfiguracDefinicin Conexin c

Apndice

Listas de cdesarrolladConfiguracDefinicin Conexin co

A: Aspectos bsicos de las aplicaciones Web . . . . . . 231

es Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231iento de una aplicacin Web . . . . . . . . . . . . . . . . . . . . . . . .234e pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239e una tecnologa de servidor . . . . . . . . . . . . . . . . . . . . . . . . . 241a de aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . .242

B: Instalacin de un servidor Web. . . . . . . . . . . . . . . 247

n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 de Internet Information Server . . . . . . . . . . . . . . . . . . . . . . .248cin de IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249cin del servidor Web de Macintosh dores PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250sicos de los servidores Web. . . . . . . . . . . . . . . . . . . . . . . . 251

C: Configuracin del sitio ColdFusion de . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

omprobacin de la configuracin para ores de ColdFusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253in del sistema (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . 254de un sitio de Dreamweaver (ColdFusion) . . . . . . . . . . . . 260on la base de datos de muestra (ColdFusion) . . . . . . . . .266

D: Configuracin del sitio ASP.NET de muestra . . . . 271

omprobacin de la configuracin para ores de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271in del sistema (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . .272de un sitio de Dreamweaver (ASP.NET) . . . . . . . . . . . . . .276on la base de datos de muestra (ASP.NET) . . . . . . . . . . .282

E: Configuracin del sitio ASP de muestra . . . . . . . 285

omprobacin de la configuracin para ores de ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286in del sistema (ASP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287de un sitio de Dreamweaver (ASP) . . . . . . . . . . . . . . . . . . .292on la base de datos de muestra (ASP). . . . . . . . . . . . . . . .298

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

Listas de comprobacin de la configuracin para desarrolladores de JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304Configuracin del sistema (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304Definicin de un sitio de Dreamweaver (JSP) . . . . . . . . . . . . . . . . . . . 309Conexin c

Apndice

Listas de cdesarrolladConfiguracDefinicin Conexin c

ndice alfaContenido 7

on la base de datos de muestra (JSP) . . . . . . . . . . . . . . . .314

G: Configuracin del sitio PHP de muestra . . . . . . . . 321

omprobacin de la configuracin para ores de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322in del sistema (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322de un sitio de Dreamweaver (PHP) . . . . . . . . . . . . . . . . . . 332on la base de datos de muestra (PHP) . . . . . . . . . . . . . . . 338

btico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

8 Contenido

1PARTE 1IntroLa Parte UnDreamweavdescripcin recursos disp

Esta parte coIntroducci

Conocer D

Aspectos b9duccin a Dreamweaver

o de este libro ofrece una introduccin a Macromedia er 8 e incluye informacin de instalacin y una breve del espacio de trabajo. En ella tambin se ofrece una lista de onibles para aprender a utilizar Dreamweaver.

ntiene las siguientes secciones:n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

reamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

sicos de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . .29

Intro

Macromediacodificar y dcontrolar mentorno de eque mejorar

Esta gua es dirigida a lofundamentatravs del pr

Este captLo que pue

Novedade

Instalacin

Registro d

Convencio

Lo quDreamLas funcionWeb de formlos elementodirectamentdesarrollo mFireworks o directa a Drfacilitan la a11

eamweaver. Dreamweaver tambin contiene herramientas que dicin de activos de Flash a las pginas web.duccin

Dreamweaver 8 es un editor HTML profesional para disear, esarrollar sitios, pginas y aplicaciones Web. Tanto si desea anualmente el cdigo HTML como si prefiere trabajar en un dicin visual, Dreamweaver le proporciona tiles herramientas n su experiencia de creacin Web.

una introduccin para utilizar Macromedia Dreamweaver 8 s usuarios que no estn familiarizados con algn aspecto l de esta aplicacin. Los tutoriales de que consta le guan a oceso de creacin de un sitio Web sencillo pero funcional.

ulo trata los siguientes temas:de hacer con Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . 11

s en Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

e Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

nes tipogrficas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

e puede hacer con weaver 8

es de edicin visual de Dreamweaver permiten crear pginas a rpida, sin escribir una sola lnea de cdigo. Puede ver todos s o activos del sitio y arrastrarlos desde un panel fcil de usar e hasta un documento. Puede agilizar el flujo de trabajo de ediante la creacin y edicin de imgenes en Macromedia en otra aplicacin de grficos y su posterior importacin

12 Introduc

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 cin

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 8Dreamweaver 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

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 Dreamwe

InstalEn esta secc

Asegrese deMacromediaencontrar l

Para insta

1. Introduzsistema.

2. Siga uno

En Winsta

En MDrea

3. Siga las

El progrnecesaria

4. Si el sistInstalacin de Dreamweaver 8 13

aver (Ayuda> Utilizacin de Dreamweaver).

acin de Dreamweaver 8in se explica cmo instalar Dreamweaver.

que ha ledo las notas de la versin en el sitio web de en www.macromedia.com/go/dw_documentation_es, donde

a informacin o instrucciones ms recientes.

lar Dreamweaver:

ca el CD de Dreamweaver en la unidad de CD-ROM de su

de estos procedimientos:

indows, se iniciar automticamente el programa de lacin de Dreamweaver.acintosh, haga doble clic en el icono del instalador de

mweaver que aparece en el escritorio. instrucciones que aparecen en pantalla.

ama de instalacin le indicar que introduzca la informacin .

ema lo solicita, reinicie el sistema.

14 Introduc

Registro de Dreamweaver 8Para 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 cin

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

CAPTULO 1

Con

Macromediaaprender rpcreacin de Dreamweav

Este captuloDnde com

Cmo sacaDream

Utilizacin

DndLa documendistintos nivdocumentacquiera conse

Esta seccin

Princip Disea Usuario Disea

PrincipSi usted es ulas seccionesnivel.15

de la documentacin de Dreamweaver ms adecuadas para su 1ocer Dreamweaver Dreamweaver 8 incluye diversos recursos para ayudarle a idamente el funcionamiento del programa y a dominar la

sus propias pginas Web. Toda la documentacin de er est disponible en formatos de ayuda electrnica y PDF.

contiene los siguientes temas:enzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

rle el mximo provecho a la documentacin de weaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

del sistema de ayuda de Dreamweaver . . . . . . . . . . . . 24

e comenzartacin de Dreamweaver contiene informacin para usuarios de eles. Esta seccin le ayudar a aprender a utilizar la in, dependiendo de sus conocimientos anteriores y de lo que guir con Dreamweaver.

trata sobre los siguientes temas:

iantes en el diseo Web en la pgina 15dores de sitios Web con experiencia en la pgina 17s con experiencia en codificacin manual en la pgina 18

dores de aplicaciones Web en la pgina 19

iantes en el diseo Webn principiante en el diseo Web, esta seccin le informar de

16 Conocer

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 Dreamweaver

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 experienciaSi 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 estn familiainformacin

Para disea usar Dre

1. ComienDreamw

2. En el apDreamwtrabajoDreamw

3. Aunque Captulo4, Admcmo seatencinDreamw

4. Para infocrear pgformato

5. Para info19, CoCodificdepuracDiseo

6. Lea la inapartadotemas quDnde comenzar 17

sin experiencia en Dreamweaver y otro para diseadores que rizados con Dreamweaver pero que desean obtener ms sobre la creacin de pginas dinmicas.

adores de sitios Web con experiencia que empiezan amweaver:

ce leyendo los tutoriales de esta gua de Primeros pasos con eaver.

artado Utilizacin de Dreamweaver (Ayuda> Utilizacin de eaver), consulte Captulo 1, Exploracin del espacio de

para ms informacin sobre la interfaz de usuario de eaver.

probablemente ya conoce una buena parte del material del 2, Configuracin de un sitio de Dreamweaver y el Captulo inistracin de archivos, puede hojear estos captulos para ver aplican en Dreamweaver estos conceptos. Preste especial a las secciones que tratan sobre la configuracin de un sitio de eaver.

rmacin til y detallada sobre el uso de Dreamweaver para inas HTML bsicas, consulte Captulo 13, Insercin y

de texto y Captulo 14, Insercin de imgenes.

rmacin sobre la codificacin en Dreamweaver, vase Captulo nfiguracin del entorno de codificacin Captulo 20, acin en Dreamweaver Captulo 21, Optimizacin y in del cdigo y Captulo 22, Edicin de cdigo en la vista .

troduccin que aparece al comienzo de los dems captulos del Utilizacin de Dreamweaver para determinar si le interesan los e se abordan en ellos.

18 Conocer

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

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

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

5. Lea la incaptulolos tema

DiseaSi es un diseinformar dadecuadas pusado Dream

Para los dutilizado D

1. ComienDreamwDreamw

2. En Utiliconsulteinforma

3. Aunque Captulo4, Admcmo seatencinDreamwDnde comenzar 19

ar ms informacin sobre codificacin con Dreamweaver en el 19, Configuracin del entorno de codificacin, Captulo 20, acin en Dreamweaver, Captulo 21, Optimizacin y in del cdigo y Captulo 22, Edicin de cdigo en la vista .

troduccin que aparece al comienzo de cada uno de los s de Utilizacin de Dreamweaver para determinar si le interesan s que se abordan en ellos.

dores de aplicaciones Webador de aplicaciones Web con experiencia, esta seccin le e las secciones de la documentacin de Dreamweaver ms ara su nivel. Hay dos mtodos distintos, dependiendo de si ha

weaver con anterioridad.

iseadores de aplicaciones Web que no hayan reamweaver:

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

zacin de Dreamweaver (Ayuda> Utilizacin de Dreamweaver), el Captulo 1, Exploracin del espacio de trabajo para ms cin sobre la interfaz de usuario de Dreamweaver.

probablemente ya conoce una buena parte del material del 2, Configuracin de un sitio de Dreamweaver y el Captulo inistracin de archivos, puede hojear estos captulos para ver aplican en Dreamweaver estos conceptos. Preste especial a las secciones sobre la configuracin de un sitio de eaver.

20 Conocer

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 Dreamweaver

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 DreamweaverDreamweaver 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 DreamweaverEn la siguiente tabla se resume la documentacin que contiene el sistema de Ayuda de 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

Primeros pasos con Dreamweav

Le ofrece una introduccin bsica a

Ver en Dreamweaver: Seleccione Ayuda > Primeros

Utilizacin dDreamweav

Ampliacin DreamweavCmo sacarle el mximo provecho a la documentacin de Dreamweaver 21

er los conceptos de Dreamweaver y a la interfaz, con detallados tutoriales para principiantes. Dirigido a usuarios principiantes, y tambin para usuarios con nivel intermedio y avanzado que quieran conocer las nuevas funciones.

pasos con Dreamweaver Ver en lnea: http://

livedocs.macromedia.com/go/livedocs_dreamweaver_es/

Descargar el PDF: www.macromedia.com/go/dw_documentation_es

e er

Informacin completa sobre todas las funciones de Dreamweaver. Dirigida a todos los usuarios de Dreamweaver.

Ver en Dreamweaver: Seleccione Ayuda > Ayuda de Dreamweaver o Ayuda > Utilizacin de Dreamweaver

Ver en lnea: http://livedocs.macromedia.com/go/livedocs_dreamweaver_es/

Descargar el PDF: www.macromedia.com/go/dw_documentation_es

de er

Describe el marco de trabajo de Dreamweaver y la interfaz de programacin de la aplicacin (API). Destinado a usuarios avanzados que quieren crear extensiones o personalizar la interfaz de Dreamweaver.

Ver en Dreamweaver: Seleccione Ayuda > Ampliacin de Dreamweaver

Ver en lnea: http://livedocs.macromedia.com/go/livedocs_dreamweaver_es/

Descargar el PDF: www.macromedia.com/go/dw_documentation_es

22 Conocer

Referencia API de Dreamweaver

Describe la utilidad API y el JavaScript API, que le permiten realizar diversas tareas de

Ver en Dreamweaver: Seleccione Ayuda > Referencia API de Dreamweaver

Ver en lnea: http://livedocs.macromedia.com/go/

Ttulo Descripcin/Audiencia

Dnde encontrarlo Dreamweaver

apoyo al desarrollar extensiones de Dreamweaver. Destinado a usuarios avanzados que quieren crear extensiones o personalizar la interfaz de Dreamweaver.

livedocs_dreamweaver_es/ Descargar el PDF:

www.macromedia.com/go/dw_documentation_es

Utilizacin de ColdFusion

Contiene una seleccin de los libros ms importantes con documentacin sobre ColdFusion. (La lista completa est disponible en LiveDocs.) Dirigido a todo aquel que est interesado en ColdFusion, desde principiantes hasta desarrolladores avanzados.

Ver en Dreamweaver: Seleccione Ayuda > Utilizacin de ColdFusion

Ver en lnea: http://livedocs.macromedia.com/go/livedocs_coldfusion/

Descargar el PDF: www.macromedia.com/go/cf_documentation

Referencia Contiene muchos tipos de manual de referencia sobre HTML, modelos de servidores y otros temas, casi todos publicados por OReilly. Destinado a todo aquel que necesite ms informacin sobre sintaxis de cdigos, conceptos, etc.

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

Acceso a recursos en lnea adicionales de DreamweaverEn la siguiente tabla se resumen los recursos en lnea adicionales para el aprendizaje de Dreamweaver.

Recurso Descripcin/ Dnde encontrarlo

Centro de soporte de Dreamweav

Centro de desarrollo dDreamweav

Centro de recursos dedocumentacin de Dreamweav

Foros en lnea de Macromedi

Formacin MacromediCmo sacarle el mximo provecho a la documentacin de Dreamweaver 23

Audiencia

er

Notas tcnicas, soporte e informacin sobre la resolucin de problemas para usuarios de Dreamweaver.

www.macromedia.com/go/dreamweaver_support_es

e er

Artculos y tutoriales que le ayudarn a mejorar sus conocimientos y a adquirir otros nuevos.

www.macromedia.com/go/developer_dw_es

-

er

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

www.macromedia.com/go/dw_documentation_es

a

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

www.macromedia.com/go/dreamweaver_newsgroup

de a

Cursos que ofrecen ejercicios prcticos y situaciones del mundo real.

www.macromedia.com/go/dreamweaver_training_es

24 Conocer

Utilizacin del sistema de ayuda de DreamweaverEl 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 Dreamweaver

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 AyudaPuede acceder a la ayuda sobre el producto mientras utiliza Dreamweaver.

Para abrir la Ayuda de Dreamweaver:

Seleccione Ayuda > Ayuda de Dreamweaver

Bsqueda de ayudaPuede 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 uclic en L

3. Haga do

Para busc

1. En la Ayde texto

2. Haga do

UtilizacEl ndice le

Para utiliz

1. En Ayud

2. Desplcealfabticcorrespo

Para utiliz

1. En Ayudcontenid

2. Haga clilista.

3. Haga cliinformaUtilizacin del sistema de ayuda de Dreamweaver 25

na palabra o frase en el cuadro de texto, y a continuacin haga ista de temas.

ble clic sobre un tema de la lista de resultados para abrirlo.

ar ayuda sobre el producto (Macintosh):

uda de Dreamweaver, escriba una palabra o frase en el cuadro Preguntar y pulse Retorno.

ble clic sobre un tema de la lista de resultados para abrirlo.

in del ndicepermite encontrar informacin rpidamente.

ar el ndice (Windows):

a de Dreamweaver, haga clic en la ficha ndice.

se hasta una entrada del ndice dentro de la lista por orden o y haga doble clic sobre ella para que aparezca la informacin ndiente.

Bar el ndice (Macintosh):

a de Dreamweaver, haga clic en el vnculo ndice de la tabla de os.

c en una letra y desplcese a una entrada del ndice dentro de la

c sobre un nmero junto a la entrada para que aparezca la cin correspondiente.

SU

GE

RE

NC

IA

Para buscar una frase especfica, utilice comillas.

SU

GE

RE

NC

IA

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

26 Conocer

Cambio del tamao de la fuentePuede 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. Dreamweaver

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 inicioAl 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. Haga clic en No volver a mostrar.

Impresin de la documentacin de DreamweaverLos 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 Ampliac Referenci

Puede imprio si lo desea

IntrodudocumLiveDoLa documenformato Livparece muchpermite comagregar infosu experiencdesarrollado

Los LiveDochttp://livedoUtilizacin del sistema de ayuda de Dreamweaver 27

pasos con Dreamweaverin de Dreamweavera API de Dreamweaver

mir el PDF parcial o completamente en su impresora, puede llevar el PDF a un centro copista.

ccin de comentarios en la entacin de Dreamweaver con cstacin de Dreamweaver tambin est disponible en lnea en

eDocs. La versin de LiveDocs de la ayuda de Dreamweaver se o a la ayuda incorporada en el producto, pero adems le entar el contenido de pginas de ayuda especficas. Puede

rmacin til sobre un tema de Dreamweaver especfico segn ia particular, o pedir consejo a otros diseadores y res de Dreamweaver.

s de Dreamweaver estn disponibles en cs.macromedia.com/go/livedocs_dreamweaver_es/

28 Conocer Dreamweaver

CAPTULO 2

Aspectos bsicos de Drea

Para sacar elconocer cuDreamweavutilizados debsicas con

Este captuloConocer e

Personaliz

Realizaci

ConoDreamEl espacio ddocumentosfrecuentes endocumentos

Esta seccinDreamweavde los elemeconsulte CaDreamweave

Esta seccin

Diseo Ventan Barra d Barra d29

e herramientas de Documento en la pgina 33e estado en la pgina 342mweaver

mximo provecho de Macromedia Dreamweaver 8, deber les son los conceptos que subyacen al espacio de trabajo de er. En captulo presenta los elementos ms importantes y l espacio de trabajo y explica cmo realizar algunas tareas

Dreamweaver.

contiene las secciones siguientes:l espacio de trabajo de Dreamweaver 8. . . . . . . . . . . . . 29

acin del espacio de trabajo de Dreamweaver 8. . . . . 42

n de tareas bsicas con Dreamweaver 8. . . . . . . . . . . . 45

cer el espacio de trabajo de weaver 8

e trabajo de Dreamweaver permite ver las propiedades de los y los objetos. Adems, coloca muchas de las operaciones ms barras de herramientas para que pueda realizar cambios en los

rpidamente.

le proporciona una visin general del espacio de trabajo de er 8. Si desea obtener informacin detallada sobre cualquiera ntos del espacio de trabajo presentados en esta seccin, ptulo 1, Exploracin del espacio de trabajo en Utilizacin de r.

contiene los siguientes temas:

del espacio de trabajo en la pgina 30a de documento en la pgina 32

30 Aspecto

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 41s bsicos de Dreamweaver

Diseo del espacio de trabajoEn 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.

Panel ArchivosInspector de propiedadesSelector de etiquetas

Barra de herramientas de documento

Barra Insertar

Ventana de documento Grupos de paneles

En Macintosola ventanatambin pueque cada dode paneles apropias ventpantalla y en

NO

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.

Barra Inser

Barra de

Selector deetiquetasConocer el espacio de trabajo de Dreamweaver 8 31

sh, Dreamweaver puede mostrar varios documentos en una con fichas que identifican a cada uno de ellos. Dreamweaver de aparecer como parte de un espacio de trabajo flotante en el cumento aparece en su propia ventana individual. Los grupos parecen apilados en principio, pero pueden separarse en sus anas. Las ventanas se ajustan automticamente, a los lados de la la ventana Documento, al arrastrarlas o cambiar su tamao.

tar

herramientas de documento

Inspector de propiedades

Ventana de documento

Grupos de paneles

Panel Archivos

32 Aspecto

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 documentos bsicos de Dreamweaver

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.

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 lasitios local y

En la barra dopciones:

Mostrar vis

documento.

Mostrar vis

de la ventanseleccione esdiseo encimdebe aparece

Mostrar vis

documento.

Depuracin

pgina de Csi los hay.

Ttulo del do

aparecer enttulo, ste a

No hay erro

compatibilid

Mostrar visM

DepuConocer el espacio de trabajo de Dreamweaver 8 33

visualizacin del documento y a su transferencia entre los remoto.

e herramientas de Documento, aparecen las siguientes

ta de cdigo slo muestra la vista Cdigo en la ventana de

tas de cdigo y diseo muestra la vista Cdigo en una parte a de documento y la vista Diseo en la otra parte. Cuando ta vista combinada, se encontrar disponible la opcin Vista de a del men Ver. Utilice esta opcin para especificar qu vista r en la parte superior de la ventana de documento.

ta de diseo slo muestra la vista Diseo en la ventana de

del servidor muestra un informe que le ayudar a depurar la oldFusion actual. El informe contiene los errores de la pgina,

cumento permite introducir un ttulo para el documento, que la barra de ttulo del navegador. Si el documento ya tiene parecer en dicho campo.

res de comprobacin de navegador permite comprobar la ad con distintos navegadores.

ta de cdigo

Mostrar vista de diseo

Ttulo del documento

Actualizar vista de diseo

No hay errores de comprobacin de navegador

Ver opciones

ostrar vistas de cdigo y diseo

Vista previa/Depurar en explorador

Administracin de archivos

racin del servidorAyudas visuales

Validar formato

34 Aspecto

Validar formato permite validar el documento actual o una etiqueta seleccionada.

Administracin de archivos muestra el men emergente Administracin de archivos.

Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un navegador en el s bsicos de Dreamweaver

men emergente.

Actualizar vista de diseo 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.

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 estadoLa 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 etiquetasMen emergente Tamao de ventana

Establecer nivel de aumentoHerramienta Zoom

HerramientHerramienta Seleccionar

Herramienta Mano

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 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 (Mcontextual. seleccionar ela etiqueta d

La herramiehasta la ventpara desactiv

La herramiepermiten estinformacinDreamweave

El men emDiseo) peradopte dimeinformacinen Utilizaci

A la derechaestimacin dpgina, incluarchivos mulas preferencDreamweave

Para ms infCaptulo 1, DreamweaveConocer el espacio de trabajo de Dreamweaver 8 35

acintosh) en la etiqueta y elija una clase o un ID del men El selector de etiquetas es el mtodo ms adecuado para tiquetas, porque le garantiza que siempre se est seleccionado e manera precisa.

nta Mano permite hacer clic en el documento y arrastrarlo ana de documento. Haga clic en la herramienta Seleccionar ar la herramienta Mano.

nta Zoom y el men emergente Establecer nivel de aumento ablecer el nivel de ampliacin del documento. Para ms , consulte Utilizacin de Acercar y Alejar en Utilizacin de r.

ergente Tamao de ventana (que slo aparece en la vista mite cambiar el tamao de la ventana de documento para que nsiones predeterminadas o personalizadas. Para ms , consulte Cambio del tamao de la ventana de documento n de Dreamweaver.

del men emergente Tamao de ventana aparecen la el tamao del documento y del tiempo de descarga de la idos todos los archivos dependientes, como imgenes y otros

ltimedia. Para ms informacin, consulte Configuracin de ias de tiempo de descarga y tamao en Utilizacin de r.

ormacin sobre cmo utilizar la barra de estado, consulte Exploracin del espacio de trabajo en Utilizacin de r.

36 Aspecto

Barra InsertarLa 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.s bsicos de Dreamweaver

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.

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 reactualizacin

La categor

Flash.

La categorbarra Inserta

Para ms infCaptulo 1, DreamweaveConocer el espacio de trabajo de Dreamweaver 8 37

gistros, regiones repetidas y grabar formularios de insercin y .

a Elementos Flash permite insertar elementos de Macromedia

a Favoritos le permite agrupar y organizar los botones de la r que utiliza con ms frecuencia en un lugar comn.

ormacin sobre cmo utilizar la barra Insertar, consulte Exploracin del espacio de trabajo en Utilizacin de r.

38 Aspecto

Barra de herramientas de CodificacinLa 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 s bsicos de Dreamweaver

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.

El Inspector de propiedadesEl 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 propiedadesalto de la im

El inspectortrabajo de fosi lo desea. Ttrabajo. Parapropiedadesgrupos de p

Para ms infconsulte UDreamweaveConocer el espacio de trabajo de Dreamweaver 8 39

de la imagen (como la ruta del archivo de imagen, el ancho y agen, el borde que la rodea, etc.).

de propiedades se encuentra en la parte inferior del espacio de rma predeterminada, pero puede colocarlo en la parte superior ambin puede convertirlo en un panel flotante en el espacio de ms informacin sobre cmo mover el Inspector de , consulte Acoplamiento y desacoplamiento de paneles y aneles en Utilizacin de Dreamweaver.

ormacin sobre cmo utilizar el Inspector de propiedades, tilizacin del inspector de propiedades en Utilizacin de r.

40 Aspecto

El panel ArchivosEl panel Archivos se utiliza para ver y administrar los archivos del sitio de Dreamweaver. s bsicos 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.

El panel Estilos CSSEl 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 modActual.

Puede cambbordes que s

En modo Acdel panel Seactual del dopropiedadesseleccionadapermite editConocer el espacio de trabajo de Dreamweaver 8 41

ificar propiedades CSS tanto en modo Todo como en modo

iar el tamao de cualquiera de los paneles arrastrando los eparan un panel de otro.

tual, el panel Estilos CSS muestra tres secciones: un resumen leccin que muestra las propiedades de CSS de la seleccin cumento, un panel Reglas que muestra la ubicacin de las

seleccionadas (o una cascada de reglas para la etiqueta , en funcin de la seleccin) y un panel Propiedades que le ar las propiedades CSS al definir reglas para la seleccin.

42 Aspecto

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.s bsicos de Dreamweaver

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 8Existen 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:

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

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 espaci

Para elegise inicia D

1. Seleccio

Disead

para Mtodas lasen una vapiladosCodifica

grupos dutiliza Mque las vvista de

2. Haga cli

Para cambelegido:

Selecciondiseo d

Adems de sdoble. Si discoloca todosen el monito

NO

TA

Puede acoptrabajo en cPersonalizacin del espacio de trabajo de Dreamweaver 8 43

o de trabajo a otro en cualquier momento.

r un diseo del espacio de trabajo la primera vez que reamweaver:

ne uno de los siguientes diseos:

or es un espacio de trabajo integrado que utiliza MDI (Interfaz ltiples Documentos, Multiple Document Interface) en el que ventanas de documentos y todos los paneles estn integrados entana de aplicacin ms grande, con los grupos de paneles a la derecha. dor es el mismo espacio de trabajo integrado, pero con los e paneles apilados a la izquierda; es un diseo similar al que acromedia HomeSite y Macromedia ColdFusion Studio, en el entanas de documentos muestran de forma predeterminada la cdigo.

c en Aceptar.

iar a un espacio de trabajo distinto del que ha

e Ventana > Diseo del espacio de trabajo y seleccione el el espacio de trabajo que prefiera.

eleccionar Codificador y Diseador, puede seleccionar Pantalla pone de un monitor secundario, la opcin Pantalla doble los paneles en el monitor y conserva la ventana de documento r principal.

lar los grupos de paneles a ambos lados del espacio de ualquiera de los diseos del espacio de trabajo.

44 Aspecto

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 s bsicos de Dreamweaver

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:

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.

NO

TA

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.

Cmo ocultar y mostrar la pgina de inicioLa 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 ocult

Seleccionmostrar.La pginabrir y c

Para most

1. SeleccioPreferen

El cuadrpreferen

2. Seleccio

La pgincerrar un

Realizcon DEn esta seccguardar archy abrir docu

Esta seccin

Archivo Crear n Guarda AperturRealizacin de tareas bsicas con Dreamweaver 8 45

ar la pgina de inicio:

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

a de inicio no aparecer al iniciar Dreamweaver ni despus de errar un documento.

rar la pgina de inicio:

ne Edicin > Preferencias (Windows) o Dreamweaver > cias (Macintosh).

o de dilogo Preferencias aparece y muestra la categora de cias General.ne la casilla de verificacin Mostrar pgina de inicio.

a de inicio aparece al iniciar Dreamweaver o despus de abrir y documento.

acin de tareas bsicas reamweaver 8

in se explica cmo realizar tareas bsicas como crear, abrir y ivos. Para ms informacin, consulte Captulo 3, Cmo crear mentos en Utilizacin de Dreamweaver.

contiene los siguientes temas:

s de Dreamweaver en la pgina 46uevos archivos con Dreamweaver en la pgina 47r archivos con Dreamweaver en la pgina 48a de archivos en Dreamweaver en la pgina 48

46 Aspecto

Archivos de DreamweaverEn 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 s bsicos de Dreamweaver

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.

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 pgestos tipos daplicaciones

PHP, o PHP.php. Se utilsobre cmo Creacin r

Crear nEn esta seccDreamweav

Tambin puun archivo dms informaUtilizacin d

Para crear

1. Seleccio

Apareceraparece

2. En la listde plantla derech

Por ejemo elija Petc.Para mhaga clic

3. Haga cli

El documRealizacin de tareas bsicas con Dreamweaver 8 47

inas dinmicas. Para ms informacin sobre cmo trabajar con e archivos, consulte Captulo 41, Creacin rpida de ASP.NET en Utilizacin de Dreamweaver.

: archivos de procesador de hipertexto, que tienen la extensin izan para procesar pginas dinmicas. Para ms informacin trabajar con estos tipos de archivos, consulte Captulo 43, pida de aplicaciones PHP en Utilizacin de Dreamweaver.

uevos archivos con Dreamweaverin se explica cmo crear un nuevo documento en blanco con er.

ede crear nuevos documentos con Dreamweaver basndose en e diseo de Dreamweaver o en una plantilla ya existente. Para cin, consulte Creacin de documentos nuevos en e Dreamweaver.

un documento nuevo en blanco:

ne Archivo> Nuevo.

el cuadro de dilogo Nuevo documento. La ficha General ya seleccionada.a Categora, seleccione Pgina bsica, Pgina dinmica, Pgina illa, Otro o Conjuntos de marcos. A continuacin, en la lista de a, seleccione el tipo de documento que desea crear.

plo, seleccione Pgina bsica para crear un documento HTML gina dinmica para crear un documento ColdFusion o ASP,

s informacin sobre las opciones de este cuadro de dilogo, en el botn Ayuda del mismo. c en el botn Crear.

ento nuevo se abrir en la ventana del documento.

48 Aspecto

4. Guarde el documento (vase Guardar archivos con Dreamweaver en la pgina 48).

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

SU

GE

RE

NC

IA

Es recguardaun sitioDreamms inconsuTutorConfigsitio y del prola pgs bsicos de Dreamweaver

Para guardar un documento nuevo:

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 DreamweaverEn Dreamweaver, se puede abrir y editar documentos con gran facilidad.Para abrir un archivo:

1. Seleccione Archivo > Abrir.

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

omendable r el archivo en de weaver. Para formacin, lte Captulo 3, ial: uracin del

de los archivos yecto, en

ina 51.

2PARTE 2TutoLa Parte Dorealizar los dpgina Webrestaurante f

Esta parte coTutorial: Co

Tutorial: Cr

Tutorial: Ad

Tutorial: Fo

Tutorial: Pu49riales

s de este libro contiene cinco tutoriales bsicos que le ayudan a istintos pasos de que consta la creacin de una pgina Web. La que crear es la pgina principal de Cafe Townsend, un icticio.

ntiene las siguientes secciones:nfiguracin del sitio y de los archivos del proyecto . . 51

ear un diseo de pgina basado en tablas . . . . . . . . . .59

icin de contenido a las pginas . . . . . . . . . . . . . . . . . . 79

rmatear la pgina con CSS . . . . . . . . . . . . . . . . . . . . . . 107

blicacin del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

CAPTULO 3

Tutorial: Configuracin del sitio y de l

Este tutorial8 y le enseaCafe Townspartes: un couna ubicacicuando estremoto). El archivos del

El mtodo mconsiste en ccopias de esavistas a travlocal, de maMs adelantremoto para

En este tutoConozca lo

Configurac

Defina una513os archivos del proyecto

le presenta el concepto de sitio de Macromedia Dreamweaver a configurar los archivos del proyecto del sitio de muestra

end. En Dreamweaver, un sitio normalmente consta de dos njunto de archivos situados en un equipo local (el sitio local) y n en un servidor Web remoto donde cargar los archivos

preparado para ponerlos a disposicin pblica (el sitio panel Archivos de Dreamweaver se utiliza para administrar los sitio.

s comn para crear un sitio Web utilizando Dreamweaver rear y editar pginas en el disco local y, a continuacin, cargar s pginas en un servidor Web remoto para que puedan ser s de la Web. En este tutorial slo aprender a configurar el sitio nera que pueda comenzar a crear directamente pginas Web. e, una vez creado el sitio Web, aprender a crear un sitio poder cargar los archivos a un servidor Web.

rial va a realizar las tareas siguientes:s sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 52

in de los archivos del proyecto . . . . . . . . . . . . . . . . . . . 53

carpeta local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

52 Tutorial:

Conozca los sitios de DreamweaverEn 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 Configuracin del sitio y de los archivos del proyecto

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.

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.

NO

TA

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

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 delremota, paraa disposicin

Para ms infsitio para coun sitio de D

Para ms infCaptulo 7,

Para ms infConfiguracDreamweave

ConfiproyeCuando creeotro tipo dedel sitio). Popginas, ten

Los archivosel sitio Web Dreamweavede muestra dadecuada deConfiguracin de los archivos del proyecto 53

proyecto. Ms adelante aprender a configurar una carpeta que pueda publicar las pginas en un servidor Web y ponerlas pblica.

ormacin sobre cmo utilizar el asistente para la definicin del nfigurar un sitio de Dreamweaver, consulte Configuracin de reamweaver nuevo en Utilizacin de Dreamweaver.

ormacin sobre la configuracin de un sitio remoto, consulte Tutorial: Publicacin del sitio.

ormacin sobre los sitios de Dreamweaver en general, consulte in de un sitio de Dreamweaver en el apartado Utilizacin de r.

guracin de los archivos del cto un sitio local, puede colocar los activos existentes (imgenes u

contenido) en la carpeta raz del sitio local (la carpeta principal steriormente, cuando est listo para aadir contenido a las dr los activos disponibles y listos para ser utilizados.

de muestra incluidos con Dreamweaver contienen activos para de muestra que crear con estos tutoriales de Primeros pasos con r. El primer paso en la creacin del sitio es copiar los archivos e la carpeta de aplicacin de Dreamweaver en la carpeta

l disco duro.

54 Tutorial:

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/

Ac

erc

a d

e...

Carpetas lcarpeta priidntica sitde la URL dmisitiowebhttp://wwwEn algunosPor ejemplllamado pudirectorios(public_htm Configuracin del sitio y de los archivos del proyecto

Documents/local_sites

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.

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.

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.

ocales y carpetas remotas "raz" La carpeta "raz" local del sitio Dreamweaver suele ser la ncipal o la carpeta de nivel superior de su sitio Web. Suele corresponderse con una carpeta uada en el sitio remoto (servidor Web). La carpeta raz tambin suele definir la primera parte

el sitio Web, despus del nombre de dominio. Por ejemplo, si su carpeta raz local se llama , y tiene una carpeta raz idntica en el sitio remoto, la URL de su sitio Web ser algo como .yahoo.com/misitioweb. casos, la carpeta raz local podra no tener un nombre exacto equivalente en el sitio remoto. o, si usted es propietario del dominio www.misitioweb.com, con un directorio raz remoto blic_html, su carpeta raz local podra seguir llamndose misitioweb. Los archivos en los local y remoto raz seran idnticos; lo nico diferente sera los nombres de las carpetas l en el sitio remoto y misitioweb en el equipo local).

Defina una carpeta localDebe 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 correctamen

Adems, al dtransferirlosmtodos de

Ahora va a dllamada loca

1. Inicie D

Aparece 2. Haga cli

Aparecer3. Si aparec

seleccionpredeter

4. En el cucomo no

5. En el cucafe_towanterior.

Puede hcarpeta,

6. En el cula carpet

Puede hcarpeta, predeterDefina una carpeta local 55

te.

efinir una carpeta local podr tambin administrar archivos y entre el disco local y el servidor Web utilizando distintos transferencia de archivos.

efinir la carpeta cafe_townsend que copi en su carpeta local l_sites.

reamweaver y seleccione Sitio > Administrar sitios.

el cuadro de dilogo Administrar sitios.c en el botn Nuevo y seleccione Sitio.

el cuadro de dilogo Definicin del sitio.e el asistente (ficha Bsicas), haga clic en la ficha Avanzadas y e Datos locales en la lista Categora (que debe ser la opcin minada).

adro de texto Nombre del sitio, introduzca Cafe Townsend mbre del sitio.

adro de texto Carpeta raz local, especifique la carpeta nsend que copi en la carpeta local_sites en el apartado

acer clic en el icono de la carpeta para examinar y seleccionar la o introducir una ruta en el cuadro de texto Carpeta raz local.adro de texto Carpeta predeterminada de imgenes, especifique a de imgenes que ya existe en la carpeta cafe_townsend.

acer clic en el icono de la carpeta para examinar y seleccionar la o introducir una ruta en el cuadro de texto Carpeta minada de imgenes.

56 Tutorial:

El cuadro de dilogo Definicin de sitio debe parecerse ahora al siguiente. Configuracin del sitio y de los archivos del proyecto

7. Haga clic en Aceptar.

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

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

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 infpanel Archiv

Ya ha definipunto de supginas Webpblicas, deremoto donpublicadas d

Puede seguimuestra de CWeb. Cuandde una carpePara ms infdel sitio.Defina una carpeta local 57

ormacin sobre cmo funciona el panel Archivos, consulte El os en la pgina 40.

do una carpeta raz local para el sitio. La carpeta raz local es el equipo local donde almacena las copias de trabajo de sus . Ms adelante, si quiere publicar sus pginas y hacerlas

ber definir una carpeta remota, es decir, un lugar en un equipo de resida un servidor Web y donde se almacenen las copias e sus archivos locales.

r el resto de los tutoriales de esta gua para crear el sitio de afe Townsend, o bien puede trabajar en sus propias pginas

o acabe de crear y editar las pginas, contine con la definicin ta remota en un servidor y con la publicacin de las pginas. ormacin, consulte Captulo 7, Tutorial: Publicacin

58 Tutorial: Configuracin del sitio y de los archivos del proyecto

CAPTULO 4

Tutorial: Crear un diseo de pgin

Este tutorialMacromediaaparecer la plos mens, l

Las tablas cotabla y estabutilizar las taEn este tutoDreamweavpara el cont

En este tutoExamen de

Creacin y

Insercin d

Establecim

Insercin d

Adicin de

ExamLo habitual Dreamweavcrear un sitiode edicin gsuelen crearcomo maquidea inicial p59

ara el sitio Web recibe la aprobacin del cliente.4a basado en tablas explica cmo crear un diseo de pgina basado en tablas con Dreamweaver 8. Un diseo de pgina determina cmo va a gina en el navegador, mostrando, por ejemplo, la situacin de as imgenes, y el contenido de Macromedia Flash.

nstituyen una herramienta muy eficaz para presentar datos de lecer el diseo de texto y grficos en una pgina HTML. Puede blas para crear su propio diseo de un modo rpido y sencillo. rial, va a crear varias tablas en un nuevo documento de er. Las filas y celas de las tablas sirven de cuadros contenedores enido que aadir posteriormente.

rial va a realizar las tareas siguientes: la maqueta de diseo. . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

almacenamiento de una pgina nueva . . . . . . . . . . . . . 61

e tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

iento de las propiedades de una tabla. . . . . . . . . . . . . . 66

e un marcador de posicin de imagen. . . . . . . . . . . . . . 72

color a la pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

en de la maqueta de diseono es empezar a construir un sitio Web iniciando er y creando pginas directamente. Los primeros pasos para Web debe darlos sobre una hoja de papel, o en una aplicacin

rfica como Macromedia Fireworks. Los diseadores grficos un boceto artstico general del sitio Web (tambin conocido eta), con el fin de mostrrselo al cliente y asegurarse de que la

60 Tutorial:

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 Crear un diseo de pgina basado en tablas

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

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 firewdisco duro ede los archivcomp para t

Creacuna pDespus de crear pginala carpeta rapgina ser

Si no ha crehacerlo anteTutorial: C

1. En Drea

2. En la ficPgina bbsica y

3. Seleccio

4. En el cucafe_tow

Esta carpde los ar

5. Escriba ien Guar

El nombsuperiorCreacin y almacenamiento de una pgina nueva 61

orks_assets dentro de la carpeta cafe_townsend que copi a su n el apartado Captulo 3, Tutorial: Configuracin del sitio y os del proyecto. Si lo prefiere, tambin puede imprimir el enerlo delante mientras crea la pgina.

in y almacenamiento de gina nuevacrear un sitio nuevo y examinar los comps, ya puede empezar a