Utilizacin de Dreamweaver MX

Marcas comerciales Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Contribute, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Contribute, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind y Xtra son marcas comerciales de Macromedia, Inc. y pueden estar registradas en los Estados Unidos de Amrica o en otras jurisdicciones. 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. 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. Advertencia de Apple APPLE COMPUTER, INC. NO OFRECE GARANTAS DE NINGN TIPO, NI EXPRESAS NI IMPLCITAS, EN RELACIN CON EL PAQUETE DE SOFTWARE INFORMTICO ADJUNTO, SU COMERCIABILIDAD O SU ADECUACIN PARA UN PROPSITO ESPECFICO. ALGUNOS ESTADOS NO ADMITEN LA EXCLUSIN DE GARANTAS IMPLCITAS. ES POSIBLE QUE LA EXCLUSIN ANTERIOR NO SE APLIQUE EN SU CASO. ESTA GARANTA PROPORCIONA AL USUARIO DERECHOS LEGALES ESPECFICOS. OTROS DERECHOS QUE LE PUEDAN CORRESPONDER VARAN DE UN ESTADO A OTRO. Copyright 1997-2002 Macromedia, Inc. Reservados todos los derechos. 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. En http://www.macromedia.com/go/thirdparty/ encontrar avisos de software de terceros y/o otros trminos y condiciones. Agradecimientos Direccin del proyecto: Sheila McGinn Redaccin: Chris Bedford, Kim Diezel, Jed Hartman, Charles Nadeau, Jennifer Rowe Edicin: Mary Ferguson, Mary Kraemer, Lisa Stanziano Administracin de la produccin: Patrice ONeill Produccin y diseo multimedia: Aaron Begley, Benjamin Salles, Noah Zilberberg Diseo y produccin de la edicin impresa y la Ayuda: Caroline Branch, John Francis Edicin y produccin Web: George Brown, Rebecca Godbois, Jeff Harmon, Jon Varese Un agradecimiento especial para Luciano Arruda, Jake Cockrell, Kristin Conradi, George Comninos, David Deming, Tonya Estes, Stephanie Goss, David Halbakken, Nick Halbakken, Wanda Huang, Narciso (nj) Jaramillo, Craig Jennings, Ken Karleskint, Sho Kuwamoto, David Lenoe, Jay London, Bonnie Loo, Sam Mathews, Larry McLister, Susan Morrow, Masayo Noppe Noda, Dan Radigan, Mike Sundermeyer, Heidi Bauer Williams, Jorge Taylor, Lawrence Teschmacher, Venu Venugopal y los equipos completos de ingeniera y control de calidad de Dreamweaver. Introduzca los trminos que busca y haga clic en el botn Buscar o en el vnculo de la izquierda. Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

CONTENIDO

Parte I Aspectos bsicos de Dreamweaver

CAPTULO 1 Bienvenido a Dreamweaver .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Aprendizaje de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Gua de primeros pasos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Tutoriales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Ayuda de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Ampliacin de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Centro de servicio tcnico de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Centro para Diseadores & Desarrolladores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Foros en lnea de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Mtodos abreviados de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Flujo de trabajo de creacin de un sitio Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Planificacin de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Configuracin de aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Codificacin manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Disposicin de las pginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Adicin de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Interactividad y animacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Conexin de las pginas al sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Comprobacin y publicacin del sitio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Creacin de pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Desarrollo rpido de aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Por dnde empezar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Convenciones tipogrficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Novedades de Dreamweaver MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Control total sobre el cdigo y el diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Amplia compatibilidad con todas las ltimas tecnologas de servidor. . . . . . . . . . . . . 39 Fcil acceso a las ltimas normas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Recursos tecnolgicos HTML y Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

CAPTULO 2 Exploracin del espacio de trabajo

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Utilizacin del espacio de trabajo de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Seleccin de una disposicin para el espacio de trabajo (slo Windows) . . . . . . . . . . 44 El espacio de trabajo Dreamweaver MX (slo para Windows). . . . . . . . . . . . . . . . . . 45 La disposicin del espacio de trabajo flotante (Windows y Macintosh) . . . . . . . . . . . 47 Ventanas y paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Utilizacin de las ventanas y paneles en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Ventana de documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 La barra de estado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Cambio del tamao de la ventana de documento . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Configuracin de las preferencias de la barra de estado . . . . . . . . . . . . . . . . . . . . . . . 51 Utilizacin de la barra del lanzador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Utilizacin de la barra de herramientas Documento . . . . . . . . . . . . . . . . . . . . . . . . . 52 Utilizacin de la barra de herramientas Estndar. . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Utilizacin de mens contextuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Utilizacin de la barra Insertar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Utilizacin del inspector de propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Administracin de paneles y grupos de paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Configuracin de preferencias de Paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Panel Sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Panel Historial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Utilizacin del panel Historial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Panel Respuestas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Utilizacin de Dreamweaver con otras aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Personalizacin de Dreamweaver: aspectos bsicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Configuracin de preferencias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Configuracin de preferencias generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Configuracin de preferencias de fuentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Utilizacin del editor de mtodos abreviados de teclado . . . . . . . . . . . . . . . . . . . . . . 64 Adicin de extensiones a Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Personalizacin de Dreamweaver en sistemas multiusuario . . . . . . . . . . . . . . . . . . . . 68
CAPTULO 3 Planificacin y configuracin del sitio

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Planificacin y diseo del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Determinacin de los objetivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Eleccin de una audiencia destino . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Creacin de sitios compatibles con diversos navegadores. . . . . . . . . . . . . . . . . . . . . . 70 Organizacin de la estructura del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Creacin de su propio diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Diseo del esquema de navegacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Planificacin y recopilacin de los activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Configuracin de un sitio Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Uso del asistente para la definicin del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Configuracin de una carpeta local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Configuracin de una carpeta remota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Eleccin del directorio del servidor para el acceso FTP . . . . . . . . . . . . . . . . . . . . . . 78 Uso de Secure Shell para el acceso mediante FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Solucin de problemas de configuracin de carpetas remotas . . . . . . . . . . . . . . . . . . 79

Contenido

Edicin de un sitio Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Edicin de sitios Web existentes con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . Edicin de un sitio Web local con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . Edicin de un sitio Web remoto con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . .
CAPTULO 4 Administracin del sitio .

80 80 80 80

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

El panel Sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Uso del panel Sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Configuracin de las preferencias del sitio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Modificacin de las columnas de las vistas de archivos . . . . . . . . . . . . . . . . . . . . . . . 88 Apertura y visualizacin de sitios en el panel Sitio. . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Cambio de la disposicin del panel Sitio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Manipulacin de archivos en el panel Sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Bsqueda de archivos en el panel Sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Uso del explorador de archivos integrado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 El mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Utilizacin del mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Visualizacin del mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Modificacin de la disposicin del mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Manipulacin de pginas en el mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Cmo mostrar y ocultar archivos de mapa de un sitio. . . . . . . . . . . . . . . . . . . . . . . . 99 Visualizacin del sitio desde una rama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Almacenamiento del mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Importacin y exportacin de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Eliminacin de un sitio de la lista de sitios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Utilizacin de desproteger/proteger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Configuracin del sistema de desproteccin/proteccin . . . . . . . . . . . . . . . . . . . . . 102 Desproteccin y proteccin de archivos en un sitio remoto. . . . . . . . . . . . . . . . . . . 103 Obtencin y colocacin de archivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Obtencin de archivos de un servidor remoto o de prueba . . . . . . . . . . . . . . . . . . . 105 Colocacin de archivos en un servidor remoto o de prueba . . . . . . . . . . . . . . . . . . 107 Sincronizacin de los archivos de los sitios local y remoto . . . . . . . . . . . . . . . . . . . . . . 108 Cmo ocultar carpetas y archivos en el sitio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Activacin y desactivacin de la ocultacin en el sitio . . . . . . . . . . . . . . . . . . . . . . . 110 Cmo ocultar y anular la ocultacin de las carpetas del sitio . . . . . . . . . . . . . . . . . . 110 Cmo ocultar y anular la ocultacin de tipos de archivo especficos . . . . . . . . . . . . 111 Cmo anular la ocultacin de todas las carpetas y archivos . . . . . . . . . . . . . . . . . . . 112 Utilizacin de Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Activacin y desactivacin de Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Almacenamiento de informacin sobre archivos en Design Notes. . . . . . . . . . . . . . 114 Utilizacin de Design Notes en Fireworks y Flash con Dreamweaver . . . . . . . . . . . 116 Utilizacin de informes para mejorar el flujo de trabajo. . . . . . . . . . . . . . . . . . . . . . . . 117 El panel Sitespring de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Requisitos del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Conexin con el servidor Sitespring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Utilizacin del panel Sitespring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Desconexin de Sitespring en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Contenido

CAPTULO 5 Configuracin de un documento .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Creacin de documentos de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Manipulacin del cuadro de dilogo Nuevo documento . . . . . . . . . . . . . . . . . . . . . . . 124 Creacin de un nuevo documento en blanco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Creacin de un documento basado en un archivo de diseo de Dreamweaver. . . . . 125 Creacin de un documento basado en una plantilla existente . . . . . . . . . . . . . . . . . 127 Almacenamiento de un documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Apertura de documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Configuracin de las propiedades del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Cambio del ttulo de un documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Establecimiento de una imagen de fondo o un color de fondo de pgina . . . . . . . . 129 Manipulacin de colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Colores seguros para la Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Definicin de colores predeterminados de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Seleccin de elementos en la ventana de documento . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Elementos invisibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Utilizacin de guas visuales en el proceso de diseo . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Visualizacin de reglas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Utilizacin de una imagen de rastreo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Visualizacin y edicin del contenido de la seccin head . . . . . . . . . . . . . . . . . . . . . . . 135 Automatizacin de tareas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Repeticin de pasos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Aplicacin de pasos a otro objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Aplicacin de pasos a mltiples objetos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Cmo copiar y pegar pasos entre documentos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Creacin de comandos nuevos usando pasos del historial . . . . . . . . . . . . . . . . . . . . 140 Grabacin de comandos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Parte II Preparacin para crear sitios dinmicos

CAPTULO 6 Configuracin de una aplicacin Web .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Nota para los usuarios de Dreamweaver UltraDev 4 . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Lo que necesita para crear aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Configuracin de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Configuracin de un servidor de aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Eleccin de un servidor de aplicaciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Instalacin de un servidor de aplicaciones ColdFusion . . . . . . . . . . . . . . . . . . . . . . 148 Instalacin de un servidor de aplicaciones ASP.NET. . . . . . . . . . . . . . . . . . . . . . . . 148 Instalacin de un servidor de aplicaciones ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Instalacin de un servidor de aplicaciones JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Instalacin de un servidor de aplicaciones PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Creacin de una carpeta raz para la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Contenido

Definicin de un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Definicin de una carpeta local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Definicin de una carpeta remota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Especificacin de dnde pueden procesarse las pginas dinmicas. . . . . . . . . . . . . . 152 Prefijos de URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Solucin de problemas de errores del servidor de aplicaciones . . . . . . . . . . . . . . . . . . . 154 ColdFusion - 405, Method Not Allowed (mtodo no permitido) . . . . . . . . . . . . . . 155 JRun - Syntax Error: Identifier expected instead of this token (error de sintaxis: se esperaba un identificador en lugar de esta ficha) . . . . . . . . . . . . . . . . . . 155 JRun - Error 2140 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 WebSphere - Error 403 (forbidden by rule) (prohibido por regla). . . . . . . . . . . . . . 155 WebSphere - Error 404 (File Not Found) (no se encontr el archivo) . . . . . . . . . . . 156
CAPTULO 7 Conexiones de base de datos para desarrolladores de ColdFusion . . . .

157

Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Creacin de una fuente de datos ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Conexin con la base de datos en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Edicin o eliminacin de una conexin de base de datos . . . . . . . . . . . . . . . . . . . . . . . 158 Conexin utilizando la conectividad UltraDev 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Requisitos de conexin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Creacin de una conexin ColdFusion UD4 habitual. . . . . . . . . . . . . . . . . . . . . . . 159 Creacin de una conexin ColdFusion UD4 avanzada (usuarios de Macintosh) . . . 160 Edicin o eliminacin de una conexin ColdFusion UD4 . . . . . . . . . . . . . . . . . . . 160
CAPTULO 8 Conexiones de base de datos para desarrolladores de ASP.NET

. . . . . 163 163 164 164 165 165 166

Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Obtencin de un proveedor de OLE DB para la base de datos . . . . . . . . . . . . . . . . Creacin de una conexin de base de datos en Dreamweaver . . . . . . . . . . . . . . . . . Creacin de una conexin utilizando Propiedades del vnculo de datos. . . . . . . . . . Ejemplos de parmetros de conexin de base de datos OLE para ASP.NET . . . . . . Edicin o eliminacin de una conexin de base de datos . . . . . . . . . . . . . . . . . . . . . . .
CAPTULO 9 Conexiones de base de datos para desarrolladores de ASP

. . . . . . . . . . 169 170 170 171 172 173 173 174 175 176 176 176 177 178

Aspectos bsicos de las conexiones de base de datos con ASP. . . . . . . . . . . . . . . . . . . . Creacin de una conexin con DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de una conexin utilizando un DSN local . . . . . . . . . . . . . . . . . . . . . . . . Creacin de una conexin utilizando un DSN remoto . . . . . . . . . . . . . . . . . . . . . . Creacin de una conexin sin DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de una conexin de base de datos con una cadena de conexin . . . . . . . . Cmo escribir una cadena de conexin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de una conexin OLE DB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conexin con una base de datos en un ISP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Aspectos bsicos de las rutas fsicas y virtuales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . Localizacin de una ruta fsica de archivo con la ruta virtual. . . . . . . . . . . . . . . . . . Utilizacin de una ruta virtual para conectar con una base de datos . . . . . . . . . . . . Edicin o eliminacin de una conexin de base de datos . . . . . . . . . . . . . . . . . . . . . . .

Contenido

CAPTULO 10 Conexiones de base de datos para desarrolladores de JSP.

. . . . . . . . . . 181

Aspectos bsicos de las conexiones JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Obtencin de un controlador JDBC para la base de datos . . . . . . . . . . . . . . . . . . . 182 Creacin de una conexin de base de datos para JSP. . . . . . . . . . . . . . . . . . . . . . . . 182 Parmetros de conexin JDBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Conexin mediante un controlador ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Comprobacin del controlador ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Instalacin del controlador puente JDBC-ODBC de Sun. . . . . . . . . . . . . . . . . . . . 185 Creacin de una conexin ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Edicin o eliminacin de una conexin de base de datos . . . . . . . . . . . . . . . . . . . . . . . 186
CAPTULO 11 Conexiones de base de datos para desarrolladores de PHP

. . . . . . . . . . 189

Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Edicin o eliminacin de una conexin de base de datos . . . . . . . . . . . . . . . . . . . . . . . 190

Parte III Utilizacin del cdigo de las pginas

CAPTULO 12 Configuracin del entorno de codificacin

. . . . . . . . . . . . . . . . . . . . . . . . . . 193

Visualizacin de los cdigos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Configuracin de las preferencias de visualizacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Configuracin de las preferencias de codificacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Configuracin de las preferencias de formato del cdigo. . . . . . . . . . . . . . . . . . . . . 195 Aplicacin de nuevas preferencias de formato a documentos existentes . . . . . . . . . . 197 Configuracin de las preferencias de Sugerencias para el cdigo . . . . . . . . . . . . . . . 197 Configuracin de las preferencias de reescritura del cdigo . . . . . . . . . . . . . . . . . . . 197 Configuracin de las preferencias de colores del cdigo. . . . . . . . . . . . . . . . . . . . . . 198 Personalizacin de los mtodos abreviados de teclado . . . . . . . . . . . . . . . . . . . . . . . . . 199 Cmo abrir archivos en la vista Cdigo de forma predeterminada . . . . . . . . . . . . . . . . 199 Configuracin de las preferencias del validador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Administracin de bibliotecas de etiquetas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Adicin de bibliotecas, etiquetas y atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Edicin de bibliotecas, etiquetas y atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Eliminacin de bibliotecas, etiquetas y atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Importacin de etiquetas personalizadas a Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 203 Importacin de etiquetas de archivos XML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Importacin de etiquetas ASP.NET personalizadas . . . . . . . . . . . . . . . . . . . . . . . . . 204 Importacin de etiquetas JSP de un archivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Importacin de etiquetas JSP de un servidor (web.xml) . . . . . . . . . . . . . . . . . . . . . 205 Importacin de etiquetas JRun . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Utilizacin de un editor de HTML externo con Dreamweaver . . . . . . . . . . . . . . . . . . 206 Utilizacin de un editor de HTML integrado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Utilizacin de editores externos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Contenido

CAPTULO 13 Codificacin en Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Entorno de codificacin de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Tipos de archivos compatibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Cmo respeta Dreamweaver el cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Cdigo insertado por comportamientos del servidor. . . . . . . . . . . . . . . . . . . . . . . . 211 Escritura y edicin de cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Utilizacin de Sugerencias para el cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Manipulacin de fragmentos de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Utilizacin de la barra Insertar para insertar cdigo fcilmente . . . . . . . . . . . . . . . . 213 Utilizacin del Selector de etiquetas para insertar etiquetas . . . . . . . . . . . . . . . . . . . 214 Edicin de etiquetas utilizando editores de etiquetas. . . . . . . . . . . . . . . . . . . . . . . . 214 Edicin de etiquetas utilizando el inspector de etiquetas . . . . . . . . . . . . . . . . . . . . . 215 Aplicacin de sangra a los bloques de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Cmo copiar y pegar cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Insercin de comentarios HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Cmo mostrar funciones JavaScript y VBScript en la pgina . . . . . . . . . . . . . . . . . 216 Bsqueda y reemplazo de etiquetas y atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Bsqueda de cdigo fuente HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Bsqueda de etiquetas y atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Bsqueda de texto entre etiquetas especficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Almacenamiento de modelos de bsqueda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Expresiones regulares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Acceso a referencias de lenguaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
CAPTULO 14 Optimizacin y depuracin del cdigo

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Limpieza del cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Verificacin de que las etiquetas y llaves estn equilibradas . . . . . . . . . . . . . . . . . . . . . 224 Validacin de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Cmo hacer las pginas compatibles con XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 XML y XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Cdigo XHTML generado por Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Utilizacin de CSS (Hojas de estilos en cascada, Cascading Style Sheets) con XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Cmo hacer los documentos compatibles con XHTML . . . . . . . . . . . . . . . . . . . . . 229 Utilizacin del depurador JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Ejecucin del depurador JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Bsqueda de errores de sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Bsqueda y solucin de errores de lgica. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Configuracin de puntos de corte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Revisin paso a paso del cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Visualizacin y edicin de valores de variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Utilizacin del depurador ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Contenido

CAPTULO 15 Edicin de cdigo en la vista Diseo .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Edicin de cdigo con el inspector de propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Edicin del cdigo con un editor de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Edicin de cdigo con Quick Tag Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Insercin de una etiqueta HTML con Quick Tag Editor . . . . . . . . . . . . . . . . . . . . 239 Edicin de una etiqueta HTML con Quick Tag Editor. . . . . . . . . . . . . . . . . . . . . . 239 Aplicacin de HTML a una seleccin con Quick Tag Editor . . . . . . . . . . . . . . . . . 240 Utilizacin del men de sugerencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Edicin de cdigo con el selector de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Edicin de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Cmo escribir un script en el lado del cliente en la vista Diseo . . . . . . . . . . . . . . . 242 Vinculacin con un archivo de script externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Edicin de un script en la vista Diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Manipulacin de server-side includes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Insercin de un server-side include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Edicin del contenido de un server-side include . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

Parte IV Diseo de la disposicin de la pgina

CAPTULO 16 Presentacin de contenido en tablas.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Insercin de una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Adicin de contenido a la celda de una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Importacin de datos de tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Seleccin de elementos de tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Aplicacin de formato a tablas y celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Conflictos en el formato de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Visualizacin y configuracin de las propiedades de una tabla . . . . . . . . . . . . . . . . 254 Visualizacin y configuracin de las propiedades de celdas, filas y columnas . . . . . 254 Utilizacin de un esquema de diseo para aplicar formato a una tabla . . . . . . . . . . 255 Cambio del tamao de las tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Cambio del ancho de las columnas y el alto de las filas . . . . . . . . . . . . . . . . . . . . . . . . 257 Adicin y eliminacin de filas y columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Divisin y combinacin de celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Anidacin de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Cmo cortar, copiar y pegar celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Ordenacin de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Exportacin de datos de tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

10

Contenido

CAPTULO 17 Establecimiento de la disposicin de pginas en la vista Disposicin

. . . 265

Celdas y tablas de disposicin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Cambio a la vista Disposicin y salida de ella. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Dibujo de celdas y tablas de disposicin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Dibujo de una tabla de disposicin anidada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Ajuste de celdas de disposicin a la cuadrcula . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Adicin de contenido a una celda de disposicin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Cmo borrar los altos de celdas establecidos automticamente . . . . . . . . . . . . . . . . 272 Cmo mover y cambiar el tamao de celdas y tablas de disposicin. . . . . . . . . . . . . . . 273 Aplicacin de formato a celdas y tablas de disposicin . . . . . . . . . . . . . . . . . . . . . . . . . 274 Aplicacin de formato a celdas de disposicin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Aplicacin de formato a tablas de disposicin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Establecimiento del ancho de columna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Utilizacin de las imgenes de espaciador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Configuracin de las preferencias de la vista Disposicin . . . . . . . . . . . . . . . . . . . . . . . 279
CAPTULO 18 Utilizacin de marcos . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Marcos y conjuntos de marcos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Cundo utilizar marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Creacin de pginas Web basadas en marcos en Dreamweaver. . . . . . . . . . . . . . . . . . . 284 Creacin de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Creacin de un conjunto de marcos predefinido. . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Creacin y edicin de un conjunto de marcos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 Conjuntos de marcos anidados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Seleccin de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 Seleccin de marcos y conjuntos de marcos en el panel Marcos . . . . . . . . . . . . . . . 288 Seleccin de marcos y conjuntos de marcos en la ventana de documento . . . . . . . . 288 Cmo abrir un documento en un marco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Almacenamiento de archivos de marco y conjunto de marcos . . . . . . . . . . . . . . . . . . . 290 Visualizacin y configuracin de las propiedades de un marco. . . . . . . . . . . . . . . . . . . 291 Visualizacin y configuracin de las propiedades de un conjunto de marcos . . . . . . . . 292 Control del contenido del marco con vnculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Manipulacin de navegadores que no pueden mostrar marcos . . . . . . . . . . . . . . . . . . . 293 Utilizacin de comportamientos JavaScript con marcos . . . . . . . . . . . . . . . . . . . . . . . . 294

Parte V Adicin de contenido

CAPTULO 19 Insercin y aplicacin de formato al texto

. . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Insercin y aplicacin de formato al texto HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Adicin de texto a un documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Importacin de texto desde otros documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Adicin de espacio entre caracteres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Adicin de espaciado de prrafo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Contenido

11

Aplicacin de formato al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Configuracin y cambio de fuentes y estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Modificacin de combinaciones de fuentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 Aplicacin de formato a prrafos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Alineamiento del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Sangrar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Cambio del color del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Creacin de listas ordenadas y sin ordenar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Insercin de fechas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Insercin de caracteres especiales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 Utilizacin de reglas horizontales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 Utilizacin de estilos HTML para aplicar formato a texto . . . . . . . . . . . . . . . . . . . . . . 306 Utilizacin del panel Estilos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Creacin de un estilo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Aplicacin de un estilo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Edicin de un estilo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Uso de sus estilos HTML en otros sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Hojas de estilos en cascada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Utilizacin del panel Estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 Creacin de un nuevo estilo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Aplicacin de un estilo CSS personalizado (clase) . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Creacin y establecimiento de vnculos con una hoja de estilos CSS externa . . . . . . 316 Edicin de un estilo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 Edicin de una hoja de estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 Utilizacin de hojas de estilos de tiempo de diseo . . . . . . . . . . . . . . . . . . . . . . . . . 318 Exportacin de estilos para crear una hoja de estilos CSS . . . . . . . . . . . . . . . . . . . . 319 Estilos en conflicto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Conversin de estilos CSS a etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Tabla de conversin de CSS a formato HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Comprobacin de la ortografa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 Buscar y reemplazar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
CAPTULO 20 Insercin de imgenes .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325 Insercin de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 Insercin de un marcador de posicin de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . 327 Sustitucin de un marcador de posicin de imagen. . . . . . . . . . . . . . . . . . . . . . . . . 328 Alineamiento de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Cambio el tamao de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 Creacin de una imagen de sustitucin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 Utilizacin de un editor de imgenes externo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Inicio de un editor de imgenes externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 Aplicacin de comportamientos a imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

12

Contenido

CAPTULO 21 Integracin de Dreamweaver con otras aplicaciones .

. . . . . . . . . . . . . . . . 335 336 336 337 338 338 340 341 341 342 343 343 344 346 347 348

Integracin de Fireworks y Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cmo se trabaja con Dreamweaver y Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Especificacin de preferencias de ejecucin y edicin de archivos origen de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insercin de una imagen de Fireworks en un documento de Dreamweaver . . . . . . . Actualizacin de un marcador de posicin de imagen de Dreamweaver en Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Edicin de una imagen o una tabla de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . Apertura de un men emergente de Fireworks en Dreamweaver . . . . . . . . . . . . . . . Ejecucin de Fireworks para optimizar una imagen . . . . . . . . . . . . . . . . . . . . . . . . Insercin de cdigo HTML de Fireworks en un documento de Dreamweaver . . . . Cmo pegar cdigo HTML de Fireworks en Dreamweaver . . . . . . . . . . . . . . . . . . Actualizacin de cdigo HTML de Fireworks colocado en Dreamweaver . . . . . . . . Creacin de un lbum de fotos Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cmo trabajar con Dreamweaver y Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Edicin de una pelcula Flash en Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . Actualizacin de vnculos en un archivo SWF. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CAPTULO 22 Insercin de medios

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351

Insercin y reproduccin de objetos multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 Inicio de un editor externo de archivos multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . 352 Utilizacin de Design Notes con objetos multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . 353 Contenido de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 Insercin de un objeto de botn Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 Modificacin de un objeto de botn Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 Reproduccin de un botn Flash en el documento . . . . . . . . . . . . . . . . . . . . . . . . . 357 Insercin de un objeto de texto Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 Insercin de pelculas Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Insercin de pelculas Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Adicin de vdeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 Adicin de sonido a una pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 Formatos de archivo de audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 Establecimiento de un vnculo con archivos de audio . . . . . . . . . . . . . . . . . . . . . . . . . 361 Incrustacin de un archivo de sonido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 Insercin de contenido de plug-ins de Netscape Navigator . . . . . . . . . . . . . . . . . . . . . 362 Reproduccin de plug-ins en la ventana de documento . . . . . . . . . . . . . . . . . . . . . 362 Solucin de problemas de plug-ins de Navigator. . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Insercin de un control ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Insercin de un applet de Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 Utilizacin de comportamientos para controlar elementos multimedia . . . . . . . . . . . . 364
CAPTULO 23 Funciones de accesibilidad de Dreamweaver . . . .

. . . . . . . . . . . . . . . . . . . . 365 366 366 366 366

Uso de las funciones de accesibilidad de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . Uso de lectores de pantalla con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Uso de las funciones de accesibilidad del sistema operativo . . . . . . . . . . . . . . . . . . . Uso del teclado para navegar Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Contenido

13

Creacin de sitios Web accesibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369 Desarrollo de contenido para lectores de pantalla . . . . . . . . . . . . . . . . . . . . . . . . . . 369 Activacin de los cuadros de dilogo de accesibilidad . . . . . . . . . . . . . . . . . . . . . . . 370 Insercin de imgenes accesibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 Insercin de objetos de formulario accesibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 Insercin de marcos accesibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Insercin de objetos multimedia accesibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 Insercin de tablas accesibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Comprobacin de la accesibilidad del sitio Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 Informacin sobre esta funcin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

Parte VI Utilizacin de comportamientos y animaciones

CAPTULO 24 Utilizacin de comportamientos JavaScript

. . . . . . . . . . . . . . . . . . . . . . . . . 381

Utilizacin del panel Comportamientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Aplicacin de un comportamiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 Comportamientos y texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Cmo adjuntar un comportamiento a una lnea de tiempo . . . . . . . . . . . . . . . . . . . . . 385 Cambio de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Actualizacin de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 Creacin de nuevas acciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 Descarga e instalacin de comportamientos de otros proveedores . . . . . . . . . . . . . . . . 386 Utilizacin de las acciones de comportamiento incluidas con Dreamweaver . . . . . . . . 387 Llamar JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 Cambiar propiedad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Comprobar navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Comprobar plug-in. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Controlar Shockwave o Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 Arrastrar capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 Recopilacin de informacin sobre la capa desplazable . . . . . . . . . . . . . . . . . . . . . . 393 Ir a URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Men de salto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Men de salto Ir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396 Abrir ventana del navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396 Reproducir sonido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Mensaje emergente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Carga previa de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Definir Imagen de barra de navegacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Definir texto de marco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Definir texto de capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 Definir texto de barra de estado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Definir texto de campo de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Mostrar-Ocultar capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Mostrar men emergente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Adicin, eliminacin y cambio del orden de los elementos del men emergente . . . . . . 406 Definicin de la apariencia de un men emergente. . . . . . . . . . . . . . . . . . . . . . . . . 407

14

Contenido

Definicin de opciones avanzadas de apariencia . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 Definicin de la posicin de un men emergente en un documento . . . . . . . . . . . . 408 Modificacin de un men emergente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Intercambiar imagen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Restaurar imagen intercambiada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 Ir a un fotograma en la lnea de tiempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 Reproducir lnea de tiempo y Detener lnea de tiempo . . . . . . . . . . . . . . . . . . . . . . 411 Validar formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
CAPTULO 25 Animacin de capas .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

Cdigo HTML para capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Creacin de capas en la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Panel Capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Configuracin de preferencias de capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 Anidacin de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 Manipulacin de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 Seleccin de capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Cambio del tamao de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Cmo mover capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Alineamiento de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Ajuste de capas a la cuadrcula . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Adicin de contenido a las capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Visualizacin y configuracin de las propiedades de las capas . . . . . . . . . . . . . . . . . . . 422 Visualizacin y configuracin de propiedades para mltiples capas . . . . . . . . . . . . . 423 Cambio del orden de apilamiento de las capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Cambio de la visibilidad de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Utilizacin de tablas y capas para diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Conversin entre tablas y capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426 Cmo evitar el solapamiento de capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426 Conversin para compatibilidad con los navegadores 3.0 . . . . . . . . . . . . . . . . . . . . 427 Animacin de las capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Utilizacin del panel Lneas de tiempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 Opciones de reproduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 Desplazamiento de una capa utilizando una animacin de lnea de tiempo. . . . . . . 429 Creacin de una lnea de tiempo arrastrando una ruta . . . . . . . . . . . . . . . . . . . . . . 430 Modificacin de lneas de tiempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431 Cambio de propiedades de imagen y capa con lneas de tiempo . . . . . . . . . . . . . . . 432 Utilizacin de mltiples lneas de tiempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432 Cmo copiar y pegar animaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Aplicacin de una secuencia de animacin a un objeto diferente. . . . . . . . . . . . . . . 433 Cambio de nombres de lneas de tiempo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 Sugerencias para la animacin de lneas de tiempo . . . . . . . . . . . . . . . . . . . . . . . . . 434 Animacin de capas utilizando acciones de comportamiento . . . . . . . . . . . . . . . . . . . . 435

Contenido

15

Parte VII Utilizacin de mltiples pginas

CAPTULO 26 Creacin de vnculos y navegacin

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Ubicacin y rutas de los documentos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 Rutas absolutas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 Rutas relativas al documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 Rutas relativas a la raz del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 Creacin de vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Vinculacin de archivos y documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444 Establecimiento de vnculos con un punto especfico de un documento . . . . . . . . 447 Creacin de un hipervnculo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 Creacin de un vnculo de correo electrnico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 Creacin de vnculos de script y nulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 Administracin de vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 Creacin y modificacin de vnculos en el mapa del sitio . . . . . . . . . . . . . . . . . . . . 453 Modificacin de un vnculo en todo el sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 Creacin de mens de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 Insercin de un men de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 Edicin de los elementos del men de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456 Solucin de problemas relacionados con los mens de salto . . . . . . . . . . . . . . . . . . 456 Creacin de barras de navegacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Insercin de una barra de navegacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 Modificacin de una barra de navegacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 Creacin de mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Insercin de mapas de imagen del lado del cliente . . . . . . . . . . . . . . . . . . . . . . . . . 460 Modificacin de un mapa de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460 Cmo adjuntar comportamientos a vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
CAPTULO 27 Administracin de activos, bibliotecas y plantillas del sitio

. . . . . . . . . . . . 463

Utilizacin del panel Activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Apertura del panel Activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Seleccin de una categora de activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 Visualizacin de activos en el panel Activos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 Actualizacin del panel Activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 Adicin de un activo a una pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Utilizacin del panel Activos para aplicar un color . . . . . . . . . . . . . . . . . . . . . . . . . 467 Utilizacin del panel Activos para aadir un vnculo de URL a un documento . . . . . 468 Seleccin y edicin de activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Utilizacin de la categora Biblioteca del panel Activos . . . . . . . . . . . . . . . . . . . . . . 469 Utilizacin del panel Activos para trabajar con plantillas . . . . . . . . . . . . . . . . . . . . . 470 Utilizacin de activos y sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Administracin del panel Activos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Configuracin de una lista de activos favoritos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Adicin y eliminacin de activos de la lista Favoritos . . . . . . . . . . . . . . . . . . . . . . . 473 Creacin de un color o URL para aadir a la lista Favoritos . . . . . . . . . . . . . . . . . . 474

16

Contenido

Creacin de un apodo para un activo favorito. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474 Agrupamiento de activos en una carpeta Favoritos . . . . . . . . . . . . . . . . . . . . . . . . . 475 Utilizacin de los elementos de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 Creacin, administracin y edicin de elementos de biblioteca . . . . . . . . . . . . . . . . . . 476 Creacin de un elemento de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Insercin de un elemento de biblioteca en un documento. . . . . . . . . . . . . . . . . . . . 477 Edicin de un elemento de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477 Conversin de elementos de biblioteca en editables en un documento . . . . . . . . . . 479 Edicin de un comportamiento en un elemento de biblioteca . . . . . . . . . . . . . . . . 480 Plantillas de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481 Definicin de regiones de plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482 Parmetros de plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Edicin de cdigo fuera de las etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Vnculos en plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Visualizacin de plantillas en la vista Diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 Visualizacin de plantillas en la vista Cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 Visualizacin de documentos basados en plantilla en la vista Diseo. . . . . . . . . . . . 485 Visualizacin de documentos basados en plantilla en la vista Cdigo . . . . . . . . . . . 486 Creacin de una plantilla de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 Almacenamiento de un documento como plantilla . . . . . . . . . . . . . . . . . . . . . . . . . 487 Creacin de regiones editables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488 Insercin de una regin editable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488 Eliminacin de una regin editable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489 Creacin de regiones repetidas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489 Creacin de una regin repetida en una plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . 490 Insercin de una tabla de repeticin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Configuracin de colores de fondo alternativos en una regin repetida . . . . . . . . . . 491 Definicin de atributos de etiqueta editables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492 Definicin de atributos de etiqueta editables en una plantilla . . . . . . . . . . . . . . . . . 492 Conversin de un atributo de etiqueta editable en no editable . . . . . . . . . . . . . . . . 493 Regiones opcionales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 Insercin de una regin opcional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 Modificacin de una regin opcional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495 Creacin de un documento basado en plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 Edicin de contenido de una pgina basada en plantilla . . . . . . . . . . . . . . . . . . . . . . . 496 Modificacin de propiedades de plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497 Modificacin de los parmetros de plantilla de una regin opcional . . . . . . . . . . . . 498 Adicin, eliminacin y cambio del orden de una entrada de regin repetida . . . . . 499 Plantillas anidadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 Creacin de una plantilla anidada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 Aplicacin de una plantilla a un documento existente . . . . . . . . . . . . . . . . . . . . . . . . . 503 Separacin de un documento de una plantilla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503 Edicin y actualizacin de plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504 Actualizacin de las plantillas de Dreamweaver 4 . . . . . . . . . . . . . . . . . . . . . . . . . . 504 Actualizacin de documentos basados en plantilla . . . . . . . . . . . . . . . . . . . . . . . . . 504 Comprobacin de la sintaxis de la plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 Exportacin e importacin de contenido XML de plantillas . . . . . . . . . . . . . . . . . . 505 Utilizacin de notaciones de etiquetas XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506

Contenido

17

CAPTULO 28 Comprobacin de un sitio .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

Comprobacin de la compatibilidad con los navegadores . . . . . . . . . . . . . . . . . . . . . . 510 Utilizacin de comportamientos para detectar navegadores y plug-ins . . . . . . . . . . . . . 511 Vista previa de pginas en navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Comprobacin de vnculos de una pgina o un sitio . . . . . . . . . . . . . . . . . . . . . . . . . . 513 Reparacin de vnculos rotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515 Apertura de documentos vinculados en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 516 Definicin del tiempo de descarga y el tamao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516 Utilizacin de informes para comprobar un sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517

Parte VIII Creacin de pginas dinmicas

CAPTULO 29 Optimizacin del espacio de trabajo para desarrollo visual .

. . . . . . . . . . . 523

Visualizacin de los paneles aplicables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523 Visualizacin de la estructura de base de datos en Dreamweaver . . . . . . . . . . . . . . . . . 525 Visualizacin de live data en la vista Diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 Requisitos para mostrar live data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 Copiado de archivos dependientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 Suministro de parmetros esperados a la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . 528 Actualizacin de la pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Solucin de problemas de la vista Live Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Utilizacin de la vista Diseo sin live data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Vista previa de pginas dinmicas en un navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 Restriccin de la informacin de base de datos que se muestra en Dreamweaver . . . . . 530
CAPTULO 30 Flujo de trabajo de Dreamweaver para el diseo de pginas dinmicas

. . . 533

Diseo de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533 Creacin de un origen de contenido dinmico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534 Adicin de contenido dinmico a una pgina Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 536 Mejora de la funcionalidad de una pgina dinmica . . . . . . . . . . . . . . . . . . . . . . . . . . 536 Adicin de comportamientos de servidor a una pgina . . . . . . . . . . . . . . . . . . . . . . 537 Comprobacin y depuracin de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538 Comprobacin del contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538 Edicin de contenido dinmico en una pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Eliminacin de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
CAPTULO 31 Almacenamiento y recuperacin de datos para la pgina .

. . . . . . . . . . . . 541

Utilizacin de una base de datos para almacenar contenido . . . . . . . . . . . . . . . . . . . . . 541 Acceso a los datos almacenados en una base de datos . . . . . . . . . . . . . . . . . . . . . . . 542 Recogida de los datos enviados por los usuarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 Aspectos bsicos de los parmetros de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . 543 Aspectos bsicos de los parmetros URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 Creacin de parmetros de URL utilizando vnculos HTML . . . . . . . . . . . . . . . . . 545 Recuperacin de parmetros de formulario y URL . . . . . . . . . . . . . . . . . . . . . . . . . 546

18

Contenido

Acceso a datos almacenados en variables de sesin . . . . . . . . . . . . . . . . . . . . . . . . . . . . Aspectos bsicos de las variables de sesin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Recogida de informacin para almacenarla en variables de sesin . . . . . . . . . . . . . . Almacenamiento de informacin en variables de sesin . . . . . . . . . . . . . . . . . . . . . Ejemplo de informacin almacenada en variables de sesin. . . . . . . . . . . . . . . . . . . Recuperacin de datos de variables de sesin . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CAPTULO 32 Definicin de fuentes de contenido dinmico . . . .

546 547 548 549 550 551

. . . . . . . . . . . . . . . . . . . . 553 553 554 555 556 557 558 559 560 561 563 563 564 565 565 566 566 568 568 569

Aspectos bsicos de las fuentes de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . Definicin de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de un juego de registros sin escribir SQL . . . . . . . . . . . . . . . . . . . . . . . . Creacin de un juego de registros avanzado escribiendo SQL . . . . . . . . . . . . . . . . . Escritura de SQL para ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de consultas SQL utilizando el rbol Elementos de base de datos. . . . . . . Definicin de parmetros de URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de parmetros de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de variables de sesin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de variables de aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de variables de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de variables de servidor ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de variables de servidor ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de variables de servidor PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de variables de servidor JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de JavaBeans (slo JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de un cach de las fuentes de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cambio o eliminacin de fuentes de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Copiado de un juego de registros de una pgina a otra . . . . . . . . . . . . . . . . . . . . . . . .
CAPTULO 33 Adicin de contenido dinmico a pginas Web .

. . . . . . . . . . . . . . . . . . . . . 571 571 572 573 575 577 578 578

Adicin de contenido dinmico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conversin de texto en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conversin de imgenes en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conversin de atributos HTML en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . Conversin de parmetros de ActiveX, Flash y de otros objetos en contenido dinmico . . . Cambio de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Eliminacin de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CAPTULO 34 Visualizacin de registros de base de datos

. . . . . . . . . . . . . . . . . . . . . . . . . 579

Aplicacin de elementos tipogrficos y de disposicin de pgina a los datos dinmicos. . . . 580 Aplicacin de formatos a los datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580 Personalizacin de los formatos de datos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . 581 Creacin de formatos de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581 Creacin de vnculos de navegacin por conjuntos de registros . . . . . . . . . . . . . . . . . . 582 Creacin de una barra de navegacin utilizando el comportamiento de servidor Barra de navegacin por juego de registros . . . . . . . . . . . . . . . . . . . . . . . . 582 Creacin de una barra de navegacin por el juego de registros personalizada. . . . . . 583

Contenido

19

Visualizacin y ocultacin de registros segn los resultados del juego de registros . . . . 585 Visualizacin de mltiples comportamientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586 Creacin de una tabla con un comportamiento de servidor Repetir regin . . . . . . . . . 587 Creacin de un contador de registros. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588 Creacin de un contador de registros utilizando el objeto Estado de navegacin por juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589 Creacin de contadores de registros personalizados . . . . . . . . . . . . . . . . . . . . . . . . . 589 Creacin de un control Web Cuadrcula de datos o Lista de datos de ASP.NET . . . . . 591 Adicin de una cuadrcula de datos a una pgina . . . . . . . . . . . . . . . . . . . . . . . . . . 592 Adicin de una lista de datos a la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593 Modificacin de un objeto Cuadrcula de datos o Lista de datos . . . . . . . . . . . . . . . 594
CAPTULO 35 Utilizacin de componentes de ColdFusion

. . . . . . . . . . . . . . . . . . . . . . . . . 595

Aspectos bsicos de los componentes de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . 595 Creacin visual de un componente en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 596 Visualizacin de componentes de ColdFusion en Dreamweaver . . . . . . . . . . . . . . . . . 597 Edicin de componentes de ColdFusion en Dreamweaver. . . . . . . . . . . . . . . . . . . . . . 598 Creacin de pginas Web que utilicen componentes de ColdFusion . . . . . . . . . . . . . . 599
CAPTULO 36 Utilizacin de los servicios Web

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601

Aspectos bsicos de los servicios Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602 Partes de un servicio Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602 Bsqueda de proveedores de servicios Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602 Componentes del software de los servicios Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 Especificaciones e informacin sobre los servicios Web . . . . . . . . . . . . . . . . . . . . . . 603 Flujo de trabajo de los servicios Web en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 603 Instalacin y configuracin de generadores proxy . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 Obtencin de generadores proxy adicionales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605 Adicin de un proxy de servicios Web utilizando la descripcin WSDL. . . . . . . . . . . . 607 Adicin de un servicio Web a una pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608 Edicin de la lista de sitios de servicios Web UDDI. . . . . . . . . . . . . . . . . . . . . . . . . . . 610
CAPTULO 37 Adicin de comportamientos de servidor personalizados .

. . . . . . . . . . . . 611

Instalacin de comportamientos de servidor adicionales . . . . . . . . . . . . . . . . . . . . . . . 611 Creacin de nuevos comportamientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612 Utilizacin del Creador de comportamientos de servidor . . . . . . . . . . . . . . . . . . . . 613 Escritura de bloques de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616 Utilizacin de parmetros en comportamientos de servidor . . . . . . . . . . . . . . . . . . 617 Conversin de los bloques de cdigo en condicionales. . . . . . . . . . . . . . . . . . . . . . . . . 618 Utilizacin eficaz de expresiones condicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618 Repeticin de bloques de cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619 Reglas de codificacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622 Colocacin de bloques de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622 Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624 Comprobacin de comportamientos de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . 626

20

Contenido

Edicin y modificacin de cdigo de comportamientos de servidor. . . . . . . . . . . . . . . 627 Edicin de comportamientos de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
CAPTULO 38 Creacin de formularios interactivos .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629

Objetos de formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 Creacin de un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631 Aspectos bsicos de los objetos de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 633 Utilizacin de campos de formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634 Creacin de campos de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634 Creacin de campos de texto de varias lneas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636 Creacin de un campo de carga de archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638 Creacin de un campo oculto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639 Insercin de casillas de verificacin y botones de opcin . . . . . . . . . . . . . . . . . . . . . . . 639 Aspectos bsicos de las casillas de verificacin y los botones de opcin . . . . . . . . . . 640 Insercin de casillas de verificacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 640 Insercin de botones de opcin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641 Creacin de listas y mens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642 Creacin de listas de desplazamiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642 Creacin de mens emergentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644 Adicin de botones de formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 Insercin de botones de formulario estndar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 Creacin de un botn grfico Enviar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646 Diseo de formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647 Insercin de tablas en los formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647 Utilizacin de una funcin JavaScript del lado del cliente para procesar formularios . . 647 Utilizacin de comportamientos con formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648 Creacin de objetos de formularios dinmicos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 Creacin de una lista/men dinmicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 Conversin de listas/mens existentes en dinmicos . . . . . . . . . . . . . . . . . . . . . . . . 650 Conversin de campos de texto y de imgenes en dinmicos . . . . . . . . . . . . . . . . . 650 Conversin de casillas de verificacin en dinmicas . . . . . . . . . . . . . . . . . . . . . . . . 651 Conversin de botones de opcin en dinmicos . . . . . . . . . . . . . . . . . . . . . . . . . . . 652

Parte IX Desarrollo rpido de aplicaciones

CAPTULO 39 Creacin de pginas Maestro/Detalle .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657 657 659 660 660 660 661 662 663

Pginas Maestro/Detalle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin rpida de pginas Maestro/Detalle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de pginas Maestro/Detalle bloque a bloque . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de una pgina maestra y definicin de un juego de registros para ella . . . . Visualizacin de los registros en la pgina maestra . . . . . . . . . . . . . . . . . . . . . . . . . Apertura de la pgina detalle y transferencia de un ID de registro a dicha pgina . . Bsqueda y visualizacin del registro solicitado en la pgina detalle . . . . . . . . . . . . Modificacin de pginas Maestro/Detalle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Contenido

21

CAPTULO 40 Creacin de pginas que realicen bsquedas en bases de datos

. . . . . . 665

Pginas de bsqueda/resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665 Creacin de la pgina de bsqueda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666 Creacin de la pgina de resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 667 Bsqueda con un solo parmetro de bsqueda . . . . . . . . . . . . . . . . . . . . . . . . . . . . 667 Bsqueda con mltiples parmetros de bsqueda . . . . . . . . . . . . . . . . . . . . . . . . . . 669 Visualizacin de los registros. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671 Creacin de una pgina detalle para una pgina de resultados . . . . . . . . . . . . . . . . . . . 672 Modificacin de una pgina de resultados para que funcione con una pgina detalle. . . 672 Creacin de la pgina detalle utilizando un comportamiento de servidor (slo usuarios de ASP y JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673 Creacin de la pgina detalle utilizando un juego de registros filtrado. . . . . . . . . . . 674 Utilizacin de pginas relacionadas (slo usuarios de ASP y JSP) . . . . . . . . . . . . . . . . . 676
CAPTULO 41 Creacin de pginas que modifiquen bases de datos .

. . . . . . . . . . . . . . . . 679

Creacin de una pgina para insertar registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680 Creacin rpida de una pgina de insercin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680 Creacin de una pgina de insercin elemento a elemento . . . . . . . . . . . . . . . . . . . 681 Creacin de una pgina para actualizar registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683 Identificacin del registro que desea actualizar . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 Recuperacin del registro que desea actualizar . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 Cmo completar la pgina de actualizacin rpidamente . . . . . . . . . . . . . . . . . . . . 685 Cmo completar la pgina de actualizacin elemento a elemento . . . . . . . . . . . . . . 686 Creacin de una pgina para borrar un registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688 Identificacin del registro que desea borrar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688 Recuperacin del registro que desea borrar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688 Visualizacin de los datos que desea borrar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689 Envo del comando de borrado al servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690 Eliminacin del registro de la tabla de la base de datos . . . . . . . . . . . . . . . . . . . . . . 691 Utilizacin de procedimientos almacenados para modificar bases de datos. . . . . . . . . . 691 Ejecucin del procedimiento almacenado en ColdFusion . . . . . . . . . . . . . . . . . . . . 692 Ejecucin del procedimiento almacenado en ASP . . . . . . . . . . . . . . . . . . . . . . . . . . 693 Ejecucin del procedimiento almacenado en ASP.NET. . . . . . . . . . . . . . . . . . . . . . 694 Ejecucin del procedimiento almacenado en JSP . . . . . . . . . . . . . . . . . . . . . . . . . . 695 Utilizacin de comandos ASP para modificar una base de datos . . . . . . . . . . . . . . . . . 695 Aspectos bsicos de los comandos ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696 Creacin de un comando que utilice SQL para editar una base de datos . . . . . . . . . 696 Utilizacin de declaraciones preparadas JSP para modificar una base de datos . . . . . . . 698 Aspectos bsicos de las declaraciones preparadas JSP. . . . . . . . . . . . . . . . . . . . . . . . 698 Creacin de una declaracin preparada que edite un registro de base de datos . . . . 699
CAPTULO 42 Creacin de pginas que restrinjan el acceso al sitio

. . . . . . . . . . . . . . . . . 701

Creacin de una pgina de registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701 Almacenamiento de la informacin de conexin de los usuarios . . . . . . . . . . . . . . 702 Cmo permitir que los usuarios elijan un nombre de usuario y una contrasea. . . . 703 Actualizacin de la tabla de usuarios de la base de datos . . . . . . . . . . . . . . . . . . . . . 704 Comprobacin de que el nombre de usuario elegido es exclusivo . . . . . . . . . . . . . . 704

22

Contenido

Creacin de una pgina de conexin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 Creacin de una tabla de base de datos de usuarios registrados . . . . . . . . . . . . . . . . 706 Cmo permitir que los usuarios se conecten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706 Comprobacin del nombre de usuario y la contrasea . . . . . . . . . . . . . . . . . . . . . . 707 Creacin de una pgina a la que slo pueden acceder los usuarios autorizados . . . . . . . 708 Redireccionamiento de usuarios no autorizados a otra pgina . . . . . . . . . . . . . . . . . 708 Almacenamiento de privilegios de acceso en la base de datos de usuarios . . . . . . . . 709 Desconexin de usuarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710

Parte X Utilizacin de Dreamweaver con Macromedia Contribute

CAPTULO 43 Configuracin de un sitio para su utilizacin con Contribute .

. . . . . . . . . . 713 714 715 716 716 718

Creacin de la estructura del sitio y diseo de pginas para un sitio de Contribute . . . Configuracin de la direccin HTTP de un sitio de Contribute . . . . . . . . . . . . . . . . . Exportacin de definiciones de sitios para su utilizacin con Contribute . . . . . . . . . . . Creacin de plantillas para un sitio de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de pginas dinmicas en un sitio de Contribute . . . . . . . . . . . . . . . . . . . . . .
CAPTULO 44 Conexin y administracin de un sitio de Contribute mediante Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . 721

Activacin de la compatibilidad con Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 Configuracin de una contrasea de administrador para un sitio de Contribute . . . . . 722 Cambio de la configuracin de administracin para un sitio de Contribute. . . . . . . . . 723 Cambio de la configuracin de grupos de permisos para un sitio de Contribute . . . . . 724 Solucin de problemas relacionados con un sitio de Contribute . . . . . . . . . . . . . . . . . 724 Solucin de problemas de conexin con un sitio de Contribute . . . . . . . . . . . . . . . 725 Comprobacin de permisos de grupos en un sitio de Contribute . . . . . . . . . . . . . . 725 Solucin de problemas con las herramientas de administracin de Contribute . . . . 726
CAPTULO 45 Administracin de archivos de Contribute con Dreamweaver

. . . . . . . . . 727 727 728 729 730 731 731 732 733

Eliminacin, traslado y cambio de nombre de un archivo remoto de un sitio de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Transferencia de archivos desde y hacia un sitio de Contribute . . . . . . . . . . . . . . . . . . Restauracin de una versin anterior de una pgina de un sitio de Contribute . . . . . . Actualizacin de plantillas en un sitio de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . Actualizacin de hojas de estilos CSS en un sitio de Contribute . . . . . . . . . . . . . . . . . Cambio de permisos para archivos y carpetas del servidor . . . . . . . . . . . . . . . . . . . . . . Desbloqueo de un archivo en un sitio de Contribute. . . . . . . . . . . . . . . . . . . . . . . . . . Manipulacin de archivos especiales de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . .

Contenido

23

Parte XI Apndices
APNDICE A Gua de bases de datos para principiantes .

. . . . . . . . . . . . . . . . . . . . . . . . . . 737

Bases de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737 Aspectos bsicos del diseo de bases de datos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738 Estudio de las normas y poltica empresarial de Arrow Aircraft . . . . . . . . . . . . . . . . 739 Estudio de las caractersticas del encargo de Arrow Aircraft. . . . . . . . . . . . . . . . . . . 739 Qu preguntas harn los usuarios a la base de datos? . . . . . . . . . . . . . . . . . . . . . . . 739 Eleccin de las tablas de la base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740 Eleccin de las columnas en cada tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741 Definicin de la relacin entre las tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742 Creacin de la base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743 Aspectos bsicos de las conexiones de bases de datos . . . . . . . . . . . . . . . . . . . . . . . . . . 744 Interfaz con la base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744 Utilizacin de controladores de bases de datos para interactuar con una base de datos . . 746 Visualizacin de los controladores ODBC instalados en un sistema Windows . . . . . . 747 Llamada a los controladores de bases de datos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748 Utilizacin de un DSN en una cadena de conexin . . . . . . . . . . . . . . . . . . . . . . . . 749
APNDICE B Nociones bsicas de SQL

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751

Aspectos bsicos de la sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751 Definicin de las columnas en un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . 752 Limitacin de los registros en un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . 753 Filtrado de registros segn la equivalencia de dos valores. . . . . . . . . . . . . . . . . . . . . 753 Filtrado de registros segn la similitud de dos valores . . . . . . . . . . . . . . . . . . . . . . . 754 Filtrado de registros segn un intervalo de valores. . . . . . . . . . . . . . . . . . . . . . . . . . 755 Filtrado de registros segn una combinacin de condiciones de bsqueda. . . . . . . . 756 Clasificacin de los registros en un juego de registros. . . . . . . . . . . . . . . . . . . . . . . . . . 756 Unin de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757
APNDICE C Configuracin de un DSN en Windows

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759

Aspectos bsicos de los DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759 Creacin de un DSN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759

APNDICE D Referencia rpida: Etiquetas de Macromedia ASP.NET .

. . . . . . . . . . . . . 763

MM:DataSet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763 MM:If . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 766 MM:Insert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 766 MM:Update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767 MM:Delete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 768 Parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769 Parameter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769

24

Contenido

Parte I Aspectos bsicos de Dreamweaver

Aprenda a utilizar la documentacin y otros recursos de Dreamweaver y configure el espacio de trabajo de Dreamweaver de acuerdo con su estilo de trabajo preferido. Posteriormente, planifique y configure un sitio y comience a crear pginas. Esta parte contiene los siguientes captulos:

Parte I

Captulo 1, Bienvenido a Dreamweaver Captulo 2, Exploracin del espacio de trabajo Captulo 3, Planificacin y configuracin del sitio Captulo 4, Administracin del sitio Captulo 5, Configuracin de un documento

CAPTULO 1 Bienvenido a Dreamweaver

Macromedia Dreamweaver MX es un editor HTML profesional para disear, codificar y desarrollar sitios, pginas y aplicaciones Web. Tanto si desea controlar manualmente el cdigo HTML como si prefiere trabajar en un entorno de edicin visual, Dreamweaver le proporciona tiles herramientas que mejorarn su experiencia de creacin Web. Las funciones de edicin visual de Dreamweaver permiten crear pginas de forma rpida, sin escribir una sola lnea de cdigo. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fcil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creacin y edicin de imgenes en Macromedia Fireworks y su posterior importacin directa a Dreamweaver, o bien aadir objetos Macromedia Flash creados directamente en Dreamweaver. Dreamweaver ofrece tambin numerosas herramientas y funciones de gestin de cdigo, como las que incluye la vista Cdigo (por ejemplo, colores de cdigo o terminacin automtica de etiquetas); material de referencia sobre HTML, CSS, JavaScript, CFML, ASP y JSP; y un Depurador JavaScript. 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 ahora incorpora Macromedia UltraDev, con funciones mejoradas, lo que facilita la creacin de aplicaciones Web basadas en bases de datos dinmicas mediante lenguajes de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP y PHP. 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. Este captulo contiene las secciones siguientes: Aprendizaje de Dreamweaver en la pgina 28 Flujo de trabajo de creacin de un sitio Web en la pgina 30 Por dnde empezar en la pgina 35 Convenciones tipogrficas en la pgina 37 Novedades de Dreamweaver MX en la pgina 37 Recursos tecnolgicos HTML y Web en la pgina 41

27

Aprendizaje de Dreamweaver
Dreamweaver incluye diversos recursos para ayudarle a aprender rpidamente el funcionamiento del programa y a dominar la creacin de sitios y pginas Web. Estos recursos incluyen una gua impresa, titulada Primeros pasos, un sistema de ayuda en lnea y tutoriales. Tambin encontrar sugerencias, notas tcnicas, ejemplos e informacin que se actualizan de forma regular en el Centro de servicio tcnico de Dreamweaver, dentro del sitio Web de Macromedia. Gua de primeros pasos La gua Primeros pasos ha sido diseada para conducirle por el proceso de creacin de un sitio Web sencillo, pero funcional, utilizando Dreamweaver. Va dirigido a usuarios que han creado pginas Web pero no estn familiarizados con determinados aspectos de Dreamweaver. Incluye captulos sobre la creacin y edicin de pginas estticas sencillas, edicin manual de cdigo y creacin de aplicaciones Web dinmicas. Esta gua se proporciona como un manual impreso, como parte del sistema de ayuda y como un archivo PDF. Tutoriales Los tutoriales contienen otras lecciones que amplan la informacin sobre temas concretos que se tratan de forma ms detallada que en otras secciones de la gua Primeros pasos. Con los tutoriales, aprender a editar un sitio Web de muestra con algunas de las funciones de diseo ms tiles y potentes de Dreamweaver. Los tutoriales estn disponibles en la gua impresa Primeros pasos, en la Ayuda de Dreamweaver (en el men Ayuda en Dreamweaver, elija Tutoriales) y como parte del archivo PDF Primeros pasos. Si ya est familiarizado con las funciones de diseo de Dreamweaver, pero desea aprender ms sobre la creacin de aplicaciones Web, empiece por los tutoriales de pginas dinmicas, que le mostrarn cmo crear pginas interactivas conectadas a bases de datos. Ayuda de Dreamweaver La Ayuda de Dreamweaver proporciona informacin completa sobre todas las funciones de Dreamweaver optimizada para su uso en lnea. La Ayuda de Dreamweaver se muestra en el visor de la ayuda de su sistema operativo: Microsoft HTML Help (Windows) o Apple Help (Macintosh). En las dos plataformas, se puede encontrar la informacin necesaria de cuatro formas: El Contenido permite ver toda la informacin organizada por temas. Haga clic en las entradas de nivel superior para ver otros temas subordinados. El ndice, como cualquier ndice impreso tradicional, permite consultar trminos o conceptos concretos.
Buscar permite

localizar cualquier cadena de caracteres en cualquier lugar del texto del sistema de

ayuda.

28

Captulo 1

La Ayuda contextual ofrece un mtodo para abrir el tema de ayuda pertinente desde cualquier cuadro de dilogo, panel o inspector. Para ver la ayuda contextual, haga clic en el botn Ayuda en un cuadro de dilogo o elija Ayuda en el men Opciones en la barra de ttulo de un grupo de paneles. Tambin puede hacer clic en el icono de interrogacin de un inspector o cualquier otro tipo de ventana.
Haga clic aqu para abrir la ayuda

Cada tema de ayuda contiene botones que se utilizan para pasar de un tema a otro. Los botones de flecha izquierda y derecha permiten acceder al tema anterior o siguiente de una seccin (siguiendo el orden de los temas establecido en el contenido).

Ampliacin de Dreamweaver El sistema de ayuda Ampliacin de Dreamweaver proporciona informacin sobre los DOM (modelo de objetos de documento) y las API (interfaces de programacin de aplicaciones) de Dreamweaver, que permiten a los desarrolladores de JavaScript y C crear extensiones para Dreamweaver. Centro de servicio tcnico de Dreamweaver Para aprovechar al mximo Dreamweaver, puede consultar el centro de servicio tcnico basado en la Web. El sitio Web del centro de servicio tcnico de Dreamweaver en http://www.macromedia.com/es/support/ se actualiza de forma peridica con la informacin ms reciente sobre Dreamweaver, as como con sugerencias de usuarios expertos, ejemplos, consejos, actualizaciones e informacin sobre temas avanzados. Visite este sitio Web con frecuencia para conocer las ltimas noticias sobre Dreamweaver y aprender a sacar el mximo provecho del programa. Centro para Diseadores & Desarrolladores El centro Centro para Diseadores & Desarrolladores de Macromedia en http://www.macromedia.com/es/desdev/ proporciona herramientas, tutoriales y otro material sobre todos los productos de Macromedia. Foros en lnea de Dreamweaver Intercambie ideas sobre aspectos tcnicos y comparta tiles consejos con otros usuarios de Dreamweaver visitando el foro de discusin de Dreamweaver. En el sitio Web de Macromedia http://www.macromedia.com/go/dreamweaver_newsgroup encontrar informacin sobre cmo acceder a los foros.

Bienvenido a Dreamweaver

29

Mtodos abreviados de teclado En el sitio Web de Macromedia en http://www.macromedia.com/go/dreamweaver_mx_shortcuts encontrar grficos que describen los mtodos abreviados del teclado en la configuracin predeterminada de Dreamweaver.

Flujo de trabajo de creacin de un sitio Web

Existen muchos mtodos distintos para crear un sitio Web. En el flujo de trabajo que presentamos en esta documentacin, empezamos por definir el objetivo y la estrategia del sitio. Si va a desarrollar aplicaciones Web, deber configurar los servidores y las bases de datos necesarias. A continuacin, debe disear el aspecto y el funcionamiento del sitio. Una vez que el diseo est finalizado, debe crear el sitio y codificar las pginas, aadiendo el contenido y la interactividad; a continuacin, vincular las pginas y comprobar si el sitio funciona y si cumple los objetivos para los que ha sido diseado. Adems, si lo desea, puede incluir pginas dinmicas. Para terminar el ciclo, publicar el sitio en un servidor. Muchos ingenieros de desarrollo tambin programan operaciones de mantenimiento peridico para asegurarse de que el sitio contina estando actualizado y operativo. Para facilitar la localizacin de informacin necesaria para el desarrollo de sitios Web, la documentacin Utilizacin de Dreamweaver se divide en amplias secciones que siguen este modelo de aproximacin al desarrollo Web: planificacin del sitio, diseo, desarrollo, comprobacin y publicacin y mantenimiento. Planificacin de sitios Planificar y organizar cuidadosamente el sitio desde el primer momento puede ayudar a ahorrar tiempo ms adelante. La organizacin del sitio no slo implica la determinacin de los archivos que van a incluirse, sino que tambin requiere un examen de las necesidades del sitio, el perfil de la audiencia y sus objetivos. Adems, deben tenerse en cuenta requisitos tcnicos tales como el acceso de los usuarios, o limitaciones del navegador, los plug-ins o la descarga de archivos. Una vez que haya organizado la informacin y determinado una estructura, podr comenzar a crear el sitio.

Determine qu estrategia va a emplear y cules son los aspectos que debe tener en cuenta
durante la planificacin del sitio. Consulte Captulo 3, Planificacin y configuracin del sitio, en la pgina 69.

Utilice el panel Sitio de Dreamweaver para establecer la estructura organizativa del sitio. En el
panel Sitio puede aadir, borrar y renombrar los archivos y carpetas fcilmente con el fin de cambiar la organizacin segn resulte necesario. Consulte Captulo 3, Planificacin y configuracin del sitio, en la pgina 69 y Captulo 4, Administracin del sitio, en la pgina 83.

Puede empezar por crear pginas simples que ms adelante convertir en diseos ms
complejos. Cree pginas vacas nuevas o pginas basadas en diseos predefinidos en el cuadro de dilogo Nuevo documento. Consulte Captulo 5, Configuracin de un documento, en la pgina 123. Si trabaja en un equipo de desarrollo Web, es posible que tambin le interesen estos temas:

Configurar un sistema de forma que los miembros del equipo no puedan sobrescribir los
archivos; consulte Utilizacin de desproteger/proteger en la pgina 102.

Utilizar Design Notes para comunicarse con los miembros del equipo Web; consulte
Utilizacin de Design Notes en la pgina 113.

30

Captulo 1

Configuracin de aplicaciones Web Cada vez ms sitios Web contienen pginas dinmicas que permiten a los visitantes ver informacin almacenada en bases de datos y normalmente algunos de ellos pueden aadir nueva informacin y editar informacin de estas bases de datos. Para crear este tipo de pginas, primero debe realizar una serie de pasos preliminares.

Configure un servidor Web y un servidor de aplicaciones y, a continuacin, cree o modifique

un sitio de Dreamweaver. Consulte Captulo 6, Configuracin de una aplicacin Web, en la pgina 145.

Conecte con una base de datos. Segn la tecnologa que utilice su servidor de aplicaciones,
consulte Captulo 7, Conexiones de base de datos para desarrolladores de ColdFusion, en la pgina 157, Captulo 8, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 163, Captulo 9, Conexiones de base de datos para desarrolladores de ASP, en la pgina 169, Captulo 10, Conexiones de base de datos para desarrolladores de JSP, en la pgina 181 o Captulo 11, Conexiones de base de datos para desarrolladores de PHP, en la pgina 189. Codificacin manual La codificacin manual de pginas Web no constituye tanto un paso en el flujo de trabajo de creacin del sitio Web como un mtodo en s mismo para crear las pginas. Dreamweaver ofrece sencillas herramientas de edicin visual, pero tambin ofrece otras utilidades de codificacin ms sofisticadas. Puede utilizar el mtodo que prefiera, o una combinacin de ambos, para crear y editar sus pginas.

Puede trabajar en un entorno de codificacin sin herramientas visuales; las herramientas de

codificacin le permiten crear y editar cdigo, asignarle un formato y comprobar que se ajusta a determinadas normas y, por ltimo, depurar cdigo JavaScript. Consulte Captulo 12, Configuracin del entorno de codificacin, en la pgina 193, Captulo 13, Codificacin en Dreamweaver, en la pgina 209 y Captulo 14, Optimizacin y depuracin del cdigo, en la pgina 223.

Tambin puede utilizar algunas herramientas de codificacin de Dreamweaver en la vista

Diseo, el entorno de diseo visual. Consulte Captulo 15, Edicin de cdigo en la vista Diseo, en la pgina 237. Disposicin de las pginas Web Muchos proyectos de diseo Web comienzan con guiones en imgenes (storyboards) o diagramas de flujos que se convierten en pginas de ejemplo. Utilice Dreamweaver para crear pginas de muestra mientras trabaje en la definicin de un diseo final. Las pginas de muestra normalmente incluyen la disposicin de diseo, la navegacin del sitio, los componentes tcnicos, los temas y el color e imgenes grficas u otros elementos multimedia, pero no contienen el contenido final de la pgina.

Las herramientas de tabla y la vista Disposicin de Dreamweaver permiten disear

rpidamente pginas Web y, posteriormente, reorganizar la estructura de las pginas. Consulte Captulo 16, Presentacin de contenido en tablas, en la pgina 249 y Captulo 17, Establecimiento de la disposicin de pginas en la vista Disposicin, en la pgina 265.

Para mostrar varios documentos de forma simultnea en un navegador, pueden utilizarse

marcos para su organizacin. Consulte Captulo 18, Utilizacin de marcos, en la pgina 281.

Bienvenido a Dreamweaver

31

Adicin de contenido Mediante Dreamweaver, podr aadir fcilmente a las pginas Web una gran variedad de contenidos. Aada activos y elementos de diseo, como texto, imgenes, colores, pelculas, sonido y otros elementos multimedia.

Escriba directamente en un documento de Dreamweaver o importe texto desde otros

documentos, luego aplique formato al texto utilizando el inspector de propiedades de Dreamweaver o el panel Estilos HTML. Tambin puede crear fcilmente sus propias CSS (Cascading Style Sheets: hojas de estilos en cascada). Consulte Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297.

El panel Activos permite organizar fcilmente los activos de un sitio. A continuacin, se

pueden arrastrar directamente desde el panel Activos hasta un documento de Dreamweaver. Consulte Utilizacin del panel Activos en la pgina 464.

Inserte imgenes, incluidas imgenes de sustitucin, mapas de imgenes e imgenes por capas
de Fireworks. Utilice herramientas de alineamiento para situar las imgenes en la pgina. Consulte Captulo 20, Insercin de imgenes, en la pgina 325 y Captulo 21, Integracin de Dreamweaver con otras aplicaciones, en la pgina 335.

Inserte cualquier otro tipo de elementos multimedia en una pgina Web, como pelculas Flash,
Shockwave y QuickTime, sonido y applets. Consulte Captulo 22, Insercin de medios, en la pgina 351.

Asegrese de que las personas con discapacidades puedan acceder al contenido. Consulte
Captulo 23, Funciones de accesibilidad de Dreamweaver, en la pgina 365. Interactividad y animacin Muchas pginas Web son estticas, contienen nicamente texto e imgenes. Dreamweaver permite ir ms all de las pginas estticas, utilizando interactividad y animacin para captar el inters del visitante. Puede ofrecer a los visitantes la posibilidad de realizar comentarios segn se desplazan y hacen clic, as como demostrar conceptos o animar elementos de la pgina. En otras palabras, permite a los visitantes ver y hacer ms cosas dentro de la pgina. Dreamweaver dispone de varias maneras de aadir interactividad y animacin a las pginas:

Los comportamientos permiten realizar tareas en respuesta a eventos especficos como, por
ejemplo, resaltar un botn cuando el puntero pasa por encima de l, validar un formulario cuando el usuario hace clic en el botn Enviar o abrir una segunda ventana del navegador cuando la pgina principal ha terminado de cargarse. Consulte Captulo 24, Utilizacin de comportamientos JavaScript, en la pgina 381.

Las lneas de tiempo permiten crear animaciones que no necesitan plug-ins, controles ActiveX
o Java. Las lneas de tiempo usan HTML dinmico para cambiar la posicin de una capa o el origen de una imagen con el paso del tiempo, o para activar automticamente acciones de comportamiento cuando la pgina ha terminado de cargarse. Consulte Captulo 25, Animacin de capas, en la pgina 415.

32

Captulo 1

Conexin de las pginas al sitio Los sitios no se componen de pginas individuales; es preciso enlazarlas mediante la creacin de vnculos HTML y la reutilizacin de contenido de forma que adquieran un aspecto comn.

Con Dreamweaver puede crear vnculos HTML estndar, incluidos vnculos de ancla y
vnculos de correo electrnico, o establecer sistemas de navegacin grfica, como los mens de punto de fijacin y las barras de navegacin. Consulte Captulo 26, Creacin de vnculos y navegacin, en la pgina 439.

Las plantillas y los archivos de bibliotecas de Dreamweaver permiten aplicar fcilmente

contenido reutilizable y diseos de pgina a su sitio. Puede crear pginas nuevas basadas en una plantilla de Dreamweaver y actualizar su diseo de forma automtica cuando cambie la plantilla. Consulte Captulo 27, Administracin de activos, bibliotecas y plantillas del sitio, en la pgina 463. Comprobacin y publicacin del sitio Su sitio ya est listo para lanzarlo al mundo; pero antes de publicarlo en un servidor, debe comprobarlo. En funcin del tamao del proyecto, de las especificaciones del cliente y de los tipos de navegadores que utilicen los visitantes, necesitar mover el sitio a un servidor en funcionamiento en el que pueda comprobarse y editarse. Una vez que haya realizado las correcciones, podr publicar el sitio para que el pblico en general pueda obtener acceso a l. Tras publicar el sitio, establezca un ciclo de mantenimiento para asegurar la calidad, responder a los comentarios de los usuarios y actualizar la informacin del sitio. Utilice las siguientes funciones de Dreamweaver para comprobar y publicar su sitio:

Para aadir nuevas etiquetas en una pgina o reparar el cdigo, utilice el panel Referencia de
Dreamweaver con el fin de consultar el cdigo JavaScript, CSS y HTML. Consulte Acceso a referencias de lenguaje en la pgina 221.

Utilice el depurador JavaScript para que le resulte ms fcil reparar errores JavaScript en el
cdigo. El depurador permite establecer puntos de corte en el cdigo que luego facilitan su visualizacin al depurar una pgina en Dreamweaver. Consulte Utilizacin del depurador JavaScript en la pgina 229.

Realice comprobaciones con navegadores y plug-ins, verifique y repare los vnculos de los
documentos y genere informes del sitio para detectar errores comunes en los archivos HTML. Consulte Captulo 28, Comprobacin de un sitio, en la pgina 509.

En el panel Sitio de Dreamweaver encontrar numerosas herramientas que le ayudarn a

administrar el sitio, transferir archivos desde y hacia un servidor remoto, configurar un proceso de desproteccin/proteccin que evite que se sobrescriban archivos y sincronizar los archivos de los sitios local y remoto. Consulte Captulo 3, Planificacin y configuracin del sitio, en la pgina 69.

Bienvenido a Dreamweaver

33

Creacin de pginas dinmicas En Dreamweaver se pueden definir diversas fuentes de contenido dinmico, incluidos juegos de registros extrados de bases de datos, parmetros de formularios y componentes JavaBeans. Para aadir el contenido dinmico a una pgina, basta con arrastrarlo a ella. Puede definirse que los registros de la pgina aparezcan de uno en uno o en grupos, mostrar varias pginas de registros, aadir vnculos especiales para pasar de una pgina de registros a la siguiente (o a la anterior) y crear contadores para que los usuarios puedan llevar un control de los registros.

Si no est familiarizado con la creacin de aplicaciones Web en Dreamweaver, aprenda cmo

utilizar Dreamweaver para crear pginas dinmicas. Consulte Captulo 29, Optimizacin del espacio de trabajo para desarrollo visual, en la pgina 523 y Captulo 30, Flujo de trabajo de Dreamweaver para el diseo de pginas dinmicas, en la pgina 533.

Defina y muestre el contenido dinmico de sus pginas. Consulte Captulo 31,

Almacenamiento y recuperacin de datos para la pgina, en la pgina 541, Captulo 32, Definicin de fuentes de contenido dinmico, en la pgina 553, Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571 y Captulo 34, Visualizacin de registros de base de datos, en la pgina 579.

Encapsule la lgica de aplicaciones o empresarial mediante tecnologas innovadoras, como los

componentes ColdFusion y los servicios Web. Consulte Captulo 35, Utilizacin de componentes de ColdFusion, en la pgina 595 y Captulo 36, Utilizacin de los servicios Web, en la pgina 601.

Si necesita ms flexibilidad, puede crear sus propios comportamientos de servidor y

formularios interactivos. Consulte Captulo 37, Adicin de comportamientos de servidor personalizados, en la pgina 611 y Captulo 38, Creacin de formularios interactivos, en la pgina 629. Desarrollo rpido de aplicaciones Dreamweaver ofrece algunas herramientas de desarrollo rpido de aplicaciones (RAD), como comportamientos de servidor y objetos de aplicaciones, que permiten crear sofisticadas aplicaciones Web sin necesidad de escribir el cdigo del lado del servidor.

Cree con rapidez pginas que realicen bsquedas y modifiquen bases de datos, y muestren los
resultados. Consulte Captulo 39, Creacin de pginas Maestro/Detalle, en la pgina 657, Captulo 40, Creacin de pginas que realicen bsquedas en bases de datos, en la pgina 665 y Captulo 41, Creacin de pginas que modifiquen bases de datos, en la pgina 679.

Proporcione seguridad mediante la limitacin del acceso a las pginas. Consulte Captulo 42,
Creacin de pginas que restrinjan el acceso al sitio, en la pgina 701.

34

Captulo 1

Por dnde empezar

Este manual incluye informacin para usuarios de distintos niveles. Para sacarle el mximo provecho a la documentacin, comience leyendo las partes que sean ms relevantes para su nivel.
Para principiantes en el diseo Web:

Para empezar, consulte los dos primeros captulos de la gua Primeros pasos. Si alguna de las secciones de estos captulos le parece demasiado avanzada o compleja, sltesela y vuelva a ella ms adelante. En Utilizacin de Dreamweaver, consulte Captulo 2, Exploracin del espacio de trabajo, en la pgina 43, Captulo 3, Planificacin y configuracin del sitio, en la pgina 69, Captulo 4, Administracin del sitio, en la pgina 83 y Captulo 5, Configuracin de un documento, en la pgina 123. Para aprender sobre la disposicin de las pginas, consulte Captulo 17, Establecimiento de la disposicin de pginas en la vista Disposicin, en la pgina 265. Para obtener informacin sobre la aplicacin de formato al texto y la insercin de imgenes en las pginas, consulte Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297 y Captulo 20, Insercin de imgenes, en la pgina 325. 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 orden. Es posible que prefiera leer los captulos de pginas dinmicas slo cuando se haya familiarizado con la creacin de pginas Web.

3 4

Para diseadores de sitios Web con experiencia que empiezan a usar Dreamweaver:

1 2 3

Para empezar, consulte los dos primeros captulos de la gua Primeros pasos. En Utilizacin de Dreamweaver, consulte Captulo 2, Exploracin del espacio de trabajo, en la pgina 43 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. Aunque probablemente ya conoce una buena parte del material del Captulo 3, Planificacin y configuracin del sitio, en la pgina 69 y el Captulo 4, Administracin del sitio, en la pgina 83, puede hojear estos captulos para ver cmo se aplican en Dreamweaver estos conceptos. Preste especial atencin a las secciones sobre el uso de Dreamweaver para configurar un nuevo sitio. Siga los pasos de los tutoriales que le interesen, para aprender sobre el uso de Dreamweaver para realizar tareas concretas. Para ver los tutoriales del sistema de ayuda, elija Ayuda> Tutoriales. El Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297 y Captulo 20, Insercin de imgenes, en la pgina 325 ofrecen informacin til sobre el uso de Dreamweaver para crear pginas HTML bsicas. Lea la introduccin que aparece al comienzo de los dems captulos para determinar si le interesan los temas que se abordan en ellos.

Para usuarios con experiencia en codificacin manual:

1 2

Para empezar, lea el primer y el tercer captulo de la gua Primeros pasos . En Utilizacin de Dreamweaver, consulte Captulo 2, Exploracin del espacio de trabajo, en la pgina 43 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver.

Bienvenido a Dreamweaver

35

Aunque probablemente ya conoce una buena parte del material de Captulo 3, Planificacin y configuracin del sitio, en la pgina 69 y Captulo 4, Administracin del sitio, en la pgina 83, puede hojear estos captulos para ver cmo se aplican en Dreamweaver estos conceptos. Preste especial atencin a las secciones sobre el uso de Dreamweaver para configurar un nuevo sitio. Encontrar ms informacin sobre codificacin con Dreamweaver en el Captulo 12, Configuracin del entorno de codificacin, en la pgina 193, Captulo 13, Codificacin en Dreamweaver, en la pgina 209, Captulo 14, Optimizacin y depuracin del cdigo, en la pgina 223 y Captulo 15, Edicin de cdigo en la vista Diseo, en la pgina 237. Lea la introduccin que aparece al comienzo de los dems captulos para determinar si le interesan los temas que se abordan en ellos.

Para diseadores de sitios Web con experiencia, familiarizados con Dreamweaver, que deseen aprender sobre la creacin de pginas dinmicas:

1 2 3 4

Para empezar, lea el primer, el cuarto y el quinto captulo de la gua Primeros pasos. En Utilizacin de Dreamweaver, hojee el Captulo 2, Exploracin del espacio de trabajo, en la pgina 43 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. Configure un servidor Web y un servidor de aplicaciones; consulte Captulo 6, Configuracin de una aplicacin Web, en la pgina 145. Conecte con una base de datos. Segn la tecnologa que utilice su servidor de aplicaciones, consulte Captulo 7, Conexiones de base de datos para desarrolladores de ColdFusion, en la pgina 157, Captulo 8, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 163, Captulo 9, Conexiones de base de datos para desarrolladores de ASP, en la pgina 169, Captulo 10, Conexiones de base de datos para desarrolladores de JSP, en la pgina 181 o Captulo 11, Conexiones de base de datos para desarrolladores de PHP, en la pgina 189. Lea la introduccin que aparece al comienzo de los dems captulos para determinar si le interesan los temas que se abordan en ellos. Si le interesa personalizar Dreamweaver de forma manual, lea Customizing Dreamweaver (Personalizacin de DreamWeaver) en el Centro de servicio tcnico de Macromedia en http://www.macromedia.com/go/customizing_dreamweaver. Si desea escribir extensiones para Dreamweaver, consulte Ampliacin de Dreamweaver (Ayuda > Ampliacin de Dreamweaver).

5 6

Para diseadores de aplicaciones Web con experiencia que no hayan utilizado Dreamweaver ni UltraDev:

1 2 3

Comience con una lectura rpida de la gua Primeros pasos para familiarizarse con los aspectos bsicos del uso de Dreamweaver. En Utilizacin de Dreamweaver, consulte Captulo 2, Exploracin del espacio de trabajo, en la pgina 43 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. Aunque probablemente ya conoce una buena parte del material del Captulo 3, Planificacin y configuracin del sitio, en la pgina 69 y el Captulo 4, Administracin del sitio, en la pgina 83, puede hojear estos captulos para ver cmo se aplican en Dreamweaver estos conceptos. Preste especial atencin a las secciones sobre el uso de Dreamweaver para configurar un nuevo sitio.

36

Captulo 1

Siga los pasos de los tutoriales que le interesen, para aprender sobre el uso de Dreamweaver para realizar tareas concretas. Para ver los tutoriales del sistema de ayuda, elija Ayuda > Tutoriales. Configure un servidor Web y un servidor de aplicaciones utilizando Dreamweaver; consulte Captulo 6, Configuracin de una aplicacin Web, en la pgina 145. Conecte con una base de datos. Segn la tecnologa que utilice su servidor de aplicaciones, consulte Captulo 7, Conexiones de base de datos para desarrolladores de ColdFusion, en la pgina 157, Captulo 8, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 163, Captulo 9, Conexiones de base de datos para desarrolladores de ASP, en la pgina 169, Captulo 10, Conexiones de base de datos para desarrolladores de JSP, en la pgina 181 o Captulo 11, Conexiones de base de datos para desarrolladores de PHP, en la pgina 189. Lea la introduccin que aparece al comienzo de los dems captulos para determinar si le interesan los temas que se abordan en ellos.

5 6

Para diseadores de aplicaciones Web con experiencia que hayan utilizado UltraDev4:

1 2 3

Para empezar, consulte Novedades de Dreamweaver MX en la pgina 37. En Utilizacin de Dreamweaver, hojee el Captulo 2, Exploracin del espacio de trabajo, en la pgina 43 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. Si le interesa personalizar Dreamweaver de forma manual, lea Customizing Dreamweaver (Personalizacin de DreamWeaver) en el Centro de servicio tcnico de Macromedia en http://www.macromedia.com/go/customizing_dreamweaver. Si desea escribir extensiones para Dreamweaver, consulte Ampliacin de Dreamweaver (Ayuda > Ampliacin de Dreamweaver).

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 permite distinguir nombres de etiquetas y atributos HTML, as como el texto literal empleado en los ejemplos. 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. Novedades de Dreamweaver MX
Dreamweaver MX contiene una amplia variedad de nuevas funciones, como nuevas plantillas mejoradas para ayudar a los diseadores visuales y muchas otras posibilidades de codificacin. Dreamweaver tambin incluye ahora todas las funciones de desarrollo de aplicaciones de Dreamweaver UltraDev 4 y otras nuevas, incluido un espacio de trabajo de edicin de cdigo que procede de Macromedia ColdFusion Studio, cdigo de tiempo de ejecucin mejorado y asistencia para las ltimas tecnologas de aplicaciones Web.

Bienvenido a Dreamweaver

37

Control total sobre el cdigo y el diseo Puede utilizar las herramientas de diseo de Dreamweaver MX o el entorno de edicin de codificacin para crear el sitio deseado, de la forma deseada.
La nueva disposicin del espacio de trabajo integrado

(slo para Microsoft Windows) ofrece un entorno ms familiar con interfaz de varios documentos (MDI), que incluye paneles totalmente acoplables y ventanas de documentos con fichas de seleccin.

La administracin de los paneles de Macromedia MX en Dreamweaver MX es coherente con Macromedia Flash MX y Fireworks MX. Los paneles plegables, apilables se pueden agrupar y contraer o ampliar segn sea necesario, para que el flujo de trabajo sea fluido y flexible. Los componentes Web de muestra prediseados incluyen disposiciones de calidad profesional que puede utilizar como gua para sus diseos, as como bibliotecas de funciones JavaScript para que pueda acceder a una sofisticada interactividad del lado del cliente sin necesidad de leer cientos de pginas de libros de texto. Las plantillas de Dreamweaver mejoradas permiten establecer sofisticadas reglas para que los contribuidores puedan introducir contenido sin modificar el diseo del sitio. La herencia de plantillas permite llevar un control de la disposicin ms personalizado y con las regiones editables los contribuidores tienen ms flexibilidad para introducir datos. El asistente para la Definicin del sitio

permite configurar un sitio de forma rpida y fcil, tanto si es la primera vez que se crea un sitio dinmico como si se trata de configurar una cuenta con un ISP.

Las Sugerencias para el cdigo

ofrecen acceso rpido a mens personalizados que incluyen atributos de etiquetas, propiedades de mtodos, parmetros de funciones y estilos CSS adecuados, en la vista Cdigo.

Una barra Insertar personalizable proporciona acceso rpido a objetos y comportamientos en Dreamweaver MX y es completamente ampliable. La barra de herramientas Documento

se puede personalizar ahora para adaptarla a sus necesidades y preferencias, utilizando XML y JavaScript.

Se ha incorporado un explorador de archivos en el panel Sitio, para buscar activos y archivos en el escritorio y en volmenes de red sin que Dreamweaver deba utilizar el explorador de archivos nativo del sistema operativo.
El panel Respuestas

le conecta directamente con recursos en lnea del Centro de servicio tcnico de Macromedia. Puede obtener nuevo contenido cuando lo desee, de forma que siempre tendr disponibles las ltimas sugerencias y trucos.

Ms posibilidades de edicin y manipulacin de tablas

que permiten generar un cdigo ms adecuado para la edicin de tablas, en vista Disposicin y en vista Estndar, simplificando la gestin de atributos y asegurando el mximo de concisin en todas las disposiciones, sin que la compatibilidad entre los distintos navegadores se vea afectada.

Mens JavaScript emergentes en cascada

que pueden crearse ahora en Dreamweaver MX, una posibilidad que antes slo exista en Fireworks. se puede configurar y personalizar completamente segn las necesidades especficas del usuario.

La aplicacin de color a la sintaxis

La barra de herramientas estndar permite acceder de forma rpida a los comandos de men que se utilizan con ms frecuencia (Abrir, Guardar y Nuevo) y a los comandos del portapapeles.

38

Captulo 1

La opcin de imprimir desde la vista Cdigo

permite ahora imprimir el cdigo fuente, con el

formato correspondiente. Amplia compatibilidad con todas las ltimas tecnologas de servidor. Cree rpidamente aplicaciones Web dinmicas basadas en bases de datos, utilizando cdigo manual y objetos y comportamientos visuales.
Bibliotecas de cdigo de servidor para ColdFusion, ASP, ASP.NET, JSP y PHP que permiten crear de forma visual sitios Web dinmicos utilizando todas las tecnologas lderes del lado del servidor. Utilice un entorno de desarrollo para integrar distintos sitios y tecnologas de bases de datos. El panel Fragmentos permite almacenar partes seleccionadas del cdigo para utilizarlas posteriormente. Se puede reutilizar fcilmente disposiciones, funciones y cdigo complicado. El Editor de la biblioteca de etiquetas

proporciona una base de datos de etiquetas integrada para almacenar informacin sobre etiquetas originales y personalizadas. Permite adems editar las propiedades de las etiquetas existentes e importar otras nuevas.

Cientos de editores de etiquetas que facilitan la edicin rpida de los atributos de etiquetas concretas en HTML, CFML y ASP.NET, en vista Cdigo.

Se admiten etiquetas personalizadas ASP.NET lo que permite importar controles de servidor ASP.NET (etiquetas personalizadas) en pginas ASP.NET y ver su estructura y sus atributos en el Selector de etiquetas, Sugerencias para el cdigo y el Inspector de etiquetas.
Las etiquetas de los formularios Web ASP.NET

se muestran ahora en Macintosh y en Windows, lo que aumenta las posibilidades de visualizacin y edicin. Los editores de etiquetas de formularios Web facilitan la creacin rpida de formularios Web ASP.NET mediante validacin y controles del lado del servidor. Se pueden crear fcilmente objetos ASP.NET DataGrid y DataList en Dreamweaver MX para casos de visualizacin y manipulacin de datos complejos.

Un panel Base de datos integrado

permite revisar rpidamente la estructura y el contenido de las bases de datos, y realizar bsquedas en las tablas, procedimientos almacenados y vistas antes de crear las consultas.

El Selector de etiquetas muestra la estructura de todas las etiquetas disponibles en Dreamweaver MX, incluidas las etiquetas personalizadas que se importan mediante el editor de la biblioteca de etiquetas. Utilcelo para insertar y editar etiquetas de forma rpida en las pginas y ver informacin de referencia sobre etiquetas especficas. Una base de datos de etiquetas basadas en XML almacena informacin sobre la estructura de todas las etiquetas disponibles. Gracias a este mecanismo de almacenamiento centralizado de la informacin, las funciones como Sugerencias para el cdigo, el Selector de etiquetas y el Inspector de etiquetas pueden funcionar con etiquetas originales y con etiquetas importadas personalizadas. La deteccin de ColdFusion MX permite

al asistente para la Definicin del sitio configurarse de forma automtica para crear un sitio ColdFusion utilizando una copia local de Macromedia ColdFusion MX Developer Edition. simplifica el flujo de trabajo de depuracin para ColdFusion MX mostrando la salida de depuracin en Dreamweaver MX. Podr ver informacin de variables y otras estadsticas de pgina clave, as como ir directamente a las zonas problemticas, sin salir del entorno de desarrollo.

El panel Live Server Debugging para ColdFusion MX

Bienvenido a Dreamweaver

39

El cdigo de tiempo de ejecucin de ColdFusion generado por los objetos y comportamientos de Dreamweaver MX se ha actualizado para que est ms orientado a las etiquetas, con lo que prcticamente no se distingue del cdigo que escribira un desarrollador de forma manual. La compatibilidad con RDS permite transferir archivos y examinar la estructura de bases de datos de los servidores ColdFusion, utilizando conexiones RDS. Las bibliotecas de etiquetas JSP ayudan

a los desarrolladores mediante la extraccin de lgica de las pginas JSP. Dreamweaver MX puede importar informacin de bibliotecas de etiquetas JSP de archivos TLD (Tag Library Descriptor, descriptores de biblioteca de etiquetas) e incluirla en Sugerencias para el cdigo, el Selector de etiquetas y el Inspector de etiquetas.

La total introspeccin de JavaBeans muestra los mtodos getProperty y setProperty de JavaBeans en el panel DataBindings y puede mostrar todos los mtodos y propiedades de JavaBeans en el panel Componentes de servidor para que los desarrolladores puedan integrar completamente Beans con sus aplicaciones JSP. Los objetos de formularios dinmicos permiten crear listas de seleccin basadas en bases de datos y

otros elementos de formularios. Para ello, basta con seleccionar el objeto de formulario adecuado en la barra Insertar.
El Creador de comportamientos de servidor de UltraDev 4 ha sido ampliado para que los usuarios puedan crear comportamientos de servidor con elementos de interfaz de usuario ms complejos, como casillas de verificacin, grupos de opciones y mens de conexin. El paquete integrado HomeSite 5 y ColdFusion Studio 5 ofrece una versin con licencia de HomeSite+, la combinacin de ColdFusion Studio y HomeSite 5, completamente integrada e incluida con Dreamweaver MX.

Fcil acceso a las ltimas normas Cree sitios Web que se ajusten a las ltimas normas de Web, incluidos servicios XML y Web, y mantngase al da sobre las tecnologas de desarrollo ms innovadoras.
La introspeccin de los servicios Web para ASP.NET, ColdFusion y Java

permite observar e interoperar con las ltimas normas de servicios Web basados en XML en las ltimas tecnologas de servidor. Incorpore complejas funcionalidades a sus aplicaciones Web mediante la funcin de introspeccin de servicios Web de Dreamweaver MX.

La edicin y validacin de XML le permite importar archivos DTD y esquemas, y comprobar que dichos documentos se han creado correctamente. La mayor compatibilidad con CSS, incluida integracin de TopStyle,

permite crear sitios segn las ltimas normas de Cascading Style Sheets (CSS). El panel CSS de Dreamweaver MX ha sido ampliado para mostrar estilos definidos de forma interna y externa, y ahora permite utilizar hojas de estilo de tiempo de diseo. Tambin se admiten muchas construcciones CSS2 nuevas. El inspector de propiedades de texto se puede utilizar tambin para aplicar estilos CSS.

La compatibilidad con XHTML permite comprobar que los sitios se ajustan a las ltimas normas de diseo HTML. Para ello, se debe configurar Dreamweaver MX para que genere cdigo compatible con XHTML. Asimismo, puede convertir rpidamente archivos HTML heredados en archivos XHTML utilizando el conversor XHTML. Los informes sobre el sitio de accesibilidad de la Seccin 508 le permiten determinar si su sitio cumple las normas de accesibilidad, as como localizar problemas de forma rpida y fcil.

40

Captulo 1

La referencia de accesibilidad integrada que contiene el panel Referencia proporciona un contexto sobre la mejor forma de disear el sitio para mejorar el acceso. La opcin de accesibilidad para generar cdigo compatible ayuda durante el ciclo de edicin a garantizar que el contenido creado cumple los requisitos de accesibilidad. Configure Dreamweaver de forma que le solicite los atributos relativos a la accesibilidad cuando se inserten las etiquetas y objetos adecuados en la pgina. El componente ColdFusion ofrece ms modularidad y portabilidad de la lgica de servidor mediante la exposicin de propiedades mediante CFML, como un servicio Web, o bien a travs de una puerta de enlace de servidor de aplicaciones de Flash. Dreamweaver MX permite examinar, crear y editar componentes ColdFusion. El validador de cdigo asegura que los documentos se ajustan a las normas adecuadas mediante un

informe de validacin que usa como referencia un perfil de navegador especfico o una versin determinada de una norma, incluida XHTML transicional y HTML 4.0.
La integracin de la ejecucin y la edicin en Macromedia Flash MX y Fireworks MX agiliza la creacin de grficos, animacin y edicin HTML entre Dreamweaver MX, Fireworks MX y Flash MX, lo que permite iniciar y optimizar directamente desde Dreamweaver. El Inspector de etiquetas para ver XML, HTML y CFML

permite ver la estructura de los documentos de forma rpida y fcil. Puede localizar y eliminar rpidamente relaciones de anidacin o padre incorrectas sin examinar el cdigo fuente.

Conexin FTP segura que se integra con MacSSH

y PUTTY para Windows con el fin de permitir la transferencia de informacin de conexin segura SSH desde el cliente FTP de Dreamweaver. todos los idiomas permite crear y

La compatibilidad total con el juego de caracteres UTF-8 en

transformar pginas utilizando codificacin UTF-8.

La compatibilidad total con Mac OS X y Windows XP permite ejecutar Dreamweaver MX a mxima velocidad en los ltimos sistemas operativos, admitiendo todas las nuevas mejoras del interfaz de usuario.

Gracias a la integracin de Macromedia Sitespring puede utilizar mtodos mejores para la produccin y gestin de clientes en el espacio de trabajo de Dreamweaver.

Recursos tecnolgicos HTML y Web

A continuacin se indican algunos recursos tiles disponibles en la Web:
Especificacin HTML 4.01 (http://www.w3.org/TR/REC-html40/) es la especificacin oficial del World Wide Web Consortium para HTML. Index DOT Html (http://www.blooberry.com/indexdot/html/)es una amplia lista de etiquetas, atributos y valores HTML e indica la compatibilidad que ofrecen con distintos navegadores. XHTML 1.0

(http://www.w3.org/TR/xhtml1/) es la especificacin oficial para Extensible HyperText Markup Language. proporciona informacin, cursos prcticos y sugerencias sobre Extensible Markup Language (XML) y sobre otras tecnologas Web.

El sitio de OReilly XML.com (http://www.xml.com/)

La especificacin de hojas de estilos en cascada nivel 1 (CSS1) (http://www.w3.org/TR/RECCSS1) y la especificacin de nivel 2 (CSS2) (http://www.w3.org/TR/REC-CSS2/) son las especificaciones oficiales para hojas de estilo del World Wide Web Consortium.

Bienvenido a Dreamweaver

41

La gua de referencia de hojas de estilos de WebReview

(http://www.webreview.com/style/index.shtml) explica qu son los estilos CSS y en qu navegadores funcionan.

Las pginas de introduccin a Microsoft ASP

(http://msdn.microsoft.com/workshop/server/asp/ASPover.asp) proporcionan informacin sobre Active Server Pages (ASP).

La pgina Microsoft ASP.NET (http://www.asp.net/)

ofrece informacin sobre ASP.NET.

La pgina Sun JSP (http://java.sun.com/products/jsp/) proporciona informacin sobre JavaServer Pages (JSP). Las pginas PHP (http://www.php.net/) ofrecen informacin sobre PHP: Hypertext Preprocessor (preprocesador de hipertexto). El sitio MySQL

(http://www.mysql.com/) ofrece informacin sobre MySQL.

La tabla de entidades

(http://www.bbsinc.com/iso8859.html) ofrece una relacin de los nombres de entidades empleados en ISO 8859-1 (Latin-1).

La pgina de eventos dinmicos HTML

(http://msdn.microsoft.com/workshop/author/dhtml/reference/events.asp#om40_event) proporciona informacin sobre eventos de Microsoft Internet Explorer.

La pgina del producto Macromedia ColdFusion

(http://www.macromedia.com/es/software/coldfusion/) proporciona informacin sobre ColdFusion.

La pgina del producto Macromedia JRun Server

(http://www.macromedia.com/es/software/jrun/) proporciona informacin sobre el servidor de aplicaciones JRun Java.

La pgina sobre WebSphere de IBM (http://www.ibm.com/software/webservers/appserv/) proporciona informacin sobre el servidor de aplicaciones WebSphere. La pgina de productos de Chili!Soft JavaScript Bible,

(http://www.Chilisoft.com/products/) proporciona informacin sobre el servidor de aplicaciones Chili!Soft ASP.

escrita por Danny Goodman (IDG Books), es un tratado completo sobre el lenguaje JavaScript 1.2. escrito por David Flanagan (OReilly & Associates), proporciona informacin sobre todas las funciones, objetos, mtodos, propiedades y manejadores de eventos JavaScript.

El manual JavaScript Definitive Guide,

CGI Scripts for Fun and Profit

(http://www.hotwired.lycos.com/webmonkey/99/26/index4a.html) es un artculo del sitio Hotwired Webmonkey que trata sobre la incorporacin de scripts CGI (Common Gateway Interface) prefabricadas a sus pginas.
El CGI Resource Index (http://www.cgi-resources.com/)

es una base de datos sobre todos los aspectos relativos a CGI, como scripts prefabricadas, documentacin, libros e incluso contratacin de programadores. contiene una

El sitio de Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)

introduccin a CGI.

42

Captulo 1

CAPTULO 2 Exploracin del espacio de trabajo

Para sacar el mximo provecho de Dreamweaver, deber conocer cules son los conceptos que subyacen al rea de trabajo de Dreamweaver y cmo seleccionar opciones, utilizar inspectores y paneles, y establecer las preferencias que mejor se adapten a su forma de trabajar. Este captulo contiene los siguientes temas:

Utilizacin del espacio de trabajo de Dreamweaver en la pgina 43 Utilizacin de las ventanas y paneles en Dreamweaver en la pgina 49 Utilizacin de Dreamweaver con otras aplicaciones en la pgina 62 Personalizacin de Dreamweaver: aspectos bsicos en la pgina 63

Utilizacin del espacio de trabajo de Dreamweaver

En este captulo se describen los elementos principales del espacio de trabajo en Windows y en Macintosh, y se explica cmo elegir una disposicin inicial del espacio de trabajo en Windows. En Windows, Dreamweaver MX ofrece dos disposiciones del espacio de trabajo entre las que elegir: una disposicin integrada en la que todo se incluye en una sola ventana y una disposicin flotante muy semejante a la de Dreamweaver 4. En Macintosh, slo se encuentra disponible la disposicin flotante. Consulte La disposicin del espacio de trabajo flotante (Windows y Macintosh) en la pgina 47.

43

Seleccin de una disposicin para el espacio de trabajo (slo Windows) En Windows, la primera vez que se inicia Dreamweaver, aparece un cuadro de dilogo que permite elegir una disposicin para el espacio de trabajo. Si cambia de idea posteriormente, podr cambiar a otro espacio de trabajo distinto a travs del cuadro de dilogo Preferencias.

Para elegir una disposicin del espacio de trabajo:

Seleccione una de las siguientes disposiciones:

Espacio de trabajo de Dreamweaver MX es un espacio de trabajo integrado que utiliza MDI (interfaz para mltiples documentos, Multiple Document Interface) en el que todas las ventanas de documentos y todos los paneles estn integrados en una misma ventana de aplicacin, con los grupos de paneles apilados a la derecha. Recomendado para la mayora de los usuarios.
Nota: En la mayora de las instrucciones que se facilitan en esta gua de usuario, se presupone que est utilizando el espacio de trabajo integrado de Dreamweaver MX.

Espacio de trabajo de Dreamweaver MX, HomeSite/Estilo de codificador es

el mismo espacio de trabajo integrado pero con los grupos de paneles apilados a la izquierda, una disposicin similar a la que utilizan Macromedia HomeSite y Macromedia ColdFusion Studio, y en el que las ventanas de documentos se muestran de manera predeterminada con la vista Cdigo. Esta disposicin es la recomendada para usuarios de HomeSite o ColdFusion Studio y otras personas que escriban cdigo- manualmente que deseen contar con una disposicin del espacio de trabajo que les resulte familiar. Para elegir esta disposicin, seleccione la opcin Espacio de trabajo de Dreamweaver MX y luego elija la opcin HomeSite/Estilo de codificador.

Nota: Puede apilar los grupos de paneles a ambos lados del espacio de trabajo en cualquiera de las disposiciones de espacio de trabajo integrado.

Espacio de trabajo de Dreamweaver 4 es una disposicin de espacio de trabajo similar a la utilizada en Dreamweaver 4, con cada documento en una ventana flotante independiente. Los grupos de paneles estn apilados, pero no en una ventana de aplicacin de tamao superior que los contenga. Recomendado slo para los usuarios de Dreamweaver 4 que prefieran utilizar un espacio de trabajo que les resulte ms familiar.

44

Captulo 2

Para cambiar a un espacio de trabajo distinto del que ha elegido:

1 2 3 4

Elija Edicin > Preferencias. Seleccione la categora General en la lista Categora, si no est ya seleccionada. Haga clic en el botn Cambiar espacio de trabajo. Seleccione un espacio de trabajo y haga clic en Aceptar. Aparece un mensaje de alerta para indicarle que tras reiniciar Dreamweaver, aparecer la nueva disposicin.

5 6 7

Haga clic en Aceptar en el mensaje de aviso. Haga clic en Aceptar de nuevo para cerrar el cuadro de dilogo Preferencias. Salga de Dreamweaver y reincielo.

El espacio de trabajo Dreamweaver MX (slo para Windows) En el espacio de trabajo Dreamweaver MX en Windows, todas las ventanas y paneles estn integradas en una nica ventana de aplicaciones de mayor tamao.
Barra Insertar Barra de herramientas Documento Ventana de documento Ventana Bienvenido Grupos de paneles

Inspector de propiedades Selector de etiquetas

Panel Sitio

Exploracin del espacio de trabajo

45

El espacio de trabajo HomeSite/Estilo de codificador tiene los mismos elementos, pero con los grupos de paneles apilados en el lado izquierdo de la ventana principal, en lugar de en el lado derecho. En esta disposicin del espacio de trabajo, de forma predeterminada, el inspector de propiedades est contrado y la ventana de documento aparece en la vista Cdigo.
Grupos de paneles Panel Sitio Barra Insertar Barra de herramientas Documento

Selector de etiquetas

Inspector de propiedades (contrado)

Ventana de documento

Macintosh no admite el espacio de trabajo integrado. El espacio de trabajo en Macintosh se compone de las siguientes ventanas y paneles flotantes. Los usuarios de Windows pueden cambiar a este espacio de trabajo flotante mediante el cuadro de dilogo Preferencias; para obtener ms informacin, consulte Seleccin de una disposicin para el espacio de trabajo (slo Windows) en la pgina 44. Para ver una breve introduccin a ventanas y paneles, consulte Ventanas y paneles en la pgina 48. Para obtener ms informacin acerca de ventanas y paneles especficos, consulte Utilizacin de las ventanas y paneles en Dreamweaver en la pgina 49.

46

Captulo 2

La disposicin del espacio de trabajo flotante (Windows y Macintosh) En la disposicin de espacio de trabajo de Dreamweaver 4, cada documento aparece en una ventana diferente. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en sus propias ventanas.
Barra de herramientas Documento Barra Insertar Ventana de documento Panel Sitio Grupos de paneles

Selector de etiquetas

Inspector de propiedades

En el espacio de trabajo flotante, las ventanas se ajustan automticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamao. Esto facilita el desplazamiento y la organizacin de los distintos paneles flotantes y ventanas de Dreamweaver. Los usuarios de Windows pueden cambiar a un espacio de trabajo integrado en una nica ventana mediante el cuadro de dilogo Preferencias; para obtener ms informacin, consulte Utilizacin del espacio de trabajo de Dreamweaver en la pgina 43. Para ver una breve introduccin a ventanas y paneles, consulte Ventanas y paneles en la pgina 48. Para obtener ms informacin acerca de ventanas y paneles especficos, consulte Utilizacin de las ventanas y paneles en Dreamweaver en la pgina 49.

Exploracin del espacio de trabajo

47

Ventanas y paneles En esta seccin se describen brevemente algunos elementos que aparecen en las disposiciones del espacio de trabajo flotante y del espacio de trabajo integrado. Para obtener ms informacin acerca de ventanas y paneles especficos, consulte Utilizacin de las ventanas y paneles en Dreamweaver en la pgina 49.
La ventana Bienvenido

ofrece sugerencias para la configuracin del espacio de trabajo para distintos fines e informacin sobre nuevas funciones para aquellas personas que hayan utilizado versiones anteriores de Dreamweaver.

La barra Insertar contiene botones para la insercin de diversos tipos de objetos, como imgenes, tablas y capas, en un documento. Cada objeto es un fragmento de cdigo HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una imagen haciendo clic en el icono Imagen de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el men Insertar en lugar de la barra Insertar. La barra de herramientas de documento

contiene botones y mens emergentes que proporcionan diferentes vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un navegador. (que no aparece en la disposicin de espacio de trabajo predeterminada) contiene botones para las operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estndar, elija Ver> Barras de herramientas > Estndar. muestra el documento actual mientras lo est creando y editando. le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades. (No est ampliado de forma predeterminada en la disposicin de espacio de trabajo de estilo de codificador.)

La barra de herramientas Estndar

La ventana de documento

El inspector de propiedades

El selector de etiquetas,

que aparece en la barra de estado en la parte inferior de la ventana de documento, muestra la jerarqua de etiquetas que rodean a la seleccin actual en la vista Diseo. Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido. (No aparece en vista Cdigo, por lo que no est visible de forma predeterminada en disposiciones de espacio de trabajo de estilo de codificador.) Para obtener ms informacin, consulte Edicin de cdigo con el selector de etiquetas en la pgina 241.

Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado comn. Para ampliar un grupo de paneles, haga clic en la flecha de ampliacin situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrstrelo por los puntos situados en el borde izquierdo de la barra de ttulo del grupo. El panel Sitio le permite administrar los archivos y carpetas que forman el sitio. Para obtener ms informacin, consulte El panel Sitio en la pgina 84. Tambin ofrece una vista de todos los archivos del disco duro local, de manera semejante a como lo hace el Explorador de Windows (Windows) o el Finder (Macintosh). La barra del lanzador

(que no aparece en la disposicin de espacio de trabajo predeterminada) muestra botones en la barra de estado, para abrir y cerrar los paneles e inspectores que se utilizan con ms frecuencia. Para mostrar la barra del lanzador y especificar qu elementos debe incluir, consulte Configuracin de preferencias de Paneles en la pgina 60.

48

Captulo 2

Dreamweaver ofrece otros muchos paneles, inspectores y ventanas que no se muestran aqu, como el panel Historial y el Inspector de cdigo. La mayora de los paneles pueden apilarse en grupos. Para abrir paneles, inspectores y ventanas de Dreamweaver, utilice el men Ventana. Una marca de verificacin al lado de un elemento de este men indica que el elemento sealado se encuentra abierto, aunque puede estar oculto detrs de otras ventanas. Para ver un elemento que actualmente no est abierto, elija el nombre del elemento del men. Si no encuentra un panel, inspector o ventana que ha marcado como abierto, elija Ventana> Organizar paneles para disponer ordenadamente todos los paneles abiertos.

Utilizacin de las ventanas y paneles en Dreamweaver

En esta seccin se explica cmo utilizar distintas ventanas, barras de herramientas, paneles, inspectores y otros elementos del espacio de trabajo de Dreamweaver. Ventana de documento La ventana de documento muestra el documento actual. Puede elegir entre una de las operaciones siguientes:

Vista Diseo, un entorno de diseo para la disposicin 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. Puede configurar la vista diseo para que muestre el contenido dinmico mientras trabaja en el documento, (consulte Visualizacin de live data en la vista Diseo en la pgina 526).

Vista Cdigo, un entorno de codificacin manual que permite escribir y editar cdigo HTML,
JavaScript, de lenguaje de-servidor, como Microsoft Active Server Pages (ASP) o ColdFusion Markup Language, o cualquier otro tipo de cdigo. Para obtener ms informacin, consulte Captulo 13, Codificacin en Dreamweaver, en la pgina 209.

Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en una sola ventana.
Para pasar rpidamente de una vista a otra, presione Control+tilde (~) (Windows) o Comando+comilla simple () (Macintosh). 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, detrs del nombre del archivo, Dreamweaver incluye un asterisco. Cuando se maximiza la ventana de documento en la disposicin integrada 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. La barra de estado La barra de estado, situada en la parte inferior de la ventana de documento, proporciona informacin adicional sobre el documento que est creando.
Tamao del documento y tiempo de descarga estimado

Selector de etiquetas

Men emergente Tamao de ventana

Exploracin del espacio de trabajo

49

El selector de etiquetas muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido. Haga clic en <body> para seleccionar todo el cuerpo del documento. Para definir los atributos class o id para una etiqueta en el selector de etiquetas, haga clic con el botn de derecho del ratn (Windows) o mientras presiona la tecla Control (Macintosh) en la etiqueta y elija una clase o un ID del men contextual. El men emergente Tamao de ventana (que slo est visible cuando est activa la vista Diseo) permite cambiar el tamao de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. Consulte Cambio del tamao de la ventana de documento en la pgina 50. A la derecha del men emergente Tamao de ventana aparecen la estimacin del tamao del documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como imgenes y otros archivos multimedia. Consulte Definicin del tiempo de descarga y el tamao en la pgina 516. Para obtener informacin sobre la creacin de nuevos documentos (y la utilizacin de documentos basados en diseos predefinidos con Dreamweaver), consulte Captulo 5, Configuracin de un documento, en la pgina 123. Cambio del tamao de la ventana de documento La barra de estado muestra las dimensiones actuales de la ventana de documento (en pxeles). Para elegir un tamao de ventana que se ajuste a alguno de los tamaos habituales de monitor, haga clic en el tamao de la ventana y elija un valor del men emergente que aparece. Si no desea asignar un tamao tan preciso, utilice los mtodos estndar de su sistema operativo, como arrastrar el ngulo inferior derecho de una ventana. En el espacio de trabajo integrado (slo en Windows), se puede maximizar la ventana de documento de forma que ocupe completamente la zona del documento en la ventana integrada.
Nota: Cuando una ventana de documento est maximizada en el espacio de trabajo integrado, no puede cambiarse su tamao.

Cuando una ventana de documento est maximizada, aparecen fichas en la parte inferior de la ventana de documento con los nombres de archivo de todos los documentos abiertos. Para cambiar a un documento, haga clic en su ficha. Para disear una pgina cuyo mejor aspecto se logra con un tamao especfico, puede ajustar la ventana de documento con cualquiera de los tamaos predeterminados, editar dichos tamaos predeterminados o crear nuevos tamaos.

Nota: El tamao de la ventana indicado corresponde a las dimensiones internas de la ventana del navegador, sin bordes. El tamao del monitor figura entre parntesis. Por ejemplo, la opcin 536 x 196 (640 x 480, Predeterminado) es el tamao de ventana que se debe utilizar si los visitantes van a hacer uso de Microsoft Internet Explorer o Netscape Navigator en su configuracin predeterminada con un monitor de 640 x 480.

50

Captulo 2

Para establecer un tamao predeterminado para la ventana de documento:

Elija uno de los tamaos del men emergente situado en la parte inferior de la ventana de documento.
Para cambiar los valores que aparecen en el men emergente Tamao de ventana:

1 2

Elija Editar tamaos en el men emergente Tamao de ventana. Haga clic en cualquiera de los valores de ancho o alto de la lista de tamaos de ventana y escriba un valor nuevo. Para hacer que la ventana de documento se ajuste slo a un ancho especfico (sin modificar el alto), seleccione un valor de alto y elimnelo.

3 4

Haga clic en el cuadro de texto Descripcin para introducir texto descriptivo sobre un tamao especfico. Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento.

Para aadir un valor al men emergente Tamao de ventana:

1 2 3 4 5

Elija Editar tamaos en el men emergente Tamao de ventana. Haga clic en el espacio en blanco situado debajo del ltimo valor de la columna Ancho. Introduzca valores en Ancho y Alto. Para establecer slo el Ancho o el Alto, sencillamente deje un campo vaco. Haga clic en el campo Descripcin para introducir el texto descriptivo sobre el tamao agregado. Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento. Por ejemplo, puede escribir SVGA o PC estndar junto a la entrada para un monitor de 800 x 600 pxeles, y Mac 17 pulg. junto a la entrada correspondiente a un monitor de 832 x 624 pxeles. La mayora de los monitores se pueden ajustar a varias dimensiones de pxeles.

Para maximizar una ventana de documento (slo en espacios de trabajo integrados de Windows):

Haga clic en el botn Maximizar en la barra de ttulo de la ventana de documento. Configuracin de las preferencias de la barra de estado Para definir las preferencias de la barra de estado, elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Barra de estado de la lista Categora que aparece a la izquierda. (Para obtener ms informacin, consulte La barra de estado en la pgina 49.
Tamaos de ventana permite

personalizar los tamaos de las ventanas que aparecen en el men emergente de la barra de estado. Consulte Cambio del tamao de la ventana de documento en la pgina 50.

Velocidad de conexin determina la velocidad de conexin (en kilobits por segundo) empleada para calcular el tamao de descarga. El tamao de descarga de la pgina se muestra en la barra de estado. Cuando hay una imagen seleccionada en la ventana de documento, aparece su tamao de descarga en el inspector de propiedades.

Exploracin del espacio de trabajo

51

Utilizacin de la barra del lanzador La barra del lanzador aparece en la barra de estado y contiene botones para abrir y cerrar diversos paneles, inspectores y ventanas.

Para mostrar la barra del lanzador, active Mostrar iconos en paneles y lanzador, en las preferencias de Paneles. Puede especificar los elementos que van a aparecer en la barra del lanzador. Para obtener ms informacin, consulte Configuracin de preferencias de Paneles en la pgina 60. Utilizacin de la barra de herramientas Documento La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas del documento rpidamente: Cdigo, Diseo, una vista dividida que muestra las dos anteriores y la vista Live Data (consulte Visualizacin de live data en la vista Diseo en la pgina 526). La barra de herramientas contiene tambin algunos comandos y opciones relativos a la visualizacin del documento, su transferencia entre los sitios local y remoto, y la depuracin del cdigo JavaScript. Para ver u ocultar la barra de herramientas Documento, elija Ver > Barra de herramientas > Documento.
Mostrar vista de cdigo Mostrar vista de diseo Ttulo del documento Administracin de archivos Vista previa/Depurar en explorador Referencia

Vista Live Data Mostrar vistas de cdigo y diseo

Ver opciones Navegacin por el cdigo Actualizar vista de diseo

En la barra de herramientas Documento, aparecen las siguientes opciones:

Mostrar vista de cdigo

slo muestra la vista Cdigo en la ventana de documento.

Mostrar vistas de cdigo y diseo

muestra la vista Cdigo en una parte de la ventana de documento y la vista Diseo en la otra parte.

Cuando seleccione esta vista combinada, se encontrar disponible la opcin Vista de diseo encima del men Ver. Utilice esta opcin para especificar qu vista debe aparecer en la parte superior de la ventana de documento.

Mostrar vista de diseo

slo muestra la vista Diseo en la ventana de documento.

Tambin puede elegir una vista en el men Ver.

Ttulo permite introducir un ttulo para el documento, que aparecer en la barra de ttulo del navegador.

Si el documento ya tiene ttulo, ste aparecer en dicho campo.

52

Administracin de archivos

muestra el men emergente Administracin de archivos.

Captulo 2

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

Para agregar o cambiar los navegadores enumerados en el men, elija Editar lista de navegadores.

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.

Referencia

muestra el panel Referencia.

El panel Referencia contiene informacin de referencia sobre HTML, CSS, JavaScript, CFML, ASP y JSP. Para obtener ms informacin, consulte Acceso a referencias de lenguaje en la pgina 221.

Navegacin por el cdigo

le permite desplazarse por el cdigo JavaScript. Para obtener ms informacin, consulte Utilizacin del depurador JavaScript en la pgina 229.

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.

Para obtener ms informacin sobre las opciones de la vista Cdigo, consulte Configuracin de las preferencias de visualizacin en la pgina 194. Las opciones de la vista Diseo permiten ocultar todas las ayudas visuales (como los bordes de tablas, capas y marcos) en una sola accin, cada una de ellas de forma independiente. Estas opciones permiten tambin ver el contenido de Head y las guas visuales. Para obtener ms informacin sobre estas opciones, que pueden encontrarse tambin en el men Ver, consulte Seleccin de elementos en la ventana de documento en la pgina 132, Visualizacin y edicin del contenido de la seccin head en la pgina 135 y Utilizacin de guas visuales en el proceso de diseo en la pgina 133. Cuando estn visibles las vistas Cdigo y Diseo, en el men aparecen los dos grupos de opciones. Utilizacin de la barra de herramientas Estndar La barra de herramientas Estndar contiene botones para las operaciones ms habituales de los mens Archivo y Edicin. Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se utilizan del mismo modo que los comandos de men equivalentes. Para obtener ms informacin sobre operaciones como Abrir y Guardar, consulte Captulo 5, Configuracin de un documento, en la pgina 123. Para mostrar la barra de herramientas Estndar, elija Ver > Barras de herramientas > Estndar. Utilizacin de mens contextuales Dreamweaver emplea de forma extensiva los mens contextuales, que proporcionan acceso rpido a los comandos y a las propiedades ms tiles relacionados con la ventana o el objeto con el que est trabajando. En los mens contextuales slo aparecen los comandos pertinentes para la seleccin actual.

Exploracin del espacio de trabajo

53

Para utilizar un men contextual:

Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla Control (Macintosh) en el objeto o ventana. Aparecer el men contextual para el objeto o la ventana seleccionados. Elija un comando en el men contextual.

Utilizacin de la barra Insertar La barra Insertar contiene botones para la creacin e insercin de diversos tipos de objetos, como tablas, capas e imgenes. Los botones estn organizados en fichas.
Para mostrar u ocultar la barra Insertar:

Elija Ventana > Insertar.

Para ampliar o contraer la barra Insertar:

Haga clic en la flecha de ampliacin, que aparece en el ngulo izquierdo de la barra de ttulo de la barra Insertar.
Para cambiar la orientacin de la barra Insertar, realice una de las siguientes acciones (slo en Macintosh):

Para cambiar la barra Insertar de posicin horizontal a vertical, haga clic en el icono de
orientacin vertical situado cerca del extremo superior derecho.

Para cambiar la barra Insertar de posicin vertical a horizontal, haga clic en el icono de
orientacin horizontal situado cerca del extremo inferior derecho.
Para mostrar los botones de una ficha determinada, lleve a cabo una de las siguientes operaciones:

Si la barra Insertar est en posicin horizontal con fichas, haga clic en una ficha. Si la barra Insertar est en posicin vertical (slo Macintosh), haga clic en el nombre de
categora en la parte superior de la barra y elija una categora en el men emergente que aparece.

54

Captulo 2

Para insertar un objeto:

1 2

Seleccione la ficha adecuada en la barra Insertar. Haga clic en un botn de objeto o arrastre el icono correspondiente hasta la ventana de documento. Dependiendo del objeto que se trate, aparecer un cuadro de dilogo de insercin de objeto, que solicitar que se busque un archivo o se especifiquen los parmetros del objeto.

Para omitir el cuadro de dilogo de insercin de objetos e insertar un objeto marcador de posicin vaco:

Haga clic con mientras presiona la tecla Control (Windows) u Opcin (Macintosh) en el botn del objeto. Por ejemplo, para insertar un marcador de posicin para una imagen sin especificar un archivo de imagen, haga clic en el botn Imagen mientras presiona la tecla Control u Opcin.
Nota: Este procedimiento no permite omitir todos los cuadros de dilogo de insercin de objetos. Muchos objetos, incluidas barras de navegacin, capas, botones Flash y conjuntos de marcos, no permiten insertar marcadores de posicin ni objetos con valores predeterminados.

La barra Insertar contiene varias fichas: Comn, Disposicin, Texto, Tablas, Marcos, Formularios, Plantillas, Caracteres, Media, Head, Script, y Aplicacin. Si el documento contiene cdigo de servidor, como los documentos ASP o CFML, aparecen tambin otras fichas.

La ficha Aplicacin permite insertar elementos como juegos de registros, regiones repetidas y
grabar formularios de insercin y actualizacin. Para obtener ms informacin sobre el contenido dinmico, consulte Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571.

El panel Caracteres contiene caracteres especiales, como los smbolos de copyright, de comillas
curvas y de marca registrada. Observe que es posible que algunos de estos smbolos no se muestren correctamente en las versiones 3.0 y anteriores de los navegadores Internet Explorer y Netscape Navigator.

La ficha Comn contiene botones para la creacin e insercin de los objetos ms utilizados,
como imgenes, tablas y capas.

La ficha Formularios contiene botones que permiten crear formularios e insertar elementos
de formulario.

La ficha Marcos contiene disposiciones de conjuntos de marcos que se utilizan normalmente. La ficha Head contiene botones que permiten aadir diversos elementos de la seccin head,
como etiquetas meta y base.

La ficha Disposicin permite insertar tablas y capas, y elegir entre dos vistas de tablas: Estndar
(predeterminada) y Disposicin. Si se selecciona la vista Disposicin, se pueden utilizar las herramientas de disposicin de Dreamweaver: Dibujar celda de disposicin y Dibujar tabla de disposicin. Para obtener ms informacin, consulte Captulo 17, Establecimiento de la disposicin de pginas en la vista Disposicin, en la pgina 265.

Exploracin del espacio de trabajo

55

 La ficha Media contiene botones para insertar objetos multimedia interactivos o animados,
como botones y texto Flash, applets Java y objetos ActiveX. Para obtener ms informacin, consulte Captulo 22, Insercin de medios, en la pgina 351.

La ficha Script permite insertar una seccin script, noscript o server-side include. La ficha Tablas permite insertar una tabla completa o una etiqueta de tabla determinada (como
tr, th,

o td).

La ficha Plantillas permite insertar regiones editables, opcionales y repetidas en archivos de

plantillas. Para obtener ms informacin, consulte Plantillas de Dreamweaver en la pgina 481.

La ficha Texto permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1
y ul.
Nota: Aunque algunos botones de la ficha Texto tienen un aspecto similar al de algunos botones del inspector de propiedades, su funcin es distinta. Los botones de la ficha Texto simplemente insertan cdigo y no reflejan el estado actual de la seleccin; si se trata de texto en negrita, el botn de negrita en el inspector de propiedades aparecer seleccionado, mientras que el mismo botn en la ficha Texto no.

Las fichas de cdigo de servidor, que slo estn disponibles para las pginas que emplean un
lenguaje de servidor determinado, incluyen ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP Cada una de estas fichas contienen objetos de cdigo de servidor que . pueden insertarse en la vista Cdigo. Para obtener informacin sobre los objetos de cada ficha, consulte los temas relacionados en la Ayuda de Dreamweaver. Si no se puede ver todos los objetos de una ficha simultneamente, aparece una pequea flecha en el extremo inferior izquierdo de la barra Insertar; para ver el resto de los objetos de la ficha, haga clic en esta flecha. Al hacer clic en un botn de objeto, Dreamweaver inserta cdigo en el documento. En algunos casos, el cdigo se inserta inmediatamente; en otros, aparece un editor de etiquetas (consulte Edicin de etiquetas utilizando editores de etiquetas en la pgina 214) u otro cuadro de dilogo, que permite especificar otra informacin antes de insertar el cdigo. Para algunos objetos, no aparece ningn cuadro de dilogo si se inserta el objeto en vista Diseo, pero aparece un editor de etiquetas si se utiliza la vista Cdigo. Con algunos objetos, al insertar el objeto en vista Diseo, Dreamweaver cambia a la vista Cdigo antes de insertar el objeto. Algunos objetos, como puntos de fijacin con nombre, no aparecen cuando se abre la pgina en la ventana de un navegador. Para ver los iconos en vista Diseo que marca la ubicacin de esos objetos invisibles, elija Ver > Ayudas visuales > Elementos invisibles. Para seleccionar los objetos invisibles en la vista Diseo, haga clic en sus iconos. Para obtener ms informacin, consulte Elementos invisibles en la pgina 133. Algunas de las preferencias generales afectan a la barra Insertar. Para modificar estas preferencias, elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Sitio en la lista de categoras en la parte izquierda.

Cuando inserte objetos tales como imgenes, tablas, scripts y elementos head, aparecer un
cuadro de dilogo en el que se le solicitar informacin adicional. Puede suprimir estos cuadros de dilogo desactivando la opcin Mostrar dilogo al insertar objetos o manteniendo presionada la tecla Control (Windows) o la tecla Opcin (Macintosh) mientras crea el objeto. Cuando se inserta un objeto con esta opcin desactivada, el objeto recibe valores de atributo predeterminados. Despus de insertar el objeto, utilice el inspector de propiedades para cambiar sus propiedades.

56

Captulo 2

 La Barra Insertar permite ver el contenido de la barra Insertar, como iconos y texto, slo iconos
o slo texto. Se puede modificar cualquier objeto de la barra Insertar o crear objetos nuevos; consulte Personalizacin de Dreamweaver en Macromedia Support Center en la direccin http://www.macromedia.com/go/customizing_dreamweaver. Utilizacin del inspector de propiedades El inspector de propiedades permite examinar y editar las propiedades del elemento de pgina seleccionado actualmente, como texto o un objeto insertado. Puede seleccionar elementos de pgina en la vista Diseo o en la vista Cdigo. Para mostrar u ocultar el inspector de propiedades, elija Ventana > Propiedades.

La mayora de los cambios realizados en las propiedades se aplicarn de inmediato en la ventana de documento. Sin embargo, para algunas propiedades, los cambios no se aplican hasta que se hace clic fuera de los campos de texto de edicin de la propiedad, y se presiona Intro (Windows) o Tab (Macintosh) para cambiar a otra propiedad. El contenido del inspector de propiedades vara dependiendo del elemento seleccionado. Para obtener ms informacin sobre propiedades especficas, seleccione un elemento en la ventana de documento y, a continuacin, haga clic en el icono de ayuda en el extremo superior derecho del inspector de propiedades. El inspector de propiedades muestra inicialmente la mayora de las propiedades del elemento seleccionado. Haga clic en la flecha de ampliacin del extremo inferior derecho del inspector de propiedades para contraer el inspector de propiedades y mostrar nicamente las propiedades utilizadas con mayor frecuencia.
Sugerencia: En algunos casos, determinadas propiedades ocultas pueden no aparecer incluso en el inspector de propiedades ampliado; en estos casos, utilice la vista Cdigo o el inspector de cdigo para codificar manualmente dichas propiedades o seleccione la vista Cdigo y elija Modificar > Editar etiqueta.

Administracin de paneles y grupos de paneles En Dreamweaver, los paneles se organizan en grupos. Cada grupo de paneles puede ampliarse o contraerse y acoplarse o desacoplarse con otros grupos de paneles. Los grupos de paneles tambin se pueden acoplar a la ventana de aplicacin integrada (slo para el espacio de trabajo integrado de Windows). Esto facilita el acceso a los paneles sin saturar el espacio de trabajo. Los paneles aparecen como fichas dentro del grupo.
Nota: Cuando un grupo de paneles est flotando (desacoplado), aparece un barra vaca estrecha en la parte superior del mismo. En esta documentacin, el trmino, barra de ttulo del grupo de paneles hace referencia al rea en la que aparece el nombre del grupo de paneles y no a esta barra vaca estrecha.

Exploracin del espacio de trabajo

57

Para ampliar o contraer un grupo de paneles, lleve a cabo una de las siguientes operaciones:

Haga clic en la flecha de ampliacin, que aparece en el lado izquierdo de la barra de ttulo del
grupo de paneles.

Haga clic en el ttulo del grupo de paneles.

Para seleccionar un panel de un grupo de paneles ampliado:

Haga clic en la ficha del panel.

Para desacoplar un grupo de paneles:

Arrstrelo por los puntos de sujecin (situados en el borde izquierdo de la barra de ttulo del grupo) hasta que el contorno indique que ya no est acoplado.
Para acoplar un grupo de paneles a otro grupo de paneles (espacio de trabajo flotante) o a la ventana integrada (slo en Windows):

Arrstrelo por los puntos hasta que su contorno indique que est acoplado.

La mayora de los paneles slo pueden acoplarse a la derecha o a la izquierda del rea de la ventana de documento del espacio de trabajo integrado, mientras que otros (como el inspector de propiedades y la barra Insertar), slo pueden acoplarse a la parte superior o inferior de la ventana integrada.
Para arrastrar un grupo de paneles flotante (desacoplado) sin acoplarlo:

Arrastre el grupo de paneles por la barra situada encima de su barra de ttulo. El grupo de paneles no se acopla mientras no se arrastre por sus puntos de sujecin.

Para ver un men Opciones del grupo de paneles:

Ample el grupo de paneles haciendo clic en su flecha de ampliacin. El men Opciones slo est visible cuando el grupo de paneles est ampliado.
Sugerencia: Algunas opciones estn disponibles en el men contextual del grupo de paneles incluso si el grupo est ampliado; haga-clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) en la barra de ttulo del grupo de paneles para ver el men contextual.

58

Captulo 2

Para cambiar el nombre de un grupo de paneles:

Elija Cambiar nombre de grupo de paneles en el men Opciones situado en el lado derecho de la barra de ttulo del grupo de paneles.

Introduzca un nuevo nombre y haga clic en Aceptar.

Para desacoplar un panel de un grupo:

Arrstrelo por su ficha hasta que su contorno indique que no est acoplado. El panel aparece en un nuevo grupo de paneles propio.
Para acoplar un panel de un grupo:

Arrstrelo por su ficha hasta que su contorno indique que est acoplado.
Para maximizar un grupo de paneles, lleve a cabo una de estas operaciones:

Elija Maximizar grupo de paneles en el men Opciones de la barra de ttulo del grupo de
paneles.

Haga doble clic en cualquier lugar de la barra de ttulo del grupo de paneles.
El grupo de paneles crece verticalmente hasta ocupar todo el espacio vertical disponible.
Para cerrar un grupo de paneles, de manera que desaparezca completamente:

Elija Cerrar grupo de paneles en el men Opciones de la barra de ttulo del grupo de paneles. El grupo de paneles desaparece de la pantalla.
Para abrir un grupo de paneles que no se vea en la pantalla:

Elija el nombre de un panel en el men Ventana.

Para modificar el tamao el conjunto completo de grupos de paneles (slo en espacio de trabajo flotante):

Arrastre el conjunto de grupos de paneles para ajustar su tamao de la misma manera que lo hara con una ventana del sistema operativo. Por ejemplo, puede arrastrar el rea de ajuste de tamao del extremo inferior derecho del conjunto de grupos de paneles.

Exploracin del espacio de trabajo

59

Configuracin de preferencias de Paneles Utilice las preferencias de Paneles para especificar qu paneles e inspectores aparecern siempre sobre la ventana de documento y cules podrn quedar ocultos por dicha ventana. Tambin puede utilizar las preferencias de Paneles para especificar qu iconos aparecern en las fichas para los paneles, si aparecer la barra lanzadora y qu paneles e inspectores aparecern en dicha barra. Para definir las preferencias para los paneles, elija Edicin > Preferencias y seleccione Paneles en la lista Categora, situada a la izquierda. A continuacin, seleccione cualquiera de las opciones siguientes:
Siempre visible permite especificar qu paneles estarn siempre visibles en la ventana de documento. De forma predeterminada, todos los paneles, inspectores y otros como las ventanas, flotan siempre sobre la ventana de documento. Si desactiva un elemento de la lista, podr situar entonces la ventana de documento sobre ese elemento.

Por ejemplo, para que la ventana de documento oculte el inspector de propiedades, desactive la opcin Propiedades. Ahora el inspector de propiedades slo aparecer sobre la ventana de documento cuando se encuentre activo. Para que la ventana de documento oculte cualquiera de los paneles flotantes agregados al personalizar Dreamweaver, desactive el resto de paneles.
Nota: La opcin Siempre visible no se aplica en el espacio de trabajo integrado cuando todos los paneles estn acoplados.

Mostrar iconos en paneles y lanzador

permite determinar si aparecer la barra del lanzador. Cuando se selecciona esta opcin, la barra del lanzador aparece en el rea de la barra de estado y un icono pequeo aparece en la ficha de cada panel. (Consulte La barra de estado en la pgina 49.) Los botones de la barra del lanzador permiten abrir paneles e inspectores. permite especificar qu elementos aparecen en la barra del lanzador.

Mostrar en lanzador

Para especificar los elementos que van a aparecer en la barra del lanzador:

1 2 3

Para aadir un elemento a la barra del lanzador, haga clic en el botn con el signo ms (+). Para quitar un elemento de la barra del lanzador, resalte el elemento y haga clic en el botn con el signo menos (-). Para cambiar el orden de los elementos del lanzador, seleccione un elemento en la lista y haga clic en un botn de flecha. Por ejemplo, para mover un elemento hacia la derecha en la barra del lanzador, mueva el elemento hacia abajo en la lista.

Haga clic en Aceptar. La barra del lanzador cambiar para mostrar los elementos que haya especificado.

Panel Sitio El panel Sitio permite definir un sitio, administrar archivos locales del sitio, cargar y descargar archivos de un sitio remoto y examinar los archivos del disco local fuera del sitio. Para ms informacin sobre el uso del panel Sitio, consulte Captulo 4, Administracin del sitio, en la pgina 83.

60

Captulo 2

Panel Historial El panel Historial muestra una lista de todos los pasos dados en el documento activo desde que ste se cre o se abri, hasta un determinado nmero mximo de pasos. (El panel Historial no muestra los pasos dados en otros marcos, en otras ventanas de documento o en el panel Sitio.) Permite deshacer uno o varios pasos, as como repetir pasos y crear nuevos comandos para automatizar tareas repetitivas.

Pasos

Control deslizante

Botn Reproducir

Botn Guardar como comando Botn Copiar pasos

El control deslizante, o el pulgar, del panel Historial seala inicialmente el ltimo paso realizado. Utilizacin del panel Historial El panel Historial realiza un seguimiento de todos sus pasos de trabajo en Dreamweaver. Puede utilizar el panel Historial para deshacer varios pasos a la vez. Si desea deshacer la ltima operacin realizada en un documento, elija Edicin > Deshacer como en cualquier otra aplicacin. (El nombre del comando Deshacer cambiar en el men Edicin para reflejar la ltima operacin realizada.) El panel Historial tambin permite volver a reproducir pasos ya realizados y automatizar tareas mediante la creacin de nuevos comandos. Para obtener ms informacin, consulte Automatizacin de tareas en la pgina 136.
Para abrir el panel Historial:

Elija Ventana > Otros> Historial.

Para deshacer el ltimo paso:

Arrastre el control deslizante del panel Historial hasta el paso superior en la lista. Esta operacin tiene el mismo efecto que elegir Edicin > Deshacer. El paso deshecho adopta el color gris.
Para deshacer varios pasos al mismo tiempo, lleve a cabo una de estas operaciones:

Arrastre el control deslizante para sealar cualquier paso. Haga clic a la izquierda de un paso de la ruta del control deslizante; el control deslizante se
desplazar automticamente hasta dicho paso y deshar pasos conforme se desplace.

Exploracin del espacio de trabajo

61

Nota: Para desplazarse automticamente a un determinado paso, deber hacer clic a la izquierda del paso; si hace clic en el paso mismo, se seleccionar el paso. Seleccionar un paso no es lo mismo que volver a ese paso en el historial de deshacer.

Como ocurre al deshacer un solo paso, si deshace una serie de pasos y, a continuacin, realiza una nueva operacin en el documento, no podr rehacer los pasos deshechos, pues habrn desaparecido del panel Historial.
Para definir el nmero de pasos que el panel Historial mantiene y muestra:

1 2

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione General de la lista Categora. Introduzca un nmero para Nmero mximo de pasos de historial. El valor predeterminado suele ser vlido para la mayora de las necesidades de los usuarios. Cuanto mayor sea el nmero, ms memoria necesitar el panel Historial. Esto puede afectar al rendimiento y reducir considerablemente la velocidad de funcionamiento del equipo. Cuando el panel Historial alcanza el nmero mximo de pasos, los pasos ms antiguos se borran.

Nota: No se puede modificar el orden de los pasos en el panel Historial. El panel Historial no es un conjunto arbitrario de comandos, sino una forma de ver los pasos en el orden en que se han dado.

Para borrar la lista de historial para el documento actual:

En el men contextual del panel Historial, elija Borrar historial. Este comando tambin borra toda la informacin de deshacer del documento actual. Despus de elegir Borrar historial, no podr deshacer los pasos borrados. (La opcin Borrar historial no deshace los pasos dados, sino que simplemente quita el registro de esos pasos de la memoria de Dreamweaver.) Panel Respuestas El panel Respuestas proporciona acceso rpido a la informacin que hace su trabajo con Dreamweaver ms eficaz. Incluye tutoriales, notas tcnicas, extensiones de Dreamweaver y otros datos de inters. Para obtener informacin actualizada sobre Dreamweaver de macromedia.com, haga clic en el botn Actualizar.

Utilizacin de Dreamweaver con otras aplicaciones

Dreamweaver facilita el proceso de diseo y desarrollo de pginas Web al permitirle trabajar con otras aplicaciones. Para obtener informacin sobre cmo trabajar con otras aplicaciones, como los navegadores, los editores HTML, los editores de imgenes y las herramientas de animacin, consulte los temas siguientes:

Para obtener informacin sobre el uso de Dreamweaver con otros editores HTML, como
HomeSite o BBEdit, consulte Utilizacin de un editor de HTML externo con Dreamweaver en la pgina 206.

Puede especificar sus navegadores preferidos para previsualizar el sitio. Consulte Vista previa
de pginas en navegadores en la pgina 512.

Puede lanzar un editor de imgenes externo, como Macromedia Fireworks, desde

Dreamweaver. Consulte Utilizacin de un editor de imgenes externo en la pgina 331.

62

Captulo 2

 Puede configurar Dreamweaver para que inicie un editor distinto para cada tipo de archivo.
Consulte Inicio de un editor externo de archivos multimedia en la pgina 352.

Para obtener informacin acerca de cmo aadir interactividad al sitio mediante pelculas
Macromedia Flash, consulte Contenido de Flash en la pgina 354.

Para aprender a aadir animacin al sitio mediante pelculas Macromedia Shockwave, consulte
Insercin de pelculas Shockwave en la pgina 359.

Para ms informacin sobre el uso de ColdFusion, consulte Captulo 6, Configuracin de una

aplicacin Web, en la pgina 145.

Personalizacin de Dreamweaver: aspectos bsicos

Existen algunas tcnicas bsicas que permiten personalizar Dreamweaver para que se ajuste a sus necesidades sin necesidad de conocer cdigo complejo o editar archivos de texto. Por ejemplo, se pueden definir preferencias, crear mtodos abreviados de teclado propios y aadir extensiones a Dreamweaver. Para obtener informacin sobre la personalizacin manual de los archivos de configuracin, consulte Customizing Dreamweaver en Macromedia Support Center, en la direccin http://www.macromedia.com/go/customizing_dreamweaver. Configuracin de preferencias Dreamweaver incluye parmetros de definicin de preferencias que determinan la apariencia y comportamiento general su interfaz de usuario, as como las opciones relacionadas con funciones concretas, como capas, hojas de estilos, visualizacin de cdigo HTML y JavaScript, editores externos y previsualizacin de pginas en navegadores. A lo largo de este manual se facilita informacin sobre opciones de preferencias especficas, junto con la funcin o el tema asociados. En este manual slo se describen las opciones de preferencias ms comunes. Consulte el tema correspondiente en la Ayuda de Dreamweaver para obtener informacin sobre opciones de preferencias que no se aborden aqu. Configuracin de preferencias generales Las preferencias generales controlan la apariencia global de Dreamweaver. Para cambiar estas preferencias, elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y, a continuacin, haga clic en General. Las preferencias generales se dividen en dos subcategoras: Opciones de documento y opciones de edicin. Para obtener informacin detallada sobre estas preferencias, consulte la Ayuda de Dreamweaver. especifica que Dreamweaver debe aplicar la etiqueta cuando realice una accin que aplicara normalmente la etiqueta b, y que debe aplicar la etiqueta em cuando realiza una accin que aplicara normalmente la etiqueta i. Estas acciones incluyen hacer clic en los botones Negrita o Cursiva en el inspector de propiedades de texto y elegir Texto > Estilo > Negrita o Texto > Estilo > Cursiva. Para utilizar las etiquetas b y i en sus documentos, desactive esta opcin.
Utilicee <strong> y <em> en lugar de <b> y <i>

strong

Nota: El World Wide Web Consortium desaconseja el uso de las etiquetas b y i; las etiquetas strong y em proporcionan ms informacin semntica que las etiquetas b y i.

Exploracin del espacio de trabajo

63

Configuracin de preferencias de fuentes Utilice la preferencias de fuente para definir las fuentes que Dreamweaver usa para mostrar cada codificacin de fuente. Una codificacin de documento determina la manera en que se va a mostrar el documento en un navegador. Las configuraciones de fuente de Dreamweaver permiten ver una codificacin determinada con la fuente y tamao que se prefieran sin alterar el aspecto externo del documento. Para obtener ms informacin sobre la configuracin de codificaciones predeterminadas para nuevos documentos, consulte Configuracin de un documento en la pgina 123.
Para definir las fuentes que desea utilizar en Dreamweaver para cada tipo de codificacin:

1 2

Elija Edicin > Preferencias y haga clic en Fuentes en la lista Categora. Seleccione el tipo de codificacin (por ejemplo, Occidental (Latin1) o Japons) en la lista Configuracin de fuentes y, a continuacin, elija las fuentes que desea utilizar en Dreamweaver para esa codificacin en los mens emergentes situados debajo de la lista Configuracin de fuentes.
Nota: Las fuentes que elija no afectan al aspecto que el documento tendr cuando se muestre en un navegador.

Para obtener ms informacin sobre preferencias de Fuentes, consulte la Ayuda de Dreamweaver. Utilizacin del editor de mtodos abreviados de teclado Utilice el editor de mtodos abreviados de teclado para crear sus propias teclas de mtodo abreviado, editar mtodos abreviados existentes o utilizar conjuntos de mtodos abreviados predefinidos.
Nota: En el sitio Web de Macromedia en http://www.macromedia.com/go/dreamweaver_mx_shortcuts encontrar grficos que describen los mtodos abreviados del teclado en la configuracin predeterminada de Dreamweaver.

64

Captulo 2

Para editar los mtodos abreviados de teclado:

Elija Edicin > Mtodos abreviados de teclado. Aparece el cuadro de dilogo Mtodos abreviados de teclado.
Botn Juego repetido Botn Eliminar el juego Botn Exportar conjunto como HTML Botn Cambiar el nombre del juego

Configure las opciones siguientes:

Conjunto actual permite

elegir un conjunto de mtodos abreviados predeterminados que se incluye en Dreamweaver o cualquiera de los mtodos personalizados que haya definido. Los conjuntos predeterminados se encuentran en la parte superior del men. Por ejemplo, si conoce los mtodos abreviados de HomeSite o BBEdit, puede utilizarlos eligiendo el conjunto predeterminado correspondiente.

Comandos permite seleccionar una categora de comandos para su edicin. Por ejemplo, puede editar comandos de men, como el comando Abrir, o comandos de edicin de cdigo, como Equilibrar llaves. La lista de comandos muestra los comandos asociados a la categora que ha seleccionado del men emergente Comandos junto con los mtodos abreviados asignados. La categora Comandos de men muestra esta lista en forma de vista de rbol, en una estructura similar a la de los mens. Las dems categoras muestran los comandos por nombre (como Salir de la aplicacin), en una lista plana. Mtodos abreviados

muestra todos los mtodos abreviados asignados al comando

seleccionado.

Exploracin del espacio de trabajo

65

Aadir elemento (+) aade un nuevo mtodo abreviado al comando actual. Haga clic en este botn para aadir una nueva lnea vaca al cuadro de texto Mtodos abreviados. Introduzca una nueva combinacin de teclas y haga clic en Cambiar para aadir un nuevo mtodo abreviado de teclado para este comando. Puede asignar dos mtodos abreviados de teclado distintos para cada comando; si ya hay dos mtodos asignados a un comando, el botn Aadir elemento (+) deja de funcionar. Eliminar elemento (-) Pulse tecla

borra el mtodo abreviado seleccionado de la lista de mtodos abreviados.

muestra la combinacin de teclas introducida al aadir o eliminar un mtodo

abreviado.
Cambiar

aade a la lista de mtodos abreviados la combinacin de teclas que aparece en el cuadro de texto Pulse tecla, o bien elimina la combinacin para un mtodo especfico. duplica el juego actual. Asigne un nombre al nuevo juego; el nombre predeterminado ser el nombre del conjunto actual con la palabra copia. cambiar el nombre del juego actual.

Juego repetido

Cambiar el nombre del juego

Exportar conjunto como HTML guarda el conjunto actual en un formato de tabla HTML que le permitir verlo e imprimirlo fcilmente. Puede abrir el archivo HTML en su navegador e imprimir los mtodos abreviados para consultarlos ms fcilmente. Eliminar el juego

elimina el juego. (No puede eliminar el juego activo).

Para eliminar un mtodo abreviado de un comando:

En el men emergente Comandos, seleccione una categora. La lista de comandos muestra los comandos de la categora elegida. Elija un comando de la lista. Los mtodos abreviados asignados al comando aparecen en el cuadro de texto Mtodos abreviados.

3 4

Seleccione un mtodo abreviado. Haga clic en el botn Eliminar elemento (-).

Para aadir un mtodo abreviado a un comando:

En el men emergente Comandos, seleccione una categora. La lista de comandos muestra los comandos de la categora elegida. Elija un comando de la lista. Los mtodos abreviados asignados al comando aparecen en el cuadro de texto Mtodos abreviados.

Para aadir un mtodo abreviado, realice una de las siguientes operaciones: elemento (+). Aparece una nueva lnea en vaca en el cuadro de texto Mtodos abreviados y el cursor se desplaza al cuadro de dilogo Pulse tecla.

Si hay menos de dos mtodos abreviados asignados al comando, haga clic en el botn Aadir Si ya hay dos mtodos abreviados asignados al comando, seleccione uno de ellos. (Se sustituir
ese mtodo por el nuevo.) A continuacin, haga clic en el cuadro de texto Pulse tecla.

66

Captulo 2

Presione una combinacin de teclas. La combinacin aparece en el cuadro Pulse tecla.

Nota: Si hay un problema con la combinacin de teclas (por ejemplo, si ya est asignada a otro comando), aparecer un mensaje explicativo justo debajo del campo Pulse tecla y no podr aadir ni editar el mtodo abreviado.

Haga clic en Cambiar. La nueva combinacin de teclas se asignar al comando.

Para editar un mtodo abreviado existente:

En el men emergente Comandos, seleccione una categora. La lista de comandos muestra los comandos de la categora elegida. Elija un comando de la lista. Los mtodos abreviados asignados al comando aparecen en el cuadro de texto Mtodos abreviados.

3 4 5

Seleccione el mtodo abreviado que desea cambiar. Haga clic en el cuadro de texto Pulse tecla e introduzca una nueva combinacin de teclas. Haga clic en el botn Cambiar para cambiar el mtodo abreviado.
Nota: Si hay un problema con la combinacin de teclas (por ejemplo, si ya est asignada a otro comando), aparecer un mensaje explicativo justo debajo del campo Pulse tecla y no podr aadir ni editar el mtodo abreviado.

Adicin de extensiones a Dreamweaver Las extensiones son funciones nuevas que se pueden aadir fcilmente a Dreamweaver. Se pueden utilizar muchos tipos de extensiones; por ejemplo, hay extensiones que permiten cambiar el formato de las tablas, conectar con bases de datos back-end o que ayudan a escribir scripts para navegadores.
Nota: Para instalar extensiones que puedan utilizar todos los usuarios en un sistema operativo multiusuario, debe conectarse como Administrador (Windows) o raz (Mac OS X). Para obtener ms informacin sobre sistemas multiusuario, consulte Personalizacin de Dreamweaver en sistemas multiusuario en la pgina 68.

Para localizar las extensiones ms recientes para Dreamweaver, utilice el sitio Web Macromedia Exchange en http://www.macromedia.com/es/exchange/dreamweaver/. Una vez all, podr conectar y descargar extensiones (muchas de ellas gratuitas), incorporarse a grupos de debate, ver calificaciones y comentarios de los usuarios e instalar y utilizar Extension Manager. Debe instalar Extension Manager para poder instalar extensiones. Extension Manager es una aplicacin independiente que permite instalar y administrar extensiones en aplicaciones de Macromedia. Inicie Extension Manager desde Dreamweaver; para ello elija Comandos > Administrar extensiones.

Exploracin del espacio de trabajo

67

Para instalar y administrar extensiones:

En el sitio Web de Macromedia Exchange, haga clic en el vnculo de descarga de una extensin. Puede optar por abrirla e instalarla directamente desde el sitio o por guardarla en disco.

Si abre la extensin directamente desde el sitio, Extension Manager controla la instalacin de

forma automtica.

Si guarda la extensin en el disco, un lugar adecuado para guardar el archivo de paquete de

extensin (.mxp) es la carpeta Downloaded Extensions dentro de la carpeta de la aplicacin Dreamweaver en su equipo.
2

Haga doble clic en el archivo de paquete de extensin o abra Extension Manager y elija Archivo > Instalar extensin. La extensin ya est instalada en Dreamweaver. Algunas extensiones no se encuentran accesibles hasta despus de reiniciar Dreamweaver; es posible que se le pida que salga de la aplicacin y vuelva a iniciarla.

Utilice Extension Manager para eliminar extensiones o para consultar ms informacin sobre la extensin. Personalizacin de Dreamweaver en sistemas multiusuario Puede personalizar Dreamweaver para que se ajuste a sus necesidades incluso en un sistema operativo multiusuario como Windows NT, Windows 2000, Windows XP o Mac OS X. Dreamweaver impide que una configuracin personalizada de usuario afecte a otra. Para lograr este objetivo, la primera vez que ejecute Dreamweaver en uno de los sistemas operativos multiusuario que reconoce, la aplicacin crear para usted copias de diversos archivos de configuracin. Estos archivos de configuracin se almacenan en una carpeta de su propiedad. Por ejemplo, en Windows XP se almacenan en C:\Documents and Settings\nombredeusuario\Datos de programa\Macromedia\Dreamweaver MX\Configuration (que puede que se encuentre en una carpeta oculta) y en Mac OS X se instalan en el directorio principal; concretamente, Users/nombredeusuario/Library/Application Support/Macromedia/Dreamweaver MX/Configuration.
Nota: En sistemas operativos ms antiguos (Windows 98, Windows ME y Mac OS 9.x), todos los usuarios comparten un mismo conjunto de archivos de configuracin de Dreamweaver aunque el sistema operativo est configurado para mltiples usuarios.

Si reinstala o actualiza Dreamweaver, Dreamweaver crear automticamente copias de seguridad de los archivos de configuracin de usuario existentes para que, en el caso de que haya personalizado dichos archivos manualmente, contine teniendo acceso a los cambios realizados.

68

Captulo 2

CAPTULO 3 Planificacin y configuracin del sitio

Un sitio Web es un conjunto de documentos vinculados con atributos compartidos, como temas relacionados, un diseo similar o un objetivo comn. Macromedia Dreamweaver MX es una herramienta de creacin y administracin de sitios, por lo que puede utilizarla para crear sitios Web completos, adems de documentos individuales. Para obtener resultados ptimos, disee y planifique el sitio Web antes de crear las pginas que va a contener.
Nota: Si desea comenzar a crear documentos inmediatamente, puede probar algunas de las herramientas de creacin de documentos de Dreamweaver y crear un documento de muestra (consulte Creacin de un nuevo documento en blanco en la pgina 125). Sin embargo, no comience un desarrollo serio del documento hasta que haya configurado el sitio.

El primer paso a la hora de crear un sitio Web consiste en planificarlo (consulte Planificacin y diseo del sitio en la pgina 69). El paso siguiente es configurar la estructura bsica del sitio (consulte Configuracin de un sitio Dreamweaver en la pgina 74). Cuando comience a desarrollar el contenido del sitio, considere la posibilidad de basarlo en una plantilla de Dreamweaver (consulte Plantillas de Dreamweaver en la pgina 481 y Creacin de una plantilla de Dreamweaver en la pgina 486). Si ya dispone de un sitio en un servidor Web y desea empezar a utilizar Dreamweaver para editarlo, consulte Edicin de un sitio Dreamweaver en la pgina 80. Este captulo incluye las siguientes secciones: Planificacin y diseo del sitio en la pgina 69 Configuracin de un sitio Dreamweaver en la pgina 74 Configuracin de una carpeta local en la pgina 75 Configuracin de una carpeta remota en la pgina 77 Edicin de un sitio Dreamweaver en la pgina 80 Edicin de sitios Web existentes con Dreamweaver en la pgina 80

Planificacin y diseo del sitio

En Dreamweaver, el trmino sitio puede hacer referencia a un sitio Web o a un emplazamiento local de almacenamiento de documentos pertenecientes a un sitio Web. Cuando comience a pensar en la creacin de un sitio Web, debe seguir una serie de pasos de planificacin para asegurar el xito del sitio. Incluso en el caso de que vaya a crear tan slo una pgina principal personal que slo vern los amigos y la familia, es conveniente planificar el sitio con cuidado para asegurarse de que todo el mundo pueda utilizarlo correctamente.

69

Determinacin de los objetivos Decidir los objetivos del sitio es el primer paso que debe tomar a la hora de crear un sitio Web. Pregntese a s mismo o a sus clientes cuestiones relacionadas con el sitio. Qu espera conseguir al disponer de un sitio Web? Escriba sus objetivos de manera que pueda recordarlos durante el proceso de diseo. Los objetivos le ayudarn a centrarse y a adaptar el sitio Web a sus necesidades particulares. Un sitio Web que ofrece noticias sobre un tema concreto debe tener una apariencia y una navegacin distintas a las de un sitio Web destinado a vender productos. La complejidad de sus objetivos afectar a la navegacin, a las herramientas de creacin que utilice (Flash, Director, etc.) e incluso a la apariencia y al funcionamiento del sitio. Eleccin de una audiencia destino Despus de decidir lo que desea conseguir a travs del sitio Web, debe decidir quin desea que visite el sitio. Le puede parecer una pregunta estpida, dado que la mayora de la gente quiere que todo el mundo visite su sitio Web. Sin embargo, es difcil crear un sitio Web que absolutamente todo el mundo pueda utilizar. La gente utiliza navegadores distintos, se conecta a velocidades diferentes y puede disponer de plug-ins multimedia o no. Todos estos factores afectan al uso del sitio. Y sta es precisamente la razn por la que debe determinar su audiencia destino. Piense en la gente que se sentir atrada hacia su sitio Web o en la que espera poder atraer. Qu clase de equipos cree que utilizarn los destinatarios de su sitio? Cul puede ser la plataforma predominante (Macintosh, Windows, Linux, etc.)? Cul es la velocidad de conexin media (mdem a 33,6 Kbps o DSL)? Qu tipos de navegadores y tamaos de monitor utilizarn? Va a crear un sitio de intranet en el que todo el mundo utilice el mismo sistema operativo y el mismo navegador? Todos estos factores pueden afectar considerablemente a cmo aparecer el sitio Web ante los visitantes. Una vez que haya elegido la audiencia y que haya determinado los tipos de equipos, velocidades de conexin y navegadores que utilizarn los visitantes, puede definir el diseo. Por ejemplo, supongamos que su audiencia destino est formada principalmente por usuarios de Windows con monitores de 17 pulgadas, que utilizan Microsoft Internet Explorer 3.0 o posterior. Conforme disee su pgina Web, deber comprobar que el sitio funciona mejor con Internet Explorer en un equipo Windows con un tamao de pantalla de 800 x 600 pxeles. Es posible que un nmero inferior de visitantes utilice Netscape Navigator en una plataforma Macintosh, pero tambin debe asegurarse de que el sitio funciona en dichos equipos, aunque es posible que no se muestre exactamente igual que para la audiencia destino. Creacin de sitios compatibles con diversos navegadores A la hora de crear el sitio Web, conviene tener en cuenta la diversidad de navegadores Web que pueden emplear los visitantes. En la medida de lo posible, disee el sitio para ofrecer la mxima compatibilidad con navegadores teniendo en cuenta otras limitaciones de diseo. Hay ms de veinte navegadores Web distintos en uso, la mayora de los cuales estn disponibles en varias versiones. Aunque su objetivo sea nicamente ofrecer compatibilidad con Netscape Navigator y Microsoft Internet Explorer, utilizados por la mayora de los usuarios de la Web, no todos los visitantes dispondrn de las versiones ms recientes de esos navegadores. Si su sitio est en la Web, tarde o temprano alguien lo visitar usando Netscape Navigator 2.0 o el navegador que AOL facilita a sus clientes, o un navegador de slo texto como Lynx.

70

Captulo 3

En algunas circunstancias no es necesario crear sitios compatibles con distintos navegadores. Por ejemplo, si el sitio slo est disponible en la intranet de la empresa y sabe que todos los empleados utilizan el mismo navegador, puede optimizar el sitio para que aproveche las caractersticas de ese navegador. Del mismo modo, si crea contenido HTML que se va a distribuir en un CD-ROM que incorpora un navegador, puede dar por hecho que todos los clientes van a tener acceso a ese navegador. En la mayora de los casos, a la hora de disear sitios Web para visualizacin pblica, es deseable que el sitio se pueda ver en tantos navegadores como sea posible. Seleccione uno o dos navegadores como navegadores de destino y disee el sitio para ellos, pero intente explorar el sitio con otros navegadores y as evitar una cantidad excesiva de contenido incompatible. Tambin puede pegar un mensaje en un grupo de debate para pedir a otras personas que vean el sitio. Esta puede ser una excelente forma de conseguir comentarios de una audiencia amplia. Cuanto ms sofisticado sea el sitio, en cuanto a disposicin, animacin, contenido multimedia e interaccin, menos probable ser que ofrezca compatibilidad con distintos navegadores. Por ejemplo, no todos los navegadores pueden ejecutar JavaScript. Probablemente una pgina de texto normal que no utilice caracteres especiales se ver bien en cualquier navegador, pero su atractivo esttico ser mucho menor que el de una pgina que haga un uso eficaz de grficos, diseo e interaccin. Intente llegar a un equilibrio entre conseguir el mximo efecto y ofrecer la mxima compatibilidad con navegadores. Un mtodo til consiste en proporcionar mltiples versiones de algunas pginas importantes, como la pgina principal del sitio. Por ejemplo, puede disear una versin de la pgina con marcos y otra sin ellos. Despus, puede incluir en la pgina Web un comportamiento que lleve automticamente a los visitantes que utilicen navegadores sin capacidad para visualizar marcos a una versin sin marcos. Para obtener ms informacin, consulte Utilizacin de las acciones de comportamiento incluidas con Dreamweaver en la pgina 387. Organizacin de la estructura del sitio Si organiza el sitio cuidadosamente desde el primer momento, puede ahorrarse frustracin y tiempo ms adelante. Si comienza a crear documentos sin pensar en la jerarqua a la que corresponden, puede terminar con una enorme carpeta llena de archivos y difcil de administrar, o con archivos relacionados repartidos por numerosas carpetas con nombres similares. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local con todos los archivos del sitio (denominada sitio local) y crear y editar los documentos dentro de dicha carpeta. Despus podr copiar dichos archivos en un servidor Web cuando est preparado para publicar el sitio y permitir al pblico que lo vea. Este enfoque es mejor que crear y editar archivos en el propio sitio Web en vivo, ya que le permite comprobar cambios en el sitio local antes de hacerlos pblicos y, cuando haya terminado, cargar los archivos del sitio local y actualizar todo el sitio pblico de una vez. Para coordinar el sitio local con Dreamweaver, consulte Configuracin de un sitio Dreamweaver en la pgina 74. Una vez que configure el sitio local con Dreamweaver, le resultar ms fcil administrar los archivos del sitio, controlar los vnculos, actualizar las pginas, etc.
Divisin del sitio en categoras Incluya las pginas relacionadas en la misma carpeta. Por ejemplo, los comunicados de prensa de la compaa, la informacin sobre contactos y las ofertas de trabajo pueden colocarse en una carpeta, y las pginas del catlogo en lnea pueden ir en otra. Utilice subcarpetas cuando sea necesario. Este tipo de organizacin facilitar el mantenimiento y la navegacin por el sitio.

Planificacin y configuracin del sitio

71

Decida dnde incluir elementos como imgenes y archivos de sonido

Por ejemplo, resulta til colocar todas las imgenes en un mismo emplazamiento a fin de facilitar su localizacin a la hora de insertarlas en una pgina. A veces los diseadores sitan todos los elementos no HTML que desean utilizar en un sitio en una carpeta llamada Activos. Esa carpeta puede contener otras, como Imgenes, Shockwave y Sonidos. Tambin se puede utilizar una carpeta Activos distinta para cada grupo de pginas relacionadas, si no hay muchos activos compartidos entre los grupos.
SITIO REMOTO my_site1 (carpeta raz) About_the_Company SITIO LOCAL my_site2 (carpeta raz) About_the_Company

Catalog

Assets

Assets (sitio completo) index.html (pgina principal)

Catalog

Assets

index.html (pgina principal)

Utilice la misma estructura para el sitio local y el remoto El sitio local y el sitio Web remoto deben tener exactamente la misma estructura. Si crea un sitio local utilizando Dreamweaver y, a continuacin, lo carga todo en el sitio remoto, Dreamweaver se asegurar de que la estructura local se duplique con precisin en el entorno remoto.

Creacin de su propio diseo Ahorrar mucho tiempo posteriormente en el proceso si planifica el diseo y la disposicin antes de comenzar a trabajar con Dreamweaver. Puede ser tan sencillo como crear un boceto en papel de cmo desea que sea la disposicin del sitio. Un enfoque ms avanzado sera crear un dibujo compuesto del sitio empleando aplicaciones de software como Macromedia FreeHand o Fireworks. Lo importante es disponer de un boceto de la disposicin y del diseo que pueda seguir posteriormente a la hora de crear el sitio. Es importante mantener una coherencia en la disposicin y el diseo de la pgina. Es conveniente que los usuarios puedan hacer clic en las pginas del sitio sin que acaben confundidos porque todas las pginas tienen una apariencia distinta o porque la navegacin est en un lugar diferente en cada pgina.

72

Captulo 3

Diseo del esquema de navegacin Otra rea en la que merece la pena planificar es la navegacin. Cuando disee su sitio, piense en la experiencia que le gustara que tuvieran los visitantes. Piense en cmo podr desplazarse un visitante de un rea a otra del sitio. Tenga en cuenta los siguientes puntos: La informacin de tipo Usted est aqu ayuda a los visitantes a orientarse dentro del sitio y les indica cmo regresar a la pgina de nivel superior.
Las bsquedas y los ndices facilitan

a los visitantes la localizacin de la informacin que estn

buscando.
Los comentarios ofrecen un medio por el que los visitantes pueden ponerse en contacto con el webmaster (en el caso de que exista) si algo marcha mal en el sitio o con los responsables de la compaa o del sitio.

Disee la apariencia que tendr la navegacin. La navegacin debe ser homognea en todo el sitio. Si sita una barra de navegacin a lo largo de la parte superior de la pgina principal, intente mantenerla en ese lugar en todas las pginas vinculadas. Dreamweaver cuenta con dos herramientas de navegacin que puede utilizar para crear el esquema de navegacin. Para obtener ms informacin, consulte Creacin de vnculos y navegacin en la pgina 439. Planificacin y recopilacin de los activos Una vez que sepa cmo sern el diseo y la disposicin, podr crear y reunir los activos que va a necesitar. Los activos pueden ser elementos como imgenes, texto o elementos multimedia (Flash, Shockwave, etc.). Asegrese de haber preparado todos estos elementos antes de comenzar a desarrollar el sitio. De lo contrario, tendr que parar continuamente para encontrar una imagen o para crear un botn. Si utiliza imgenes y grficos de un sitio de diseos grficos o si los est creando otra persona, asegrese de reunirlos en una carpeta del sitio (consulte Organizacin de la estructura del sitio en la pgina 71). Si crea los activos usted mismo, asegrese de crearlos todos antes de comenzar el desarrollo, incluidas todas las imgenes necesarias si va a utilizar imgenes de sustitucin. A continuacin, organice los activos de forma que pueda obtener acceso a ellos fcilmente durante la creacin del sitio con Dreamweaver. Dreamweaver puede facilitarle la reutilizacin de disposiciones y elementos de pgina en diversos documentos mediante la utilizacin de plantillas y bibliotecas. No obstante, es ms sencillo crear nuevas pginas con plantillas y bibliotecas que aplicarlas a documentos existentes.
Utilice plantillas si

muchas de las pginas van a utilizar la misma disposicin. Planifique y disee una plantilla para esa disposicin para poder crear nuevas pginas basadas en dicha plantilla. Si decide cambiar la disposicin de todas las pginas, slo tendr que modificar la plantilla.

Nota: Los cambios que puede realizar en los documentos basados en plantillas estn sujetos a algunas restricciones. Las plantillas se utilizan mejor en los entornos de colaboracin, con el fin de garantizar que todos los usuarios empleen la misma disposicin de pgina. Los elementos de biblioteca pueden brindar una mayor flexibilidad de uso fuera de los entornos de colaboracin.

Utilice elementos de biblioteca si

sabe que una determinada imagen u otro contenido va a aparecer en muchas pginas del sitio; disee el contenido con antelacin y convirtalo en un elemento de biblioteca. Si cambia ese elemento posteriormente, la versin actualizada aparecer en todas las pginas que lo contengan.

Planificacin y configuracin del sitio

73

Para obtener ms informacin sobre la reutilizacin de disposiciones y elementos de pgina, consulte Administracin de activos, bibliotecas y plantillas del sitio en la pgina 463.

Configuracin de un sitio Dreamweaver

Tras planificar la estructura del sitio (consulte Organizacin de la estructura del sitio en la pgina 71), o si ya dispone de un sitio existente, debe designar un nuevo sitio en Dreamweaver antes de comenzar el desarrollo. Un sitio Dreamweaver permite organizar todos los documentos asociados con un sitio Web. Lo puede considerar como un proyecto. Tendr que configurar un sitio para cada sitio Web que desarrolle. La organizacin de los archivos en un sitio permite utilizar Dreamweaver con FTP para cargar el sitio en el servidor Web, controlar y mantener los vnculos de forma automtica, administrar y compartir archivos. No podr sacar el mximo partido de las funciones de Dreamweaver a menos que defina un sitio. Un sitio Dreamweaver consta de un mximo de tres partes, segn el entorno y el tipo de sitio Web que desarrolle:

Carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como sitio local. Para obtener ms informacin, consulte Configuracin de una carpeta local en la pgina 75. Carpeta remota

es el lugar donde se almacenan los archivos, segn el entorno, para comprobacin, produccin, colaboracin, etc. En Dreamweaver esta carpeta se denomina sitio remoto. Para obtener ms informacin, consulte Configuracin de una carpeta remota en la pgina 77. la carpeta donde Dreamweaver procesa las pginas dinmicas. Para obtener ms informacin, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152.

Carpeta para pginas dinmicas es

Para empezar, puede configurar un sitio Dreamweaver completo, o simplemente realizar el primer paso, la configuracin de la carpeta local. Para poder empezar a trabajar con Dreamweaver, como mnimo, es necesario configurar una carpeta local. Existen dos maneras de configurar un sitio Dreamweaver: utilizar el asistente para la Definicin del sitio, que le guiar por el proceso de configuracin, o bien las opciones Avanzadas del cuadro de dilogo Definicin del sitio, que permiten definir carpetas locales, remotas y de prueba de forma individual, segn sus necesidades.
Para definir un sitio Dreamweaver:

Seleccione Sitio > Nuevo sitio. Aparece el cuadro de dilogo Definicin del sitio. Haga clic en la ficha Bsicas para utilizar el asistente para la Definicin del sitio o en la ficha Avanzadas para emplear las opciones avanzadas. Realice el proceso de definicin del sitio Dreamweaver: avanzar por el proceso de definicin (consulte Uso del asistente para la definicin del sitio en la pgina 75).

2 3

Responda a las preguntas del asistente para la Definicin del sitio y haga clic en Siguiente para

74

Captulo 3

 Si utiliza las opciones Avanzadas, complete las categoras Datos locales (consulte
Configuracin de una carpeta local en la pgina 75), Datos remotos (consulte Configuracin de una carpeta remota en la pgina 77) y Servidor de prueba (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152), segn el caso.
Nota: Se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente para la Definicin del sitio. Es probable que los usuarios que tengan ms experiencia con Dreamweaver prefieran las opciones Avanzadas.

Uso del asistente para la definicin del sitio

Puede utilizar el asistente para la Definicin del sitio para configurar un sitio Dreamweaver. El asistente para la Definicin del sitio le gua por el proceso de configuracin del sitio. Es el mtodo recomendado para los usuarios nuevos de Dreamweaver. El asistente consta de tres secciones. Cada seccin puede tener varias pantallas, denominadas partes, segn las opciones seleccionadas. Las tres secciones principales incluyen los siguientes elementos:

Editando archivos

donde se define la carpeta local. Para obtener ms informacin, consulte Configuracin de una carpeta local en la pgina 75.

Comprobando archivos es donde se configura la carpeta que utilizar Dreamweaver para procesar pginas dinmicas. Para obtener ms informacin, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152. Compartiendo archivos es donde se define la carpeta remota. Para obtener ms informacin, consulte Configuracin de una carpeta remota en la pgina 77.

En la parte superior del cuadro de dilogo, el nombre de seccin que aparece resaltado indica en qu paso del proceso de configuracin se encuentra. Es posible que no necesite establecer carpetas en las tres secciones. En cada seccin, el programa le har preguntas para ayudarle a determinar sus necesidades.
Para utilizar el asistente para la Definicin del sitio para configurar un sitio Dreamweaver:

Seleccione Sitio > Nuevo sitio. Aparece el cuadro de dilogo Definicin del sitio. Haga clic en la ficha Bsicas para utilizar el asistente para la Definicin del sitio. Conteste a las preguntas que aparezcan en cada pantalla y haga clic en Siguiente para avanzar. En caso necesario, haga clic en Atrs para regresar a una pantalla anterior.

2 3

Configuracin de una carpeta local

La carpeta local es el directorio de trabajo del sitio Dreamweaver (consulte Configuracin de un sitio Dreamweaver en la pgina 74). Esta carpeta puede colocarse en el equipo local o en un servidor de red. Es el lugar donde se almacenan los archivos en curso del sitio Dreamweaver. Al configurar una carpeta local, se establece un sitio Dreamweaver. Tambin puede aadir carpetas remotas y de prueba (consulte Configuracin de una carpeta remota en la pgina 77 y Creacin de una carpeta raz para la aplicacin en la pgina 150), pero es necesario configurar al menos una carpeta local para poder iniciar el desarrollo con Dreamweaver.

Planificacin y configuracin del sitio

75

Configuracin de una carpeta local:

Elija Sitio > Nuevo sitio. Aparece el cuadro de dilogo Definicin del sitio. Haga clic en el botn Avanzadas, si las opciones Avanzadas no estn visibles. La ficha Avanzadas del cuadro de dilogo Definicin del sitio muestra las opciones de la categora Datos locales.

Introduzca las opciones de Datos locales. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Dreamweaver crea el cach inicial del sitio y el nuevo sitio Dreamweaver aparece en el panel Sitio. Para obtener ms informacin sobre el panel Sitio y la administracin de sitios, consulte Administracin del sitio en la pgina 83.

Ms tarde, cuando est listo para publicar el sitio en un servidor remoto, deber aadir informacin adicional sobre el sitio. Para obtener informacin, consulte Configuracin de una carpeta remota en la pgina 77.

76

Captulo 3

Configuracin de una carpeta remota

Tras definir una carpeta local para un sitio Dreamweaver (consulte Configuracin de una carpeta local en la pgina 75), puede configurar una carpeta remota. Las carpetas local y remota permiten transferir archivos entre el disco local y el servidor Web, lo cual facilita la administracin de los archivos en los sitios Dreamweaver. Segn el entorno, la carpeta remota es el lugar donde se almacenan los archivos para comprobacin, colaboracin, produccin u otros fines. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web.
Nota: No es necesario especificar una carpeta remota si la carpeta que ha especificado como local en la categora Datos locales (consulte Configuracin de una carpeta local en la pgina 75) es la misma que cre para los archivos del sitio en el sistema donde se ejecuta el servidor Web. Esto implica que el servidor Web se ejecuta en el equipo local.

Determine cmo acceder a la carpeta remota y anote la informacin de conexin. Cuando haya reunido esta informacin, utilice el comando Editar sitios para configurar la carpeta remota. Si le surge algn problema, consulte Solucin de problemas de configuracin de carpetas remotas en la pgina 79. Despus de configurar una carpeta remota, puede conectar con ella y luego localizar y administrar los archivos del sitio Dreamweaver. Si est desarrollando un sitio dinmico, tendr que aadir una carpeta para procesar pginas dinmicas (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152).
Para configurar una carpeta remota:

Elija Sitio> Editar sitios. Aparece el cuadro de dilogo Editar sitios. Seleccione un sitio Dreamweaver existente. Si no ha definido ningn sitio Dreamweaver, cree una carpeta local antes de continuar (consulte Configuracin de una carpeta local en la pgina 75).

Haga clic en Editar. Aparece el cuadro de dilogo Definicin del sitio. Haga clic en el botn Avanzadas si Dreamweaver muestra el asistente para la Definicin del sitio. Seleccione Datos remotos en la lista Categora que aparece en la parte izquierda. Elija una opcin de acceso. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

4 5 6

Para conectar con una carpeta remota:

En el panel Sitio, elija Sitio > Conectar o haga clic en el botn Conecta al Servidor remoto en la barra de herramientas del panel Sitio.
Nota: Si el sitio utiliza FTP con SSH para acceder a la carpeta remota, cuando intente conectar con el servidor remoto, el programa solicitar que se conecte con el servidor SSH. Haga clic en Aceptar en el cuadro de dilogo de Dreamweaver una vez establecida la conexin.

Planificacin y configuracin del sitio

77

Para desconectarse de una carpeta remota:

En el panel Sitio, elija Sitio > Desconectar o haga clic en el botn Desconectar en la barra de herramientas del panel Sitio. Eleccin del directorio del servidor para el acceso FTP Si elige FTP para acceder a la carpeta remota (consulte Configuracin de una carpeta remota en la pgina 77), deber establecer el directorio de servidor de la carpeta remota. El directorio de servidor especificado debe corresponder a la carpeta raz de la carpeta local. El siguiente diagrama muestra un ejemplo de una carpeta local a la izquierda y de una carpeta remota a la derecha.
no directorio de inicio de sesin (no debe ser el directorio host en este caso) public_html (directorio host) Assets (no debe ser el directorio host) HTML

sitio local (carpeta raz) Assets

no

HTML

Si la estructura del sitio de la carpeta no coincide con la de la carpeta local, Dreamweaver cargar los archivos en el lugar incorrecto y los visitantes del sitio no podrn verlos. Adems, se rompern las rutas de imgenes y vnculos. El directorio raz remoto deber haberse creado antes de que Dreamweaver intente conectar con l. Si no dispone de un directorio raz para la carpeta remota, cree uno o pida al administrador del servidor que le cree uno. Si no sabe qu introducir en el cuadro de texto Directorio del Servidor, consulte al administrador del servidor. Tambin puede intentar dejar este cuadro de texto vaco. En algunos servidores, el directorio raz es el directorio con el que se conecta en primer lugar a travs de FTP. Para averiguar si es as, conecte con el servidor. Si aparece en la vista de Archivo remoto del panel Sitio una carpeta con un nombre del tipo public_html, o www, o su nombre de conexin, probablemente se sea el directorio que debe usar en el cuadro de texto Directorio del Servidor. Uso de Secure Shell para el acceso mediante FTP Al seleccionar FTP para el acceso a la carpeta remota en el cuadro de dilogo Definicin del sitio, en Windows puede especificar que desea utilizar SSH (Secure Shell). Para activar SSH en Windows, haga clic en el botn Ayuda en el cuadro de dilogo. Para utilizar SSH en Macintosh, descargue el cliente Macintosh SSH del sitio web Centros de soporte de Dreamweaver en http://www.macromedia.com/es/support/.

78

Captulo 3

Solucin de problemas de configuracin de carpetas remotas Un servidor Web se puede configurar de varias formas. En la siguiente lista se ofrece informacin sobre algunos problemas comunes que pueden surgir a la hora de configurar una carpeta remota y cmo solucionarlos.

Es posible que la implementacin FTP de Dreamweaver no funcione correctamente con

algunos servidores proxy, cortafuegos multinivel y otras formas de acceso indirecto al servidor. Si surgen problemas con el acceso FTP, solicite ayuda al administrador del sistema local.

Para la implementacin FTP de Dreamweaver, debe conectar con la carpeta raz del sistema
remoto. (En muchas aplicaciones, puede conectar con cualquier directorio remoto y luego navegar por el sistema de archivos remoto para localizar el directorio deseado.) Asegrese de indicar la carpeta raz del sistema remoto como el directorio del servidor. Si tiene algn problema para conectar y ha especificado el directorio del servidor utilizando una sola barra inclinada (/), es posible que tenga que especificar una ruta relativa desde el directorio con el que est conectando y la carpeta raz remota. Por ejemplo, si la carpeta raz remota es un nivel de directorio superior, puede que tenga que especificar ../../ para el directorio del servidor.

Los nombres de archivo y carpeta que contienen espacios y caracteres especiales suelen
ocasionar problemas al transferirse a sitios remotos. Utilice caracteres de subrayado en lugar de espacios y evite los caracteres especiales en los nombres de archivo y carpeta siempre que pueda. En concreto, algunos caracteres que pueden causar problemas en los nombres de archivo son los dos puntos, las barras, el punto y el apstrofo. Los caracteres especiales en los nombres de archivo o carpeta tambin pueden impedir que Dreamweaver cree un mapa del sitio.

Si experimenta problemas con nombres de archivo largos, acrtelos. En Macintosh, los

nombres de archivo no pueden tener ms de 31 caracteres.

Muchos servidores utilizan vnculos simblicos (UNIX), accesos abreviados (Windows) o alias
(Macintosh) para conectar una carpeta de una parte del disco del servidor con otra carpeta situada en otro emplazamiento. Por ejemplo, el subdirectorio public_html del directorio principal del servidor puede ser en realidad un vnculo con cualquier parte del servidor. En la mayora de los casos, estos alias no tienen ninguna repercusin sobre la capacidad de conectar con la carpeta o el directorio correspondientes, pero si consigue conectar con una parte del servidor y no con otra, es posible que haya una discrepancia de alias.

Si aparece un mensaje de error del tipo no se puede colocar el archivo, es posible que la
carpeta remota se haya quedado sin espacio. Examine el registro FTP para obtener informacin ms detallada. En general, si surge un problema con una transferencia FTP, examine el registro FTP. Para ello, elija Ventana > Resultados > Registro FTP en el panel Sitio (Windows) o Sitio > Registro FTP (Macintosh).

Planificacin y configuracin del sitio

79

Edicin de un sitio Dreamweaver

En el cuadro de dilogo Definicin del sitio, utilice las opciones de la ficha Avanzadas para editar los sitios Dreamweaver.
Para editar un sitio Dreamweaver, lleve a cabo una de estas operaciones:

Elija Sitio > Editar sitios, seleccione un sitio y haga clic en Editar. Elija Sitio > Abrir sitio y seleccione un sitio. Edicin de sitios Web existentes con Dreamweaver
Puede usar Dreamweaver para editar sitios existentes aunque no haya utilizado Dreamweaver para crear el sitio original. Es posible editar sitios existentes ubicados en el sistema local o en un sistema remoto. Edicin de un sitio Web local con Dreamweaver Puede usar Dreamweaver para editar un sitio Web de su disco local, aunque no lo haya creado con Dreamweaver.
Para editar un sitio Web local:

Abra el cuadro de dilogo Definicin del sitio llevando a cabo una de estas operaciones:

Elija Sitio > Editar sitios y haga clic en Nuevo. Elija Sitio > Abrir sitio > Definir sitios.
El cuadro de dilogo Definicin del sitio muestra las opciones de Datos locales.
2

Complete el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Edicin de un sitio Web remoto con Dreamweaver Puede utilizar Dreamweaver para copiar un sitio remoto (o una de sus ramas) en el disco local y editarlo, aunque no lo haya creado con Dreamweaver. Aunque slo desee editar una parte del sitio remoto, deber duplicar toda la estructura de la rama correspondiente del sitio, desde su carpeta raz hasta los archivos que desea editar.

80

Captulo 3

Por ejemplo, si la carpeta raz del sitio remoto, denominada public_html, contiene dos carpetas, Project1 y Project2, y desea trabajar nicamente con los archivos HTML de Project1, no ser necesario que descargue los archivos de Project2, pero deber asignar su carpeta raz local a public_html, no a Project1.
SITIO REMOTO public_html SITIO LOCAL local root folder (asigne a public.html, no a Project1 o Project/HTML) Project 1 (debe estar en sitio local; corresponde a Project1 en sitio remoto) HTML (debe estar en sitio local; corresponde a Project1/HTML en sitio remoto)

Project 1

Assets

HTML

Project 2

Assets

HTML

Para editar un sitio remoto existente:

1 2

Cree una carpeta local que contenga el sitio y configrela como carpeta raz local del sitio (consulte Configuracin de una carpeta local en la pgina 75). Configure una carpeta remota utilizando informacin sobre el sitio existente (consulte Configuracin de una carpeta remota en la pgina 77). Asegrese de elegir la carpeta raz correcta para el sitio remoto. Haga clic en el botn Conectar en el panel Sitio para conectar con el sitio remoto. Segn la parte del sitio remoto que desee editar, lleve a cabo una de estas operaciones: descargar todo el sitio en el disco local.

3 4

Si desea trabajar con el sitio completo, seleccione su carpeta raz y haga clic en Obtener, para Si desea trabajar slo con uno de los archivos o carpetas del sitio, localcelo en la vista remota
del panel Sitio y haga clic en Obtener, para descargarlo en el disco duro. Dreamweaver duplica automticamente la parte de la estructura del sitio remoto que sea necesaria para situar el archivo descargado en el lugar adecuado dentro de la jerarqua del sitio. Para editar nicamente una parte de un sitio, generalmente debe incluir los archivos dependientes.

Planificacin y configuracin del sitio

81

Proceda como si estuviera creando un sitio a partir de cero: edite documentos, previsualcelos, comprubelos y vuelva a cargarlos en el sitio remoto.

82

Captulo 3

CAPTULO 4 Administracin del sitio

Macromedia Dreamweaver MX ayuda a organizar los archivos de los sitios local y remoto (tambin denominados sitios) mediante el panel Sitio. Permite duplicar la estructura de la carpeta local en un servidor remoto o la estructura de una carpeta remota en el sistema local. Los vnculos relativos creados en el sitio local siguen funcionando despus de transferir los archivos al sitio remoto porque la estructura de ambos sitios es idntica. Para crear un sitio local en Dreamweaver, utilice el comando Nuevo sitio con el fin de crear una carpeta raz local o convierta una carpeta existente en la carpeta raz local (consulte Configuracin de una carpeta local en la pgina 75). El sitio remoto se define al crear un nuevo sitio. Esa informacin se puede aadir tambin posteriormente utilizando el comando Editar sitios (consulte Configuracin de una carpeta remota en la pgina 77). Dreamweaver incluye una serie de funciones que permiten administrar un sitio y transferir los archivos a un servidor remoto (y viceversa). Al transferir archivos entre sitios locales y remotos, Dreamweaver mantiene estructuras de archivos y carpetas paralelas en ambos sitios. Cuando se transfieren archivos entre sitios, Dreamweaver crea automticamente las carpetas necesarias si an no existen en un sitio. Tambin se pueden sincronizar los archivos entre los sitios local y remoto; si es necesario, Dreamweaver copia los archivos en ambos sentidos y elimina los no deseados. Dreamweaver incluye funciones que facilitan el trabajo en colaboracin en un sitio Web. Puede proteger y desproteger archivos de un servidor remoto de forma que otros miembros de un equipo de diseo Web puedan ver quin est trabajando con un archivo. Puede aadir Design Notes a los archivos para compartir informacin con los miembros del equipo acerca del estado del archivo, su prioridad, etc. Tambin puede utilizar la funcin Informes de flujo de trabajo para ejecutar informes sobre el sitio y ver informacin sobre el estado de proteccin/desproteccin, as como para buscar las Design Notes adjuntas a los archivos. Una vez que haya publicado el sitio, usted o alguien de su equipo puede continuar mantenindolo. Tambin puede buscar soluciones para los problemas que vayan surgiendo, antes y despus de publicar el sitio (para obtener ms informacin, consulte Comprobacin de un sitio en la pgina 509). Este captulo contiene las secciones siguientes:

El panel Sitio en la pgina 84 El mapa del sitio en la pgina 94 Importacin y exportacin de sitios en la pgina 101 Eliminacin de un sitio de la lista de sitios en la pgina 101 Utilizacin de desproteger/proteger en la pgina 102

83

Obtencin y colocacin de archivos en la pgina 105 Sincronizacin de los archivos de los sitios local y remoto en la pgina 108 Cmo ocultar carpetas y archivos en el sitio en la pgina 109 Utilizacin de Design Notes en la pgina 113 Utilizacin de informes para mejorar el flujo de trabajo en la pgina 117 El panel Sitespring de Dreamweaver en la pgina 118 Utilizacin del panel Sitespring en la pgina 119

El panel Sitio
El panel Sitio permite ver un sitio y todas las carpetas locales, remotas y de servidor de prueba asociadas. De forma predeterminada aparece el sitio local. Puede cambiar la disposicin del panel Sitio para ver el sitio remoto o el servidor de prueba (consulte Cambio de la disposicin del panel Sitio en la pgina 90). Ample el panel Sitio para ver una vista dividida (consulte Uso del panel Sitio en la pgina 85).
Nota: En Macintosh, el panel Sitio siempre muestra la vista dividida y no puede contraerse.

Utilice el panel Sitio para realizar las operaciones estndar de mantenimiento de archivos, por ejemplo:

Crear documentos HTML nuevos Ver, abrir y trasladar archivos Crear carpetas Eliminar elementos Transferir archivos entre sitios locales, sitios remotos y servidores de prueba

84

Captulo 4

 Disear la navegacin del sitio con el mapa del sitio (consulte Configuracin de una carpeta
remota en la pgina 77 y Utilizacin del mapa del sitio en la pgina 95) El panel Sitio contiene un explorador de archivos integrado. Este explorador permite buscar en el disco local y en la red, adems de en el sitio actual (consulte Uso del explorador de archivos integrado en la pgina 94). Uso del panel Sitio El panel Sitio est incluido en el espacio de trabajo integrado de Dreamweaver de forma predeterminada, consulte Exploracin del espacio de trabajo en la pgina 43. Puede mover el panel o abrirlo y cerrarlo siempre que sea necesario (consulte Utilizacin de las ventanas y paneles en Dreamweaver en la pgina 49). Tambin es posible ampliar el panel para obtener una vista dividida del sitio. En la vista dividida, especifique si desea ver el sitio local y el sitio remoto, el servidor de prueba o el mapa del sitio (Cambio de la disposicin del panel Sitio en la pgina 90).
Para abrir o cerrar el panel Sitio:

Elija Ventana > Sitio.

Para ampliar o contraer el panel Sitio:

(Slo en Windows) Haga clic en el botn Ampliar/contraer en la barra de herramientas del panel Sitio.
Nota: Si hace clic en el botn Ampliar/contraer para ampliar el panel mientras se encuentra apilado, el panel se maximiza de modo que no es posible trabajar en la ventana de documento. Para regresar a la ventana de documento, vuelva a hacer clic en el botn Ampliar/contraer para contraer el panel. Si hace clic en el botn Ampliar/ contraer para ampliar el panel mientras se encuentra en estado flotante, permanecer en este estado y podr seguir trabajando en la ventana de documento. Para poder apilar el panel de nuevo, deber contraerlo primero.

Utilice los siguientes botones y opciones de la barra de herramientas del panel Sitio para determinar lo que mostrar dicho panel y para transferir archivos:
Archivos del sitio Servidor de prueba Vista Mapa del sitio Actualizar Obtener archivo(s) Colocar archivo(s)

Men emergente Sitio Conectar/desconectar

Ampliar/contraer Desproteger Proteger archivo(s)

Nota: Los botones Archivos del sitio, Servidor de prueba y Mapa del sitio slo aparecen en el panel Sitio ampliado.

Archivos del sitio muestra la estructura de archivos de los sitios remoto y local en las dos partes del panel Sitio. (Hay una opcin de preferencias que determina qu sitios aparecen en el panel izquierdo y en el derecho; consulte Configuracin de las preferencias del sitio en la pgina 87.) Archivos del sitio es la vista predeterminada del panel Sitio. Servidor de prueba

muestra la estructura de directorios del servidor de prueba y del sitio local.

Mapa del sitio muestra

una representacin grfica del sitio basada en los vnculos entre los documentos. Mantenga presionado este botn para elegir Slo mapa o Mapa y archivos en el men emergente.

Administracin del sitio

85

El men emergente Sitio enumera los sitios que ha definido. Para cambiar a otro sitio, seleccinelo en la lista. Para aadir un sitio o editar la informacin de un sitio existente, elija Editar sitios, en la parte inferior del men (consulte Configuracin de una carpeta remota en la pgina 77). Conectar/desconectar (FTP, RDS, protocolo WebDAV y SourceSafe) conecta o desconecta del sitio remoto. De forma predeterminada, Dreamweaver desconecta del sitio remoto si permanece inactivo durante ms de 30 minutos (slo FTP).

Para cambiar el lmite de tiempo, elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Sitio, en la lista de categoras en la parte izquierda.
Actualizar actualiza las listas de los directorios local y remoto. Utilice este botn para actualizar manualmente las listas de directorios si ha desactivado las opciones Actualizar lista de archivos locales automticamente o Actualizar lista de archivos remotos automticamente, en el cuadro de dilogo Definicin del sitio (consulte Configuracin de una carpeta remota en la pgina 77). Obtener archivo(s) copia los archivos seleccionados del sitio remoto o del servidor de prueba en el sitio local (sobrescribiendo la copia local del archivo, si existe). Si est activada la opcin Permitir desproteger y proteger archivo, las copias locales sern de slo lectura. Los archivos permanecern disponibles en el sitio remoto para que otros miembros del equipo puedan protegerlos. Si est desactivada la opcin Permitir desproteger y proteger archivo y se obtiene un archivo, se transferir una copia de ste con privilegios de lectura y escritura.

Dreamweaver copia los archivos seleccionados en el panel activo del panel Sitio. Si estn activos los paneles Sitio remoto o Servidor de prueba, los archivos del servidor remoto o de prueba seleccionados se copian en el sitio local. Si est activo el panel de archivos locales, Dreamweaver copiar las versiones de los archivos locales del servidor remoto o de prueba en el sitio local. Para obtener ms informacin, consulte Obtencin de archivos de un servidor remoto o de prueba en la pgina 105.
Nota: Es posible obtener los archivos del servidor remoto y del servidor de prueba, pero slo se pueden proteger o desproteger los archivos remotos.

Colocar archivo(s) copia los archivos seleccionados del sitio local en el sitio remoto o el servidor de

prueba. Dreamweaver copia los archivos seleccionados en el panel activo del panel Sitio. Si est activo el panel Archivos locales, los archivos locales seleccionados se copian en el sitio remoto o en el servidor de prueba. Si estn activos los paneles Sitio remoto o Servidor de prueba, Dreamweaver copia las versiones locales de los archivos remotos o del servidor de prueba seleccionados en el sitio remoto. Para obtener ms informacin, consulte Colocacin de archivos en un servidor remoto o de prueba en la pgina 107.
Nota: Es posible colocar archivos en los servidores remoto y de prueba, pero la funcionalidad de desproteccin y proteccin slo puede utilizarse con los archivos remotos.

Si coloca un archivo que an no existe en el sitio remoto y est activada la opcin Permitir desproteger y proteger archivo, Dreamweaver aadir el archivo al sitio remoto como protegido. Haga clic en el botn Desproteger para aadir un archivo sin protegerlo.
Proteger archivo(s) transfiere

una copia del archivo desde el servidor remoto hasta el sitio local (sobrescribiendo la copia local del archivo, si existe) y marca el archivo como protegido en el servidor. Esta opcin no est disponible si est desactivada la opcin Permitir desproteger y proteger archivo para el sitio actual en el cuadro de dilogo Definicin del sitio. Para obtener ms informacin, consulte Desproteccin y proteccin de archivos en un sitio remoto en la pgina 103.

86

Captulo 4

Desproteger transfiere una copia del archivo local al servidor remoto y permite que otros usuarios la editen. El archivo local se convierte en archivo de slo lectura. Esta opcin no est disponible si est desactivada la opcin Permitir desproteger y proteger archivo para el sitio actual en el cuadro de dilogo Definicin del sitio. Para obtener ms informacin, consulte Desproteccin y proteccin de archivos en un sitio remoto en la pgina 103.

El botn Ampliar/contraer (slo Windows) ampla o contrae el panel Sitio para mostrar uno o dos paneles. Configuracin de las preferencias del sitio Es posible controlar las funciones de transferencia de archivos del panel Sitio mediante el cuadro de dilogo Preferencias.
Para editar las preferencias del panel Sitio:

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X). Aparece el cuadro de dilogo Preferencias. Seleccione Sitio en la lista de categoras que aparece en la parte izquierda. Aparecen las opciones de preferencias del sitio.

Realice los cambios apropiados en las opciones. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Administracin del sitio

87

Puede definir si los archivos se transfieren como archivos de tipo ASCII (texto) o binarios; para ello, debe personalizar el archivo FTPExtensionMap.txt en la carpeta Dreamweaver/ Configuration (en Macintosh, FTPExtensionMapMac.txt). Para obtener ms informacin, consulte Bienvenido a Dreamweaver en la pgina 27. Modificacin de las columnas de las vistas de archivos Es posible personalizar las columnas que aparecen en las listas Archivos locales y Sitio remoto del panel Sitio. Puede llevar a cabo cualquiera de las operaciones siguientes:

Cambiar el orden de las columnas Aadir nuevas columnas (hasta un mximo de 10) Eliminar columnas Ocultar columnas Designar columnas para compartirlas con todos los usuarios conectados a un sitio

Las columnas predeterminadas son Nombre, Notas, Tamao, Tipo, Modificado y Protegido por. Para ordenar por una columna, haga clic en el encabezado de la columna en el panel Sitio. Al hacer clic en una columna ms de una vez, se invierte el orden (ascendente o descendente) que utiliza Dreamweaver para ordenar la columna.
Nota: No es posible eliminar, cambiar el nombre o asociar una Design Note a una columna predeterminada. Puede cambiar el orden y el alineamiento de las columnas predeterminadas y ocultarlas, excepto la columna Nombre, que no puede ocultarse.

Para aadir, eliminar o cambiar columnas:

En el panel Sitio, realice una de las siguientes operaciones para acceder a las opciones de Columnas vista archivo: vista archivo (Macintosh).

Elija Ver > Columnas vista archivo (Windows) o Sitio > Ver archivos del sitio > Columnas

88

Captulo 4

 Elija Sitio > Editar sitios, seleccione un sitio y haga clic en Editar. A continuacin, seleccione
Columnas vista archivo en la lista de categoras que aparece en la parte izquierda del cuadro de dilogo Definicin del sitio. Aparece el cuadro de dilogo Definicin del sitio con las opciones de Columnas vista archivo.

Complete el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Tema relacionado

Cambio de la disposicin del panel Sitio en la pgina 90 Apertura y visualizacin de sitios en el panel Sitio Cuando el panel Sitio se contrae, muestra el contenido del sitio local, el sitio remoto o el servidor de prueba como una lista de archivos. Cuando dicho panel se ampla, muestra el sitio local y el sitio remoto o el servidor de prueba en una vista dividida. Cuando est ampliado, el panel Sitio puede mostrar tambin un mapa visual del sitio local.
Nota: Para ver un sitio remoto o un servidor de prueba, primero hay que configurar un sitio remoto o un servidor de prueba (consulte Configuracin de una carpeta remota en la pgina 77 o Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152). Para ver un mapa del sitio, es necesario configurar una pgina principal (consulte Utilizacin del mapa del sitio en la pgina 95).

Administracin del sitio

89

Para abrir un sitio Dreamweaver existente:

En el panel Sitio, seleccione un sitio en el men emergente Sitio (donde aparece el nombre del sitio actual).
Nota: Para definir un sitio Dreamweaver, consulte Configuracin de un sitio Dreamweaver en la pgina 74.

Para cambiar la vista actual del sitio mientras el panel Sitio est contrado (slo Windows):

En el panel Sitio, con el panel contrado, seleccione Vista local, Vista remota o Servidor de prueba en el men emergente donde aparece la vista actual.
Nota: Vista local aparece en el men emergente de forma predeterminada.

Para cambiar la vista del sitio mientras el panel Sitio est ampliado:

Con el panel Sitio ampliado, haga clic en el botn Archivos del sitio (para el sitio remoto), Servidor de prueba o Mapa del sitio en la barra de herramientas del panel Sitio.
Servidor de prueba

Mapa del sitio Archivos del sitio

Nota: Si utiliza el botn Mapa del sitio, puede elegir si desea incluir los archivos del sitio con el mapa del sitio o bien ver slo el mapa del sitio. Para obtener ms informacin, consulte Utilizacin del mapa del sitio en la pgina 95.

Cambio de la disposicin del panel Sitio Cuando el panel Sitio muestra una vista dividida, el sitio local aparece en el lado derecho de forma predeterminada. El sitio remoto, el servidor de prueba o el mapa del sitio aparecen en el lado izquierdo de forma predeterminada. Puede cambiar entre estas vistas.
Para cambiar la disposicin del panel Sitio:

1 2

(Slo Windows) En el panel Sitio, haga clic en el botn Ampliar/contraer para ampliar el panel si no se encuentra ampliado. Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X). Aparece el cuadro de dilogo Preferencias.

90

Captulo 4

Seleccione Sitio en la lista de categoras que aparece en la parte izquierda. Aparecen las opciones de preferencias del sitio.

4 5 6

Seleccione Archivos locales o Archivos remotos en el men emergente Mostrar siempre. Seleccione el lugar donde desea que aparezcan los archivos que se van a mostrar siempre: en el lado derecho o en el lado izquierdo del panel Sitio ampliado. Haga clic en Aceptar.

Para cambiar el tamao del rea de visualizacin:

En el panel Sitio ampliado, lleve a cabo una de estas operaciones:

Arrastre la barra que separa las dos vistas para aumentar o reducir el rea de visualizacin del
panel derecho o izquierdo.

Utilice las barras de desplazamiento situadas en la parte inferior del panel Sitio para desplazarse
por el contenido de las vistas.

En el mapa del sitio, arrastre la flecha situada encima de un archivo para cambiar el espacio
entre archivos.
Tema relacionado

Modificacin de las columnas de las vistas de archivos en la pgina 88

Administracin del sitio

91

Manipulacin de archivos en el panel Sitio Utilice el panel Sitio para ver los sitios como listas de archivos, abrir archivos, cambiar el nombre de los archivos, aadir nuevas carpetas o archivos a un sitio o actualizar la vista de un sitio despus de realizar cambios. El panel Sitio tambin permite determinar qu archivos (del sitio local o remoto) se han actualizado desde la ltima vez que se transfirieron. Para obtener informacin sobre la sincronizacin del sitio local con el remoto, consulte Sincronizacin de los archivos de los sitios local y remoto en la pgina 108.
Para abrir un archivo desde el panel Sitio, lleve a cabo una de estas operaciones:

Haga doble clic en el icono del archivo. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh)
en el icono del archivo y elija Abrir.

Elija Archivo > Abrir (Windows) o Sitio > Abrir (Macintosh).

Para aadir un nuevo archivo o carpeta a un sitio:

Seleccione un archivo o carpeta en el panel Sitio. Dreamweaver crear el archivo o carpeta dentro de la carpeta seleccionada, o en la misma carpeta que el archivo seleccionado.

Para una nueva carpeta, elija Archivo > Nueva carpeta en el panel Sitio (Windows) o Sitio > Ver archivos del sitio > Nueva carpeta (Macintosh). Para un nuevo archivo, elija Archivo > Nuevo archivo en el panel Sitio (Windows) o Sitio > Ver archivos del sitio > Nuevo archivo (Macintosh).
Nota: Tambin puede elegir Nuevo archivo o Nueva carpeta en el men contextual del panel Sitio.

3 4

Introduzca un nombre para el nuevo archivo o carpeta. Presione Intro (Windows) o Retorno (Macintosh).

Para cambiar el nombre de un archivo o una carpeta de un sitio:

1 2

En el panel Sitio, seleccione el archivo o carpeta cuyo nombre desee cambiar. Realice una de las siguientes operaciones para activar el nombre del archivo o carpeta:

Elija Archivo > Cambiar nombre (Windows) o Sitio > Cambiar nombre (Macintosh). Haga clic en el nombre del archivo, haga una pausa y vuelva a hacer clic en el nombre. Haga clic con el botn derecho (Windows) o presione Control y haga clic (Macintosh) en el
icono del archivo y elija Cambiar nombre.
3 4

Introduzca el nuevo nombre. Presione Intro (Windows) o Retorno (Macintosh).

Para actualizar el panel Sitio, lleve a cabo una de estas operaciones:

Elija Ver > Actualizar (Windows) o Sitio > Ver archivos del sitio > Actualizar (Macintosh). Haga clic en el botn Actualizar del panel Sitio (esta opcin actualiza los dos paneles).

92

Captulo 4

Nota: Dreamweaver actualiza de forma automtica el panel Sitio cuando se realizan cambios en otra aplicacin y luego se regresa a Dreamweaver.

Para localizar y seleccionar los archivos protegidos:

En el panel Sitio, elija Edicin > Seleccionar archivos protegidos (Windows) o Sitio > Ver archivos del sitio > Seleccionar archivos protegidos (Macintosh).
Para localizar y seleccionar archivos con versiones ms recientes en el sitio local que en el remoto:

En el panel Sitio, elija Editar > Seleccionar local ms reciente (Windows) o Sitio > Ver archivos del sitio > Seleccionar local ms reciente (Macintosh).
Para localizar y seleccionar archivos con versiones ms recientes en el sitio remoto que en el local:

En el panel Sitio, elija Editar > Seleccionar remoto ms reciente (Windows) o Sitio > Ver archivos del sitio > Seleccionar remoto ms reciente (Macintosh). Bsqueda de archivos en el panel Sitio Se pueden buscar archivos en los sitios locales y remotos desde el panel Sitio. Para obtener ms informacin sobre cmo buscar y reemplazar texto dentro de archivos, consulte Buscar y reemplazar texto en la pgina 322.
Para buscar un archivo en el sitio local:

1 2

Abra el archivo desde el sitio remoto o seleccinelo en la Vista remota del panel Sitio. Lleve a cabo una de estas operaciones:

Si ha abierto el archivo en la ventana de documento, elija Sitio > Localizar en sitio. Si ha seleccionado el archivo en el panel Sitio, haga clic con el botn derecho del ratn
(Windows) o mientras presiona Control (Macintosh) y seleccione Localizar en sitio local. Dreamweaver resalta el archivo en la Vista local del panel Sitio.
Para buscar un archivo en el sitio remoto:

1 2

Abra el archivo desde el sitio local o seleccinelo en la Vista local del panel Sitio. Lleve a cabo una de estas operaciones:

Si ha abierto el archivo en la ventana de documento, elija Sitio > Localizar en sitio. Si ha seleccionado el archivo en el panel Sitio, haga clic con el botn derecho del ratn
(Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Localizar en sitio remoto. Dreamweaver resalta el archivo en la Vista remota del panel Sitio.
Nota: Si selecciona Sitio > Localizar en sitio mientras la ventana de documento est activa y el archivo actual no forma parte del sitio abierto en este momento, Dreamweaver intentar determinar a cul de los sitios definidos localmente pertenece el archivo actual. Si pertenece a un solo sitio local, Dreamweaver abrir ese sitio y buscar el archivo dentro de l.

Administracin del sitio

93

Uso del explorador de archivos integrado El explorador de archivos integrado en el panel Sitio permite acceder al escritorio y a la red local, as como a otros sitios definidos y archivos no asociados a un sitio. Utilice el explorador de archivos integrado para realizar las siguientes operaciones con archivos que se encuentran fuera del sitio actual:

Arrastrar archivos Eliminar archivos Cambiar el nombre de los archivos Explorar la red Abrir archivos en Dreamweaver u otras aplicaciones Operaciones con el sitio, como transferencias de archivos

Nota: Estas operaciones se realizan siguiendo los mismos procedimientos utilizados para los archivos de un sitio definido (consulte El panel Sitio en la pgina 84). La mejor manera de administrar los archivos consiste en crear un sitio Dreamweaver (consulte Configuracin de un sitio Dreamweaver en la pgina 74).

Cuando se arrastra un archivo de un sitio a otro o a una carpeta no asociada a un sitio, Dreamweaver copia el archivo en la ubicacin donde se ha soltado. Si arrastra un archivo dentro del mismo sitio, Dreamweaver mover el archivo desde su ubicacin anterior hasta el lugar donde lo suelte. Si arrastra hasta un sitio un archivo no asociado a ningn sitio, Dreamweaver lo copiar en la ubicacin donde lo suelte. Si arrastra un archivo que no est asociado a un sitio a otra carpeta no asociada a ningn sitio, Dreamweaver mover el archivo a la ubicacin donde lo suelte.
Nota: Para mover un archivo que Dreamweaver copia de forma predeterminada, mantenga presionada la tecla Mays (Windows) o la tecla Comando (Macintosh) mientras lo arrastra. Para copiar un archivo que Dreamweaver mueve de forma predeterminada, mantenga presionada la tecla Control (Windows) o la tecla Opcin (Macintosh) mientras lo arrastra.

En el explorador de archivos, los archivos que pertenecen a un sitio aparecen en otro color para distinguirlos de los archivos no asociados a ningn sitio. Si intenta realizar una operacin de sitio con una carpeta o archivo que no est asociado a ningn sitio, Dreamweaver le indicar que debe definir un sitio Dreamweaver para poder efectuar la operacin.
Para utilizar el explorador de archivos integrado:

En el rbol del panel Sitio, haga clic en el signo ms (+) junto a Escritorio (Windows) o en la flecha de ampliacin junto a Equipo (Macintosh).

El mapa del sitio

Utilice el mapa del sitio para ver una carpeta local para un sitio Dreamweaver en forma de mapa visual de iconos vinculados, para aadir nuevos archivos a un sitio Dreamweaver o para aadir, modificar o quitar vnculos. El mapa del sitio resulta idneo para establecer la estructura de un sitio. Puede configurar rpidamente la estructura completa del sitio y, seguidamente, obtener una imagen grfica del mapa.
Nota: El mapa del sitio slo se aplica a los sitios locales. Para crear un mapa de un sitio remoto, copie el contenido del sitio remoto en una carpeta del disco local y utilice el comando Editar sitios para definir el sitio como un sitio local. Para obtener ms informacin, consulte Configuracin de una carpeta local en la pgina 75.

94

Captulo 4

Utilizacin del mapa del sitio Para poder ver el mapa del sitio debe definir una pgina principal. La pgina principal puede ser cualquier pgina del sitio. No es necesario que sea la pgina inicial. En este caso, la pgina principal del sitio es simplemente el punto de partida del mapa.
Para definir una pgina principal para el sitio:

Elija Sitio> Editar sitios. Aparece el cuadro de dilogo Editar sitios. Elija Editar para abrir un sitio existente. Aparece el cuadro de dilogo Definicin del sitio. Seleccione Disposicin del mapa del sitio en la lista de categoras de la izquierda. El cuadro de dilogo Definicin del sitio muestra las opciones de Disposicin del mapa del sitio.

4 5

Haga clic en el icono de carpeta para buscar una pgina principal para el sitio o escriba una ruta de archivo en el cuadro de texto Pgina principal. Haga clic en Aceptar.

Para ver un mapa del sitio:

1 2

(Slo Windows) En el panel Sitio, haga clic en el botn Ampliar/contraer para ampliar el panel Sitio si no se encuentra ampliado. Seleccione Ver> Mapa del sitio o haga clic en el botn Mapa del sitio y seleccione Slo mapa o Mapa y archivos. Seleccione Slo mapa para ver el mapa sin la estructura de archivos local o Mapa y archivos para verlo con la estructura de archivos.

Administracin del sitio

95

Nota: Si no ha definido ninguna pgina principal, o si Dreamweaver no encuentra ninguna pgina index.html o index.htm en el sitio actual para utilizarla como pgina principal, aparecer un cuadro de dilogo en el que se le pedir que seleccione una pgina principal haciendo clic en Editar sitios. Elija un sitio, haga clic en Editar y seleccione Disposicin del mapa del sitio en la lista de categoras situada en la parte izquierda del cuadro de dilogo Definicin del sitio.

El panel Sitio muestra un mapa del sitio local junto con la estructura de archivos local. Visualizacin del mapa del sitio El mapa del sitio muestra los archivos HTML y otras pginas como iconos. Los vnculos aparecen en el mismo orden en el que se encuentran en el cdigo HTML, tal como se describe a continuacin:

El texto en rojo indica que se trata de un vnculo roto. El texto en azul y marcado con un icono de globo terrqueo indica que se trata de un archivo
de otro sitio o un vnculo especial (como un vnculo de correo electrnico o de script).

Una marca de verificacin verde indica que se trata de un archivo protegido por usted. Una marca de verificacin roja indica que se trata de un archivo protegido por otro usuario. Un icono de candado indica que se trata de un archivo de slo lectura (Windows) o bloqueado
(Macintosh). De forma predeterminada, el mapa del sitio muestra dos niveles de la estructura del sitio comenzando por la pgina principal actual. Haga clic en los signos ms (+) y menos (-) situados junto a una pgina para mostrar u ocultar las pginas vinculadas por debajo del segundo nivel.

De forma predeterminada, el mapa del sitio no muestra los archivos ocultos y dependientes. Los archivos ocultos son archivos HTML marcados como ocultos. Los archivos dependientes son contenido de pginas no HTML, como imgenes, plantillas y archivos Macromedia Shockwave y Macromedia Flash. Para obtener ms informacin, consulte Cmo mostrar y ocultar archivos de mapa de un sitio en la pgina 99. Modificacin de la disposicin del mapa del sitio Utilice las opciones de Disposicin del mapa del sitio para personalizar la apariencia del mapa del sitio. Puede especificar la pgina principal, el nmero de columnas mostradas, si las etiquetas de los iconos deben mostrar el nombre del archivo o el ttulo de pgina y si deben mostrarse los archivos ocultos y dependientes.

96

Captulo 4

Para modificar la disposicin del mapa del sitio:

Realice una de las siguientes operaciones para abrir el cuadro de dilogo Definicin del sitio: lista Categora situada a la izquierda.

Elija Sitio > Editar sitios y haga clic en Editar. Seleccione Disposicin del mapa del sitio en la En el panel Sitio, elija Sitio > Disposicin (Windows) o Sitio > Ver mapa del sitio > Vincular a
nuevo archivo (Macintosh). El cuadro de dilogo Definicin del sitio muestra las opciones de Disposicin del mapa del sitio.

Realice los cambios apropiados. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar para cerrar el cuadro de dilogo Definicin del sitio. Haga clic en Listo para cerrar el cuadro de dilogo Editar sitios, si se encuentra abierto.

3 4

Manipulacin de pginas en el mapa del sitio Al trabajar en el mapa del sitio, puede seleccionar pginas, abrir una pgina para editarla, aadir nuevas pginas al sitio, crear vnculos entre archivos y cambiar ttulos de pgina.
Para seleccionar varias pginas en el mapa del sitio, lleve a cabo una de estas operaciones:

Haga clic mientras presiona la tecla Mays para seleccionar un rango de pginas contiguas. Comenzando desde un lugar vaco de la vista, arrastre el puntero alrededor de un grupo de
archivos para seleccionarlos.

Haga clic mientras presiona la tecla Control (Windows) o Comando (Macintosh) para
seleccionar pginas que no son contiguas.

Administracin del sitio

97

Para abrir una pgina en el mapa del sitio para su edicin, lleve a cabo una de estas operaciones:

Haga doble clic en el archivo. Seleccione el archivo y elija Archivo > Abrir (Windows) o Sitio > Abrir (Macintosh).
Para aadir un archivo existente al sitio, lleve a cabo una de las siguientes operaciones:

Arrastre un archivo desde el Explorador de Windows o el Finder de Macintosh y colquelo

sobre un archivo en el mapa del sitio. La pgina se aade al sitio y se crea un vnculo entre ella y el archivo sobre el cual la ha colocado.

Seleccione Sitio > Vincular a archivo existente (Windows) o Sitio > Ver mapa del sitio >
Vincular a archivo existente (Macintosh) y localice el archivo.
Para crear un nuevo archivo y aadir un vnculo al mapa del sitio:

Seleccione un archivo HTML en el mapa del sitio y lleve a cabo una de estas operaciones: nuevo archivo (Macintosh).

Elija Sitio > Vincular a nuevo archivo (Windows) o Sitio > Ver mapa del sitio > Vincular a Elija Vincular a nuevo archivo en el men contextual.
Aparece el cuadro de dilogo Vincular a nuevo archivo.

2 3

Introduzca un nombre, un ttulo y texto para el vnculo. Haga clic en Aceptar. Dreamweaver guarda el archivo en la misma carpeta que el archivo seleccionado. Si aade un archivo a una rama oculta, el nuevo archivo tambin se oculta (consulte Cmo mostrar y ocultar archivos de mapa de un sitio en la pgina 99).

Para modificar el ttulo de una pgina en el mapa del sitio:

Para asegurarse de que la opcin Mostrar ttulos de pginas se encuentra seleccionada, elija Ver > Mostrar ttulos de pginas (Windows) o Sitio > Ver mapa del sitio > Mostrar ttulos de pginas (Macintosh) en el panel Sitio. Seleccione una pgina y lleve a cabo una de estas operaciones:

Haga clic en el ttulo. Cuando se pueda editar el ttulo, introduzca el que desee. Elija Archivo > Cambiar nombre (Windows) o Sitio > Cambiar nombre (Macintosh).
3

Presione Intro (Windows) o Retorno (Macintosh) despus de introducir el nuevo nombre.

Nota: Al trabajar en el panel Sitio, Dreamweaver actualiza automticamente todos los vnculos con archivos cuyos nombres han cambiado.

98

Captulo 4

Para cambiar la pgina principal en el mapa del sitio, lleve a cabo una de estas operaciones:

En la Vista local del panel Sitio, seleccione un archivo y haga clic con el botn derecho
(Windows) o mientras presiona la tecla Control (Macintosh), y elija Establecer como pgina principal.

En la Vista local del panel Sitio, haga clic en el archivo que desea convertir en la nueva pgina
principal y elija Sitio > Establecer como pgina principal (Windows) o Sitio > Ver mapa del sitio > Establecer como pgina principal (Macintosh).

Seleccione un archivo en el mapa del sitio y elija Sitio > Nueva pgina principal (Windows) o
Sitio >Ver mapa del sitio > Nueva pgina principal (Macintosh).

Elija Sitio > Editar sitios y haga clic en Editar. Seleccione Disposicin del mapa del sitio en la
lista de categoras del cuadro de dilogo Definicin del sitio. Localice una nueva pgina principal y haga clic en Aceptar.
Para actualizar la visualizacin del mapa del sitio despus de realizar cambios:

1 2

Haga clic en cualquier lugar del mapa del sitio para anular la seleccin de archivos. Elija Ver > Actualizar (Windows) o Sitio > Ver mapa del sitio > Actualizar local (Macintosh).

Cmo mostrar y ocultar archivos de mapa de un sitio Puede modificar la disposicin del mapa del sitio para mostrar u ocultar los archivos ocultos y dependientes. Esto le ser de utilidad cuando desee destacar temas o contenido clave y relegar a segundo plano otros materiales menos importantes. Para ocultar un archivo utilizando el mapa del sitio, primero deber marcar el archivo como oculto. Cuando se oculta un archivo, tambin se ocultan sus vnculos. Al mostrar un archivo marcado como oculto, el icono y sus vnculos se encontrarn visibles en el mapa del sitio, aunque los nombres aparecern en cursiva.
Nota: De forma predeterminada, los archivos dependientes estn ocultos.

Para marcar archivos como ocultos en el mapa del sitio:

1 2

En el mapa del sitio, seleccione uno o varios archivos. Elija Ver > Mostrar/ocultar vnculo (Windows) o Sitio > Ver mapa del sitio > Mostrar/ocultar vnculo (Macintosh).

Para mostrar u ocultar archivos marcados como ocultos en el mapa del sitio, lleve a cabo una de las siguientes operaciones:

Elija Ver > Mostrar archivos marcados como ocultos (Windows) o Sitio > Ver mapa del sitio >
Mostrar archivos marcados como ocultos (Macintosh).

Elija Ver > Disposicin (Windows) o Sitio > Ver mapa del sitio > Disposicin (Macintosh)
para abrir el cuadro de dilogo Definicin del sitio y active la opcin Mostrar archivos marcados como ocultos.

Administracin del sitio

99

Para mostrar los archivos dependientes en el mapa del sitio, lleve a cabo una de las siguientes operaciones:

Elija Ver > Mostrar archivos dependientes (Windows) o Sitio > Ver mapa del sitio > Mostrar
archivos dependientes (Macintosh).

Elija Ver > Disposicin (Windows) o Sitio > Ver mapa del sitio > Disposicin (Macintosh)
para abrir el cuadro de dilogo Definicin del sitio y active la opcin Mostrar archivos dependientes.
Para eliminar la marca de los archivos marcados como ocultos en el mapa del sitio:

1 2 3

En el mapa del sitio, seleccione uno o varios archivos. Elija Ver > Mostrar archivos marcados como ocultos (Windows) o Sitio > Ver mapa del sitio > Mostrar archivos marcados como ocultos (Macintosh). Elija Ver > Mostrar/ocultar vnculo (Windows) o Sitio > Ver mapa del sitio > Mostrar/ocultar vnculo (Macintosh).

Visualizacin del sitio desde una rama Puede ver los detalles de una seccin especfica de un sitio convirtiendo una rama en el centro del mapa del sitio.
Para ver otra rama en el mapa del sitio:

Seleccione la pgina que desea ver y elija Ver > Ver como raz (Windows) o Sitio > Ver mapa del sitio > Ver como raz (Macintosh). El mapa del sitio se vuelve a trazar en la ventana como si la pgina especificada fuera la raz del sitio. El cuadro de texto Exploracin del sitio, situado encima del mapa del sitio, muestra la ruta desde la pgina principal hasta la pgina especificada. Para seleccionar cualquier elemento de la ruta para ver el mapa del sitio desde dicho nivel, haga clic una vez.
Para ampliar y contraer ramas en el mapa del sitio:

Haga clic en el signo ms (+) o menos () de la rama. Almacenamiento del mapa del sitio Puede guardar el mapa del sitio con formato de imagen para verlo (o imprimirlo) desde un editor de imgenes.
Para crear un archivo de imagen basado en el mapa del sitio actual:

En el mapa del sitio, lleve a cabo una de estas operaciones: del sitio, introduzca un nombre en el cuadro de texto Archivo. En el men emergente Tipo de archivo, seleccione .bmp o .png.

En Windows, elija Archivo > Guardar mapa del sitio. En el cuadro de dilogo Guardar mapa En Macintosh, seleccione Sitio > Ver mapa del sitio > Guardar mapa del sitio > Guardar mapa
del sitio como PICT o Sitio > Ver mapa del sitio > Guardar mapa del sitio > Guardar mapa del sitio como JPEG.
2 3

Elija la ubicacin donde desea guardar el archivo e introduzca un nombre para la imagen. Haga clic en Guardar.

100 Captulo 4

Importacin y exportacin de sitios

Con Dreamweaver, puede exportar un sitio como archivo XML y luego volver a importarlo a Dreamweaver. As, podr mover sitios entre sistemas y versiones diferentes del producto y compartirlos con otros usuarios.
Para exportar un sitio:

Elija Sitio> Editar sitios. Aparece el cuadro de dilogo Editar sitios. Haga clic en el botn Exportar. Aparece el panel Exportar sitio. Localice la ubicacin donde desea guardar el sitio. Haga clic en Guardar. Dreamweaver guarda el sitio como un archivo XML en la ubicacin especificada, con la extensin STE.

3 4

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

Para importar un sitio:

Elija Sitio> Editar sitios. Aparece el cuadro de dilogo Editar sitios. Haga clic en el botn Importar. Aparece el panel Importar sitio. Localice y seleccione un sitio (guardado como archivo XML) para su importacin.
Nota: Es necesario exportar el sitio desde Dreamweaver, con lo que se guarda como archivo XML, para poder volver a importarlo.

Haga clic en Abrir. Dreamweaver importa el sitio y el nombre del mismo aparece en el cuadro de dilogo Editar sitios.

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

Eliminacin de un sitio de la lista de sitios

Si no desea seguir trabajando con un sitio en Dreamweaver, puede quitarlo de la lista de sitios. Los archivos no desaparecen del sitio.
Nota: Cuando se quita un sitio de la lista, toda su informacin de configuracin se pierde de forma permanente.

Para quitar un sitio de la lista de sitios:

Elija Sitio > Editar sitios. Aparece el cuadro de dilogo Editar sitios. Seleccione el nombre de un sitio.

Administracin del sitio

101

Haga clic en Quitar. Aparece un cuadro de dilogo pidiendo confirmacin. Haga clic en S para quitar el sitio de la lista o en No para dejar su nombre en la lista. Haga clic en Listo para cerrar el cuadro de dilogo Editar sitios.

4 5

Utilizacin de desproteger/proteger
Si trabaja en un entorno de colaboracin, puede desproteger y proteger archivos en los servidores local y remoto. Si es usted la nica persona que trabaja en el servidor remoto, puede utilizar los comandos Obtener y Colocar para transferir los archivos sin desprotegerlos ni protegerlos (consulte Obtencin y colocacin de archivos en la pgina 105). Proteger un archivo equivale a decir: Estoy trabajando con este archivo. No lo toquen! Cuando un archivo se encuentra protegido, Dreamweaver muestra el nombre del usuario que lo ha protegido en el panel Sitio junto al icono del archivo, adems de una marca de verificacin roja (si un miembro del equipo ha protegido el archivo) o verde (si usted ha protegido el archivo). Al desproteger un archivo, ste queda a disposicin de otros miembros del equipo, que podrn protegerlo y editarlo. Al desproteger un archivo despus de editarlo, la versin local se convierte en archivo de slo lectura y aparece un smbolo de candado junto al archivo en el panel Sitio para evitar que realice cambios en l. Dreamweaver no convierte los archivos protegidos en archivos de slo lectura en el servidor remoto. Si transfiere archivos con una aplicacin distinta de Dreamweaver, es posible que se sobrescriban los archivos protegidos. Sin embargo, en aplicaciones distintas de Dreamweaver, el archivo .LCK figura al lado del archivo protegido en la jerarqua de archivos para ayudar a evitar errores de ese tipo. Para activar o desactivar la opcin Desproteger/proteger para algunos sitios, consulte Configuracin del sistema de desproteccin/proteccin en la pgina 102. Para obtener informacin sobre la transferencia de archivos entre sitios locales y remotos sin desprotegerlos ni protegerlos, consulte Obtencin de archivos de un servidor remoto o de prueba en la pgina 105 y Colocacin de archivos en un servidor remoto o de prueba en la pgina 107.
Nota: Las funciones Obtener y Colocar pueden utilizarse con un servidor de prueba, a diferencia del sistema de desproteccin/proteccin.

Configuracin del sistema de desproteccin/proteccin Antes de utilizar el sistema de desproteccin/proteccin, deber asociar el sitio local a un servidor remoto (consulte Configuracin de una carpeta remota en la pgina 77).
Para configurar el sistema de desproteccin/proteccin:

Elija Sitio> Editar sitios. Aparece el cuadro de dilogo Editar sitios. Seleccione un sitio y haga clic en Editar. Aparece el cuadro de dilogo Definicin del sitio.

102 Captulo 4

En la lista Categora de la izquierda, haga clic en Datos remotos. El cuadro de dilogo Definicin del sitio muestra las opciones de Datos remotos. La seccin Desproteger/proteger aparece en la parte inferior del cuadro de dilogo.

Nota: Si no aparecen las opciones de Desproteger/proteger, no ha configurado el servidor remoto (consulte Configuracin de una carpeta remota en la pgina 77).

Complete la seccin Desproteger/proteger. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Desproteccin y proteccin de archivos en un sitio remoto Utilice el panel Sitio o la ventana de documento para desproteger y proteger archivos en un servidor remoto. El sistema de desproteccin/proteccin de Dreamweaver utiliza los siguientes smbolos en el panel Sitio:

Una marca de verificacin verde indica que usted ha protegido el archivo. Una marca de verificacin roja indica que otro miembro del equipo ha protegido el archivo. Un smbolo de candado indica que un archivo es de slo lectura (Windows) o est bloqueado
(Macintosh).

Administracin del sitio 103

Si protege un archivo y luego decide no editarlo (o decide descartar los cambios realizados), puede anular la proteccin.
Para proteger archivos en un servidor remoto desde el panel Sitio:

1 2

Elija un sitio en el men emergente Sitio. Seleccione los archivos que desee proteger.
Nota: Es posible seleccionar archivos en la Vista local o en la Vista remota.

Realice una de las siguientes operaciones para proteger los archivos:

Haga clic en el botn Proteger de la barra de herramientas del panel Sitio. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y
elija Proteger en el men contextual.
4

Haga clic en S cuando el sistema pregunte si desea descargar los archivos dependientes junto con los archivos seleccionados, o en No si prefiere no descargar dichos archivos.
Nota: Suele resultar conveniente descargar archivos dependientes cuando se protege un archivo nuevo, pero si las ltimas versiones de los archivos dependientes ya se encuentran en el disco local no hay necesidad de volver a descargarlos.

Aparece una marca de verificacin verde junto al icono del archivo para indicar que lo ha protegido usted.
Para desproteger archivos en un servidor remoto desde el panel Sitio:

1 2

Elija un sitio en el men emergente Sitio. Seleccione archivos protegidos o nuevos.

Nota: Es posible seleccionar archivos en la Vista local o en la Vista remota.

Realice una de las siguientes operaciones para desproteger los archivos:

Haga clic en el botn Desproteger de la barra de herramientas del panel Sitio. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y
elija Desproteger en el men contextual.
4

Haga clic en S cuando el sistema pregunte si desea descargar los archivos dependientes junto con los archivos seleccionados, o en No si prefiere no descargar dichos archivos.
Nota: Suele resultar conveniente cargar archivos dependientes cuando se desprotege un archivo nuevo, pero si las ltimas versiones de los archivos dependientes ya se encuentran en el servidor remoto no hay necesidad de volver a cargarlos.

Aparece un smbolo de candado junto al icono del archivo para indicar que ahora es de slo lectura.
Para desproteger o proteger un archivo abierto desde la ventana de documento, realice una de las siguientes operaciones:

Elija Sitio > Desproteger o Sitio > Proteger. Haga clic en el icono Administracin de archivos en la barra de herramientas de la ventana de
documento y, a continuacin, elija Desproteger o Proteger en el men emergente.

104 Captulo 4

Nota: Si selecciona Sitio > Desproteger o Sitio > Proteger y el archivo actual no forma parte del sitio que se encuentra abierto, Dreamweaver intentar determinar a qu sitio definido localmente pertenece el archivo actual. Si el archivo actual pertenece a un solo sitio local, Dreamweaver abre ese sitio y realiza la operacin de desproteccin o proteccin.

Si protege el archivo activo, la nueva versin protegida sobrescribir la versin del archivo abierta actualmente. Si desprotege el archivo activo, es posible que ste se guarde automticamente antes de desprotegerse. Depender de las opciones que haya configurado (consulte Configuracin de las preferencias del sitio en la pgina 87).
Para deshacer la proteccin de un archivo:

1 2

Seleccione el archivo. Realice una de las siguientes operaciones para anular la proteccin:

Elija Sitio > Deshacer proteger. En el panel Sitio, haga clic con el botn derecho (Windows) o mientras presiona la tecla
Control (Macintosh) en el archivo y elija Deshacer proteger en el men contextual. La copia local del archivo se convertir en copia de slo lectura y se perdern los cambios realizados.

Obtencin y colocacin de archivos

Si trabaja en colaboracin con otros usuarios, utilice el sistema de desproteccin/proteccin para transferir archivos entre los sitios local y remoto (consulte Utilizacin de desproteger/proteger en la pgina 102). Sin embargo, si es la nica persona que trabaja en el sitio remoto, puede utilizar los comandos Obtener y Colocar para transferir los archivos sin desprotegerlos ni protegerlos.
Nota: Si selecciona Sitio > Obtener o Sitio > Colocar mientras la ventana de documento est activa y el archivo actual no forma parte del sitio abierto actualmente, Dreamweaver intentar determinar a cul de los sitios definidos localmente pertenece el archivo actual. Si pertenece a un solo sitio local, Dreamweaver abrir ese sitio y realizar la operacin de Obtener o Colocar.

Obtencin de archivos de un servidor remoto o de prueba El comando Obtener copia archivos desde el sitio remoto o el servidor de prueba en el sitio local, tal y como se describe a continuacin:

Si utiliza el sistema de desproteccin/proteccin (es decir, si est activada la opcin Permitir

desproteger y proteger archivo), la obtencin de un archivo generar una copia local del archivo de slo lectura; el archivo permanecer disponible en el sitio remoto o en el servidor de prueba para que otros miembros del equipo puedan protegerlo (consulte Utilizacin de desproteger/proteger en la pgina 102).

Si no utiliza el sistema de desproteccin/proteccin (es decir, si la opcin Permitir desproteger

y proteger archivo no est seleccionada), al obtener un archivo se transfiere una copia con privilegios de lectura y escritura.
Nota: Si trabaja en colaboracin con otros usuarios en los mismos archivos, no es recomendable desactivar la opcin Permitir desproteger y proteger archivo. Si otros usuarios utilizan el sistema de desproteccin/ proteccin con el sitio, usted tambin debe emplear ese sistema.

Para obtener archivos, puede seleccionarlos en la Vista local o en la Vista remota del panel Sitio. Si est activa la Vista remota, Dreamweaver copia los archivos remotos seleccionados en el sitio local. Si, por el contrario, se encuentra activa la Vista local, Dreamweaver copia las versiones remotas de los archivos locales seleccionados en el sitio local.

Administracin del sitio 105

Para obtener slo aquellos archivos cuya versin remota sea ms reciente que la versin local, utilice el comando Sincronizar (consulte Sincronizacin de los archivos de los sitios local y remoto en la pgina 108). Dreamweaver registra toda la actividad de transferencia de archivos mediante FTP. Si se produce un error mientras transfiere un archivo con FTP, el registro de FTP del sitio podr ayudarle a determinar el problema.
Para mostrar el registro FTP:

Seleccione Ver > Registro FTP del sitio.

Para obtener archivos de un servidor remoto o de prueba:

1 2

En el panel Sitio, elija un sitio en el men emergente Sitio. Si utiliza FTP para transferir archivos, haga clic en el botn Conectar para abrir una conexin con el servidor remoto. Si ya hay una conexin abierta (en cuyo caso estara presente el botn Desconectar), omita este paso. Si los archivos remotos estn visibles en el panel Remoto desde una conexin anterior, no es necesario hacer clic en Conectar. Cuando haga clic en Obtener, Dreamweaver conectar automticamente.

Seleccione los archivos que desea descargar. Generalmente estos archivos se seleccionan en la Vista remota o en Servidor de prueba, pero puede seleccionar los archivos correspondientes en la Vista local si lo prefiere.

Realice una de las siguientes operaciones para obtener el archivo:

Haga clic en el botn Obtener en la barra de herramientas del panel Sitio. Elija Obtener en el men contextual. Elija Sitio > Obtener.
Nota: Si el archivo est abierto en una ventana de documento, tambin puede elegir Sitio > Obtener en la ventana de documento.

Aparece un cuadro de dilogo que pregunta si desea obtener los archivos dependientes.
5

Para descargar archivos dependientes, haga clic en S. Para omitirlos, haga clic en No. Si ya dispone de copias locales de los archivos dependientes, haga clic en No.

Para interrumpir la transferencia de archivos en cualquier momento, haga clic en el botn Cancelar del cuadro de dilogo de estado. Es posible que la transferencia no se detenga inmediatamente.

106 Captulo 4

Colocacin de archivos en un servidor remoto o de prueba El comando Colocar copia archivos desde el sitio local hasta el sitio remoto, generalmente sin cambiar su estado de proteccin. Hay dos situaciones frecuentes en las que se podra utilizar Colocar en lugar de Desproteger:

Emplee Colocar si no trabaja en un entorno de colaboracin y no est utilizando el sistema de

desproteccin/proteccin.
Nota: Si desea colocar un archivo en un servidor remoto y desprotegerlo, utilice el comando Desproteger (consulte Desproteccin y proteccin de archivos en un sitio remoto en la pgina 103).

Utilice Colocar si desea colocar la versin actual del archivo en el servidor, pero va a seguir
editndola.
Nota: Si coloca un archivo que anteriormente no estaba presente en el sitio remoto y utiliza el sistema de desproteccin/proteccin, el archivo se copiar en el sitio remoto y, a continuacin, quedar protegido para que pueda seguir editndolo.

Para colocar slo aquellos archivos cuya versin local sea ms reciente que la versin remota, consulte Sincronizacin de los archivos de los sitios local y remoto en la pgina 108.
Nota: No utilice caracteres especiales (como , o ) ni signos de puntuacin (como dos puntos, barras o puntos) en los nombres de los archivos que tiene previsto colocar en un servidor remoto o de prueba. Muchos servidores convierten estos caracteres durante el proceso de transferencia, lo que rompe los vnculos con los archivos.

Para colocar archivos en un servidor remoto o de prueba:

1 2

En el panel Sitio, elija un sitio en el men emergente Sitio. Si utiliza FTP para transferir archivos, puede hacer clic en Conectar para abrir una conexin con el servidor remoto, lo cual permite ver lo que hay en el sitio remoto antes de realizar la transferencia. Sin embargo, no es necesario hacer clic en Conectar, ya que al seleccionar la opcin Colocar, Dreamweaver establece la conexin de forma automtica.

Seleccione los archivos que desea cargar. Generalmente se seleccionan en la Vista local, pero puede seleccionar los archivos correspondientes en la Vista remota si lo prefiere.

Realice una de las siguientes operaciones para colocar el archivo:

Haga clic en el botn Colocar en la barra de herramientas del panel Sitio. Elija Colocar en el men contextual. Elija Sitio > Colocar.
Si el archivo est abierto en una ventana de documento, puede elegir Sitio > Colocar en la ventana de documento.

Administracin del sitio 107

Si el archivo no se ha guardado, aparece un cuadro de dilogo (siempre que haya establecido esta opcin en el panel Sitio del cuadro de dilogo Preferencias), lo cual le permite guardar el archivo antes de colocarlo en el servidor remoto. Para guardar el archivo, haga clic en S. Para colocar la versin guardada anteriormente en el servidor remoto, haga clic en No. Si decide no guardar el archivo, los cambios que haya realizado desde la ltima vez que lo guard no se incluirn en el servidor remoto. Sin embargo, si el archivo permanece abierto, podr guardar los cambios despus de colocar el archivo en el servidor si lo desea. Aparece un cuadro de dilogo preguntando si desea colocar los archivos dependientes.

Para cargar archivos dependientes, haga clic en S. Para omitirlos, haga clic en No. Si el sitio remoto ya contiene copias de los archivos dependientes, haga clic en No. Si prefiere que el programa no le pregunte por los archivos dependientes en futuras transferencias, seleccione la opcin No volver a preguntar.

Para interrumpir la transferencia de archivos, haga clic en el botn Cancelar del cuadro de dilogo de estado. Es posible que la transferencia no se detenga inmediatamente. Dreamweaver registra toda la actividad de transferencia de archivos mediante FTP. Si se produce un error mientras transfiere un archivo con FTP, el registro de FTP del sitio podr ayudarle a determinar el problema. Para ver el registro, seleccione Ver > Registro FTP del sitio.

Sincronizacin de los archivos de los sitios local y remoto

Despus de crear archivos en los sitios local y remoto, puede llevar a cabo su sincronizacin entre ambos emplazamientos. Utilice el comando Sitio > Sincronizar para transferir las versiones ms recientes de los archivos desde y hacia el sitio remoto. Si el sitio remoto es un servidor FTP (en lugar de un servidor de red), utilice FTP para sincronizar los archivos. Si desea ms informacin sobre el uso de FTP, consulte Configuracin de una carpeta remota en la pgina 77. Antes de sincronizar los sitios, Dreamweaver le permite verificar qu archivos desea colocar en el servidor remoto u obtener del mismo. Dreamweaver tambin confirma qu archivos se han actualizado despus de completar la sincronizacin.
Para averiguar cules son los archivos con fecha ms reciente en el sitio local o remoto sin sincronizar, realice una de las siguientes operaciones:

Elija Editar > Seleccionar local ms reciente o Editar > Seleccionar remoto ms reciente
(Windows, desde el panel Sitio).

Elija Sitio > Ver archivos del sitio > Seleccionar local ms reciente o Sitio > Ver archivos del
sitio > Seleccionar remoto ms reciente (Macintosh).
Para sincronizar los archivos:

1 2

En el panel Sitio, elija un sitio en el men emergente de sitios actuales. Seleccione archivos o carpetas especficos. Si desea sincronizar el sitio completo, omita este paso. En el panel Sitio, lleve a cabo una de estas operaciones:

Elija Sitio > Sincronizar.

108 Captulo 4

 Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y
seleccione Sincronizar en el men contextual. Aparece el cuadro de dilogo Sincronizar archivos.

Complete el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Dreamweaver sincroniza los archivos de forma automtica. Si los archivos ya estn sincronizados, Dreamweaver le comunica que no es necesario realizar la sincronizacin.

Cmo ocultar carpetas y archivos en el sitio

La posibilidad de ocultar elementos de un sitio permite excluir carpetas y tipos de archivos al realizar operaciones como Obtener o Colocar. Es posible ocultar carpetas individuales, pero no archivos individuales. Para ocultar archivos, deber seleccionar un tipo de archivo. Dreamweaver ocultar todos los archivos de ese tipo y recordar los valores de cada sitio, de forma que el usuario no tendr que realizar selecciones cada vez que trabaje con ese sitio. Por ejemplo, si est trabajando en un sitio grande y no quiere cargar los archivos multimedia todos los das, puede utilizar esta funcin para ocultar la carpeta multimedia de forma que el sistema excluya los archivos de dicha carpeta de las operaciones realizadas en el sitio. Es posible ocultar carpetas y tipos de archivos en el sitio remoto o en el sitio local. Se pueden ocultar carpetas y archivos para excluirlos de las siguientes operaciones:

Colocar, Obtener, Desproteger y Proteger Informes Seleccionar local ms reciente y Seleccionar remoto ms reciente Operaciones que afectan al sitio completo, como Comprobar vnculos, Cambiar vnculo y Buscar y reemplazar

Sincronizar El contenido del panel Activos Las actualizaciones de plantillas y bibliotecas

Nota: Dreamweaver slo excluye las plantillas y los elementos de biblioteca ocultos de las operaciones Obtener y Colocar. Dreamweaver no excluye dichos elementos de las operaciones por lotes, puesto que podra provocar fallos de sincronizacin con sus copias.

Para realizar una operacin con una carpeta oculta determinada, puede seleccionar el elemento en el panel Sitio y efectuar la operacin. Al realizar una operacin directamente con un archivo o carpeta, se anula la ocultacin.

Administracin del sitio 109

Activacin y desactivacin de la ocultacin en el sitio La ocultacin est activada de forma predeterminada en el sitio. Es posible desactivar la ocultacin de archivos de forma permanente o provisional, para poder realizar operaciones con todos los archivos, incluidos los ocultos. Al desactivar la ocultacin del sitio, se muestran todos los archivos. Al volver a activar la ocultacin, todos los archivos que estaban ocultos anteriormente vuelven a ocultarse.
Nota: Tambin puede utilizar la opcin Anular ocultacin de todo, para anular la ocultacin de todos los archivos, pero esta opcin no desactiva la funcin de ocultacin. Adems, no existe ninguna manera de volver a ocultar todas las carpetas y archivos que estaban ocultos anteriormente, salvo activando de nuevo esta opcin para cada carpeta y tipo de archivo.

Para activar o desactivar la ocultacin del sitio:

1 2

En el panel Sitio, seleccione un sitio en el men emergente Sitio. En el panel Sitio, lleve a cabo una de estas operaciones:

Elija Sitio > Ocultacin para mostrar el submen. Seleccione una carpeta o archivo y haga clic con el botn derecho del ratn (Windows) o
mientras presiona la tecla Control (Macintosh) para acceder al men contextual.
3

En el submen, lleve a cabo una de estas operaciones:

Seleccione Activar/desactivar ocultacin. Seleccione Configuracin. A continuacin, en la ficha Avanzadas del cuadro de dilogo
Definicin del sitio, elija Ocultacin en la lista de categoras de la izquierda, seleccione o anule la seleccin de Activar ocultacin y haga clic en Aceptar. La ocultacin se activa o se desactiva para el sitio. Cmo ocultar y anular la ocultacin de las carpetas del sitio Puede ocultar carpetas especficas, pero no es posible ocultar todas las carpetas ni el sitio entero. Se pueden ocultar varias carpetas concretas de forma simultnea.
Para ocultar o anular la ocultacin de carpetas especficas dentro de un sitio:

1 2 3

En el panel Sitio, seleccione en el men emergente Sitio un sitio que tenga activada la funcin de ocultacin. Seleccione las carpetas que desee ocultar, o cuya ocultacin desee anular. En el panel Sitio, lleve a cabo una de estas operaciones:

Elija Sitio > Ocultacin > Ocultar o Sitio > Ocultacin > Anular ocultacin. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y
elija Ocultacin > Ocultar u Ocultacin > Anular ocultacin en el men contextual. Aparece o desaparece una lnea roja que atraviesa el icono de la carpeta, lo cual indica si la carpeta se encuentra oculta o no.

110

Captulo 4

Cmo ocultar y anular la ocultacin de tipos de archivo especficos Es posible indicar tipos de archivo especficos para su ocultacin, para que Dreamweaver oculte todos los archivos que tengan una determinada terminacin. Por ejemplo, puede ocultar todos los archivos que terminen con la extensin .txt. Los tipos de archivo introducidos no tienen por qu ser extensiones de archivo; pueden ser cualquier terminacin de un nombre de archivo.
Para ocultar tipos de archivo especficos dentro de un sitio:

1 2

En el panel Sitio, seleccione en el men emergente Sitio un sitio que tenga activada la funcin de ocultacin. Lleve a cabo una de estas operaciones:

Elija Sitio > Ocultacin > Configuracin. Haga clic con el botn derecho del ratn (Windows) o mientras presiona la tecla Control
(Macintosh) y seleccione Configuracin. Aparece la ficha Avanzadas del cuadro de dilogo Definicin del sitio.

3 4

Active la casilla de verificacin Ocultar archivos que terminen en. En el cuadro de texto, introduzca los tipos de archivo que desee ocultar. Por ejemplo, podra introducir .jpg para ocultar todos los archivos del sitio que terminen en .jpg.

Administracin del sitio

111

Nota: Separe los distintos tipos de archivo con un espacio. No utilice comas si signos de punto y coma.

Haga clic en Aceptar.

Los nombres de los archivos afectados aparecen tachados con una lnea roja, que indica que se encuentran ocultos.
Sugerencia: Algunos productos de software crean archivos de copia de seguridad que terminan con un sufijo determinado, como .bak. Es posible ocultar los archivos de este tipo.

Para anular la ocultacin de determinados tipos de archivos dentro de un sitio:

1 2

En el panel Sitio, seleccione en el men emergente Sitio un sitio que tenga activada la funcin de ocultacin. Lleve a cabo una de estas operaciones:

Elija Sitio > Ocultacin > Configuracin. Haga clic con el botn derecho del ratn (Windows) o mientras presiona la tecla Control
(Macintosh) y seleccione Ocultacin > Configuracin. Aparece la ficha Avanzadas del cuadro de dilogo Definicin del sitio.
3

Lleve a cabo una de estas operaciones: de todos los tipos de archivos que aparecen en el cuadro de texto.

Desactive la casilla de verificacin Ocultar archivos que terminen en, para anular la ocultacin Elimine algunos tipos de archivos del cuadro de texto para anular la ocultacin de dichos tipos.
4

Haga clic en Aceptar.

Las lneas rojas desaparecen de los nombres de los archivos afectados, indicando que ya no se encuentran ocultos. Cmo anular la ocultacin de todas las carpetas y archivos Es posible anular la ocultacin de todas las carpetas y archivos de un sitio de forma simultnea. No es posible deshacer esta accin. No existe ninguna manera de volver a ocultar todos los elementos ocultos anteriormente. Es necesario volver a ocultarlos de forma individual.
Nota: Si desea anular la ocultacin de todas las carpetas y archivos de forma provisional, desactive la funcin de ocultacin en el sitio (consulte Activacin y desactivacin de la ocultacin en el sitio en la pgina 110).

Para anular la ocultacin de todas las carpetas y archivos dentro de un sitio:

1 2 3

En el panel Sitio, seleccione en el men emergente Sitio un sitio que tenga activada la funcin de ocultacin. Seleccione cualquier archivo o carpeta de ese sitio. En el panel Sitio, lleve a cabo una de estas operaciones:

Elija Sitio > Ocultacin > Anular ocultacin de todo. Haga clic con el botn derecho del ratn (Windows) o mientras presiona la tecla Control
(Macintosh) y elija Ocultacin > Anular ocultacin de todo.

112

Captulo 4

Nota: Tambin se desactiva la casilla de verificacin Ocultar archivos que terminen en, del cuadro de dilogo que aparece tras elegir Sitio > Ocultacin > Configuracin.

Desaparecen las lneas rojas que atraviesan los iconos de carpetas y archivo, lo cual indica que se ha anulado la ocultacin de todos los archivos y carpetas del sitio.

Utilizacin de Design Notes

Las Design Notes son notas que el usuario crea para un archivo. Se asocian al archivo que describen, pero se guardan en un archivo aparte. Puede utilizar Design Notes para mantener informacin adicional asociada a los documentos, como los nombres de los archivos de imagen y comentarios sobre el estado del archivo. Por ejemplo, si copia un documento de un sitio en otro, puede aadir Design Notes para advertir que el documento original se encuentra en la otra carpeta del sitio. Posteriormente, si actualiza ese documento (o si lo hace otro usuario), sabr que tambin tiene que actualizar la pgina original. Tambin puede emplear Design Notes para realizar un seguimiento de la informacin sensible que no puede introducir en un documento por motivos de seguridad. Por ejemplo, puede incluir informacin sobre cmo se cre el documento, cmo se calcul un determinado precio o se estableci una configuracin o qu factores de marketing han intervenido en una decisin de diseo. Puede averiguar qu archivos tienen Design Notes adjuntas en el panel Sitio; aparece un icono de Design Notes en la columna Notas. Para obtener informacin general sobre el uso de Design Notes, consulte Almacenamiento de informacin sobre archivos en Design Notes en la pgina 114. Para obtener informacin sobre el uso de Design Notes con Fireworks, consulte Utilizacin de Design Notes en Fireworks y Flash con Dreamweaver en la pgina 116. Activacin y desactivacin de Design Notes Es posible activar y desactivar Design Notes para un sitio en la categora Design Notes del cuadro de dilogo Definicin del sitio. Al activar Design Notes, puede optar por utilizarlas slo de forma local si lo desea.
Para activar o desactivar Design Notes para el sitio o para utilizar Design Notes de forma local:

Elija Sitio> Editar sitios. Aparece el cuadro de dilogo Editar sitios. Seleccione un sitio y haga clic en Editar. Aparece el cuadro de dilogo Definicin del sitio.

Administracin del sitio

113

Haga clic en Design Notes en la lista Categora en la parte izquierda. Aparece el cuadro de dilogo Definicin del sitio con las opciones de Design Notes visibles.

Complete el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Almacenamiento de informacin sobre archivos en Design Notes Puede crear un archivo de Design Notes para cada documento o plantilla del sitio. Tambin puede crear Design Notes para applets, controles ActiveX, imgenes, pelculas Flash, objetos Shockwave y campos de imagen en los documentos.
Nota: Si aade Design Notes a un archivo de plantilla, los documentos creados con dicha plantilla no heredarn las Design Notes.

Para aadir Design Notes a un documento:

Mientras el documento se encuentra activo en la ventana de documento, elija Archivo > Design Notes. Tambin puede seleccionar el archivo en el panel Sitio y, a continuacin, elegir Archivo > Design Notes.

114

Captulo 4

Nota: Si el archivo reside en un sitio remoto, primero debe proteger u obtener el archivo y, a continuacin, seleccionarlo en la carpeta local (consulte Desproteccin y proteccin de archivos en un sitio remoto en la pgina 103 o Obtencin y colocacin de archivos en la pgina 105).

Aparece el cuadro de dilogo Design Notes.

Complete el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar para guardar las notas. Dreamweaver guardar las notas en una carpeta llamada _notes en la misma ubicacin que el archivo actual. El nombre de archivo ser el nombre del documento ms la extensin .mno. Por ejemplo, si el nombre del archivo es index.html, el archivo de Design Notes asociado se llamar index.html.mno.

Para aadir Design Notes a un objeto:

1 2

Seleccione el objeto. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Design Notes en el men contextual del objeto. Aparece el cuadro de dilogo Design Notes. Complete el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar para guardar las notas. Dreamweaver guarda los archivos de Design Notes de un objeto en una carpeta _notes dentro del mismo directorio que el archivo de origen del objeto, que no se encuentra necesariamente en el mismo directorio que el documento donde aparece el objeto.

Administracin del sitio

115

Para abrir las Design Notes asociadas a un archivo, lleve a cabo una de estas operaciones:

Seleccione el archivo en el panel Sitio o abra el archivo y elija Archivo > Design Notes. En la columna Notas del panel Sitio, haga doble clic en el icono amarillo de Design Notes.
Para asignar un estado personalizado a Design Notes:

1 2 3 4 5

Abra Design Notes para un archivo u objeto (consulte el procedimiento anterior). Haga clic en la ficha Toda la informacin. Haga clic en el botn ms (+). En el campo Nombre, escriba la palabra estado. En el campo Valor, introduzca el estado. Si ya existe un valor de estado, ser sustituido por el nuevo. Haga clic en la ficha Informacin bsica y observe que el nuevo valor de estado aparece en el men emergente Estado.
Nota: Slo puede haber un valor personalizado en el men de estado a la vez. Si sigue este procedimiento otra vez, Dreamweaver sustituir el valor de estado que introdujo la primera vez por el nuevo valor que introduzca.

Para eliminar del sitio las Design Notes no asociadas:

Elija Sitio> Editar sitios. Aparece el cuadro de dilogo Editar sitios. Seleccione el sitio y haga clic en Editar. Aparece el cuadro de dilogo Definicin del sitio. Haga clic en Design Notes en la lista de categoras de la izquierda. Haga clic en el botn Limpiar. Dreamweaver le pedir que confirme si desea eliminar las Design Notes que ya no estn asociadas a ningn archivo del sitio. Si utiliza Dreamweaver para eliminar un archivo que tiene un archivo de Design Notes asociado, tambin se eliminar el archivo de Design Notes. Por lo tanto, slo pueden producirse archivos de Design Notes hurfanos si elimina o cambia el nombre de un archivo fuera de Dreamweaver.
Nota: Si desactiva la opcin Mantener Design Notes antes de hacer clic en Limpiar, Dreamweaver eliminar todos los archivos de Design Notes del sitio.

3 4

Utilizacin de Design Notes en Fireworks y Flash con Dreamweaver Si abre un archivo en Macromedia Fireworks o Macromedia Flash y lo exporta a otro formato, Fireworks y Flash guardarn automticamente el nombre del archivo original en un archivo de Design Notes. Por ejemplo, si abre myhouse.png en Fireworks y lo exporta como myhouse.gif, Fireworks crear automticamente un archivo Design Notes llamado myhouse.gif.mno que contendr el nombre del archivo original como un archivo absoluto: URL. As, las Design Notes para myhouse.gif podran contener esta lnea:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"

116

Captulo 4

Una Design Note similar de Flash podra contener esta lnea:

fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Nota: Para compartir Design Notes, los usuarios deben definir la misma ruta para la raz del sitio. Por ejemplo, sites/ assets/orig.

Cuando importe el grfico a Dreamweaver, el archivo de Design Notes se copiar automticamente en el sitio junto con el grfico. Al seleccionar la imagen en Dreamweaver y editarlo usando Fireworks (consulte Inicio de un editor externo de archivos multimedia en la pgina 352), Fireworks abrir el archivo original para editarlo.

Utilizacin de informes para mejorar el flujo de trabajo

Es posible utilizar informes para mejorar la colaboracin entre los miembros de un equipo de desarrollo Web. Puede ejecutar informes de flujo de trabajo que muestren quin ha protegido un archivo y qu archivos tienen Design Notes asociadas. Puede generar informes de Design Notes ms precisos especificando parmetros de nombre/valor. Para obtener informacin sobre la ejecucin de otros tipos de informes, consulte Utilizacin de informes para comprobar un sitio en la pgina 517.
Nota: Debe tener definida una conexin con el sitio remoto para ejecutar informes de Flujo de trabajo.

Para ejecutar un informe de Protegido por:

1 2

Abra un documento. Elija Sitio > Informes. Aparece el cuadro de dilogo Informes.

Seleccione una categora para el informe y los tipos de informe que desea ejecutar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Ejecutar. Dependiendo del tipo de informe elegido, puede que el sistema le pida que guarde el archivo, defina el sitio o seleccione una carpeta (si an no lo ha hecho). El informe aparece en el panel Informes de sitios (en el grupo de paneles Resultados).

Administracin del sitio

117

Para utilizar un informe:

En el panel Informes de sitios, haga clic en el encabezado de columna por el que desee ordenar los resultados. Puede ordenar por nombre de archivo, nmero de lnea o descripcin. Tambin puede ejecutar varios informes y mantener abiertos los distintos paneles de resultados.

Seleccione cualquier lnea del informe y haga clic en el botn Ms Info. en la parte izquierda del panel Informes de sitios para ver una descripcin del problema. La informacin aparece en el panel Referencia (en el grupo de paneles Cdigo). Haga doble clic en cualquier lnea del informe para ver el cdigo correspondiente en la ventana de documento.
Nota: Si se encuentra en vista de Diseo, Dreamweaver cambiar a la vista dividida para mostrar el cdigo correspondiente al problema detectado.

Haga clic en Guardar informe para guardar el informe.

Al guardar un informe, puede importarlo a un archivo de plantilla existente. A continuacin, puede importar el archivo de plantilla a una base de datos u hoja de clculo para imprimirlo o utilizar el archivo para mostrar el informe en un sitio Web.

El panel Sitespring de Dreamweaver

Puede utilizar el panel Sitespring para ver Sitespring directamente en Dreamweaver. Tambin puede seleccionar una tarea en el panel, conectar a la pgina Web de Sitespring y editar la tarea. Puede guardar los cambios realizados con Sitespring, regresar a Dreamweaver y actualizar el panel Sitespring para ver los cambios. El panel Sitespring muestra las tareas junto con su prioridad, estado, fecha de vencimiento y nombre de proyecto.
Nota: Sitespring slo est disponible en ingls. Observe que los comandos de men y las capturas de pantalla de la interfaz que aparecen en esta seccin estn en ingls.

Requisitos del sistema Para utilizar el panel Sitespring con Dreamweaver, debe tener Dreamweaver MX y Sitespring instalados en el sistema o servidor. Si no dispone de Sitespring, puede descargar una versin de prueba gratuita del sitio Web de Macromedia Sitespring. Sitespring slo es compatible con navegadores recientes y aptos para Flash, como Netscape Communicator 4.06 y Microsoft Internet Explorer 5 o posterior. Conexin con el servidor Sitespring Para utilizar el panel Sitespring, primero debe conectar e iniciar una sesin en el servidor Sitespring.
Nota: Para obtener ms informacin sobre el uso de Macromedia Sitespring, consulte la documentacin de Sitespring.

118

Captulo 4

Para conectar con el servidor Sitespring desde Dreamweaver:

En la ventana de documento, elija Ventana > Otros > Sitespring o presione F7. Aparece el cuadro de dilogo de conexin de Sitespring (Sitespring Login).

2 3

En el cuadro de texto Sitespring server, introduzca el URL del servidor Sitespring con el que va a conectar. Si no sabe el URL, pngase en contacto con el administrador del sistema. En los cuadros de texto User name y Password, introduzca su nombre de usuario y la contrasea para el servidor Sitespring. El cuadro de texto User name distingue entre maysculas y minsculas. Si desea guardar la contrasea en el sistema, seleccione la opcin Save password and log in automatically.
Nota: Esta opcin slo permite cerrar y volver a abrir el panel Sitespring sin informacin de conexin. Si finaliza la sesin de Sitespring desde Dreamweaver o la propia aplicacin, necesitar volver a introducir esta informacin.

Haga clic en Log In para conectar con el servidor Sitespring. El estado de la conexin aparece encima del cuadro de texto Sitespring server. El panel Sitespring muestra las tareas actuales cuando se establece la conexin.

Si tiene alguna dificultad para conectar con Sitespring, pngase en contacto con el administrador del sistema.

Utilizacin del panel Sitespring

El panel Sitespring permite ver todas las tareas o slo aquellas asociadas a un proyecto especfico. Es posible editar una tarea y actualizar la lista de tareas para ver los cambios. El cuadro de texto Tasks muestra las tareas, su prioridad, estado, fecha de vencimiento y nombre de proyecto.
Para utilizar el panel Sitespring:

En la ventana de documento, elija Ventana > Otros > Sitespring o presione F7.

Administracin del sitio

119

Conecte con el servidor Sitespring si an no lo ha hecho (consulte Conexin con el servidor Sitespring en la pgina 118). El panel Sitespring muestra las tareas actuales. Consta del cuadro de texto Tasks, que muestra las tareas abiertas actualmente, y un men e iconos para realizar determinadas acciones. Las tareas se ordenan por nombre de tarea. Haga clic en un encabezado de columna para ordenar por esa columna. El panel Sitespring no muestra las tareas interrumpidas o terminadas.

Elija entre las opciones siguientes: asociadas a un proyecto concreto o elija Show All Tasks para ver todas las tareas actuales.

Elija un proyecto especfico en el men emergente Project para ver slo aquellas tareas Haga clic en el botn Refresh para actualizar el panel Sitespring y ver los cambios realizados
en esta tarea.
Nota: Es necesario guardar los cambios en Sitespring para que aparezcan en el panel.

Seleccione una tarea en la columna Name y haga clic en el botn Edit Task para editar esa
tarea. Para editar tareas, tambin debe conectar con Sitespring a travs de la pgina Web Please Log In. Si se encuentra conectado, aparece la pgina Edit Task asociada a esta tarea. Si an no ha conectado, aparece la pgina Web Please Log In.

Haga clic en el icono Sitespring para ir directamente a una pgina Web de Sitespring.
Si ya ha conectado, aparecer su pgina principal de Sitespring. Si an no ha conectado, aparecer la pgina Please Log In.

Presione F7 para cerrar el panel Sitespring o bien haga clic en el botn de cierre para cerrar el
panel Sitespring.
Nota: Si lo desea, puede cerrar el panel Sitespring en lugar de desconectar completamente para no tener que volver a realizar la conexin.

Haga clic en el vnculo Log Out, para desconectar de Sitespring o cambiar de usuario.
Aparece el cuadro de dilogo Sitespring Login. Puede introducir otro nombre de usuario y contrasea para cambiar de usuario, o bien cerrar el cuadro de dilogo para desconectar (consulte Desconexin de Sitespring en Dreamweaver en la pgina 121).

120 Captulo 4

Desconexin de Sitespring en Dreamweaver Al hacer clic en el vnculo Log Out en el panel Sitespring, tambin desconecta de Sitespring en Dreamweaver.
Para desconectar de Sitespring:

En el panel Sitespring, haga clic en el vnculo Log Out. Aparece el cuadro de dilogo Sitespring Log In.

Cierre el cuadro de dilogo.

La prxima vez que acceda al panel Sitespring, no tendr que volver a introducir el URL al conectar (a no ser que desee acceder a un servidor Sitespring diferente), aunque s tendr que introducir su contrasea.

Administracin del sitio

121

122 Captulo 4

CAPTULO 5 Configuracin de un documento

Macromedia Dreamweaver MX ofrece un entorno flexible para trabajar con una gran variedad de documentos de diseo y desarrollo de pginas Web. Adems de documentos HTML, es posible crear y abrir archivos CFML, ASP, JavaScript, CSS o documentos basados en texto. El cuadro de dilogo Nuevo documento proporciona varios tipos de documentos a partir de los que puede crear uno nuevo. Desde esta sencilla interfaz puede crear un nuevo documento o plantilla en blanco, un documento basado en una de las plantillas existentes o una plantilla o documento basado en las disposiciones de pgina incluidas con Dreamweaver. Puede utilizar estos diseos de pgina bsicos y las plantillas para comenzar a trabajar rpidamente con pginas Web con un acabado profesional. En el cuadro de dilogo Nuevo documento puede encontrar otras opciones para el documento. Puede seleccionar documentos basados en texto, como es el caso de los JavaScript o CSS (hoja de estilos en cascada) y documentos de pgina dinmica como Macromedia ColdFusion, Active Server Pages (ASP) de Microsoft y pginas PHP. Si suele trabajar con un tipo de documento, puede establecerlo como tipo de documento predeterminado para las pginas nuevas que va a crear. En Dreamweaver, puede definir fcilmente las propiedades del documento, como etiquetas meta, ttulo del documento, colores de fondo, as como otras propiedades de la pgina en la vista Diseo o en la vista Cdigo. Este captulo incluye los siguientes temas:

Manipulacin del cuadro de dilogo Nuevo documento en la pgina 124 Apertura de documentos existentes en la pgina 128 Configuracin de las propiedades del documento en la pgina 129 Seleccin de elementos en la ventana de documento en la pgina 132 Utilizacin de guas visuales en el proceso de diseo en la pgina 133 Automatizacin de tareas en la pgina 136

Creacin de documentos de Dreamweaver

El cuadro de dilogo Nuevo documento le ofrece varios tipos de documentos a partir de los que puede crear una pgina nueva. Dreamweaver abre el cuadro de dilogo Nuevo documento cuando elige Archivo > Nuevo. Si suele trabajar con un tipo de documento, por ejemplo pginas HTML, ColdFusion o Active Server Pages, puede establecer un tipo de documento como predeterminado. Esto le permitir abrir directamente un documento nuevo del tipo de documento con el que suele trabajar sin necesidad de abrir el cuadro de dilogo Nuevo documento.

123

Temas relacionados

Creacin de un nuevo documento en blanco en la pgina 125 Apertura de documentos existentes en la pgina 128 Creacin de un documento basado en una plantilla existente en la pgina 127 Creacin de un documento basado en un archivo de diseo de Dreamweaver en la pgina 125

Manipulacin del cuadro de dilogo Nuevo documento

El cuadro de dilogo Nuevo documento le ofrece distintas posibilidades de seleccin de un nuevo documento para trabajar en l. Puede crear un documento nuevo de la siguiente forma:

Puede comenzar con un documento en blanco. Puede utilizar una plantilla que defina el aspecto del documento y que configure las partes del
documento que se pueden modificar.
Para abrir el cuadro de dilogo Nuevo documento:

Seleccione Archivo> Nuevo.

El cuadro de dilogo Nuevo documento contiene dos fichas: General y Plantillas. La ficha General contiene varios tipos de documentos que puede utilizar para la creacin de una nueva pgina en blanco. Puede seleccionar un nuevo documento en blanco desde las categoras Pgina bsica, Pgina dinmica y Conjuntos de marcos. Cree una pgina basada en un tipo especial de archivo, como CSS, JavaScript, VBScript o archivos de texto, seleccionando un documento en la categora Otro. La categora Plantillas le ofrece distintos tipos de documento para que cree plantillas en blanco: plantillas HTML y plantillas en las que puede insertar comportamientos de servidor. Las categoras Hojas de estilos CSS, Diseos de pgina y Diseos de pgina (accesible) le ofrecen archivos de diseo prefabricados que puede utilizar para crear sus propias pginas. En el caso de las hojas de estilo CSS, puede copiar hojas de estilo predefinidas y aplicarlas a un documento. Dependiendo del tipo de documento que elija, aparecern opciones distintas en el cuadro de dilogo; por ejemplo, si selecciona un documento HTML, tendr la opcin de hacer el documento compatible con XHTML y, si elige un archivo de Diseo de pgina, tendr la opcin de crear un documento o una plantilla. La ficha Plantillas contiene una lista de sus sitios definidos de Dreamweaver. Puede seleccionar una plantilla de las que se muestran en cualquiera de las listas de sitios para crear nuevos documentos basados en dicha plantilla. Seleccione una categora para ver una lista de los tipos de documento disponibles en la lista Documento que aparece a la derecha. Al hacer clic en un documento de la lista aparece una descripcin y, en el caso de las categoras Diseos de pgina, Hojas de estilos CSS y Conjuntos de marcos, una vista previa del documento seleccionado. Puede utilizar la opcin Preferencias situada en la parte inferior del cuadro de dilogo Nuevo documento para establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificacin o la extensin del archivo. Asimismo, puede establecer una opcin para abrir automticamente un nuevo documento sin necesidad de recurrir al cuadro de dilogo Nuevo documento. Para obtener informacin sobre la configuracin de las preferencias de un documento, consulte Configuracin de preferencias de un documento nuevo en la Ayuda de Dreamweaver.

124 Captulo 5

Utilice el vnculo Obtener ms contenido en el cuadro de dilogo Nuevo documento para ir a Dreamweaver Exchange y descargar ms contenido de diseo de pginas. Creacin de un nuevo documento en blanco Puede utilizar el cuadro de dilogo Nuevo documento para seleccionar el tipo de documento que desea crear. Si suele trabajar con un tipo concreto de documento, puede establecer un documento como predeterminado y abrir automticamente un documento nuevo basado en el tipo predeterminado que ha definido. Para obtener ms informacin, consulte Configuracin de preferencias de un documento nuevo en la Ayuda de Dreamweaver.
Para crear un documento nuevo en blanco:

En Dreamweaver, elija Archivo > Nuevo. Aparecer el cuadro de dilogo Nuevo documento. La ficha General ya aparece seleccionada. En la lista Categora, seleccione la categora del documento que desea crear. Por ejemplo, seleccione Pgina bsica para crear un documento HTML o elija Pgina dinmica para crear un documento ColdFusion o ASP, etc.

En la lista de documentos, seleccione el tipo de pgina que desea crear y luego lleve a cabo una de las siguientes operaciones:

Haga clic en Crear. Haga doble clic en el elemento de la lista de documentos. Presione Intro.
El cuadro de dilogo se cierra y aparece un documento nuevo en la ventana de documento. Creacin de un documento basado en un archivo de diseo de Dreamweaver Dreamweaver se suministra con distintos archivos de elementos de diseo y diseos de pgina profesionales. Puede utilizar estos archivos de diseo como punto de partida para el diseo de las pginas de sus sitios. Los archivos de diseo incluyen documentos y plantillas que se ajustan a las normas de accesibilidad, a los documentos de diseo de pgina basados en tablas y a las hojas de estilos CSS. Puede obtener una vista previa de un documento y leer una breve descripcin de sus elementos de diseo en las categoras Hojas de estilos CSS, Conjuntos de marcos, Diseos de pgina y Diseos de pgina (accesible). Cuando crea un documento basado en un archivo de diseo, Dreamweaver crea una copia del archivo. Si el archivo de diseo incluye vnculos a archivos de activos (como grficos, elementos Flash o una hoja de estilos CSS externa), al guardar el documento Dreamweaver le pregunta si desea guardar una copia de los archivos dependientes. Puede elegir su propia ubicacin para los archivos dependientes o utilizar la ubicacin predeterminada de carpeta que genera Dreamweaver (basada en el nombre original del archivo de diseo). Tambin puede crear una plantilla nueva a partir de un archivo de diseo. La plantilla ya cuenta con regiones editables definidas. Puede crear regiones editables nuevas en la plantilla. Se le pedir que guarde el archivo como plantilla para el sitio actual. Los archivos vinculados tambin se copiarn en el sitio.

Configuracin de un documento 125

Nota: Si crea un documento a partir de un conjunto de marcos predefinido, slo se copiar la estructura del conjunto de marcos, no el contenido. Asimismo, deber guardar cada archivo de marco por separado. Para obtener ms informacin sobre el almacenamiento de marcos, consulte Almacenamiento de archivos de marco y conjunto de marcos en la pgina 290.

Para crear una hoja de estilos en cascada:

1 2

Abra el cuadro de dilogo Nuevo documento y seleccione Archivo > Nuevo. En la lista Categora, seleccione Hojas de estilos CSS. En la lista de documentos situada a la derecha aparecer una seleccin de hojas de estilos CSS. En esta lista, seleccione una hoja de estilos para obtener una vista previa de su descripcin y propiedades y luego lleve a cabo una de estas operaciones:

Haga clic en Crear. Haga doble clic en el elemento de la lista de documentos. Presione Intro.
El cuadro de dilogo se cierra y aparece un documento nuevo CSS en la ventana de documento. La hoja de estilos CSS se abre en la vista Cdigo.
4 5

Seleccione Archivo > Guardar como. En el cuadro de dilogo Guardar como, localice la ubicacin en la que desea guardar el archivo, asigne un nombre de archivo exclusivo al documento y haga clic en Guardar.

Para crear un documento de Diseos de pgina:

1 2 3 4

Abra el cuadro de dilogo Nuevo documento y seleccione Archivo > Nuevo. En la lista Categora, seleccione Diseos de pgina o Diseos de pgina (accesible) dependiendo de los requisitos de su diseo. En la lista Diseos de pgina seleccione el documento en el que desea que se base la pgina nueva. Lleve a cabo una de las siguientes operaciones:

Para crear un documento, seleccione el botn de opcin Documento. Para crear una nueva plantilla, seleccione el botn de opcin Plantilla.
5

Haga clic en Crear. Un documento nuevo aparecer en la ventana de documento. Si crea una plantilla, ver las regiones editables definidas y se le pedir que guarde el documento como plantilla para el sitio actual.

Elija Archivo > Guardar para guardar el documento. Si el archivo contiene vnculos a archivos de activos, aparecer el cuadro de dilogo Copiar archivos dependientes.

7 8

En este cuadro de dilogo, establezca las opciones para copiar los activos en el sitio actual. Haga clic en Copiar para copiar los activos en la carpeta seleccionada y cierre el cuadro de dilogo.

126 Captulo 5

Creacin de un documento basado en una plantilla existente Puede utilizar el cuadro de dilogo Nuevo documento para seleccionar, obtener una vista previa y crear un documento nuevo basado en una plantilla existente. Puede seleccionar una plantilla de cualquiera de los sitios definidos de Dreamweaver. Tambin puede crear plantillas utilizando los documentos de la categora Diseos de pgina en el cuadro de dilogo Nuevo documento. Cuando haya guardado el documento de diseo de pgina como plantilla en el sitio, podr crear pginas a partir de dicha plantilla. Para obtener informacin, consulte Creacin de un documento basado en un archivo de diseo de Dreamweaver en la pgina 125. Para obtener ms informacin sobre la manipulacin de plantillas y documentos basados en plantillas, consulte Captulo 27, Plantillas de Dreamweaver, en la pgina 481.
Para crear un nuevo documento basado en una plantilla:

1 2 3 4 5 6

Seleccione Archivo > Nuevo para abrir el cuadro de dilogo Nuevo documento. En la ficha Plantillas, dentro de la lista Plantillas para sitio, seleccione el sitio de Dreamweaver que contiene la plantilla que desea utilizar. La lista Sitios muestra las plantillas del sitio seleccionado, en caso de que existan. Seleccione la plantilla que desea utilizar. Anule la seleccin de la opcin Actualizar pgina cuando cambie la plantilla si desea separar el nuevo documento de la plantilla. Haga clic en Crear. Se crear un nuevo documento. Guarde el documento.

Almacenamiento de un documento Cuando guarde un documento, evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. 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. Asimismo, no comience los nombres de los archivos con nmeros.
Para guardar un documento:

1 2 3 4

Seleccione Archivo > Guardar. En el cuadro de dilogo que aparece a continuacin, vaya hasta la carpeta en la que desea guardar el archivo. En el campo Nombre de archivo, introduzca un nombre para el archivo. Haga clic en Guardar para guardarlo.

Configuracin de un documento 127

Apertura de documentos existentes

En Dreamweaver, puede abrir un documento HTML existente o cualquier tipo de documento dinmico, aunque no haya sido creado con Dreamweaver. Puede abrir el documento y utilizar Dreamweaver para editarlo aprovechando las ventajas de trabajar en las vistas Diseo o Cdigo. Tambin puede abrir archivos de texto no HTML, como archivos JavaScript, archivos XML, hojas de estilos CSS o archivos de texto guardados con procesadores de texto o editores de texto. Hay determinados archivos que slo se pueden abrir en la vista Cdigo y le permiten modificar el cdigo del archivo, como ocurre con los documentos CSS. Puede actualizar el documento mientras trabaja con Dreamweaver y luego guardar los cambios en el archivo. Si el documento que desea abrir es un archivo de Microsoft Word 97, Word 98 o Word 2000 guardado como HTML, es posible que desee importar el documento en Dreamweaver en lugar de abrirlo. Cuando importa un documento HTML de Word, Dreamweaver le pide que limpie las etiquetas de formato sobrantes que Word inserta en los archivos HTML. Puede utilizar el comando Limpiar HTML de Word para establecer un color de fondo de la pgina y para limpiar el formato de hoja de estilos CSS en el documento importado.
Para abrir un archivo existente, lleve a cabo una de estas operaciones:

1 2 3

En Dreamweaver, elija Archivo > Abrir. En el cuadro de dilogo que se abre a continuacin, haga clic en Examinar y seleccione el archivo que desea abrir. Haga clic en Abrir. El documento se abrir en la ventana de documento.
Nota: Los archivos JavaScript, archivos de texto y las hojas de estilos CSS se abren de forma predeterminada en la vista Cdigo. Para obtener informacin sobre el cambio de la configuracin de un editor de texto externo para la visualizacin de estos tipos de archivos, consulte Inicio de un editor externo de archivos multimedia en la pgina 352.

Para abrir e importar un archivo HTML de Microsoft Word:

En Dreamweaver, elija Archivo > Importar > HTML de Word. Se abre el cuadro de dilogo Seleccionar archivo HTML de Word a importar. En el cuadro de dilogo, haga clic en Examinar y seleccione el documento que desea abrir. Haga clic en Abrir. Dreamweaver abrir el documento en una nueva ventana y, seguidamente, abrir el cuadro de dilogo Limpiar HTML de Word.

2 3

Marque las casillas de las fichas Bsico y Detalladas para seleccionar las opciones de limpieza que desea aplicar al documento. Para obtener ms informacin acerca de las opciones de limpieza, consulte Limpieza de HTML de Microsoft Word en la Ayuda de Dreamweaver.

Haga clic en Aceptar.

Dreamweaver aplicar la configuracin de limpieza al nuevo documento y se abrir un registro en el que se reflejen los cambios.
6

Guarde el documento.

128 Captulo 5

Configuracin de las propiedades del documento

Los ttulos de pgina, las imgenes y colores de fondo y los colores del texto y los vnculos son propiedades bsicas de todos los documentos HTML. El ttulo de pgina identifica y da nombre al documento. Una imagen o un color de fondo define la apariencia global del documento. Los colores del texto y los vnculos ayudan a los usuarios a distinguir entre el texto normal y el hipertexto, as como a reconocer qu vnculos han visitado y cules no. Para obtener informacin acerca del contenido del cuadro de dilogo Propiedades de la pgina, consulte Seleccin de propiedades de la pgina en la Ayuda de Dreamweaver. Cambio del ttulo de un documento El ttulo de una pgina HTML ayuda a los visitantes del sitio a realizar un seguimiento de lo que ven mientras navegan, al tiempo que identifica la pgina en listas de historial y de marcadores. Si no asigna ningn ttulo a una pgina, sta aparecer en la ventana del navegador y en las listas de marcadores y de historial como Untitled Document. Asignar un nombre de archivo al documento (al guardarlo) no equivale a asignar un ttulo a la pgina. Para localizar todos los documentos sin ttulo del sitio, utilice el comando Sitio > Informes; consulte Utilizacin de informes para comprobar un sitio en la pgina 517.
Para cambiar el ttulo de una pgina:

Con el documento abierto, lleve a cabo una de estas operaciones:

Elija Modificar > Propiedades de la pgina. Seleccione Ver > Barras de herramientas (si es que no est ya seleccionado). Haga clic con el botn derecho (Windows) o presione la tecla Control y haga clic (Macintosh)
en un rea vaca del documento y luego elija Propiedades de la pgina.
2 3

En el cuadro de texto Ttulo, introduzca el ttulo de la pgina y presione Intro o Retorno. Si est editando el ttulo en el cuadro de dilogo Propiedades de la pgina, haga clic en Aceptar. El ttulo aparecer en la barra de ttulo de la ventana de documento (y en la barra de herramientas si sta se encuentra visible). El nombre de archivo de la pgina y la carpeta en la que est guardado el archivo aparecen entre parntesis junto al ttulo en la barra de ttulo. Un asterisco indica que el documento contiene cambios que no se han guardado an.

Establecimiento de una imagen de fondo o un color de fondo de pgina Para definir una imagen o un color para el fondo de la pgina, utilice el cuadro de dilogo Propiedades de la pgina. Si utiliza tanto una imagen como un color de fondo, el color aparecer mientras se descarga la imagen y luego la imagen cubrir el color. Si la imagen de fondo contiene pxeles transparentes, el color de fondo se ver a travs de ellos.
Para definir una imagen o un color de fondo:

Elija Modificar > Propiedades de la pgina o seleccione Propiedades de la pgina en el men contextual de la vista Diseo de la ventana de documento.

Configuracin de un documento 129

Para establecer una imagen de fondo, haga clic en el botn Examinar, vaya hasta la imagen y seleccinela. Como alternativa, introduzca la ruta de acceso a la imagen de fondo en el cuadro Imagen de fondo. Dreamweaver forma un mosaico con la imagen de fondo (la repite) si sta no ocupa toda la ventana del navegador. (Para evitar que se forme un mosaico con la imagen de fondo, utilice CSS -hojas de estilos en cascada- para desactivar la formacin de mosaicos con la imagen). Consulte Definicin de propiedades de fondo de estilos CSS en la Ayuda de Dreamweaver.

Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del selector de color.

Manipulacin de colores
En Dreamweaver, muchos de los cuadros de dilogo, as como el inspector de propiedades de muchos elementos de pgina, contienen un cuadro de color que abre un selector de color. Utilice el selector de color para elegir el color de un elemento de la pgina.
Para elegir un color en Dreamweaver:

Haga clic en un cuadro de color en cualquier cuadro de dilogo o en el inspector de propiedades. Aparecer el selector de color.

Cuadro de color del inspector de propiedades

Lleve a cabo una de las siguientes operaciones: de color (predeterminado) y Tono continuo son seguros para la Web; los de otras paletas no lo son. (Para obtener ms informacin, consulte Colores seguros para la Web en la pgina 131.

Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de las paletas Cubos Utilice el cuentagotas para seleccionar un color de cualquier punto de la pantalla, incluso fuera
de las ventanas de Dreamweaver. (Si hace clic en el escritorio u otra aplicacin, Dreamweaver recoger el color donde haya hecho clic, pero es posible que se active la otra aplicacin. En tal caso, haga clic en una ventana de Dreamweaver para seguir trabajando con este programa, o mantenga presionado el botn del ratn al moverlo de Dreamweaver al escritorio para evitar cambiar a otra aplicacin.)

130 Captulo 5

 Para ampliar la seleccin de color, utilice el men emergente situado en la esquina superior
derecha del selector de color. Puede seleccionar Cubos de color, Tono continuo, SO Windows, Mac OS, Escala de grises y Ajustar a valores seguros para la Web. Tenga en cuenta que las paletas Cubos de color y Tono continuo son seguras para la Web, mientras que SO Windows, Mac OS y Escala de grises no lo son. Si est utilizando una paleta que no es segura para la Web y luego elige Ajustar a valores seguros para la Web, Dreamweaver reemplazar el color seleccionado por el color seguro para la Web ms prximo. Dicho de otro modo, es posible que no consiga el color deseado.

Para quitar el color actual sin elegir ningn otro color, haga clic en el botn Tachar. Para abrir el selector de color del sistema, haga clic en el botn Rueda de color. Para obtener
ms informacin, consulte Colores seguros para la Web en la pgina 131. Colores seguros para la Web 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. Suele decirse que existen 216 colores comunes y que 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. Al realizar pruebas, sin embargo, se descubre que hay slo 212 colores seguros para la Web, y no 216, ya que Internet Explorer en Windows no muestra correctamente los colores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) y #33FF00 (51,255,0). Las paletas Cubos de color (predeterminado) y Tono continuo en Dreamweaver utilizan la paleta de 216 colores seguros para la Web; al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color. Para elegir un color situado fuera de la gama segura para la Web, abra los colores del sistema haciendo clic en el botn Rueda de color situado en la esquina superior derecha del selector de color de Dreamweaver. Los colores del sistema no se limitan a los colores seguros para la Web. Las versiones de Netscape Navigator para UNIX usan una paleta de colores distinta a la de las versiones para Windows y Macintosh. Si est desarrollando el sitio Web para navegadores UNIX exclusivamente (o si los destinatarios sern usuarios de Windows o Macintosh con monitores de 24 bits y usuarios de UNIX con monitores de 8 bits), es recomendable utilizar valores hexadecimales que combinen los pares 00, 40, 80, BF o FF para lograr colores seguros para la Web en SunOS. Definicin de colores predeterminados de texto Defina colores predeterminados para el texto normal, los vnculos, los vnculos visitados y los vnculos activos en el cuadro de dilogo Propiedades de la pgina, o bien elija una combinacin de colores preestablecida para definir los colores del fondo de la pgina y del texto. (Consulte Manipulacin de colores en la pgina 130.)
Nota: El color del vnculo activo es el que adopta el vnculo cuando se hace clic en l. Es posible que algunos navegadores Web no utilicen el color especificado.

Para definir los colores predeterminados del texto, lleve a cabo una de las operaciones siguientes:

Elija Modificar > Propiedades de la pgina y, seguidamente, seleccione colores para las
opciones Color del texto, Color de los vnculos, Vnculos visitados y Vnculos activos.

Configuracin de un documento

131

 Elija Comandos > Establecer combinacin de colores y seleccione un color de fondo y una
combinacin de colores de texto y vnculos. El cuadro de muestra da una idea de cul ser la apariencia de la combinacin de colores en el navegador.

Seleccin de elementos en la ventana de documento

Para seleccionar un elemento de la vista de Diseo de la ventana de documento, normalmente tendr que hacer clic en l. Si un elemento es invisible, tendr que convertirlo en visible para poder seleccionarlo.
Para seleccionar elementos, utilice estas tcnicas:

Para seleccionar un elemento visible de la ventana de documento, haga clic en el elemento o

arrastre el puntero hasta el elemento.

Para seleccionar un elemento invisible, elija Ver > Ayudas visuales > Elementos invisibles (si no
est seleccionado) y haga clic en el marcador del elemento en la ventana de documento. Algunos objetos aparecen en un lugar de la pgina distinto a aqul en el que se ha insertado el cdigo. Por ejemplo, una capa puede situarse en cualquier lugar de la pgina, pero el cdigo que define la capa se encuentra en un lugar fijo. Cuando se encuentran visibles los elementos invisibles, Dreamweaver muestra marcadores en la ventana de documento para indicar la posicin del cdigo correspondiente a los elementos invisibles. Al seleccionar un marcador, se selecciona el elemento completo; por ejemplo, al seleccionar el marcador de una capa se selecciona la capa completa. (Consulte Elementos invisibles en la pgina 133.)

Para seleccionar una etiqueta completa (incluido su contenido, si lo hay), haga clic en una
etiqueta del selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento. (El selector de etiquetas aparece tanto en la vista Diseo como en la vista Cdigo.) El selector de etiquetas siempre muestra las etiquetas que rodean a la seleccin actual o al punto de insercin. La etiqueta situada ms a la izquierda es la etiqueta ms externa que contiene la seleccin actual o el punto de insercin. La siguiente etiqueta est contenida en la etiqueta ms externa, y as sucesivamente; la etiqueta situada ms a la derecha es la etiqueta ms interna que contiene la seleccin actual o el punto de insercin. En el siguiente ejemplo, el punto de insercin se sita en una etiqueta de prrafo, <p>. Para seleccionar la tabla en la que se encuentra la marca de prrafo, debe seleccionar la etiqueta <table> situada a la izquierda de la etiqueta <p>.

Para ver el cdigo HTML asociado al texto u objeto seleccionado, realice una de las siguientes operaciones:

En la barra de herramientas Documento, haga clic en el botn Mostrar vista de cdigo. Seleccione Ver > Cdigo. En la barra de herramientas Documento, haga clic en el botn Mostrar vistas de cdigo y
diseo.

Seleccione Ver > Cdigo y diseo. Elija Ventana > Otros > Inspector de cdigo.

132 Captulo 5

Para obtener ms informacin acerca de la vista Cdigo, consulte Visualizacin de los cdigos en la pgina 193. Cuando seleccione algo en el editor de cdigo (la vista Cdigo o el inspector de cdigo), normalmente tambin se seleccionar en la ventana de documento. Es posible que tenga que sincronizar las dos vistas antes de que aparezca la seleccin; consulte Visualizacin de los cdigos en la pgina 193. Elementos invisibles Algunos cdigos HTML no tienen representacin visible en los navegadores. Por ejemplo, las etiquetas comment no aparecen en los navegadores. No obstante, mientras crea una pgina, puede resultar til poder seleccionar este tipo de elementos invisibles, editarlos, moverlos o borrarlos. Dreamweaver le permite especificar si debe mostrar iconos que marquen la ubicacin de los elementos invisibles en la vista Diseo de la ventana de documento. Para mostrar u ocultar iconos de marcadores para elementos invisibles, elija Ver > Ayudas visuales > Elementos invisibles. Al mostrar elementos invisibles, podr seleccionarlos y cambiar sus propiedades en el inspector de propiedades; al ocultarlos, podr ver la pgina de forma ms parecida a como aparecer en un navegador. Tenga en cuenta que, al mostrar elementos invisibles, puede cambiar ligeramente la disposicin de la pgina, ya que se desplazarn otros elementos unos pocos pxeles; de manera que, para lograr una disposicin precisa, oculte los elementos invisibles. Para indicar los marcadores de elementos que deben aparecer cuando elija Ver > Ayudas visuales > Elementos invisibles, puede definir opciones en las preferencias de Elementos invisibles. Por ejemplo, puede especificar que sean visibles los puntos de fijacin con nombre, pero no los saltos de lnea. Para obtener una descripcin de cada una de las preferencias de Elementos invisibles, consulte Configuracin de preferencias de Elementos invisibles en la Ayuda de Dreamweaver. Puede crear determinados elementos invisibles (como comentarios y puntos de fijacin con nombre) utilizando los botones de la categora Comn de la barra Insertar (consulte Utilizacin de la barra Insertar en la pgina 54). Despus podr modificar estos elementos utilizando el inspector de propiedades.

Utilizacin de guas visuales en el proceso de diseo

Dreamweaver proporciona varios tipos de guas visuales para ayudarle a disear documentos y predecir (de forma aproximada) cul ser su apariencia en los navegadores. Puede llevar a cabo las operaciones siguientes:

Ajustar instantneamente el tamao deseado para una ventana de documento y comprobar si

caben los elementos en la pgina. Consulte Cambio del tamao de la ventana de documento en la pgina 50.

Utilizar reglas que sirvan de pista visual para la colocacin y el cambio de tamao de las capas o
las tablas. Consulte Visualizacin de reglas en la pgina 134.

Utilizar una imagen de rastreo como fondo de la pgina para ayudarle a copiar un
diseo creado en una aplicacin de edicin de ilustraciones o imgenes como Macromedia Fireworks. Consulte Utilizacin de una imagen de rastreo en la pgina 134.

Configuracin de un documento 133

 Utilizar la cuadrcula para lograr una mayor precisin en la colocacin y ajuste del tamao de
las capas. Las marcas de cuadrcula de la pgina le ayudan a alinear las capas y, cuando est activada la funcin de ajuste, permiten ajustar automticamente las capas con el punto ms prximo de la cuadrcula al moverlas o ajustar su tamao. (Los dems objetos, como las imgenes y los prrafos, no se ajustan a la cuadrcula.) El ajuste funciona independientemente de que la cuadrcula est visible. Consulte Ajuste de capas a la cuadrcula en la pgina 422. Visualizacin de reglas Las reglas pueden mostrarse en los bordes izquierdo y superior de la pgina expresadas en pxeles, pulgadas o centmetros.
Para cambiar la configuracin de la regla, lleve a cabo una de estas operaciones:

Para activar y desactivar las reglas, elija Ver > Reglas > Mostrar. Para cambiar el origen, arrastre el icono de origen de la regla hasta cualquier lugar de la pgina.
(Este icono aparece en la esquina superior izquierda de la vista Diseo de la ventana de documento cuando estn visibles las reglas.) Para restaurar el origen a su posicin predeterminada, elija Ver > Reglas > Restablecer origen.

Para cambiar la unidad de medida, elija Pxeles, Pulgadas o Centmetros en el submen Ver >
Reglas. Utilizacin de una imagen de rastreo Utilice una imagen de rastreo como gua para la recreacin del diseo de una pgina diseada en una aplicacin grfica. Una imagen de rastreo es una imagen JPEG, GIF o PNG que se sita en el fondo de la ventana de documento. Puede ocultar la imagen, configurar su opacidad y cambiar su posicin. La imagen de rastreo slo se encuentra visible en Dreamweaver. sta nunca puede verse en la pgina desde un navegador. Cuando est visible la imagen de rastreo, la imagen y el color de fondo reales no estn visibles en la ventana de documento; no obstante, se encontrarn visibles cuando la pgina se muestre en un navegador.
Para colocar una imagen de rastreo en la ventana de documento:

Lleve a cabo una de las siguientes operaciones:

Seleccione Ver > Imagen de rastreo > Cargar. Elija Modificar > Propiedades de la pgina y haga clic en el botn Examinar situado junto al
cuadro de texto Imagen de rastreo.
2 3

En el cuadro de dilogo que aparece, seleccione un archivo de imagen y haga clic en Seleccionar (Windows) o Elegir (Macintosh). Aparecer el cuadro de dilogo Propiedades de la pgina. Especifique la transparencia para la imagen arrastrando el control deslizante Transparencia de imagen y, a continuacin, haga clic en Aceptar. Para cambiar a otra imagen de rastreo o cambiar la transparencia de la imagen de rastreo actual en cualquier momento, elija Modificar > Propiedades de la pgina.

Para mostrar u ocultar la imagen de rastreo:

Seleccione Ver > Imagen de rastreo > Mostrar.

134 Captulo 5

Para cambiar la posicin de una imagen de rastreo:

Seleccione Ver > Imagen de rastreo > Ajustar posicin. A continuacin, lleve a cabo una de estas operaciones:

Para especificar de forma precisa la posicin de la imagen de rastreo, introduzca valores de

coordenadas en los cuadros X e Y.

Para mover la imagen de pxel en pxel, utilice las teclas de flecha. Para mover la imagen de cinco en cinco pxeles, presione Mays y una tecla de flecha.
Para restablecer la posicin de la imagen de rastreo:

Seleccione Ver > Imagen de rastreo > Restablecer posicin. La imagen de rastreo regresar a la esquina superior izquierda de la ventana de documento (0,0).
Para alinear la imagen de rastreo con un elemento seleccionado:

1 2

Seleccione un elemento de la ventana de documento. Elija Ver > Imagen de rastreo > Alinear con seleccin. La esquina superior izquierda de la imagen de rastreo se alinear con la esquina superior izquierda del elemento seleccionado.

Visualizacin y edicin del contenido de la seccin head

Los archivos HTML constan de dos secciones principales: la seccin head y la seccin body. La seccin body es la parte principal del documento, la parte visible que contiene texto, imgenes, etc. La seccin head es invisible, salvo el ttulo del documento, que aparece en las barras de ttulo de las ventanas en los navegadores y en Dreamweaver. Asigne un ttulo a todas las pginas que cree. La seccin head tambin contiene otra informacin importante, incluido el tipo de documento, la codificacin de idioma, las funciones y variables JavaScript y VBScript, las palabras clave y los indicadores de contenido para motores de bsqueda y las definiciones de estilo. No es necesario suministrar todos estos elementos para cada pgina. Por ejemplo, puede definir palabras clave e indicadores de contenido para la pgina principal nicamente. Puede ver los elementos en la seccin head utilizando el men Ver, la vista Cdigo de la ventana de documento o el inspector de cdigo.
Para ver los elementos de la seccin head de un documento:

Elija Ver > Contenido de Head. Por cada elemento del contenido de la seccin head, aparecer una marca en la parte superior de la vista Diseo de la ventana de documento.
Nota: Si la ventana de documento est configurada para mostrarse slo en la vista Cdigo, la opcin Ver > Contenido de Head aparecer atenuada.

Para insertar un elemento en la seccin head de un documento:

Lleve a cabo una de las siguientes operaciones:

En la categora Head de la barra Insertar, haga clic en uno de los botones. Elija un elemento en el submen Insertar > Etiquetas Head.
2

Introduzca opciones para el elemento en el cuadro de dilogo que aparece a continuacin o en el inspector de propiedades.

Configuracin de un documento 135

Para editar un elemento de la seccin head de un documento:

1 2 3

Elija Ver > Contenido de Head. Haga clic en uno de los iconos de la seccin head para seleccionarlo. Defina o modifique las propiedades del elemento en el inspector de propiedades.

Para obtener informacin acerca de las propiedades de elementos concretos de la seccin head, consulte los temas siguientes en la Ayuda de Dreamweaver:

Configuracin de propiedades Meta Configuracin de propiedades de ttulo Configuracin de propiedades de palabras clave Configuracin de propiedades de descripcin Configuracin de propiedades de actualizacin Configuracin de propiedades de base Configuracin de propiedades de vnculo

Automatizacin de tareas
Al crear documentos, es posible que desee realizar la misma tarea muchas veces. En esta seccin se explica cmo utilizar el panel Historial para automatizar tareas repetitivas. Para repetir una serie de pasos una o dos veces, reprodzcalos directamente desde el panel Historial, que graba los pasos conforme trabaja en un documento. (Para obtener informacin bsica sobre el panel Historial, consulte Panel Historial en la pgina 61.) Para automatizar una tarea que realiza a menudo, puede crear un nuevo comando que lleve a cabo esa tarea de manera automtica. Algunos movimientos del ratn, como hacer clic o arrastrar para seleccionar algn elemento de la ventana de documento, no se pueden reproducir ni guardar como parte de comandos guardados. Al realizar un movimiento de ese tipo, aparece una lnea negra en el panel Historial (si bien esa lnea no es visible hasta que realice otra accin). Para evitar movimientos que no pueden reproducirse, utilice las teclas de flecha en lugar del ratn para mover el punto de insercin dentro de la ventana de documento. Para realizar o ampliar una seleccin, mantenga presionada la tecla Mays mientras presiona una tecla de flecha.
Nota: Si aparece una lnea negra que indica un movimiento del ratn mientras est realizando una tarea y desea repetirla ms tarde, puede deshacer este paso e intentarlo de otra forma, quiz mediante la utilizacin de las teclas de flecha.

Hay otros pasos que tampoco pueden repetirse, como arrastrar un elemento a otro lugar de la pgina. Al dar un paso de ese tipo, aparece un icono de comando de men con una pequea X roja en el panel Historial. Los pasos se reproducen exactamente tal y como se han realizado originalmente; no puede modificar los pasos mientras los reproduce. Por ejemplo, si anteriormente ha cambiado a rojo el color de la celda de una tabla y aplica ese paso a otra celda de la tabla, tambin cambiar el color de dicha celda. Sin embargo, no puede especificar un color distinto al aplicar el paso a una nueva celda.

136 Captulo 5

Repeticin de pasos Para repetir el ltimo paso realizado, utilice el comando Edicin > Repetir, o utilice el mtodo abreviado de teclado Control+Y (Windows) o Comando+Y (Macintosh). El nombre de este comando cambia en el men Edicin para reflejar el ltimo paso que ha dado. Por ejemplo, si ha escrito texto, el nombre del comando ser Repetir Escritura. (No se puede utilizar el comando Repetir inmediatamente despus de una operacin de deshacer o de rehacer.) Para repetir pasos que no sean el ms reciente o para repetir varios pasos al mismo tiempo, utilice el panel Historial. (Para obtener informacin bsica acerca del panel Historial, consulte Panel Historial en la pgina 61.) Observe que al reproducir pasos, los que se reproducen son los que estn seleccionados (resaltados), no necesariamente el que est sealado actualmente por el dispositivo deslizante.
Para repetir un paso:

En el panel Historial, seleccione el paso y haga clic en el botn Reproducir. El paso se reproducir y aparecer una copia suya en el panel Historial.
Para repetir una serie de pasos adyacentes:

Seleccione los pasos en el panel Historial mediante una de estas operaciones: etiqueta de texto de un paso hasta la etiqueta de texto de otro paso.)

Arrastre desde un paso hasta otro. (No arrastre el dispositivo deslizante, sino tan slo desde la Seleccione el primer paso y luego haga clic en el ltimo paso mientras mantiene presionada la
tecla Mays, o bien seleccione el ltimo paso y luego haga clic en el primer paso mientras mantiene presionada la tecla Mays.
Nota: Aunque puede seleccionar una serie de pasos que incluyan una lnea negra que indica el movimiento del ratn, dicho movimiento del ratn se omitir cuando se reproduzcan los pasos.

Haga clic en Reproducir. Los pasos se reproducirn en orden y aparecer un nuevo paso en el panel Historial con la etiqueta Reproducir pasos.

Para repetir pasos no adyacentes:

Seleccione un paso y, a continuacin, haga clic en otros pasos mientras presiona la tecla Control (Windows) o la tecla Comando (Macintosh). Tambin puede hacer clic mientras mantiene presionada la tecla Control o Comando para anular la seleccin de un paso seleccionado.

Haga clic en Reproducir. Los pasos seleccionados se reproducirn en orden y aparecer un nuevo paso en el panel Historial con la etiqueta Reproducir pasos.

Configuracin de un documento 137

Aplicacin de pasos a otro objeto Puede aplicar una serie de pasos del panel Historial a cualquier objeto de la ventana de documento.
Para aplicar los pasos del panel Historial a un objeto nuevo:

1 2

Seleccione el objeto. Seleccione el paso o los pasos relevantes en el panel Historial y, a continuacin, haga clic en Reproducir.

Aplicacin de pasos a mltiples objetos Si selecciona mltiples objetos en un documento y, a continuacin, les aplica pasos desde el panel Historial, los objetos se considerarn como una nica seleccin a la que Dreamweaver intentar aplicar los pasos. Por ejemplo, no puede seleccionar cinco imgenes y aplicar el mismo cambio de tamao a cada una de ellas a la vez; el cambio de tamao es una operacin que debe aplicarse a cada imagen individual y no a una combinacin colectiva de imgenes. Para aplicar una serie de pasos a cada objeto de un conjunto de objetos, compruebe que el ltimo paso de la serie selecciona el siguiente objeto del conjunto. El siguiente procedimiento demuestra este principio en un escenario concreto: establecer el espaciado vertical y horizontal de una serie de imgenes:
Para establecer el espaciado vertical y horizontal de una serie de imgenes:

Comience con un documento en el que cada lnea contenga una pequea imagen (por ejemplo, una vieta grfica o un icono) seguida de texto. El objetivo es separar las imgenes del texto y de otras imgenes situadas por encima y por debajo de ellas.

2 3 4 5 6

Abra el inspector de propiedades (Ventana > Propiedades), si an no est abierto. Seleccione la primera imagen. En el inspector de propiedades, introduzca nmeros en los cuadros de texto Espacio V y Espacio H para definir el espaciado de la imagen. Haga clic de nuevo en la imagen para activar la ventana de documento sin tener que mover el punto de insercin. Presione la tecla Flecha izquierda para mover el punto de insercin a la izquierda de la imagen. A continuacin, presione la tecla Flecha abajo para mover el punto de insercin una lnea hacia abajo, dejndolo justo a la izquierda de la segunda imagen de la serie. Seguidamente, presione Mays+Flecha derecha para seleccionar esa segunda imagen.
Nota: No seleccione la imagen haciendo clic en ella. De lo contrario, no podr reproducir todos los pasos.

138 Captulo 5

Seleccione en el panel Historial los pasos correspondientes al cambio de espaciado de la imagen y la seleccin de la imagen siguiente. Haga clic en el botn Reproducir para reproducir esos pasos.

El espaciado de la imagen actual cambiar y se seleccionar la imagen siguiente.

Siga haciendo clic en Reproducir hasta que haya establecido correctamente el espaciado de todas las imgenes.

Para aplicar pasos a un objeto de otro documento, utilice el botn Copiar pasos; consulte Cmo copiar y pegar pasos entre documentos en la pgina 139. Cmo copiar y pegar pasos entre documentos Todos los documentos abiertos tienen su propio historial de pasos. Puede copiar los pasos de un documento y pegarlos en otro.
Nota: Copiar pasos (un botn del panel Historial) es diferente a Copiar (en el men Edicin). No se puede utilizar Edicin > Copiar para copiar pasos, aunque s se utiliza Edicin > Pegar para pegarlos.

Al cerrar un documento se borra su historial. Si sabe que va a querer utilizar los pasos de un documento despus de cerrarlo, cpielos con Copiar pasos (o gurdelos como un comando; consulte Creacin de comandos nuevos usando pasos del historial en la pgina 140) antes de cerrar el documento. Hay que tener cuidado al copiar pasos que incluyan los comandos Copiar o Pegar.

No utilice Copiar pasos si uno de los pasos es un comando Copiar, ya que es posible que no
pueda pegar dichos pasos de la manera deseada.

Si entre los pasos figura un comando Pegar, no podr pegar dichos pasos a no ser que los pasos
tambin incluyan un comando Copiar antes del comando Pegar. Si pega pasos en un editor de texto o en la vista de Cdigo o el inspector de cdigo, aparecern como cdigo JavaScript. Esta opcin puede resultar til para aprender a escribir scripts. Para obtener ms informacin sobre el uso de JavaScript en Dreamweaver, consulte Escritura y edicin de cdigo en la pgina 211.

Configuracin de un documento 139

Para reutilizar los pasos de un documento en otro:

1 2 3 4 5 6

Comience desde el documento que contiene los pasos que desea reutilizar. Seleccione los pasos del panel Historial. Haga clic en el botn Copiar pasos del panel Historial para copiar dichos pasos. Abra el otro documento. Coloque el punto de insercin donde desee o seleccione un objeto para aplicarle los pasos. Elija Edicin > Pegar para pegar los pasos. Los pasos se reproducirn a medida que se peguen en el panel Historial del documento. El panel Historial los muestra como un solo paso, denominado Pegar pasos.

Creacin de comandos nuevos usando pasos del historial Puede guardar un conjunto de pasos de historial como un comando con nombre y acceder a l desde el men Comandos. Cree y guarde un comando si es posible que vaya a utilizar un conjunto determinado de pasos en el futuro, especialmente si desea usar esos pasos la prxima vez que inicie Dreamweaver. Los comandos guardados se conservan de manera permanente (a menos que los borre), mientras que los comandos grabados se borran al salir de Dreamweaver y las secuencias copiadas de los pasos se eliminan al copiarlas en otro lugar. Puede editar los nombres de comandos que ha colocado en el men Comandos y borrarlos del men Comandos utilizando Comandos > Editar lista de comandos. Es ms complicado editar y borrar comandos incorporados en el men Comandos (es decir, que usted no ha aadido explcitamente).
Para crear un comando:

1 2 3

Seleccione un paso o un conjunto de pasos en el panel Historial. Haga clic en el botn Guardar como comando o elija Guardar como comando en el men contextual del panel Historial. Introduzca un nombre para el comando y haga clic en Aceptar. El comando aparecer en el men Comandos.
Nota: El comando se guardar como archivo JavaScript (o, en ocasiones, como un archivo HTML) en la carpeta Dreamweaver/Configuration/Commands.

Para utilizar un comando guardado:

1 2

Seleccione un objeto al que aplicar el comando o coloque el punto de insercin donde desee. Elija el comando en el men Comandos.

Para editar los nombres de comandos del men Comandos.

1 2 3

Elija Comandos > Editar lista de comandos. Seleccione un comando para cambiar su nombre e introduzca un nombre nuevo. Haga clic en Cerrar.

140 Captulo 5

Para eliminar un nombre del men Comandos:

1 2 3

Elija Comandos > Editar lista de comandos. Seleccione un comando. Haga clic en Eliminar y, seguidamente, en Cerrar.

Grabacin de comandos Dreamweaver permite grabar un comando temporal para usarlo a corto plazo. La diferencia principal entre este sistema y la reproduccin de pasos desde el panel Historial (consulte Repeticin de pasos en la pgina 137) consiste en lo siguiente:

Los pasos se graban a medida que los ejecuta, por lo que no tiene que seleccionarlos en el panel
Historial antes de reproducirlos.

Durante la grabacin, Dreamweaver le impide realizar movimientos del ratn que no se

pueden grabar (como hacer clic para seleccionar algo en una ventana o arrastrar un elemento de pgina a otra ubicacin).

Si cambia a otro documento mientras est grabando, Dreamweaver no grabar los cambios
realizados en el otro documento. Observe el puntero para determinar si en un determinado momento se est grabando o no. Dreamweaver slo conserva un comando grabado simultneamente. En cuanto comience a grabar otro, se perder el antiguo. Para guardar un comando sin perder otro grabado, gurdelo desde el panel Historial. Una vez grabado un comando, puede guardarlo si lo desea utilizando el panel Historial.
Para grabar temporalmente una serie de pasos usados con frecuencia:

Elija Comandos > Iniciar grabacin o presione Control+Mays+X (Windows) o Comando+Mays+X (Macintosh). El puntero cambiar para indicar que se est grabando un comando. Cuando termine de grabar, elija Comandos > Detener grabacin o presione Control+Mays+X (Windows) o Comando+Mays+X (Macintosh).

Para reproducir un comando grabado:

Elija Comandos > Reproducir comando grabado o presione Control+Mays+R (Windows) o Comando+Mays+R (Macintosh).
Para guardar un comando grabado:

Elija Comandos > Reproducir comando grabado para volver a ejecutar el comando. En la lista de pasos del panel Historial aparecer un paso llamado Ejecutar comando. Seleccione el paso Ejecutar comando y haga clic en el botn Guardar como comando. Introduzca un nombre para el comando y haga clic en Aceptar.
Nota: El comando aparecer en el men Comandos.

2 3

Configuracin de un documento

141

142 Captulo 5

Parte II Preparacin para crear sitios dinmicos

Si desea crear una aplicacin Web dinmica, deber comenzar configurando un servidor de aplicaciones y conectando con una base de datos. Esta parte contiene los siguientes captulos:

Parte II

Captulo 6, Configuracin de una aplicacin Web Captulo 7, Conexiones de base de datos para
desarrolladores de ColdFusion

Captulo 8, Conexiones de base de datos para

desarrolladores de ASP.NET

Captulo 9, Conexiones de base de datos para

desarrolladores de ASP

Captulo 10, Conexiones de base de datos para

desarrolladores de JSP

Captulo 11, Conexiones de base de datos para

desarrolladores de PHP

CAPTULO 6 Configuracin de una aplicacin Web

En este captulo se describe cmo configurar el sistema para crear aplicaciones Web en Macromedia Dreamweaver MX.
Nota: Si desea crear la aplicacin Web de muestra instalada con Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver).

Este captulo contiene las siguientes secciones:

Nota para los usuarios de Dreamweaver UltraDev 4 en la pgina 145 Lo que necesita para crear aplicaciones Web en la pgina 146 Configuracin de un servidor Web en la pgina 147 Configuracin de un servidor de aplicaciones en la pgina 147 Creacin de una carpeta raz para la aplicacin en la pgina 150 Definicin de un sitio de Dreamweaver en la pgina 150 Conexin con una base de datos en la pgina 154 Solucin de problemas de errores del servidor de aplicaciones en la pgina 154

Nota para los usuarios de Dreamweaver UltraDev 4

Si es usuario de Macromedia Dreamweaver UltraDev 4, su sistema estar ya probablemente configurado para crear aplicaciones Web. Si instal Dreamweaver MX junto con UltraDev 4, todos los sitios de UltraDev se importaron automticamente a Dreamweaver. No ser necesario redefinirlos en Dreamweaver MX. Sin embargo, si un sitio importado contiene pginas de Macromedia ColdFusion creadas utilizando los comportamientos del servidor de UltraDev 4, deber informar a Dreamweaver de que el sitio contiene pginas generadas por UltraDev, ya que Dreamweaver MX busca modelos de cdigos en la pgina para identificar y mostrar los comportamientos del servidor en el panel Comportamientos del servidor. Para Active Server Pages (ASP) de Microsoft y JavaServer Pages (JSP), Dreamweaver MX genera el mismo cdigo que UltraDev, por lo que puede reconocer y mostrar comportamientos del servidor ASP y JSP generados por UltraDev. Sin embargo, para las pginas de ColdFusion, Dreamweaver MX genera cdigos mejorados y ms fciles de comprender. Como Dreamweaver busca estos nuevos modelos de cdigos de forma predeterminada, no reconoce los comportamientos del servidor de ColdFusion generados por UltraDev. Si desea continuar trabajando con los antiguos comportamientos del servidor, deber decirle a Dreamweaver que busque modelos de cdigos de UltraDev.

145

Para hacerlo, siga los siguientes pasos:

1 2

Abra el cuadro de dilogo Definicin del sitio seleccionando Sitio > Editar sitios y, a continuacin, seleccione el sitio y haga clic en Editar. Si se muestra el asistente, haga clic en Avanzadas y seleccione Servidor de prueba en la lista Categora. Aparecer el cuadro de dilogo Servidor de prueba. En el men emergente Este sitio contiene, elija una de las siguientes opciones: seleccione Slo pginas de UltraDev 4.

Si desea que Dreamweaver contine generando cdigos de UltraDev para las nuevas pginas, Si desea que Dreamweaver empiece a utilizar los cdigos mejorados en las nuevas pginas,
seleccione Ambas versiones. El sitio de UltraDev 4 se actualizar progresivamente y, con el tiempo, incluir mayormente pginas con los nuevos comportamientos del servidor.
4

Haga clic en Aceptar y, a continuacin, en Listo.

Las conexiones de bases de datos sern tratadas de forma diferente si especifica que el sitio slo contiene pginas de UltraDev 4. Para obtener ms informacin, consulte Conexin utilizando la conectividad UltraDev 4 en la pgina 159.

Lo que necesita para crear aplicaciones Web

Para crear aplicaciones Web en Dreamweaver, necesitar el siguiente software:

Un servidor Web Un servidor de aplicaciones que se ejecute en un servidor Web o un servidor Web que acte
tambin como servidor de aplicaciones, por ejemplo Microsoft PWS o IIS
Nota: En el contexto de las aplicaciones Web, los trminos servidor Web y servidor de aplicaciones se refieren a software y no a hardware.

Si desea utilizar una base de datos con la aplicacin, necesitar adems el siguiente software:

Una base de datos o sistema de base de datos Un controlador de base de datos compatible con la base de datos
Para obtener informacin sobre cmo configurar una base de datos para la aplicacin Web, consulte Conexin con una base de datos en la pgina 154. Varias empresas que proporcionan alojamiento Web ofrecen planes que le permitirn utilizar su software para probar y desplegar aplicaciones Web. Si es usuario de Windows, puede instalar el software necesario en el mismo equipo que Dreamweaver para realizar tareas de desarrollo. Tambin puede instalarlo en un equipo de red (habitualmente en un equipo con Windows NT o Windows 2000) para que otros desarrolladores puedan trabajar en el mismo proyecto. Si es usuario de Macintosh, puede utilizar un servicio de alojamiento Web o instalar el software necesario en un equipo remoto. Si es usuario de Mac OS 10.1, puede desarrollar localmente sitios PHP utilizando el servidor Web Apache y la aplicacin PHP instalada con el sistema operativo. Para obtener informacin acerca de la configuracin, consulte los siguientes sitios Web:

http://developer.apple.com/internet/macosx/php.html http://www.entropy.ch/software/macosx/ http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html

146 Captulo 6

Configuracin de un servidor Web

Para ejecutar aplicaciones Web, necesitar un servidor Web. Un servidor Web es una aplicacin de software que suministra archivos en respuesta a las peticiones de los navegadores Web. En ocasiones, tambin se hace referencia a un servidor Web como servidor HTTP. Entre los servidores Web ms utilizados se incluyen IIS, Netscape Enterprise Server, iPlanet Web Server y Apache HTTP Server. Si no utiliza un servicio de alojamiento Web, elija un servidor Web e instlelo en el equipo local o en un equipo remoto. Para obtener ms informacin, consulte la documentacin del fabricante del servidor o pregunte al administrador del sistema. Los usuarios de Windows pueden obtener y ejecutar fcilmente un servidor Web en el equipo local instalando PWS o IIS. Puede que el servidor Web ya est instalado. Compruebe la estructura de carpetas para averiguar si contiene una carpeta denominada C:\Inetpub o D:\Inetpub. PWS y IIS crean esta carpeta durante su instalacin. Si desea instalar PWS o IIS, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver). Las pginas ASP.NET slo funcionan con un servidor Web: Microsoft IIS 5 o posterior. PWS no es compatible. Adems, como IIS 5 es un servicio de los sistemas operativos Windows 2000 y Windows XP Professional, slo podr utilizar estas dos versiones de Windows para ejecutar aplicaciones ASP.NET. Windows 98, ME o NT no son compatibles. No obstante, podr desarrollar (aunque no ejecutar) aplicaciones ASP.NET en cualquier equipo que ejecute Dreamweaver MX, incluido un Macintosh.

Configuracin de un servidor de aplicaciones

Para ejecutar aplicaciones Web, el servidor Web deber funcionar con un servidor de aplicaciones. Un servidor de aplicaciones es una aplicacin de software que ayuda a un servidor Web a procesar pginas Web que incluyen marcas especiales. Cuando se solicita al servidor una pgina de este tipo, ste remite la pgina al servidor de aplicaciones para su procesamiento antes de enviarla al navegador. Entre los servidores de aplicaciones ms utilizados se encuentran Macromedia ColdFusion MX, Macromedia JRun, Microsoft .NET Framework, PHP, IBM WebSphere y Jakarta Tomcat. Los servidores Web Microsoft IIS y PWS tambin funcionan como servidores de aplicaciones ASP. El servidor de aplicaciones suele instalarse en el mismo sistema en el que se ejecuta el servidor Web. stos son los temas tratados en esta seccin:

Eleccin de un servidor de aplicaciones en la pgina 147 Instalacin de un servidor de aplicaciones ColdFusion en la pgina 148 Instalacin de un servidor de aplicaciones ASP.NET en la pgina 148 Instalacin de un servidor de aplicaciones ASP en la pgina 149 Instalacin de un servidor de aplicaciones JSP en la pgina 149 Instalacin de un servidor de aplicaciones PHP en la pgina 150

Eleccin de un servidor de aplicaciones La eleccin de un servidor de aplicaciones depende de varios factores, entre los que se incluyen el presupuesto, la tecnologa de servidor que desea utilizar (ColdFusion, ASP.NET, ASP, JSP o PHP) y el servidor Web elegido.

Configuracin de una aplicacin Web 147

Presupuesto:

Algunos proveedores disponen de servidores de aplicaciones de gama alta que resultan muy costosos de adquirir y administrar. Otros ofrecen soluciones ms econmicas y sencillas (por ejemplo, Macromedia ColdFusion Server y JRun Server). Algunos servidores de aplicaciones estn integrados en servidores Web (por ejemplo, Microsoft IIS y PWS) y otros pueden descargarse gratuitamente de Internet (por ejemplo, Jakarta Tomcat y PHP).

Tecnologa de servidor: Los servidores de aplicaciones utilizan distintas tecnologas. Dreamweaver

admite cinco de ellas: ColdFusion, ASP.NET, ASP, JSP y PHP. Para obtener ms informacin, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver). La siguiente tabla muestra algunos de los servidores de aplicaciones ms utilizados para las cinco tecnologas de servidor admitidas por Dreamweaver:
Tecnologa de servidor ColdFusion ASP.NET ASP Servidor de aplicaciones Macromedia ColdFusion MX Microsoft IIS 5 con .NET Framework Microsoft IIS o PWS Sun Chili!Soft ASP Macromedia JRun IBM WebSphere Apache Tomcat BEA WebLogic Servidor PHP

JSP

PHP

Servidor Web:

La eleccin de un servidor de aplicaciones tambin puede depender del servidor Web que desee utilizar. Compruebe que la aplicacin es compatible con el servidor Web. Por ejemplo, .NET Framework slo funciona con IIS 5 o posterior.

Instalacin de un servidor de aplicaciones ColdFusion Para ejecutar pginas de ColdFusion, necesitar el servidor de aplicaciones ColdFusion. Este servidor est disponible para los sistemas operativos Windows, Linux, Solaris y HP-UX. Puede descargar e instalar una versin de ColdFusion MX para desarrolladores con todas las funciones desde el sitio Web de Macromedia en http://www.macromedia.com/es/software/coldfusion/. Tambin dispone de una copia de ColdFusion MX Server Developer Edition en el CD de Dreamweaver (slo para Windows). Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan ColdFusion o instalar ColdFusion en un equipo Windows, Linux, Solaris o HP-UX remoto que ejecute un servidor Web. Despus de instalar el servidor de aplicaciones, cree una carpeta raz para la aplicacin Web. Consulte Creacin de una carpeta raz para la aplicacin en la pgina 150. Instalacin de un servidor de aplicaciones ASP.NET Para desarrollar pginas ASP.NET, necesitar el siguiente software:

Un equipo Windows 2000 o Windows XP Professional que ejecute IIS 5 o posterior Microsoft .NET Framework, que puede descargarse desde el sitio Web de Microsoft
Descargue .NET Framework desde el sitio Web de Microsoft en http://asp.net/download.aspx y siga las instrucciones de instalacin.

148 Captulo 6

Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan ASP.NET o instalar .NET Framework en un equipo Windows 2000 o Windows XP Professional remoto que ejecute IIS 5 o posterior. Despus de instalar .NET Framework, cree una carpeta raz para la aplicacin Web. Consulte Creacin de una carpeta raz para la aplicacin en la pgina 150. Instalacin de un servidor de aplicaciones ASP Para desarrollar pginas ASP, necesitar un servidor de aplicaciones compatible con Microsoft Active Server Pages 2.0. Entre los ms utilizados se encuentran los siguientes:

Microsoft IIS, que se incluye en Windows NT Server, Windows 2000 y Windows XP

Professional.

Microsoft PWS, una versin reducida de IIS que se ejecuta en Windows 98 y NT

Workstation.

Sun Chili!Soft ASP, que se ejecuta en Windows, Linux, Solaris y otras plataformas. Para
obtener ms informacin, visite el sitio Web de Chili!Soft en http://www.chilisoft.com/chiliasp/default.asp. Los usuarios de Windows pueden instalar y ejecutar IIS o PWS en un equipo local. Para obtener instrucciones, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver). Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan ASP o instalar IIS o PWS en un equipo local. Despus de instalar IIS o PWS, cree una carpeta raz para la aplicacin Web. Consulte Creacin de una carpeta raz para la aplicacin en la pgina 150. Instalacin de un servidor de aplicaciones JSP Para desarrollar pginas JSP, necesitar un servidor de aplicaciones compatible con JavaServer Pages. Entre los ms utilizados se encuentran los siguientes:

Macromedia JRun para Windows, Linux, Solaris o UNIX. Puede descargar una versin de
prueba desde el sitio Web de Macromedia en http://www.macromedia.com/es/software/jrun/.

IBM WebSphere para distintos sistemas operativos. Puede descargar una versin de prueba
desde el sitio Web de IBM en http://www4.ibm.com/software/webservers/appserv/download.html.

Tomcat para Windows y UNIX. Puede descargar una copia de Tomcat desde el sitio Web de
Jakarta en http://jakarta.apache.org/tomcat/. Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan JSP o instalar un servidor de aplicaciones JSP en un equipo remoto que ejecute un servidor Web. Despus de instalar un servidor de aplicaciones JSP, cree una carpeta raz para la aplicacin Web. Consulte Creacin de una carpeta raz para la aplicacin en la pgina 150.

Configuracin de una aplicacin Web 149

Instalacin de un servidor de aplicaciones PHP Para ejecutar pginas PHP, necesitar el servidor de aplicaciones PHP, una aplicacin de software de cdigo fuente abierto que est disponible en la Web. Existen ediciones de esta aplicacin para los sistemas Windows, Linux, UNIX, HP-UX, Solaris y Mac OS X. Los servidores de aplicaciones son compatibles con los siguientes servidores Web: Apache, Microsoft IIS o PWS, Netscape e iPlanet, y casi todos los servidores Web que admiten la interfaz CGI. Puede descargar el servidor de aplicaciones PHP desde el sitio Web de PHP en http://www.php.net/downloads.php. Para obtener informacin sobre cmo instalar el servidor, consulte la documentacin de PHP, que podr descargar tambin desde el sitio Web de PHP en http://www.php.net/download-docs.php. Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan PHP o instalar PHP en un equipo remoto que ejecute un servidor Web. Si dispone de Mac OS 10.1, puede utilizar el servidor de aplicaciones PHP instalado con el sistema operativo. Para obtener ms informacin, consulte los siguientes sitios Web:

http://developer.apple.com/internet/macosx/php.html http://www.entropy.ch/software/macosx/ http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html

Despus de instalar el servidor de aplicaciones PHP, cree una carpeta raz para la aplicacin Web.

Creacin de una carpeta raz para la aplicacin

Despus de instalar el software de servidor, cree una carpeta raz para la aplicacin Web en el equipo que ejecuta el servidor Web. Compruebe que la carpeta est publicada por el servidor Web, es decir, que el servidor Web puede suministrar cualquier archivo de esta carpeta o sus subcarpetas en respuesta a una peticin HTTP de un navegador Web. Por ejemplo, en un equipo que ejecute PWS o IIS, podr suministrarse a un servidor Web cualquier archivo de la carpeta Inetpub\wwwroot o de sus subcarpetas.

Definicin de un sitio de Dreamweaver

Despus de configurar el sistema para que desarrolle aplicaciones Web, defina un sitio de Dreamweaver para que administre los archivos.
Nota: Los usuarios de Macromedia HomeSite y ColdFusion Studio pueden considerar un sitio de Dreamweaver como un proyecto HomeSite o Studio.

Antes de empezar, compruebe que se cumplen los siguientes requisitos:

Tiene acceso a un servidor Web. El servidor Web puede ejecutarse en un equipo local, en un
equipo remoto (por ejemplo, un servidor de desarrollo) o en un servidor mantenido por una empresa que ofrezca alojamiento Web. Consulte Configuracin de un servidor Web en la pgina 147.

Un servidor de aplicaciones est instalado y se ejecuta en el sistema donde se encuentra el

servidor Web. Consulte Configuracin de un servidor de aplicaciones en la pgina 147.

Ha creado una carpeta raz para la aplicacin Web en el sistema que ejecuta el servidor Web.
Para obtener ms informacin, consulte Creacin de una carpeta raz para la aplicacin en la pgina 150.

150 Captulo 6

Para definir un sitio de Dreamweaver para la aplicacin Web, siga estos tres pasos:
1

Defina una carpeta en el disco duro como carpeta local de Dreamweaver, donde se almacenarn las copias de trabajo de los archivos del sitio (consulte Definicin de una carpeta local en la pgina 151). Defina una carpeta en el equipo que ejecuta el servidor Web como carpeta remota de Dreamweaver (consulte Definicin de una carpeta remota en la pgina 151). Especifique dnde debera enviar Dreamweaver las pginas dinmicas para que se procesen mientras trabaja (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152).

2 3

Una vez definido el sitio de Dreamweaver, podr empezar a crear la aplicacin Web. Definicin de una carpeta local Puede definir una carpeta local de Dreamweaver para cada nueva aplicacin Web creada. sta ser la carpeta utilizada para almacenar copias de trabajo de los archivos del sitio en el disco duro. Si no define una carpeta local, Dreamweaver no funcionar correctamente. Adems, podr administrar archivos y transferirlos entre el disco local y el servidor Web con un solo clic.
Para definir una carpeta local de Dreamweaver:

Cree una carpeta en el disco local para almacenar las copias de trabajo de los archivos. Si lo desea, cree subcarpetas para almacenar archivos de imagen y otros activos. En Dreamweaver, seleccione Sitio > Nuevo sitio. Aparecer el cuadro de dilogo Definicin del sitio. Si se muestra el asistente, haga clic en Avanzadas y seleccione Datos locales en la lista Categora (que debe ser la opcin predeterminada). En el cuadro Nombre del sitio, introduzca un nombre descriptivo para el sitio de Dreamweaver. En el cuadro Carpeta raz local, especifique la carpeta creada en el paso 1. Puede introducir una ruta o hacer clic en el icono de la carpeta para examinar y seleccionar la carpeta.

3 4 5

Si lo desea, complete las dems opciones de la categora Datos locales (no son imprescindibles para que el sitio funcione). Para obtener ms informacin sobre estas opciones, haga clic en el botn Ayuda del cuadro de dilogo.

Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin, deber especificar una carpeta remota. Definicin de una carpeta remota Despus de definir una carpeta local, puede definir una carpeta remota para el sitio de Dreamweaver. La carpeta remota es la creada para la aplicacin Web en el servidor Web (consulte Creacin de una carpeta raz para la aplicacin en la pgina 150).

Configuracin de una aplicacin Web

151

No es necesario definir una carpeta remota si la carpeta definida en Definicin de una carpeta local en la pgina 151 puede hacer las veces de carpeta raz de la aplicacin Web. (Lo cual implica que el servidor Web se ejecuta en el equipo local.)
Para definir una carpeta remota de Dreamweaver:

Si el cuadro de dilogo Definicin del sitio no est abierto, bralo eligiendo Sitio > Editar sitios y, a continuacin, seleccione el sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Si se muestra el asistente, haga clic en Avanzadas y seleccione Datos remotos en la lista Categora. Aparecer el cuadro de dilogo Datos remotos. En el men emergente Acceso, elija una de las siguientes opciones: Local/red, FTP o RDS. La opcin elegida dir a Dreamweaver cmo desea transferir archivos entre la carpeta local y la carpeta remota.
Nota: Para utilizar RDS, la carpeta remota debe estar en un equipo que ejecute ColdFusion.

Tambin puede enviar los archivos a una aplicacin SourceSafe eligiendo Base de datos SourceSafe. (SourceSafe se utiliza para mantener un control de versiones de los archivos.) Si elige esta opcin, deber definir otra carpeta independiente. Para obtener instrucciones, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152.
4

Una vez elegido el mtodo de acceso, establezca las opciones de acceso apropiadas. Para obtener ms informacin sobre estas opciones, haga clic en el botn Ayuda del cuadro de dilogo.

Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin, deber definir una carpeta donde procesar las pginas dinmicas. Especificacin de dnde pueden procesarse las pginas dinmicas Despus de definir la carpeta remota en Dreamweaver, especifique la carpeta donde se pueden procesar las pginas dinmicas. Dreamweaver utilizar esta carpeta para generar contenido dinmico y conectar con las bases de datos mientras trabaja. Se suele especificar la carpeta raz creada en el servidor Web (consulte Creacin de una carpeta raz para la aplicacin en la pgina 150), ya que un servidor Web y un servidor de aplicaciones pueden funcionar conjuntamente.
Nota: La carpeta raz puede ser local o remota, dependiendo de dnde se ejecute el servidor Web.

Para especificar dnde puede Dreamweaver procesar las pginas dinmicas:

Si el cuadro de dilogo Definicin del sitio no est abierto, bralo eligiendo Sitio > Editar sitios y, a continuacin, seleccione el sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio.

152 Captulo 6

Si se muestra el asistente, haga clic en Avanzadas y seleccione Servidor de prueba en la lista Categora. Aparecer el cuadro de dilogo Servidor de prueba. Dreamweaver necesita los servicios de un servidor de prueba para generar y mostrar contenido dinmico mientras trabaja. El servidor de prueba puede ser el equipo local, un servidor de desarrollo, un servidor en funcionamiento o un servidor de produccin. Mientras que pueda procesar el tipo de pginas dinmicas que tiene intencin de desarrollar, el servidor elegido no importa.

Rellene el cuadro de dilogo y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Prefijos de URL Debe especificar un prefijo de URL (localizador universal de recursos, Universal Resource Locator) para que Dreamweaver MX pueda utilizar los servicios de un servidor de prueba para mostrar datos y conectar con bases de datos mientras trabaja. Dreamweaver utiliza el servidor de prueba para generar el contenido dinmico mostrado en la ventana Live Data y en el navegador cuando utiliza el comando Vista previa en el navegador. Dreamweaver tambin utiliza el servidor de prueba para establecer conexiones con una base de datos en tiempo de diseo. Dreamweaver emplea la conexin en tiempo de diseo para proporcionarle informacin til sobre la base de datos, como los nombres de las tablas de la base de datos y los nombres de las columnas de las tablas. Un prefijo de URL consta del nombre de dominio y de cualquiera de los subdirectorios del directorio principal o directorios virtuales del sitio Web.
Nota: Esta seccin utiliza la terminologa de Microsoft IIS. Aunque sta puede variar en funcin del servidor, los mismos conceptos son aplicables a la mayora de los servidores Web.

El directorio principal

es la carpeta del servidor asignada al nombre de dominio del sitio. Supongamos que la carpeta que desea utilizar para procesar pginas es c:\sites\company\, y que esta carpeta es el directorio principal (es decir, la carpeta asignada al nombre de dominio del sitio; por ejemplo, www.mystartup.com). En ese caso, el prefijo de URL ser http://www.mystartup.com/. Si la carpeta que desea utilizar para procesar las pginas dinmicas es una subcarpeta del directorio principal, sencillamente aada la subcarpeta al URL. Supongamos que su directorio principal es c:\sites\company\, que el nombre de dominio del sitio es www.mystartup.com y que la carpeta que desea utilizar para procesar pginas dinmicas es c:\sites\company\inventory. Introduzca el siguiente prefijo de URL: http://www.mystartup.com/inventory/ Si la carpeta que desea utilizar para procesar las pginas dinmicas no es el directorio principal ni ninguno de sus subdirectorios, deber crear un directorio virtual.

Un directorio virtual es una carpeta que no est fsicamente contenida en el directorio principal del servidor aunque parezca estar en el URL. Para crear un directorio virtual, deber especificar un alias que represente la ruta de la carpeta en el URL. Supongamos que el directorio principal es c:\sites\company, que la carpeta de procesamiento es d:\apps\inventory y que define un alias para esta carpeta denominado warehouse. Introduzca el siguiente prefijo de URL:

http://www.mystartup.com/warehouse/

Configuracin de una aplicacin Web 153

Localhost (servidor local) es un trmino que indica el directorio local en los URL cuando el cliente (normalmente un navegador, aunque en este caso es Dreamweaver) se ejecuta en el mismo sistema que el servidor Web. Supongamos que Dreamweaver se ejecuta en el mismo sistema que el servidor Web, que el directorio principal es c:\sites\company y que ha definido un directorio virtual denominado warehouse que indica la carpeta que desea utilizar para procesar pginas dinmicas. Introduzca el siguiente prefijo de URL:

http://localhost/warehouse/ Para determinar el nombre de dominio y el directorio principal en PWS e IIS 4.0, haga clic en el icono Main (Principal) en Personal Web Manager y observe la pgina principal especificada en el rea Publishing (Publicacin).

Conexin con una base de datos

Si desea utilizar una base de datos con la aplicacin Web, deber conectarse antes con ella. Para obtener informacin general sobre las conexiones de bases de datos, consulte Aspectos bsicos de las conexiones de bases de datos en la pgina 744. Dreamweaver MX gestiona las conexiones de base de datos de forma diferente dependiendo de la tecnologa de servidor seleccionada. Consulte los siguientes captulos:

Captulo 7, Conexiones de base de datos para desarrolladores de ColdFusion, en la

pgina 157

Captulo 8, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 163 Captulo 9, Conexiones de base de datos para desarrolladores de ASP, en la pgina 169 Captulo 10, Conexiones de base de datos para desarrolladores de JSP, en la pgina 181 Captulo 11, Conexiones de base de datos para desarrolladores de PHP, en la pgina 189

Solucin de problemas de errores del servidor de aplicaciones

En esta seccin se describen algunos de los errores ms habituales del servidor de aplicaciones y cmo resolverlos. Para obtener ms informacin sobre los servidores de aplicaciones de Macromedia, visite los Centros de servicio tcnico de ColdFusion y JRun en el sitio Web de Macromedia en http://www.macromedia.com/es/support/. Para obtener ms informacin sobre otros servidores de aplicaciones, consulte la documentacin del servidor, visite el sitio Web o pngase en contacto con el departamento de servicio tcnico del proveedor. Esta seccin trata sobre los siguientes errores:

ColdFusion - 405, Method Not Allowed (mtodo no permitido) en la pgina 155 JRun - Syntax Error: Identifier expected instead of this token (error de sintaxis: se esperaba un
identificador en lugar de esta ficha) en la pgina 155

JRun - Error 2140 en la pgina 155 WebSphere - Error 403 (forbidden by rule) (prohibido por regla) en la pgina 155 WebSphere - Error 404 (File Not Found) (no se encontr el archivo) en la pgina 156

154 Captulo 6

ColdFusion - 405, Method Not Allowed (mtodo no permitido) Este error se produce con ColdFusion 4 o 5 cuando comprueba la instalacin. Puede deberse a que dispone de la versin FrontPage de PWS. Asegrese de que dispone de la versin completa de PWS y no de la versin FrontPage. Si dispone de la versin correcta, compruebe el nombre del directorio virtual de cfdocs y cfide. En PWS, haga clic en el icono Advanced (Avanzada), seleccione el directorio virtual de la lista y haga clic en Edit Properties (Modificar propiedades). En el cuadro Alias, quite las comas del nombre del directorio virtual. Si lo desea, puede tambin almacenar los archivos de la base de datos fuera de la carpeta raz del servidor Web. En ocasiones, los servidores Web pueden almacenar archivos en la memoria cach y bloquearlos provocando problemas de permiso de escritura. Adems, almacenar las bases de datos fuera de la carpeta raz del servidor Web puede proporcionar una medida adicional de seguridad. JRun - Syntax Error: Identifier expected instead of this token (error de sintaxis: se esperaba un identificador en lugar de esta ficha) Este error se produce al intentar procesar una pgina JSP llamada default.jsp. La palabra default (predeterminado) es una palabra clave reservada en JRun. Para resolver el problema, cambie el nombre de la pgina a index.jsp o home.jsp. JRun - Error 2140 Este error puede deberse a varios motivos:

No se introdujo correctamente la clave de licencia. Corte y pegue la clave de licencia que se

incluye en el mensaje de correo electrnico de confirmacin de compra para evitar errores de mecanografa. Compruebe tambin que no hay ningn espacio despus de la clave de licencia.

El archivo jsm predeterminado no se instal correctamente como servicio NT.

Para obtener ms informacin, consulte el artculo 12015 del Centro de servicio tcnico de JRun en http://www.macromedia.com/go/error_2140. WebSphere - Error 403 (forbidden by rule) (prohibido por regla) Este error se produce al llamar a un servlet o a un archivo JSP. Estas son las posibles causas y soluciones:

Utiliz un nombre de archivo incorrecto al llamar al archivo JSP. Compruebe el nombre del
archivo JSP. Corrija cualquier error ortogrfico, de maysculas o minsculas o de extensin del nombre del archivo. Compruebe que la extensin del nombre del archivo JSP es .jsp.

Si no utiliza el nmero de puerto predeterminado de IBM HTTP Server para la instancia

AS/400 (puerto 80), no habr aadido el host:puerto como alias del host virtual. Para ver los alias de los host virtuales, haga clic en la ficha Advanced properties (Propiedades avanzadas) del host virtual en la Administrative Console (Consola administrativa).

No hay servlet que habilite el JSP para la aplicacin Web en la que reside el archivo JSP.
Compruebe que se ha aadido el servlet que habilita el JSP para la aplicacin Web en la que reside el archivo JSP. Si no es as, crelo.

Si el servlet se cre en una aplicacin Web, necesitar una ruta URI (indicador universal de
recursos, Uniform Resource Indicator). Compruebe que la ruta URI es correcta.

Configuracin de una aplicacin Web 155

 Las directivas Pass (Pasar) o Redirect (Redirigir) de la configuracin del servidor HTTP activo
impiden la llamada del JSP o servlet. Compruebe que estas directivas de la configuracin AS/400 del servidor IBM HTTP Server activo son correctas. Para obtener ms informacin, consulte la seccin FAQ (en ingls, preguntas ms frecuentes) del sitio Web de IBM en http://www.ibm.com/support/techdocs/atsmastr.nsf/PubAllNum/FQ101338. Para obtener informacin sobre otros problemas de WebSphere, consulte el Centro de servicio tcnico de IBM WebSphere en http://www.ibm.com/software/webservers/appserv/support.html. WebSphere - Error 404 (File Not Found) (no se encontr el archivo) Este error se produce al llamar a un servlet o archivo JSP. Estas son las posibles causas y soluciones:

Compruebe que el URL del archivo JSP o servlet estn escritos correctamente. El proceso del servidor de aplicaciones no tiene autoridad suficiente para acceder a la carpeta
que contiene los cdigos Java y el archivo de clase generados por JSP. Compruebe que QEJBSVR tiene autoridad para acceder a la estructura de carpetas /QIBM/UserData/WebASAdv/default/temp o /QIBM/UserData/WebASAdv/<username>/temp.

Este error puede producirse porque no se encuentra una clase utilizada por el servlet.
Compruebe que todas las clases que necesita el servlet se encuentran en la variable de la ruta de clases de la aplicacin Web.

Este error puede producirse porque la directiva Pass del archivo de configuracin HTTP est
escrita incorrectamente. Si tiene la directiva Pass (PASS /*) antes que la directiva Service, nunca se har referencia a esta ltima. Para corregir este problema, desplace la directiva Pass al final de las entradas de configuracin HTTP o haga que sea ms especfica (por ejemplo, PASS /*.html). Para obtener ms informacin sobre las directivas de configuracin HTTP consulte Editing the HTTP configuration file to add server directives (Edicin del archivo de configuracin HTTP para aadir directivas de servidor) en la documentacin de WebSphere. Para obtener ms informacin, consulte el Centro de servicio tcnico de IBM WebSphere en http://www.ibm.com/software/webservers/appserv/support.html.

156 Captulo 6

CAPTULO 7 Conexiones de base de datos para desarrolladores de ColdFusion

En este captulo se describe cmo conectar con bases de datos al desarrollar aplicaciones Macromedia ColdFusion en Macromedia Dreamweaver MX. Las aplicaciones ColdFusion conectan con Dreamweaver seleccionando una fuente de datos ColdFusion definida en ColdFusion Administrator, la consola de administracin del servidor. En este captulo se presupone que ha configurado una aplicacin Web de ColdFusion (consulte Configuracin de una aplicacin Web en la pgina 145). Asimismo, se presupone que ha configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a travs de la red o del FTP. Este captulo contiene los siguientes temas:

Conexin con una base de datos en la pgina 157 Edicin o eliminacin de una conexin de base de datos en la pgina 158 Conexin utilizando la conectividad UltraDev 4 en la pgina 159
Para aprender ms sobre bases de datos y conexiones de base de datos, consulte Gua de bases de datos para principiantes en la pgina 737.

Conexin con una base de datos

Al desarrollar una aplicacin Web de ColdFusion en Dreamweaver, deber conectar con una base de datos seleccionando una fuente de datos ColdFusion definida en ColdFusion Administrator, la consola de administracin del servidor.
Nota: Si ejecuta ColdFusion 5 en un equipo Windows, podr tambin configurar un DSN en el equipo. En ColdFusion 4 o 5, los DSN del sistema se consideran automticamente fuentes de datos.

Antes de conectar con una base de datos, compruebe que Dreamweaver conoce la ubicacin de las fuentes de datos ColdFusion. Para recuperar las fuentes de datos ColdFusion en tiempo de diseo, Dreamweaver incluye scripts en una carpeta del equipo que ejecuta ColdFusion. Deber especificar dicha carpeta en la categora Servidor de prueba del cuadro de dilogo Definicin del sitio. Para obtener ms informacin, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152. A continuacin, cree una fuente de datos ColdFusion en ColdFusion Administrator (si no existe ninguna). Para obtener ms informacin, consulte Creacin de una fuente de datos ColdFusion en la pgina 158.

157

Tras crear una fuente de datos ColdFusion, podr utilizarla en Dreamweaver para conectar con la base de datos. Para obtener ms informacin, consulte Conexin con la base de datos en Dreamweaver en la pgina 158. En esta seccin se presupone que utiliza la conectividad Dreamweaver MX y no la Dreamweaver UltraDev 4. Las conexiones de base de datos se tratan de forma diferente en UltraDev 4. Para obtener ms informacin, consulte Conexin utilizando la conectividad UltraDev 4 en la pgina 159. Creacin de una fuente de datos ColdFusion Para poder conectar con una base de datos, deber crear antes una fuente de datos ColdFusion en ColdFusion Administrator, la consola de administracin del servidor.
Nota: Si ejecuta ColdFusion 5 en un equipo Windows, podr tambin configurar un DSN en el equipo. En ColdFusion 5, los DSN del sistema se consideran automticamente fuentes de datos. Para obtener ms informacin, consulte Configuracin de un DSN en Windows en la pgina 759.

Para crear una fuente de datos ColdFusion:

En el panel Bases de datos (Ventana > Bases de datos) de Dreamweaver, haga clic en el icono Modificar fuentes de datos (el segundo icono de la derecha de la barra de herramientas del panel). Se abrir ColdFusion Administrator en una ventana del navegador. Conecte con ColdFusion Administrator y cree la fuente de datos. Para obtener instrucciones, consulte la documentacin de ColdFusion.

Para crear la fuente de datos ColdFusion, deber proporcionar algunos valores de parmetros. Para conocer los valores de parmetros especficos del controlador de base de datos, consulte la documentacin del fabricante del controlador o pregunte al administrador del sistema. Una vez creada la fuente de datos ColdFusion, podr utilizarla en Dreamweaver. Conexin con la base de datos en Dreamweaver Tras crear una fuente de datos ColdFusion en ColdFusion Administrator, podr utilizarla en Dreamweaver para conectar con la base de datos. Abra cualquier pgina de ColdFusion en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Las fuentes de datos ColdFusion aparecen en el panel. Si no aparecen, compruebe que Dreamweaver conoce la ubicacin de las fuentes de datos ColdFusion. En la categora Servidor de prueba del cuadro de dilogo Definicin del sitio, especifique la carpeta raz del sitio en el equipo que ejecuta ColdFusion. Para obtener ms informacin, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152.

Edicin o eliminacin de una conexin de base de datos

Las fuentes de datos ColdFusion se editan o eliminan en ColdFusion Administrator. En el panel Bases de datos (Ventana > Bases de datos) de Dreamweaver, haga clic en el icono Modificar fuentes de datos (el segundo icono de la derecha de la barra de herramientas del panel). Se abrir ColdFusion Administrator en una ventana del navegador. Conecte y modifique la fuente de datos. Para obtener instrucciones, consulte la documentacin de ColdFusion.

158 Captulo 7

Para evitar errores al eliminar o cambiar el nombre de una fuente de datos ColdFusion, deber actualizar todos los juegos de registros que utilicen la antigua fuente de datos en Dreamweaver haciendo doble clic en el nombre del juego de registros en el panel Vinculaciones y seleccionando una nueva fuente de datos.

Conexin utilizando la conectividad UltraDev 4

En esta seccin se describe cmo conectar con una base de datos si ha creado su aplicacin ColdFusion utilizando los comportamientos de servidor de Dreamweaver UltraDev 4 o, si la crea en Dreamweaver MX, utilizando los comportamientos de servidor de UltraDev 4. Para obtener ms informacin, consulte Nota para los usuarios de Dreamweaver UltraDev 4 en la pgina 145. En esta seccin se utiliza el trmino ColdFusion UD4 para referirse a la conectividad UltraDev 4. Esta seccin trata sobre los siguientes temas:

Requisitos de conexin en la pgina 159 Creacin de una conexin ColdFusion UD4 habitual en la pgina 159 Creacin de una conexin ColdFusion UD4 avanzada (usuarios de Macintosh) en la
pgina 160

Edicin o eliminacin de una conexin ColdFusion UD4 en la pgina 160

Requisitos de conexin Antes de poder crear una conexin de base de datos ColdFusion UD4, deber disponer de:

Un sitio Dreamweaver que especifique que el sitio slo contiene archivos de UltraDev 4. Para
obtener ms informacin, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152.

Una base de datos configurada en su equipo local o en un sistema al que tiene acceso de red o
FTP.

Un controlador de base de datos adecuado que est instalado en el equipo que ejecuta
ColdFusion.

Una fuente de datos ColdFusion definida para la base de datos. Para obtener ms informacin,
consulte Creacin de una fuente de datos ColdFusion en la pgina 158. Creacin de una conexin ColdFusion UD4 habitual En esta seccin se describe cmo crear una conexin de base de datos habitual utilizando la conectividad UltraDev 4. La conectividad UltraDev 4 de ColdFusion en Macintosh no admite procedimientos almacenados en bases de datos que no sean SQL Server 7.0. Si es usuario de Macintosh y desea obtener acceso a un procedimiento almacenado en una base de datos que no sea SQL Server 7.0, cree una conexin ColdFusion avanzada utilizando JDBC para conectar con la base de datos en tiempo de diseo. Para conocer los procedimientos necesarios, consulte Creacin de una conexin ColdFusion UD4 avanzada (usuarios de Macintosh) en la pgina 160.

Conexiones de base de datos para desarrolladores de ColdFusion 159

Para crear una conexin ColdFusion UD4 habitual:

1 2 3

Abra una pgina de ColdFusion en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Haga clic en el botn de signo ms (+) del panel y seleccione Nombre de fuente de datos en el men emergente. Si sta es la primera conexin que crea para el sitio, Dreamweaver le pedir el nombre de usuario y la contrasea RDS (Servicios de desarrollo remoto, Remote Development Services) de ColdFusion. Tras establecer una conexin, Dreamweaver conecta con el servidor, recupera las fuentes de datos ColdFusion y muestra el cuadro de dilogo Nombre de fuente de datos.

Rellene el cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.

La nueva conexin se mostrar en el panel Bases de datos. Creacin de una conexin ColdFusion UD4 avanzada (usuarios de Macintosh) La conectividad UltraDev de ColdFusion en Macintosh no admite procedimientos almacenados en bases de datos que no sean de SQL Server 7.0. Si es usuario de Macintosh y desea utilizar un procedimiento almacenado en una base de datos que no sea SQL Server 7.0, deber crear una conexin ColdFusion avanzada.
Para crear una conexin de base de datos ColdFusion avanzada en Dreamweaver:

1 2 3

Abra una pgina de ColdFusion en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Haga clic en el botn de signo ms (+) del panel y seleccione Nombre de fuente de datos: Avanzado en el men emergente. Si es la primera conexin que crea para el sitio, Dreamweaver le pedir el nombre de usuario y la contrasea RDS de ColdFusion. Tras establecer una conexin, Dreamweaver conecta con el servidor, recupera los DSN de ColdFusion y muestra el cuadro de dilogo Nombre de fuente de datos: Avanzado.

Rellene el cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.

La nueva conexin se mostrar en el panel Bases de datos. Edicin o eliminacin de una conexin ColdFusion UD4 Al crear una conexin de base de datos, Dreamweaver almacena la informacin de conexin en un archivo en la subcarpeta Connections de la carpeta raz del sitio local. Dreamweaver no crea realmente una conexin de base de datos para la aplicacin ColdFusion hasta que haya definido un juego de registros para una pgina en la aplicacin (consulte Definicin de un juego de registros en la pgina 554). Es entonces cuando Dreamweaver escribe un cdigo en el archivo para establecer la conexin e inserta una directiva de inclusin (include) en la pgina. En tiempo de ejecucin, el servidor inserta el cdigo de conexin en su documento.

160 Captulo 7

Para actualizar una conexin:

Abra una pgina de ColdFusion en Dreamweaver MX y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Realice los cambios que desee y haga clic en Aceptar.

Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza todas las pginas del sitio que utilicen la conexin.
Para eliminar una conexin:

Abra una pgina de ColdFusion en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.

Para evitar recibir errores despus de eliminar la conexin, actualice todos los conjuntos de registros que utilicen la conexin antigua haciendo doble clic en el nombre del juego de registros del panel Vinculaciones y eligiendo una nueva conexin.

Conexiones de base de datos para desarrolladores de ColdFusion

161

162 Captulo 7

CAPTULO 8 Conexiones de base de datos para desarrolladores de ASP.NET

Para utilizar una base de datos con una aplicacin ASP.NET, deber crear una conexin de base de datos en Macromedia Dreamweaver MX. En este captulo se describe cmo hacerlo.
Nota: Si est desarrollando aplicaciones Active Server Pages (ASP) de Microsoft, consulte Conexiones de base de datos para desarrolladores de ASP en la pgina 169.

En este captulo se presupone que ha configurado una aplicacin ASP.NET (consulte Configuracin de una aplicacin Web en la pgina 145). Asimismo, se presupone que ha configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a travs de la red o del FTP. Este captulo contiene las siguientes secciones:

Conexin con una base de datos en la pgina 163 Edicin o eliminacin de una conexin de base de datos en la pgina 166
Para conectar con la base de datos de muestra instalada en Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver). Para aprender ms sobre bases de datos y conexiones de base de datos, consulte Gua de bases de datos para principiantes en la pgina 737.

Conexin con una base de datos

En esta seccin se describe cmo conectar con una base de datos durante el desarrollo de una aplicacin ASP.NET en Dreamweaver MX. Antes de conectar con una base de datos, debe obtener un proveedor de OLE DB para su base de datos. Si desea conectar con una base de datos Microsoft SQL Server, puede utilizar el proveedor de datos administrados para SQL Server, suministrado por .NET Framework. Para obtener ms informacin, consulte Obtencin de un proveedor de OLE DB para la base de datos en la pgina 164. Una vez instalado el proveedor de la base de datos, puede utilizarlo para conectar con la misma. Para obtener instrucciones, consulte las siguientes secciones:

Creacin de una conexin de base de datos en Dreamweaver en la pgina 164 Creacin de una conexin utilizando Propiedades del vnculo de datos en la pgina 165

163

Obtencin de un proveedor de OLE DB para la base de datos Una aplicacin ASP.NET debe conectar con una base de datos a travs de un proveedor de OLE DB. ste acta como un intrprete que permite a la aplicacin ASP.NET comunicarse con una base de datos. Para obtener ms informacin sobre OLE DB y la funcin de los proveedores de base de datos, consulte Interfaz con la base de datos en la pgina 744. Si desea conectar con una base de datos Microsoft SQL Server, puede utilizar el proveedor de datos administrados para SQL Server, suministrado por .NET Framework. Este proveedor, que ha sido optimizado para SQL Server y es muy rpido, se instala junto con .NET Framework. Si desea conectar con otra base de datos distinta de SQL Server, compruebe que en el equipo que ejecuta .NET Framework hay instalado un proveedor de OLE DB para la base de datos. Al descargar e instalar el paquete Microsoft Data Access Components (MDAC) 2.7 en el equipo, se instala automticamente un proveedor de OLE DB para Microsoft Access.
Nota: Se recomienda instalar MDAC 2.7 junto con .NET Framework. Para obtener ms informacin, consulte Instalacin de un servidor de aplicaciones ASP.NET en la pgina 148.

Puede descargar proveedores OLE DB para bases de datos Oracle9i y Oracle8i del sitio Web de Oracle en http://otn.oracle.com/software/tech/windows/ole_db/content.html (es preciso registrarse). Tambin podr adquirirlos de otros proveedores independientes. Cuando disponga de un proveedor para la base de datos, podr utilizarlo para crear conexiones de base de datos en Dreamweaver. Creacin de una conexin de base de datos en Dreamweaver Despus de obtener un proveedor de OLE DB para la base de datos, puede utilizarlo para crear una conexin de base de datos en Dreamweaver. Otra opcin consiste en utilizar el cuadro de dilogo Propiedades del vnculo de datos de Microsoft para que le ayude a crear la conexin. Para obtener instrucciones, consulte Creacin de una conexin utilizando Propiedades del vnculo de datos en la pgina 165.
Para crear una conexin de base de datos para ASP.NET:

Abra una pgina ASP.NET en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel se mostrarn las conexiones definidas para dicho sitio. Haga clic en el botn de signo ms (+) del panel y seleccione Conexin de base de datos OLE o Conexin con SQL Server en el men emergente.
Nota: Seleccione Conexin con SQL Server si desea slo conectar con una base de datos Microsoft SQL Server.

Aparecer el cuadro de dilogo Conexin de base de datos OLE o Conexin con SQL Server.
3

Rellene el cuadro de dilogo y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

La nueva conexin se mostrar en el panel Bases de datos.

164 Captulo 8

Creacin de una conexin utilizando Propiedades del vnculo de datos Despus de obtener un proveedor de OLE DB para la base de datos (consulte Obtencin de un proveedor de OLE DB para la base de datos en la pgina 164), podr crear una conexin de base de datos utilizando el cuadro de dilogo Propiedades del vnculo de datos de Windows. Importante: Slo podr utilizar este mtodo si el proveedor de OLE DB que desea utilizar est instalado en el mismo equipo Windows que Dreamweaver.
Para crear una conexin de base de datos utilizando Propiedades del vnculo de datos:

Abra una pgina ASP.NET en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel se mostrarn las conexiones definidas para dicho sitio. Haga clic en el botn de signo ms (+) del panel y seleccione Conexin de base de datos OLE en el men emergente. Aparecer el cuadro de dilogo Conexin de base de datos OLE. Haga clic en el botn Crear. Aparecer el cuadro de dilogo Propiedades del vnculo de datos. Este cuadro de dilogo de Windows muestra los proveedores de OLE DB instalados actualmente en el equipo Windows que ejecuta Dreamweaver.

Complete el cuadro de dilogo y haga clic en Aceptar. Dreamweaver insertar una cadena de conexin en el cuadro de dilogo Conexin de base de datos OLE.

Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo la cadena de conexin. Si la conexin contina fallando, compruebe la configuracin de la carpeta que utiliza Dreamweaver para procesar las pginas dinmicas (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152).

Haga clic en Aceptar. La nueva conexin se muestra en el panel Bases de datos.

Ejemplos de parmetros de conexin de base de datos OLE para ASP.NET Una cadena de conexin de base de datos OLE combina toda la informacin que necesita la aplicacin ASP.NET para conectar con una base de datos. Dreamweaver inserta esta cadena en los scripts del lado del servidor de la pgina que el servidor de aplicaciones procesar posteriormente. Dreamweaver proporciona plantillas de cadenas para crear cadenas de conexin de base de datos OLE para aplicaciones ASP.NET (consulte Creacin de una conexin de base de datos en Dreamweaver en la pgina 164). Para crear una cadena de conexin, deber sustituir los marcadores de posicin de la plantilla por los valores de parmetros solicitados. En esta seccin se ofrecen parmetros de muestra para bases de datos Microsoft Access y SQL Server.
Nota: Para conocer los valores de parmetros especficos de otras bases de datos, consulte la documentacin del fabricante de la base de datos o pregunte al administrador del sistema.

Conexiones de base de datos para desarrolladores de ASP.NET 165

Ejemplo 1:

Tiene instalado .NET Framework en el equipo local y desea conectar con una base de datos Microsoft Access llamada sdSchool.mdb que se encuentra en la siguiente carpeta del disco duro: c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb. Los parmetros para crear esta cadena de conexin son los siguientes: Proveedor=Microsoft.Jet.OLEDB.4.0; Fuente de datos=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb;

Ejemplo 2: Utiliza .NET Framework en un servidor de desarrollo remoto y desea conectar con una base de datos Microsoft Access llamada mtnSchool.mdb que se encuentra en la siguiente carpeta del servidor: d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Los parmetros para crear esta cadena de conexin son los siguientes:

Proveedor=Microsoft.Jet.OLEDB.4.0; Fuente de datos=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb;

Ejemplo 3: Supongamos que utiliza .NET Framework en un servidor de desarrollo de red llamado

Savant y desea conectar con una base de datos Microsoft SQL Server llamada pubs en el servidor. Su nombre de usuario de SQL Server es sa y no hay contrasea. Si utiliza el proveedor de datos administrados para SQL Server (es decir, si eligi Conexin con SQL Server en el panel Bases de datos), los parmetros para crear esta cadena de conexin son los siguientes: Fuente de datos=Savant; Catlogo inicial=pubs; ID de usuario=sa; Contrasea=;

Edicin o eliminacin de una conexin de base de datos

Al crear una conexin de base de datos, Dreamweaver almacena la informacin de conexin en un archivo en la subcarpeta Connections de la carpeta raz del sitio local. Dreamweaver no crea realmente una conexin de base de datos para la aplicacin ASP.NET hasta que haya definido un conjunto de datos para una pgina en la aplicacin (consulte Definicin de un juego de registros en la pgina 554). Es entonces cuando Dreamweaver escribe un cdigo en el archivo para establecer la conexin e inserta una directiva de inclusin (include) en la pgina. En tiempo de ejecucin, el servidor inserta el cdigo de conexin en su documento.
Para actualizar una conexin:

Abra una pgina ASP.NET en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Realice los cambios que desee y haga clic en Aceptar.

Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza automticamente todas las pginas del sitio que utilicen la conexin.

166 Captulo 8

Si cambia el nombre de una conexin, actualice cada juego de registros que utilice el nombre de conexin antiguo haciendo doble clic en el juego de registros del panel Vinculaciones y seleccionando el nombre de la nueva conexin en el cuadro de dilogo Conjunto de datos.
Para eliminar una conexin:

Abra una pgina ASP.NET en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.
Nota: Para evitar errores en la eliminacin de una conexin, deber actualizar todos los juegos de registros que utilicen la antigua conexin haciendo doble clic en el nombre del juego de registros en el panel Vinculaciones y seleccionando una nueva conexin en el cuadro de dilogo Conjunto de datos.

Conexiones de base de datos para desarrolladores de ASP.NET 167

168 Captulo 8

CAPTULO 9 Conexiones de base de datos para desarrolladores de ASP

Para utilizar una base de datos con la aplicacin Active Server Pages (ASP) de Microsoft, deber crear una conexin de base de datos en Macromedia Dreamweaver MX. Este captulo describe cmo crear dicha conexin de base de datos.
Nota: Si est desarrollando aplicaciones ASP.NET, consulte Conexiones de base de datos para desarrolladores de ASP.NET en la pgina 163.

En este captulo se presupone que ha configurado una aplicacin ASP (consulte Configuracin de una aplicacin Web en la pgina 145). Asimismo, se presupone que ha configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a travs de la red o del FTP. Este captulo contiene las siguientes secciones:

Aspectos bsicos de las conexiones de base de datos con ASP en la pgina 170 Creacin de una conexin con DSN en la pgina 170 Creacin de una conexin sin DSN en la pgina 173 Conexin con una base de datos en un ISP en la pgina 176 Edicin o eliminacin de una conexin de base de datos en la pgina 178

Para conectar con la base de datos de muestra instalada en Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver). Para aprender ms sobre bases de datos y conexiones de base de datos, consulte Apndice A, Gua de bases de datos para principiantes, en la pgina 737.

169

Aspectos bsicos de las conexiones de base de datos con ASP

Una aplicacin ASP debe conectar con una base de datos a travs de un controlador ODBC (Controlador de conectividad de base de datos abierta, Open Database Connectivity) o de un proveedor OLE DB (Base de datos de vinculacin e incrustacin de objetos, Object Linking and Embedding Database). El controlador o proveedor acta como un intrprete que permite que la aplicacin Web se comunique con la base de datos. Para obtener ms informacin sobre la funcin de los controladores de base de datos, consulte Interfaz con la base de datos en la pgina 744. La siguiente tabla muestra algunos de los controladores que se pueden utilizar con bases de datos Microsoft Access, Microsoft SQL Server y Oracle:
Base de datos Microsoft Access Microsoft SQL Server Controlador de base de datos Controlador de Microsoft Access (ODBC) Controlador de Microsoft SQL Server (ODBC) Proveedor de Microsoft SQL Server (OLE DB) Controlador de Microsoft para Oracle (ODBC) Proveedor de OLE DB para Oracle

Oracle

Puede utilizar un DSN (Nombre de fuente de datos, Data Source Name) o una cadena de conexin para conectarse a la base de datos. Un DSN es un identificador de una palabra, como Acme, que seala a la base de datos y contiene toda la informacin necesaria para conectar con ella. Un DSN se define en Windows. Puede utilizar un DSN si est conectando a travs de un controlador ODBC instalado en un sistema Windows. Si desea obtener instrucciones detalladas, consulte Creacin de una conexin con DSN en la pgina 170. Una cadena de conexin es una expresin codificada manualmente que identifica la base de datos y contiene la informacin necesaria para conectar con ella. Ejemplo:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg; UID=wiley;PWD=roadrunner

Debe utilizar una cadena de conexin si se conecta con la base de datos mediante uno de los siguientes elementos:

Un proveedor OLE DB Un controlador ODBC que no est instalado en un sistema Windows

Para obtener instrucciones detalladas, consulte las siguientes secciones:

Creacin de una conexin sin DSN en la pgina 173 Conexin con una base de datos en un ISP en la pgina 176
Nota: Tambin puede utilizar una cadena de conexin si conecta a travs de un controlador ODBC instalado en un sistema Windows, pero en tal caso, resulta ms sencillo utilizar un DSN.

Creacin de una conexin con DSN

Puede utilizar un DSN para crear una conexin ODBC entre la aplicacin Web y la base de datos. Un DSN es un nombre que contiene todos los parmetros necesarios para conectar con una base de datos ODBC concreta. Para obtener ms informacin, consulte Aspectos bsicos de los DSN en la pgina 759.

170 Captulo 9

Nota: Dado que slo puede especificar un controlador ODBC en un DSN, si desea utilizar un proveedor OLE DB tendr que utilizar una cadena de conexin. Para obtener ms informacin, consulte Creacin de una conexin OLE DB en la pgina 175.

Puede definir el DSN en un equipo Windows local o remoto. Los siguientes temas describen mtodos para crear ambos tipos de conexin:

Creacin de una conexin utilizando un DSN local en la pgina 171 Creacin de una conexin utilizando un DSN remoto en la pgina 172
Creacin de una conexin utilizando un DSN local Puede utilizar un DSN definido en un equipo local para crear una conexin de base de datos en Dreamweaver. Si desea utilizar un DSN local, el DSN debe estar definido en el equipo Windows que est ejecutando Dreamweaver.
Para crear una conexin de base de datos con un DSN definido en el equipo local:

Defina un DSN en el equipo Windows que est ejecutando Dreamweaver. Para obtener instrucciones, consulte Creacin de un DSN en la pgina 759. Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra todas las conexiones definidas para el sitio. Haga clic en el botn de signo ms (+) en el panel y seleccione Nombre de fuente de datos (DSN) en el men emergente. Aparecer el cuadro de dilogo Nombre de fuente de datos (DSN).

Introduzca un nombre para la nueva conexin.

Nota: No utilice espacios ni caracteres especiales en el mismo.

5 6

En la parte inferior del cuadro de dilogo, seleccione la opcin Utilizando DSN local. En el men emergente Nombre de fuente de datos (DSN), seleccione el DSN que desee utilizar. Si desea utilizar un DSN local pero an no lo ha definido, haga clic en DSN para abrir el Administrador de origen de datos ODBC de Windows. Para obtener instrucciones, consulte Creacin de una conexin con DSN en la pgina 170.

Si es preciso, complete los cuadros Nombre de usuario y Contrasea.

Conexiones de base de datos para desarrolladores de ASP

171

Si lo desea, restrinja el nmero de elementos de la base de datos que puede recuperar Dreamweaver en tiempo de diseo haciendo clic en Avanzada e introduciendo un esquema o nombre de catlogo. Para obtener ms informacin, consulte Restriccin de la informacin de base de datos que se muestra en Dreamweaver en la pgina 530.
Nota: No puede crear un esquema o catlogo en Microsoft Access.

Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si la conexin falla, compruebe de nuevo el DSN. Si la conexin contina fallando, compruebe la configuracin de la carpeta que utiliza Dreamweaver para procesar las pginas dinmicas (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152).

10

Haga clic en Aceptar. La nueva conexin se muestra en el panel Bases de datos.

Creacin de una conexin utilizando un DSN remoto Puede utilizar un DSN definido en un equipo remoto para crear una conexin de base de datos en Dreamweaver. Si desea utilizar un DSN remoto, el DSN debe estar definido en el equipo Windows que est ejecutando el servidor de aplicaciones (probablemente IIS).
Para crear una conexin de base de datos con un DSN definido en un equipo remoto:

Defina un DSN en el sistema remoto que est ejecutando el servidor de aplicaciones. Para obtener instrucciones, consulte Creacin de un DSN en la pgina 759. Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra todas las conexiones definidas para el sitio. Haga clic en el botn de signo ms (+) en el panel y seleccione Nombre de fuente de datos (DSN) en el men emergente. Aparecer el cuadro de dilogo Nombre de fuente de datos (DSN). Introduzca un nombre para la nueva conexin.
Nota: No utilice espacios ni caracteres especiales en el mismo.

En la parte inferior del cuadro de dilogo, seleccione la opcin Utilizando DSN en el servidor de prueba. Los usuarios de Macintosh pueden pasar por alto este paso porque todas las conexiones de base de datos utilizan DSN en el servidor de aplicaciones.

Introduzca el DSN. Puede hacer clic en el botn DSN para conectar con el servidor y elegir uno de los DSN definidos en l.

Si es preciso, complete los cuadros Nombre de usuario y Contrasea.

172 Captulo 9

Si lo desea, restrinja el nmero de elementos de la base de datos que puede recuperar Dreamweaver en tiempo de diseo haciendo clic en Avanzada e introduciendo un esquema o nombre de catlogo. Para obtener ms informacin, consulte Restriccin de la informacin de base de datos que se muestra en Dreamweaver en la pgina 530.
Nota: No puede crear un esquema o catlogo en Microsoft Access.

Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo el DSN. Si la conexin contina fallando, compruebe la configuracin de la carpeta que utiliza Dreamweaver para procesar las pginas dinmicas (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152).

10

Haga clic en Aceptar. La nueva conexin se muestra en el panel Bases de datos.

Creacin de una conexin sin DSN

Puede utilizar una conexin sin DSN para crear una conexin ODBC u OLE DB entre la aplicacin Web y la base de datos. Para crear la conexin, se utiliza una cadena de conexin. Una cadena de conexin combina toda la informacin que la aplicacin Web del servidor necesita para conectar con la base de datos. Dreamweaver inserta esta cadena en los scripts del lado del servidor de la pgina que el servidor de aplicaciones procesar posteriormente. A continuacin se ofrece un ejemplo de cadena de conexin:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Academy\curriculum.mdb

He aqu un segundo ejemplo:

Driver={SQL Server};Server=Socrates;Database=MedCenter; UID=mwelby;PWD=realme

Esta seccin contiene los siguientes temas:

Creacin de una conexin de base de datos con una cadena de conexin en la pgina 173 Cmo escribir una cadena de conexin en la pgina 174 Creacin de una conexin OLE DB en la pgina 175
Creacin de una conexin de base de datos con una cadena de conexin Puede utilizar una cadena de conexin para crear una conexin de base de datos entre la aplicacin Web y la base de datos.
Para crear una conexin sin DSN:

Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra todas las conexiones definidas para el sitio, si las hubiera.

Conexiones de base de datos para desarrolladores de ASP 173

Haga clic en el botn de signo ms (+) del panel y seleccione Cadena de conexin personalizada en el men emergente. Aparecer el cuadro de dilogo Cadena de conexin personalizada como se muestra a continuacin.

Rellene el cuadro de dilogo y haga clic en Aceptar.

Para obtener ms informacin, lleve a cabo una de las siguientes operaciones:

Presione el botn Ayuda del cuadro de dilogo. Consulte Cmo escribir una cadena de conexin en la pgina 174.
Cmo escribir una cadena de conexin Una cadena de conexin combina toda la informacin que la aplicacin Web del servidor necesita para conectar con la base de datos. Dreamweaver inserta esta cadena en los scripts del lado del servidor de la pgina que el servidor de aplicaciones procesar posteriormente. Una cadena de conexin para bases de datos Microsoft Access y SQL Server consta de una combinacin de los siguientes parmetros separados por punto y coma:
Provider

(proveedor) especifica el proveedor OLE DB para la base de datos. Por ejemplo, a continuacin se incluyen parmetros para proveedores OLE DB comunes para bases de datos Access, SQL Server y Oracle, respectivamente:

Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;...

Para conocer el valor del parmetro de su proveedor OLE DB, consulte la documentacin del fabricante o pregunte al administrador del sistema. Si no incluye el parmetro Provider, se utilizar el proveedor OLE DB predeterminado para ODBC y deber especificar un controlador ODBC adecuado para la base de datos.
Driver

(controlador) especifica el controlador ODBC que se utilizar si no se especifica un proveedor OLE DB para la base de datos.

Server

(servidor) especifica el servidor que aloja la base de datos SQL Server si la aplicacin Web se ejecuta en un servidor distinto. (base de datos) es el nombre de una base de datos SQL Server.

Database

DBQ es la ruta de una base de datos basada en archivos, como, por ejemplo, una base de datos creada en Microsoft Access. La ruta es la existente en el servidor que aloja el archivo de base de datos.

174 Captulo 9

UID

especifica el nombre del usuario. especifica la contrasea del usuario.

PWD DSN

es el nombre de la fuente de datos, en el caso de que se utilice. En funcin de cmo defina el DSN en el servidor, podr omitir los dems parmetros de la cadena de conexin. Por ejemplo, DSN=Results puede ser una cadena de conexin vlida si define el resto de los parmetros al crear el DSN (consulte Creacin de un DSN en la pgina 759). Es posible que las cadenas de conexin para otros tipos de bases de datos no utilicen los parmetros enumerados ms arriba o, en caso de hacerlo, llamen a los parmetros o los utilicen de forma distinta. Para obtener ms informacin, consulte la documentacin del fabricante de la base de datos o pregunte al administrador del sistema. A continuacin se ofrece un ejemplo de cadena de conexin que crea una conexin ODBC con una base de datos Access denominada trees.mdb:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.mdb

A continuacin se ofrece un ejemplo de cadena de conexin que crea una conexin OLE DB con una base de datos SQL Server denominada Mothra ubicada en un servidor llamado Gojira:
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; PWD=orlando8

Creacin de una conexin OLE DB Puede utilizar un proveedor OLE DB para comunicar con la base de datos. La creacin de una conexin OLE DB directa puede mejorar la velocidad de la conexin mediante la eliminacin de la capa ODBC entre la aplicacin Web y la base de datos. Utilizando un proveedor OLE DB especfico para base de datos, elimina el intermediario ODBC. Si no especifica un proveedor OLE DB para la base de datos, ASP utilizar el proveedor OLE DB predeterminado para controladores ODBC para comunicar con un controlador ODBC que, a su vez, comunica con la base de datos. OLE DB est disponible slo con Windows NT, 2000 o XP. Existen distintos proveedores OLE DB para las distintas bases de datos. Puede obtener proveedores OLE DB para Microsoft Access y SQL Server descargando e instalando los paquetes Microsoft Data Access Components (MDAC) 2.5 y 2.6 en el equipo Windows que est ejecutando IIS o PWS (cuando sea pertinente). Puede descargar gratuitamente los paquetes MDAC del sitio Web de Microsoft en http://www.microsoft.com/data/download.htm.
Nota: Instale MDAC 2.5 antes de instalar MDAC 2.6.

Puede descargar proveedores OLE DB para bases de datos Oracle9i y Oracle8i del sitio Web de Oracle en http://otn.oracle.com/software/tech/windows/ole_db/content.html (es preciso registrarse). En Dreamweaver MX, una conexin OLE DB se crea mediante la inclusin de un parmetro Provider (proveedor) en una cadena de conexin. Por ejemplo, a continuacin se incluyen parmetros para proveedores OLE DB comunes para bases de datos Access, SQL Server y Oracle, respectivamente:
Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;...

Conexiones de base de datos para desarrolladores de ASP 175

Para conocer el valor del parmetro de su proveedor OLE DB, consulte la documentacin del fabricante o pregunte al administrador del sistema.

Conexin con una base de datos en un ISP

Si usted es un desarrollador de ASP que trabaja con un ISP (Proveedor de servicios de Internet, Internet Service Provider), es probable que desconozca la ruta fsica de los archivos que carga, incluyendo el archivo o archivos de base de datos. Si el ISP no define un DSN para usted o tarda en hacerlo, debe encontrar una forma alternativa de crear las conexiones con los archivos de base de datos. Una alternativa es crear una conexin sin DSN con un archivo de base de datos, pero dicha conexin slo puede definirse si conoce la ruta fsica del archivo de base de datos en el servidor del ISP. Esta seccin describe cmo se puede obtener la ruta fsica de un archivo de base de datos en un servidor utilizando el mtodo MapPath del objeto de servidor ASP. Esta seccin trata sobre los siguientes temas:

Aspectos bsicos de las rutas fsicas y virtuales en la pgina 176 Localizacin de una ruta fsica de archivo con la ruta virtual en la pgina 176 Utilizacin de una ruta virtual para conectar con una base de datos en la pgina 177
Nota: Las tcnicas que se describen en este captulo son aplicables slo si la base de datos est basada en archivos, como la base de datos Microsoft Access, donde los datos se almacenan en un archivo .mdb.

Aspectos bsicos de las rutas fsicas y virtuales Despus de cargar los archivos en un servidor remoto mediante Dreamweaver, los archivos residen en una carpeta en el rbol local de directorios del servidor. Por ejemplo, en un servidor que ejecute Microsoft IIS, la ruta de la pgina principal podra ser la siguiente:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

Esta ruta se conoce como la ruta fsica del archivo. No obstante, el URL para abrir el archivo no utiliza la ruta fsica. Utiliza el nombre del servidor o dominio seguido de una ruta virtual, como en el siguiente ejemplo:
www.plutoserve.com/jsmith/index.htm

La ruta virtual, /jsmith/index.htm, sustituye a la ruta fsica, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm. Localizacin de una ruta fsica de archivo con la ruta virtual Si trabaja con un ISP, no siempre conocer la ruta fsica de los archivos que cargue. Los ISP suelen proporcionarle un servidor FTP, posiblemente un directorio de servidor y un nombre de conexin y la contrasea. Los ISP tambin especifican un URL para ver las pginas en Internet, como por ejemplo www.plutoserve.com/jsmith/. Si conoce el URL, puede obtener la ruta virtual del archivo (es la ruta que sigue al nombre de servidor o de dominio en un URL). Una vez conoce la ruta virtual, puede obtener la ruta fsica del archivo en el servidor mediante el mtodo MapPath. Entre otras cosas, el mtodo MapPath toma la ruta virtual como un argumento y devuelve la ruta fsica y el nombre del archivo. He aqu la sintaxis del mtodo:
Server.MapPath("/virtualpath")

176 Captulo 9

Suponga que /jsmith/index.htm es una ruta virtual de archivo. La siguiente expresin devolver su ruta fsica:
Server.MapPath("/jsmith/index.htm")

Puede experimentar con el mtodo MapPath como se explica a continuacin.

1 2

Abra una pgina ASP en Dreamweaver y cambie a la vista Cdigo (Ver > Cdigo). Introduzca la siguiente expresin en el cdigo de la pgina HTML.
<%Response.Write(stringvariable)%>

Utilice el mtodo MapPath para obtener un valor para el argumento stringvariable. He aqu un ejemplo:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>

Cambie a la vista Diseo (Ver > Diseo) y active Live Data (Ver > Live Data) para ver la pgina. La pgina muestra la ruta fsica del archivo en el servidor de aplicaciones. Utilizando el ejemplo tratado en esta seccin, la pgina muestra la siguiente ruta fsica:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

Para obtener ms informacin sobre el mtodo MapPath, consulte la documentacin en lnea que viene con Microsoft IIS o PWS. Utilizacin de una ruta virtual para conectar con una base de datos Para escribir una cadena de conexin sin DSN en un archivo de base de datos situado en un servidor remoto, debe conocer la ruta fsica del archivo. Por ejemplo, he aqu una cadena de conexin sin DSN tpica para una base de datos Microsoft Access:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

Si no conoce la ruta fsica de sus archivos en el servidor remoto, puede obtener la ruta utilizando el mtodo MapPath de su cadena de conexin.
Para crear una conexin sin DSN con el mtodo MapPath:

Cargue el archivo de base de datos en el servidor remoto. Anote su ruta virtual, como por ejemplo /jsmith/data/statistics.mdb. Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra todas las conexiones definidas para el sitio. Haga clic en el botn de signo ms (+) del panel y seleccione Cadena de conexin personalizada en el men emergente. Introduzca un nombre para la nueva conexin.
Nota: No utilice espacios ni caracteres especiales en el mismo.

3 4

Conexiones de base de datos para desarrolladores de ASP 177

Escriba la cadena de conexin y utilice el mtodo MapPath para proporcionar el parmetro DBQ. Suponga que la ruta virtual de su base de datos Microsoft Access es /jsmith/data/statistics.mdb. La cadena de conexin puede expresarse como se indica a continuacin si utiliza el lenguaje de scripts VBScript:
Driver={Microsoft Access Driver (*.mdb)};DBQ= & Server.MapPath ("/jsmith/data/statistics.mdb")

El carcter ampersand (&) se utiliza para concatenar (combinar) dos cadenas. La primera cadena va entre comillas y la segunda la devuelve la expresin Server.MapPath. Al combinar dos cadenas, se crea la siguiente cadena:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

Si utiliza JavaScript, la expresin es idntica excepto en que el signo que se utiliza para concatenar dos cadenas es el ms (+) en lugar del ampersand (&):
Driver={Microsoft Access Driver (*.mdb)};DBQ= + Server.MapPath ("/jsmith/data/statistics.mdb") 6

Seleccione la opcin Utilizando un controlador del servidor de prueba. Los usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de datos utilizan el servidor de aplicaciones.

Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo la cadena de conexin. Si la conexin sigue fallando, pngase en contacto con el ISP para comprobar si el controlador de base de datos que ha especificado en la cadena de conexin est instalado en el servidor remoto. Compruebe asimismo que el ISP tiene la versin ms reciente del controlador. Por ejemplo, una base de datos creada en Microsoft Access 2000 no funciona con Microsoft Access Driver 3.5. Necesita Microsoft Access Driver 4.0 o una versin posterior.

Haga clic en Aceptar. La nueva conexin se muestra en el panel Bases de datos. Actualice la conexin de base de datos de las pginas dinmicas existentes y utilice la nueva conexin con las pginas que cree. Para actualizar la conexin de una pgina dinmica, abra la pgina en Dreamweaver, haga doble clic en el nombre del juego de registros en el panel Vinculaciones o en el panel Comportamientos del servidor y seleccione la conexin que acaba de crear en el men emergente Conexin.

Edicin o eliminacin de una conexin de base de datos

Al crear una conexin de base de datos, Dreamweaver almacena la informacin de conexin en un archivo en la subcarpeta Connections de la carpeta raz del sitio local. Dreamweaver no crea realmente una conexin de base de datos para la aplicacin ASP hasta que se define un juego de registros para una pgina de la aplicacin (consulte Definicin de un juego de registros en la pgina 554). Es entonces cuando Dreamweaver escribe un cdigo en el archivo para establecer la conexin e inserta una directiva de inclusin (include) en la pgina. En tiempo de ejecucin, el servidor inserta el cdigo de conexin en su documento.

178 Captulo 9

Para actualizar una conexin:

Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho (Windows) o presione la tecla Control y haga clic (Macintosh) en la conexin y elija Editar conexin en el men emergente, como se muestra a continuacin.

Se muestra el cuadro de dilogo utilizado para crear la conexin.

3

Realice los cambios que desee y haga clic en Aceptar.

Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza todas las pginas del sitio que utilicen la conexin.
Para eliminar una conexin:

Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.
Nota: Para evitar recibir errores despus de eliminar la conexin, actualice todos los conjuntos de registros que utilicen la conexin antigua haciendo doble clic en el nombre del juego de registros del panel Vinculaciones y eligiendo una nueva conexin.

Conexiones de base de datos para desarrolladores de ASP 179

180 Captulo 9

CAPTULO 10 Conexiones de base de datos para desarrolladores de JSP

Para utilizar una base de datos con una aplicacin JavaServer Pages (JSP), deber crear una conexin de base de datos en Macromedia Dreamweaver MX. En este captulo se describe cmo hacerlo. En este captulo se presupone que ha configurado una aplicacin JSP (consulte Configuracin de una aplicacin Web en la pgina 145). Se presupone tambin que dispone de una base de datos configurada en su equipo local o en un sistema al que tiene acceso de red o FTP. Este captulo contiene las siguientes secciones:

Aspectos bsicos de las conexiones JSP en la pgina 181 Conexin con una base de datos en la pgina 182 Conexin mediante un controlador ODBC en la pgina 184 Edicin o eliminacin de una conexin de base de datos en la pgina 186

Para conectar con la base de datos de muestra instalada en Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver). Para aprender ms sobre bases de datos y conexiones de base de datos, consulte Gua de bases de datos para principiantes en la pgina 737.

Aspectos bsicos de las conexiones JSP

Una aplicacin JSP debe conectar con una base de datos mediante un controlador JDBC. El controlador acta como un intrprete que permite a la aplicacin JSP comunicarse con una base de datos. Para obtener ms informacin sobre JDBC y la funcin de los controladores de base de datos, consulte Interfaz con la base de datos en la pgina 744. Para conectar mediante un controlador JDBC, deber especificar algunos valores de parmetros. Para obtener ms informacin, consulte Parmetros de conexin JDBC en la pgina 183. Para conocer los parmetros especficos del controlador, consulte la documentacin del fabricante del controlador o pregunte al administrador del sistema. Tambin podr utilizar un controlador ODBC (y un DSN de Windows) si dispone de un controlador puente JDBC-ODBC. Para obtener ms informacin, consulte Conexin mediante un controlador ODBC en la pgina 184.

181

Conexin con una base de datos

En esta seccin se describe cmo conectar con una base de datos durante el desarrollo de una aplicacin JSP en Dreamweaver MX. Se presupone que existe un servidor de aplicaciones JSP ejecutndose en un equipo local o remoto. (Para la mayora de los usuarios de Macintosh y muchos equipos de desarrollo, el servidor de aplicaciones JSP se ejecuta en un servidor de desarrollo independiente.) Para obtener ms informacin, consulte Configuracin de una aplicacin Web en la pgina 145. Antes de conectar con una base de datos, debe obtener un controlador JDBC para su base de datos. Una vez instalado el controlador de la base de datos, podr utilizarlo para conectar con la base de datos. Para obtener instrucciones, consulte Creacin de una conexin de base de datos para JSP en la pgina 182. Obtencin de un controlador JDBC para la base de datos Antes de intentar crear una conexin de base de datos, compruebe que dispone de una controlador JDBC para su base de datos. Entre los controladores JDBC ms habituales figuran el controlador Oracle Thin JDBC, Oracle Java Driver y los controladores I-net JDBC para Microsoft SQL Server. Los proveedores de sistemas de bases de datos, como Oracle, suelen incluir controladores en sus sistemas. Tambin podr adquirirlos a otros proveedores independientes. Por ejemplo, puede obtener un controlador JDBC para Microsoft SQL Server en el sitio Web de I-net software en http://www.inetsoftware.de/English/Produkte/JDBC_Overview/default.htm. Sun tambin le permite consultar una base de datos de controladores JDBC y sus proveedores en el sitio Web de la empresa en http://industry.java.sun.com/products/jdbc/drivers. Cuando disponga de un controlador JDBC para la base de datos, podr crear una conexin de base de datos. Creacin de una conexin de base de datos para JSP Una vez instalado el controlador JDBC apropiado para la base de datos en el equipo que ejecuta el servidor de aplicaciones, puede crear una conexin de base de datos en Dreamweaver.
Para crear una conexin de base de datos para JSP:

Abra una pgina JSP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Se muestran las conexiones definidas para el sitio. Haga clic en el botn de signo ms (+) y seleccione el controlador en el men emergente. Si no aparece el controlador, elija Conexin JDBC personalizada. Aparecer un cuadro de dilogo de conexin.

Introduzca en el cuadro de dilogo los parmetros de conexin. Para obtener ms informacin, consulte Parmetros de conexin JDBC en la pgina 183.

182 Captulo 10

Especifique la ubicacin del controlador JDBC que desea utilizar. opcin Utilizando un controlador de este equipo.

Si el controlador JDBC est instalado en el mismo equipo que Dreamweaver, seleccione la Si el controlador JDBC no est instalado en el mismo equipo que Dreamweaver, seleccione la
opcin Utilizando un controlador del servidor de prueba. Los usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de datos utilizan el servidor de aplicaciones.
5

Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo los parmetros de conexin. Si la conexin contina fallando, compruebe la configuracin de la carpeta que utiliza Dreamweaver para procesar las pginas dinmicas (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152).

Haga clic en Aceptar.

La nueva conexin se muestra en el panel Bases de datos. Parmetros de conexin JDBC Las conexiones JDBC constan normalmente de cuatro parmetros: el controlador, el nombre de usuario, la contrasea y el URL (que especifica la ubicacin de la base de datos). Habitualmente, los valores del parmetro de controlador y del parmetro de URL dependen del controlador. En esta seccin se muestra cmo definir los parmetros de conexin en Dreamweaver utilizando como ejemplo el controlador Oracle Thin JDBC. Para conocer los parmetros de conexin de otros controladores, consulte la documentacin del fabricante del controlador. El controlador Oracle Thin JDBC admite bases de datos Oracle. Si desea utilizar dicho controlador para conectar con su base de datos Oracle, haga clic en el botn de signo ms (+) del panel Bases de datos y seleccione el controlador Controlador ligero Oracle (Oracle) en el men emergente. Se mostrar el siguiente cuadro de dilogo, parcialmente completo:

Introduzca un nombre de conexin y sustituya los marcadores de posicin (entre corchetes angulares) por parmetros de conexin vlidos. Para el marcador de posicin [hostname], introduzca la direccin IP o el nombre asignado al servidor de la base de datos por el administrador del sistema. Para el marcador de posicin [sid], introduzca el identificador del sistema de base de datos. Si se est ejecutando ms de una base de datos Oracle en el mismo sistema, deber utilizar el identificador SID para distinguirlas.

Conexiones de base de datos para desarrolladores de JSP 183

Por ejemplo, si el servidor se denomina Aristotle, el puerto de base de datos es 1521 y ha definido un SID de base de datos llamado patients en dicho servidor, deber introducir los siguientes valores de parmetros en Dreamweaver:

Conexin mediante un controlador ODBC

Aunque las aplicaciones JSP deben conectar con las bases de datos mediante controladores JDBC, tambin pueden utilizarse controladores ODBC si dispone de un controlador puente JDBCODBC. Los controladores ODBC permiten utilizar un DSN de Windows, lo cual facilita la creacin de la conexin. El controlador puente acta como intrprete entre la aplicacin JSP, que utiliza JDBC, y el controlador ODBC, que utiliza ODBC. Este canal de comunicacin permite a la aplicacin JSP comunicarse con la base de datos. Este tipo de conexin ofrece principalmente dos ventajas. En primer lugar, le permite utilizar los controladores ODBC gratuitos de Microsoft. En segundo lugar, le permite utilizar un DSN para facilitar el proceso de creacin de la conexin. Los requisitos para poder conectar mediante un controlador ODBC son los siguientes:

Su aplicacin JSP deber ejecutarse en una equipo Windows. El equipo Windows que ejecute el servidor de aplicaciones deber tener instalado un
controlador ODBC para la base de datos. Para obtener ms informacin, consulte Comprobacin del controlador ODBC en la pgina 184.

El equipo Windows que ejecute el servidor de aplicaciones deber tener instalado un

controlador puente JDBC-ODBC. Para obtener ms informacin, consulte Instalacin del controlador puente JDBC-ODBC de Sun en la pgina 185. Si cumple estos requisitos, podr conectar mediante un controlador ODBC. Para obtener instrucciones, consulte Creacin de una conexin ODBC en la pgina 185. Comprobacin del controlador ODBC Asegrese de que el equipo Windows que ejecuta el servidor de aplicaciones tiene instalado un controlador ODBC para la base de datos. Para averiguarlo, consulte Visualizacin de los controladores ODBC instalados en un sistema Windows en la pgina 747. Si no est instalado el controlador apropiado, puede descargar e instalar los paquetes Microsoft Data Access Components (MDAC) 2.5 y 2.6 en el equipo que ejecuta el servidor de aplicaciones JSP. Puede descargar gratuitamente los paquetes MDAC desde el sitio Web de Microsoft en http://www.microsoft.com/data/download.htm. Estos paquetes contienen los controladores ODBC ms recientes de Microsoft.

184 Captulo 10

Nota: Instale MDAC 2.5 antes que MDAC 2.6.

Si dispone de un controlador ODBC para la base de datos, puede instalar a continuacin un controlador JDBC-ODBC. Instalacin del controlador puente JDBC-ODBC de Sun Para conectar mediante un controlador ODBC, deber instalar el controlador puente JDBCODBC de Sun en el equipo Windows que ejecuta el servidor de aplicaciones JSP. ste se suministra con Sun Java 2 SDK, Standard Edition, para Windows. Para averiguar si ya dispone de Java 2 SDK con el controlador, busque en el disco duro las carpetas c:\jdk1.2.2 o c:\jdk1.3.
Nota: Java 1.2.2 y 1.3 son iguales a Java 2.

Si no dispone de SDK, puede descargarlo del sitio Web de Sun en http://java.sun.com/j2se/ e instalarlo. El controlador se instalar automticamente cuando instale SDK. Aunque puede utilizarse para el desarrollo de sistemas de bases de datos de gama baja, como por ejemplo Microsoft Access, el controlador puente JDBC-ODBC de Sun no est pensado para tareas de produccin. Por ejemplo, slo permite conectar con la base de datos a una pgina JSP a la vez (es decir, no admite el uso compartido de varios thread). Para obtener ms informacin sobre las limitaciones del controlador, consulte el artculo 12409 del Centro de servicio tcnico de Macromedia en http://www.macromedia.com/go/jdbc-odbc_problems. Despus de instalar el controlador puente, podr crear la conexin de base de datos. Creacin de una conexin ODBC Antes de conectar mediante un controlador ODBC, compruebe que el controlador ODBC adecuado y el controlador puente JDBC-ODBC de Sun estn instalados en el equipo Windows que ejecuta el servidor de aplicaciones JSP .
Para conectar mediante un controlador ODBC en JSP:

Defina un DSN en el sistema Windows en el que se encuentra el servidor de aplicaciones. Para obtener instrucciones, consulte Creacin de un DSN en la pgina 759. Abra una pgina JSP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel se mostrarn las conexiones definidas para dicho sitio. Haga clic en el botn de signo ms (+) del panel y seleccione Base de datos ODBC (controlador JDBC-ODBC Sun) en el men emergente. Aparecer el cuadro de dilogo Base de datos ODBC (controlador JDBC-ODBC Sun). Introduzca un nombre para la nueva conexin.
Nota: No utilice espacios ni caracteres especiales en el mismo.

En el cuadro URL, sustituya el contador de posicin [odbc dsn] por el DSN que defini en el paso 1. El cuadro URL debe tener este aspecto:
jdbc:odbc:myDSN

Conexiones de base de datos para desarrolladores de JSP 185

Especifique el nombre de usuario y la contrasea para acceder a la base de datos. Si no necesita un nombre de usuario ni contrasea, deje los cuadros en blanco. Por ejemplo, si el DSN se denomina Acme y no necesita nombre de usuario ni contrasea para obtener acceso a la base de datos, introduzca los siguientes valores de parmetros: Controlador: sun.jdbc.odbc.JdbcOdbcDriver URL: jdbc:odbc:Acme Nombre de usuario: Contrasea:

Especifique la ubicacin del controlador puente JDBC-ODBC. Utilizando un controlador de este equipo.

Si el controlador est instalado en el mismo equipo que Dreamweaver, seleccione la opcin Si no est instalado en el mismo equipo que Dreamweaver, seleccione la opcin Utilizando un
controlador del servidor de prueba. Los usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de datos utilizan el servidor de aplicaciones.
8

Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo el DSN y los dems parmetros de conexin. Si la conexin contina fallando, compruebe la configuracin de la carpeta que utiliza Dreamweaver para procesar las pginas dinmicas (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152).

Haga clic en Aceptar. La nueva conexin se muestra en el panel Bases de datos.

Edicin o eliminacin de una conexin de base de datos

Al crear una conexin de base de datos, Dreamweaver almacena la informacin de conexin en un archivo en la subcarpeta Connections de la carpeta raz del sitio local. Dreamweaver no crea realmente una conexin de base de datos para la aplicacin JSP hasta que haya definido un juego de registros para una pgina en la aplicacin (consulte Definicin de un juego de registros en la pgina 554). Es entonces cuando Dreamweaver escribe un cdigo en el archivo para establecer la conexin e inserta una directiva de inclusin (include) en la pgina. En tiempo de ejecucin, el servidor inserta el cdigo de conexin en su documento.
Para actualizar una conexin:

Abra una pgina JSP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Realice los cambios que desee y haga clic en Aceptar.

186 Captulo 10

Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza todas las pginas del sitio que utilicen la conexin. Si cambia el nombre de una conexin, deber actualizar el antiguo nombre de conexin haciendo doble clic en el juego de registros del panel Vinculaciones y seleccionando el nombre de la nueva conexin en el cuadro de dilogo Juego de registros.
Para eliminar una conexin:

Abra una pgina JSP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.

Para evitar errores en la eliminacin de una conexin, deber actualizar todos los juegos de registros que utilicen la antigua conexin haciendo doble clic en el nombre del juego de registros en el panel Vinculaciones y seleccionando una nueva conexin en el cuadro de dilogo Juego de registros.

Conexiones de base de datos para desarrolladores de JSP 187

188 Captulo 10

CAPTULO 11 Conexiones de base de datos para desarrolladores de PHP

Para utilizar una base de datos con una aplicacin PHP, deber crear una conexin de base de datos en Macromedia Dreamweaver MX. En este captulo se describe cmo hacerlo. Para el desarrollo de PHP, Dreamweaver slo admite el sistema de base de datos MySQL. Otros sistemas de bases de datos, por ejemplo Microsoft Access u Oracle no son compatibles. MySQL es una aplicacin de software de origen abierto que puede descargarse gratuitamente de Internet para uso no comercial. Para obtener ms informacin, consulte el sitio Web de MySQL en http:// www.mysql.com/downloads/mysql.html. En este captulo se presupone que ha configurado una aplicacin PHP (consulte Configuracin de una aplicacin Web en la pgina 145). Asimismo, se presupone que ha configurado una base de datos MySQL en su equipo local o en un sistema al cual tiene acceso a travs de la red o del FTP. Este captulo contiene las siguientes secciones:

Conexin con una base de datos en la pgina 189 Edicin o eliminacin de una conexin de base de datos en la pgina 190
Para conectar con la base de datos de muestra instalada en Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver). Para aprender ms sobre bases de datos y conexiones de base de datos, consulte Gua de bases de datos para principiantes en la pgina 737.

Conexin con una base de datos

En esta seccin se describe cmo conectar con una base de datos durante el desarrollo de una aplicacin PHP en Dreamweaver. Se presupone que dispone de una o varias bases de datos MySQL y que se ha iniciado el servidor MySQL.
Para crear una conexin de base de datos con la base de datos MySQL:

1 2

Abra una pgina PHP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). Haga clic en el botn de signo ms (+) del panel y elija Mi conexin SQL en el men emergente. Aparecer el cuadro de dilogo de Mi conexin SQL.

189

Rellene el cuadro de dilogo y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

La nueva conexin se mostrar en el panel Bases de datos.

Edicin o eliminacin de una conexin de base de datos

Al crear una conexin de base de datos, Dreamweaver almacena la informacin de conexin en un archivo en la subcarpeta Connections de la carpeta raz del sitio local. Dreamweaver no crea realmente una conexin de base de datos para la aplicacin PHP hasta que se define un juego de registros para una pgina de la aplicacin (consulte Definicin de un juego de registros en la pgina 554). Es entonces cuando Dreamweaver escribe un cdigo en el archivo para establecer la conexin e inserta una directiva de inclusin (include) en la pgina. En tiempo de ejecucin, el servidor inserta el cdigo de conexin en su documento.
Para actualizar una conexin:

Abra una pgina PHP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Realice los cambios que desee y haga clic en Aceptar.

Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza todas las pginas del sitio que utilicen la conexin.
Para eliminar una conexin:

Abra una pgina PHP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Elija la conexin haciendo clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.

Para evitar errores en la eliminacin de una conexin, deber actualizar todos los juegos de registros que utilicen la antigua conexin haciendo doble clic en el nombre del juego de registros en el panel Vinculaciones y seleccionando una nueva conexin en el cuadro de dilogo Juego de registros.

190 Captulo 11

Parte III Utilizacin del cdigo de las pginas

Utilice las herramientas avanzadas de codificacin de Dreamweaver para crear o modificar pginas. Esta parte contiene los siguientes captulos:

Parte III

Captulo 12, Configuracin del entorno de

codificacin

Captulo 13, Codificacin en Dreamweaver Captulo 14, Optimizacin y depuracin del cdigo Captulo 15, Edicin de cdigo en la vista Diseo

CAPTULO 12 Configuracin del entorno de codificacin

Puede adaptar el entorno de codificacin de Macromedia Dreamweaver MX para que se ajuste a su forma de trabajar. Por ejemplo, puede cambiar la visualizacin de los cdigos, configurar distintos mtodos abreviados de teclado o importar y utilizar la biblioteca de etiquetas que desee. Este captulo trata los siguientes temas:

Visualizacin de los cdigos en la pgina 193 Configuracin de las preferencias de visualizacin en la pgina 194 Configuracin de las preferencias de codificacin en la pgina 194 Personalizacin de los mtodos abreviados de teclado en la pgina 199 Configuracin de las preferencias de codificacin en la pgina 194 Configuracin de las preferencias del validador en la pgina 199 Administracin de bibliotecas de etiquetas en la pgina 200 Importacin de etiquetas personalizadas a Dreamweaver en la pgina 203 Utilizacin de un editor de HTML externo con Dreamweaver en la pgina 206

Visualizacin de los cdigos

Puede ver el cdigo fuente del documento actual de varias formas: mostrarlo en la ventana de documento activando la vista Cdigo, dividir la ventana de documento para mostrar tanto la pgina como el cdigo asociado o trabajar en el Inspector de cdigo, una ventana de codificacin independiente.
Nota: La vista Cdigo y el Inspector de cdigo tienen las mismas funciones.

Esta seccin contiene instrucciones para cambiar la forma de visualizacin de los cdigos.
Para ver los cdigos en la ventana de documento:

Elija Ver > Cdigo.

Para ver los cdigos en una ventana independiente:

Elija Ventana > Otros > Inspector de cdigo.

Para codificar y editar visualmente una pgina en la ventana de documento al mismo tiempo:

Elija Ver > Cdigo y diseo. El cdigo aparecer en el panel superior y la pgina en el inferior.

193

2 3

Para mostrar la pgina en la parte superior, elija Ver > Vista de diseo encima. Para ajustar el tamao de los paneles en la ventana de documento, arrastre la barra de separacin hasta la posicin deseada. La barra de separacin se encuentra entre los dos paneles.

La vista Cdigo se actualiza automticamente al realizar cambios en la vista Diseo. Sin embargo, despus de introducir los cambios, deber actualizar manualmente el documento en la vista Diseo haciendo clic en la vista Diseo y presionado F5.

Configuracin de las preferencias de visualizacin

Puede establecer ajuste de texto, mostrar los nmeros de lnea del cdigo, resaltar el cdigo HTML no vlido, establecer la aplicacin de color a la sintaxis de los elementos del cdigo y establecer la aplicacin de sangra desde el men Ver > Opciones de vista de Cdigo.
Para establecer las opciones de la vista Cdigo y del Inspector de cdigo:

1 2

Muestre al menos una pgina en la vista Cdigo o en el Inspector de cdigo. Elija Ver > Opciones de vista de Cdigo. Aparecer un men emergente con una marca de verificacin junto a cada opcin establecida. Seleccione una de las siguientes opciones del men.
Ajustar texto

ajusta el cdigo para que pueda verlo sin necesidad de desplazarse horizontalmente. Esta opcin no inserta saltos de lnea, pero facilita la lectura del cdigo. muestra nmeros de lnea al lado del cdigo.

Nmeros de lneas

Resaltar HTML no vlido hace que Dreamweaver resalte en amarillo los cdigos HTML no vlidos incompatibles con los navegadores. Al seleccionar una etiqueta no vlida, el inspector de propiedades muestra informacin sobre cmo corregir el error. Aplicar colores a sintaxis activa o desactiva los colores de los cdigos. Para cambiar la combinacin de colores, consulte Configuracin de las preferencias de colores del cdigo en la pgina 198. Sangra automtica

aplica automticamente sangra al cdigo cuando presiona la tecla Intro mientras escribe el cdigo. Para cambiar el espaciado de la sangra o las etiquetas que la aplican automticamente, consulte Configuracin de las preferencias de formato del cdigo en la pgina 195. Si selecciona una opcin marcada, sta se desactivar. De lo contrario, la opcin estar establecida.

Configuracin de las preferencias de codificacin

En Dreamweaver, puede establecer las siguientes preferencias de codificacin:

Las preferencias de formato del cdigo determinan opciones comunes de formato de cdigo,
como la longitud de las lneas y la sangra. Consulte Configuracin de las preferencias de formato del cdigo en la pgina 195. Tambin puede aplicar nuevas preferencias de formato a documentos HTML existentes. Consulte Aplicacin de nuevas preferencias de formato a documentos existentes en la pgina 197.

194 Captulo 12

 Las preferencias de Sugerencias para el cdigo le permiten activar o desactivar Sugerencias para
el cdigo y personalizar las sugerencias que se muestran. Sugerencias para el cdigo le ofrece ayuda en lnea mientras escribe en la vista Cdigo. Por ejemplo, si escribe un parntesis angular de etiqueta de apertura (<), aparecer un men mostrando las posibles etiquetas. En lugar de escribir manualmente el resto de la etiqueta, puede seleccionar una de las sugerencias que aparecen en el men y presionar Intro para introducirla automticamente. Consulte Configuracin de las preferencias de Sugerencias para el cdigo en la pgina 197.

Las preferencias de reescritura del cdigo determinan los cambios que Dreamweaver debe
realizar en el cdigo cuando se abre un documento HTML o de script. Consulte Configuracin de las preferencias de reescritura del cdigo en la pgina 197.

Las preferencias de colores del cdigo le permiten establecer colores de formato y sintaxis
especiales para los elementos del cdigo, por ejemplo etiquetas, comentarios y scripts. Consulte Configuracin de las preferencias de colores del cdigo en la pgina 198. Para establecer preferencias avanzadas, utilice el Editor de la biblioteca de etiquetas (consulte Administracin de bibliotecas de etiquetas en la pgina 200). Configuracin de las preferencias de formato del cdigo Puede cambiar la apariencia de los cdigos especificando preferencias de formato tales como la sangra, la longitud de lnea y el uso de maysculas y minsculas en nombres de etiquetas y atributos. Observe que todas las preferencias salvo Anular may/min de slo afectan a documentos nuevos y a adiciones nuevas a los documentos existentes. Es decir, cuando abra un documento HTML creado previamente, estas opciones de formato no le afectarn. Para cambiar el formato de documentos HTML existentes, utilice el comando Aplicar formato de origen. Para obtener ms informacin, consulte Aplicacin de nuevas preferencias de formato a documentos existentes en la pgina 197.
Para establecer las preferencias de formato del cdigo:

Seleccione Edicin > Preferencias > Formato de cdigo o Dreamweaver > Preferencias > Formato de cdigo (Mac OS X). Aparecer el cuadro de dilogo Formato de cdigo.

Configuracin del entorno de codificacin 195

Ajuste cualquiera de los siguientes parmetros del cuadro de dilogo:

Usar especifica

si la sangra debe realizarse utilizando espacios o tabuladores.

Tamao de sangra determina el tamao de las sangras. El tamao se mide en espacios, si en Usar se ha especificado espacios, o en tabuladores, si en Usar se ha especificado tabuladores. Tamao de tabulacin determina

el tamao de los tabuladores (medido en espacios de

caracteres).
Ajuste automtico aade retornos de carro duros cuando una lnea llega al final del ancho de columna especificado. (Dreamweaver inserta retornos de carro duros en lugares en los que no se modifica la apariencia del documento que se muestra en los navegadores, por lo que es posible que algunas lneas continen siendo ms largas de lo especificado en la opcin Ajuste automtico.) Por su parte, la opcin Ajuste de la vista Cdigo aade un retorno de carro blando para aquellas lneas que superan el ancho de la ventana. Tipo de salto de lnea especifica el tipo de servidor remoto (Windows, Macintosh o UNIX) que

aloja el sitio remoto. La eleccin del tipo adecuado de caracteres para salto de lnea garantiza que el cdigo fuente HTML aparezca de forma correcta en el servidor remoto. (Para FTP, este parmetro slo afecta al modo de transferencia binaria; el modo de transferencia ASCII de Dreamweaver prescinde de este parmetro. Si descarga archivos mediante el modo ASCII, Dreamweaver establecer los saltos de lnea basndose en el sistema operativo de su ordenador; si carga archivos utilizando el modo ASCII, todos los saltos de lnea se configurarn como CR LF.) Esta opcin tambin resulta til si trabaja con un editor de texto externo que slo reconoce determinados tipos de saltos de lnea. Por ejemplo, utilice CR LF (Windows) si su editor externo es el Bloc de notas y CR (Macintosh) si su editor externo es SimpleText.
May/min de etiqueta predeterminada y May/min de atributo predeterminado establecen si los nombres de etiquetas y atributos deben aparecer en maysculas o en minsculas. Estas opciones afectan a las etiquetas y los atributos que inserte o edite en la ventana de documento, pero no a los que introduzca directamente en la vista Cdigo, ni a las etiquetas y los atributos de un documento en el momento de abrirlo (a no ser que tambin seleccione una o las dos opciones de Anular may/min de). Anular may/min de: Etiquetas y Atributos especifican si deben aplicarse las opciones de maysculas/minsculas en todo momento, incluso cuando se abre un documento HTML existente. Cuando selecciona una de estas opciones, todas las etiquetas o atributos de los documentos abiertos se convierten inmediatamente a maysculas o minsculas, segn el valor especificado, al igual que todas las etiquetas o atributos de los documentos que abra a partir de ese momento (y hasta que desactive esta opcin). Las etiquetas o atributos que introduzca en la vista Cdigo y en Quick Tag Editor tambin se convertirn a maysculas o minsculas, al igual que las etiquetas o los atributos que inserte mediante la barra Insertar. Por ejemplo, si desea que los nombres de etiquetas se conviertan siempre a minsculas, especifique minsculas como valor de May/min etiquetas y seleccione la opcin Anular may/min de: Etiquetas. Posteriormente, cuando abra un documento que contenga nombres de etiquetas en maysculas, Dreamweaver los convertir a minsculas.

si los elementos deben centrarse utilizando div align="center" o center. Ambas etiquetas forman parte de la especificacin transitoria de HTML 4.0, center es compatible con un mayor nmero de navegadores.
Centrado especifica

aunque

196 Captulo 12

Aplicacin de nuevas preferencias de formato a documentos existentes Las opciones de formato de cdigo que especifique en las preferencias de Formato de cdigo slo se aplicarn a los nuevos documentos que cree con Dreamweaver. Para aplicar estas nuevas preferencias de formato a documentos existentes, utilice el comando Aplicar formato de origen.
Para aplicar nuevas preferencias de formato a un documento existente:

1 2

Abra el documento en Dreamweaver. Elija Comandos > Aplicar formato de origen.

Configuracin de las preferencias de Sugerencias para el cdigo Sugerencias para el cdigo permite insertar fcilmente nombres de etiquetas, atributos y valores mientras introduce los cdigos. Para establecer las preferencias, elija Edicin > Preferencias > Sugerencias para el cdigo o Dreamweaver > Preferencias > Sugerencias para el cdigo (Mac OS X).
Sugerencia: Aunque est desactivado Preferencias para el cdigo, puede mostrar una sugerencia emergente en la vista Cdigo o en el Inspector de cdigo presionando Control-espacio en Windows.

Para establecer las preferencias de Sugerencias para el cdigo:

Seleccione Edicin > Preferencias > Sugerencias para el cdigo o Dreamweaver > Preferencias > Sugerencias para el cdigo (Mac OS X). Aparecer el cuadro de dilogo Sugerencias para el cdigo. Ajuste cualquiera de los siguientes parmetros del cuadro de dilogo:
Activar terminacin automtica de etiqueta activa

la terminacin automtica de etiquetas.

Activar sugerencias para el cdigo activa Sugerencias para el cdigo mientras introduce los cdigos en la vista Cdigo. Arrastre el control deslizante Retraso para ajustar el tiempo en segundos que debe transcurrir antes de que el programa muestre las sugerencias correspondientes. Mens permite establecer exactamente el tipo de Sugerencias para el cdigo que desea que se muestren mientras escribe. Puede utilizar todos o slo algunos de los mens.

Configuracin de las preferencias de reescritura del cdigo Las preferencias de reescritura del cdigo determinan lo que debe hacer Dreamweaver al abrir los documentos. Estas preferencias no tienen ningn efecto cuando se edita cdigo HTML o scripts en la vista Cdigo. Si desactiva las opciones de reescritura, Dreamweaver mostrar elementos de formato no vlidos en la ventana de documento para cdigo HTML que habra reescrito. Si importa un documento HTML de Microsoft Word, podr utilizar el comando Limpiar HTML de Word para eliminar todos los cdigos HTML que no sean necesarios. Para obtener ms informacin, consulte Limpieza de HTML de Microsoft Word en la ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver).
Para establecer las preferencias de reescritura del cdigo:

Seleccione Edicin > Preferencias > Reescritura de cdigo o Dreamweaver > Preferencias > Reescritura de cdigo (Mac OS X). Aparecer el cuadro de dilogo Reescritura de cdigo.

Configuracin del entorno de codificacin 197

Ajuste cualquiera de los siguientes parmetros del cuadro de dilogo:

Etiquetas no cerradas y mal anidadas reescribe

<b><i>text</b></i>

las etiquetas solapadas. Por ejemplo, se reescribe como <b><i>text</i></b>. Esta opcin tambin inserta comillas y parntesis angular de cierre en el caso de que no estn presentes. comprueba que no hay nombres

Cambiar nombre de elementos de formulario al pegar

repetidos en los objetos de formulario.

Eliminar etiquetas de cierre adicionales

elimina las etiquetas de cierre para las que no existe la

correspondiente etiqueta de apertura.

Advertir al solucionar/eliminar etiquetas muestra

un resumen del cdigo HTML tcnicamente no vlido que Dreamweaver ha intentado corregir. En dicho resumen se indica la ubicacin del problema (a travs de nmeros de lnea y de columna) para que pueda localizar la correccin y asegurarse de que el resultado es el que desea. que Dreamweaver reescriba el cdigo de los archivos que tengan las extensiones de archivo indicadas. Esta opcin resulta especialmente til para archivos que contengan otro tipo de etiquetas. garantiza que el URL slo contiene caracteres garantiza que el URL slo contiene caracteres

Nunca reescribir cdigo: En arch. con extensin impide

Codificar caracteres esp. en URL usando %

legales.
Codificar <, >, &, y " en valores atrib. usando &

legales. Configuracin de las preferencias de colores del cdigo La aplicacin de color a la sintaxis ayuda a identificar bloques de cdigo en documentos grandes. Puede establecer las preferencias de aplicacin de color a la sintaxis para los elementos del cdigo, por ejemplo los comentarios y scripts, y para las etiquetas en general. Para establecer las preferencias de color para etiquetas especficas, edite la definicin de etiqueta en el Editor de la biblioteca de etiquetas. Para obtener ms informacin, consulte Edicin de bibliotecas, etiquetas y atributos en la pgina 202.
Para establecer las preferencias de colores del cdigo:

1 2

Elija Edicin > Preferencias > Colores de cdigo o Dreamweaver > Preferencias > Colores de cdigo (Mac OS X). Elija un tipo de documento y haga clic en Editar combinacin de colores. Aparecer el cuadro de dilogo Editar combinacin de colores. Seleccione un elemento y establezca el color del texto, el color de fondo y el estilo (negrita, cursiva o subrayado). Puede obtener una vista previa de la combinacin de colores en el panel Vista previa. Cuando haya terminado, haga clic en Aceptar.

198 Captulo 12

Personalizacin de los mtodos abreviados de teclado

En Dreamweaver, puede utilizar los mtodos abreviados de teclado que desee. Si est acostumbrado a utilizar mtodos abreviados de teclado especficos, por ejemplo Control-Intro para aadir un salto de lnea, Control-G para ir a una posicin concreta en el cdigo o Mays+F6 para validar un archivo, puede aadirlos a Dreamweaver utilizando el editor de mtodos abreviados de teclado. Para obtener ms informacin, consulte Utilizacin del editor de mtodos abreviados de teclado en la pgina 64.

Cmo abrir archivos en la vista Cdigo de forma predeterminada

Puede configurar Dreamweaver para que abra automticamente los archivos que tienen determinadas extensiones en la vista Cdigo en lugar de en la vista Diseo. Cuando abre un tipo de archivo que no suele contener HTML (por ejemplo, un archivo JavaScript), ste se abre en la vista Cdigo (o en el Inspector de cdigo) en lugar de en la vista Diseo. Puede editar el archivo y guardarlo como archivo HTML o con otro formato.
Para establecer la vista predeterminada para archivos no HTML:

1 2

Elija Edicin > Preferencias > Tipos de archivo/editores o Dreamweaver > Preferencias > Tipos de archivo/editores (Mac OS X). En el cuadro de texto Abrir en vista de Cdigo, escriba las extensiones de los archivos que desea abrir automticamente en la vista Cdigo. Deje un espacio entre cada tipo de archivo.

Las extensiones de archivo predeterminadas que aparecen son: .js, .txt y .asa. Puede aadir tantas como desee.

Configuracin de las preferencias del validador

Puede utilizar el validador de Dreamweaver para localizar fcilmente errores en las etiquetas o de sintaxis en el cdigo (consulte Validacin de etiquetas en la pgina 225). Puede especificar los lenguajes basados en etiquetas que debe utilizar el validador durante la comprobacin, los problemas especficos que debe comprobar y los tipos de errores sobre los que debe informar.
Para establecer las preferencias del validador:

1 2

Elija Edicin > Preferencias > Validador o Dreamweaver > Preferencias > Validador (Mac OS X). Seleccione las bibliotecas de etiquetas que desea utilizar para la validacin. Algunas bibliotecas de etiquetas se basan en otras anteriores. Por ejemplo, si selecciona HTML 4.0, HTML 3.2 y HTML 2.0 se seleccionarn automticamente, ya que sin ellas, la definicin de HTML 4.0 est incompleta.
Nota: Si valida CFML y HTML en un mismo documento, el validador no podr evaluar el signo de nmero (#). Esto se debe a que, en CFML, # es un error y ## es correcto; mientras que en HTML, ## es un error y # es correcto.

Haga clic en Opciones. Aparecer el cuadro de dilogo Opciones de validador. Seleccione la opcin Mostrar para los tipos de errores que desea que se incluyan en el informe del validador. Seleccione los elementos que debe comprobar el validador.

4 5

Configuracin del entorno de codificacin 199

Haga clic en Aceptar para cerrar el cuadro de dilogo Opciones de validador y vuelva a hacer clic en Aceptar para cerrar el cuadro de dilogo Preferencias.

Administracin de bibliotecas de etiquetas

Puede utilizar el Editor de la biblioteca de etiquetas para administrar las bibliotecas de etiquetas en Dreamweaver. El Editor de la biblioteca de etiquetas le permite aadir y eliminar bibliotecas de etiquetas, etiquetas y atributos; establecer las propiedades de una biblioteca de etiquetas y editar etiquetas y atributos. Para abrir el Editor de la biblioteca de etiquetas, elija Edicin > Bibliotecas de etiquetas. Aparecer el Editor de la biblioteca de etiquetas. (El contenido de este cuadro de dilogo vara dependiendo de la etiqueta seleccionada.)

Esta seccin trata sobre los siguientes temas:

Adicin de bibliotecas, etiquetas y atributos en la pgina 200 Edicin de bibliotecas, etiquetas y atributos en la pgina 202 Eliminacin de bibliotecas, etiquetas y atributos en la pgina 203
Vase tambin Importacin de etiquetas personalizadas a Dreamweaver en la pgina 203. Adicin de bibliotecas, etiquetas y atributos Puede utilizar el Editor de la biblioteca de etiquetas para aadir bibliotecas de etiquetas, etiquetas y atributos a las bibliotecas de etiquetas en Dreamweaver.
Nota: Para importar una etiqueta, consulte Importacin de etiquetas personalizadas a Dreamweaver en la pgina 203.

200 Captulo 12

Para aadir una biblioteca de etiquetas:

En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), haga clic en el botn de signo ms (+) y elija Nueva biblioteca de etiquetas. Aparecer el cuadro de dilogo Nueva biblioteca de etiquetas. En el cuadro de texto Nombre de la biblioteca, introduzca un nombre (por ejemplo, Etiquetas PHP). Haga clic en Aceptar.

2 3

Para aadir una o varias etiquetas a una biblioteca de etiquetas:

En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), haga clic en el botn de signo ms (+) y elija Nuevas etiquetas. Aparecer el cuadro de dilogo Nuevas etiquetas. En el men emergente Biblioteca de etiquetas, elija una biblioteca de etiquetas (por ejemplo, CFML Tags). De forma predeterminada, la biblioteca de etiquetas seleccionada en el editor de etiquetas aparece en el cuadro Biblioteca de etiquetas.

En el campo Nombres de etiquetas, introduzca un nombre para la etiqueta. Si desea aadir ms de una etiqueta, introduzca los nombres para las mismas separados por una coma y un espacio (por ejemplo, cfgraph, cfgraphdata).

4 5

Para aadir la etiqueta de cierre correspondiente a cada etiqueta (</...>), seleccione Tiene las correspondientes etiquetas de cierre. Haga clic en Aceptar.

Para aadir uno o varios atributos a una etiqueta:

En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), haga clic en el botn de signo ms (+) y elija Nuevos atributos. Aparecer el cuadro de dilogo Nuevos atributos. En el men emergente Biblioteca de etiquetas, elija una biblioteca de etiquetas. De forma predeterminada, la biblioteca de etiquetas seleccionada en el editor de etiquetas aparece en el cuadro de texto Biblioteca de etiquetas.

En el men emergente Etiqueta, elija una etiqueta (por ejemplo, cfgraph). De forma predeterminada, la etiqueta seleccionada en el editor de etiquetas aparece en el cuadro Etiqueta.

En el cuadro de texto Nombres de atributos, introduzca un nombre para el atributo (por ejemplo, tipo). Para aadir ms de un atributo, introduzca los nombres de los atributos separados por una coma y un espacio.

Haga clic en Aceptar.

Configuracin del entorno de codificacin 201

Edicin de bibliotecas, etiquetas y atributos Puede utilizar el Editor de la biblioteca de etiquetas para establecer las propiedades de una biblioteca de etiquetas y editar las etiquetas y atributos de la misma, tanto sus atributos y valores como su formato (lo que facilita su identificacin en el cdigo).
Para establecer las propiedades de una biblioteca de etiquetas:

1 2

En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), seleccione una biblioteca de etiquetas en el men emergente Etiquetas. En el cuadro Utilizado en, seleccione todos los tipos de documento que debe utilizar la biblioteca de etiquetas. Las etiquetas de la biblioteca de etiquetas estarn disponibles slo en los tipos de documentos que seleccione en este cuadro.

3 4

Si las etiquetas de la biblioteca de etiquetas necesitan un prefijo, introdzcalo en el cuadro de texto Prefijo de etiqueta. Cuando haya terminado de introducir los cambios en el Editor de la biblioteca de etiquetas, haga clic en Aceptar.

Para editar una etiqueta de una biblioteca de etiquetas:

1 2

En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), abra una biblioteca de etiquetas en el men emergente Etiquetas y seleccione una etiqueta. Establezca las siguientes opciones de Formato de etiqueta:
Saltos de lnea especifica

dnde inserta Dreamweaver los saltos de lnea de una etiqueta.

Contenido especifica cmo inserta Dreamweaver el contenido de una etiqueta; es decir, si se aplican las reglas de salto de lnea y de formato al contenido. May/min especifica si una etiqueta debe aparecer en maysculas o en minsculas. Puede elegir entre Predeterminado, Minsculas, Maysculas o Combinacin de maysculas/minsculas. Si elige Combinacin de maysculas/minsculas, aparecer el cuadro de dilogo Combinacin de may/min en el nombre de la etiqueta. Especifique cmo debe insertar Dreamweaver la etiqueta (por ejemplo, getProperty) y haga clic en Aceptar. Establecer valor predeterminado establece si todas las etiquetas deben aparecer en maysculas o minsculas de forma predeterminada. En el cuadro de dilogo May/min de etiqueta predeterminada que aparece, elija <MAYSCULAS> o <minscula> y haga clic en Aceptar.
Sugerencia: Si lo desea, puede establecer que el valor predeterminado sea minsculas para ajustarse a las normas XML y XHTML.

Para editar un atributo de una etiqueta:

En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), abra una biblioteca de etiquetas en el men emergente Etiquetas, abra una etiqueta y seleccione un atributo de etiqueta.

202 Captulo 12

En el men emergente May/min de atributo, elija Predeterminado, Minsculas, Maysculas o Combinacin de maysculas/minsculas. Si elige Combinacin de maysculas/min, en el cuadro de dilogo Combinacin de may/min en el nombre del atributo, especifique cmo debe insertar Dreamweaver el atributo (por ejemplo, onClick). Haga clic en Aceptar. Haga clic en el vnculo Establecer valor predeterminado para establecer que todos los atributos vayan en maysculas o minsculas de forma predeterminada.

En el men emergente Tipo de atributo, seleccione el tipo de atributo. Si elige Enumerado(s), introduzca los valores admitidos para el atributo en el cuadro de texto Valores. Separe los valores con una coma, pero sin espacio. Por ejemplo, para el tipo de atributo de la etiqueta cfgraph, introduzca bar,horizontalBar,line,pie.

Eliminacin de bibliotecas, etiquetas y atributos Puede utilizar el Editor de la biblioteca de etiquetas para eliminar bibliotecas de etiquetas, etiquetas y atributos.
Para eliminar una biblioteca, etiqueta o atributo:

1 2 3

En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), seleccione una biblioteca de etiquetas, etiqueta o atributo en el men emergente Etiquetas. Haga clic en el botn de signo menos (-). Si se solicita que confirme la eliminacin, haga clic en Aceptar. El elemento desaparecer del men emergente Etiquetas. Si no desea eliminar permanentemente el elemento, haga clic en Cancelar. El Editor de la biblioteca de etiquetas se cerrar sin eliminar el elemento y sin guardar los cambios introducidos en el Editor de la biblioteca de etiquetas desde su apertura.

Para eliminar permanentemente el elemento, haga clic en Aceptar.

Importacin de etiquetas personalizadas a Dreamweaver

Puede importar etiquetas personalizadas a Dreamweaver para que formen parte del entorno de creacin. Por ejemplo, cuando empieza a escribir una etiqueta personalizada en la vista Cdigo, la funcin Sugerencias para el cdigo mostrar automticamente los atributos de la etiqueta, permitindole elegir uno. Esta seccin trata sobre los siguientes temas:

Importacin de etiquetas de archivos XML en la pgina 204 Importacin de etiquetas ASP.NET personalizadas en la pgina 204 Importacin de etiquetas JSP de un archivo en la pgina 204 Importacin de etiquetas JSP de un servidor (web.xml) en la pgina 205 Importacin de etiquetas JRun en la pgina 205

Configuracin del entorno de codificacin 203

Importacin de etiquetas de archivos XML Puede importar etiquetas de un archivo XML DTD (Definicin de tipo de documento, Document Type Definition) o de un esquema.
Para importar etiquetas de un archivos XML DTD o de esquema:

1 2 3 4

Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). Haga clic en el botn de signo ms (+) y elija DTDSchema > Importar XML DTD o archivo de esquema. Introduzca el archivo o el URL del archivo DTD o de esquema. Introduzca el prefijo que se utilizar con las etiquetas. El prefijo permite identificar una etiqueta en una pgina como parte de una biblioteca de etiquetas especfica.

Haga clic en Aceptar.

Importacin de etiquetas ASP.NET personalizadas Puede importar etiquetas ASP.NET a Dreamweaver. Antes de comenzar, asegrese de que la etiqueta personalizada est instalada en el servidor de prueba definido en el cuadro de dilogo Definicin del sitio (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152). Las etiquetas compiladas (archivos .dll) deben encontrarse en la carpeta bin del directorio raz del sitio. Las etiquetas no compiladas (archivos .ascx) pueden residir en cualquier directorio virtual o subdirectorio del servidor. Para obtener ms informacin, consulte la documentacin de Microsoft ASP.NET.
Para importar etiquetas personalizadas ASP.NET a Dreamweaver:

1 2 3

Abra una pgina ASP.NET en Dreamweaver. Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). Haga clic en el botn de signo ms (+) y elija una de las siguientes opciones: ASPNet > Importar todas las etiquetas ASPNet personalizadas.

Para importar todas las etiquetas ASP.NET personalizadas del servidor de aplicaciones, elija Para importar slo algunas de las etiquetas personalizadas del servidor de aplicaciones, elija
ASPNet > Importar las etiquetas ASPNet personalizadas seleccionadas. Aparecer el cuadro de dilogo Importar las etiquetas ASPNet personalizadas seleccionadas, mostrando todas las etiquetas ASPNet personalizadas instaladas en el servidor de aplicaciones. Haga clic en las etiquetas de la lista mientras presiona la tecla Control (Windows) o Comando (Macintosh) y, a continuacin, haga clic en Aceptar. Importacin de etiquetas JSP de un archivo Puede importar una biblioteca de etiquetas JSP a Dreamweaver de distintos tipos de archivos.
Para importar una biblioteca de etiquetas JSP a Dreamweaver:

1 2

Abra una pgina JSP en Dreamweaver. Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas).

204 Captulo 12

3 4 5

Haga clic en el botn de signo ms (+) y elija JSP > Importar de archivo (*.tld, *.jar, *.zip). Especifique el archivo .tld, .jar o .zip que contiene la biblioteca de etiquetas. Introduzca un URI para identificar la biblioteca de etiquetas. El URI (Indicador universal de recursos, Uniform Resource Identifier) suele ser el URL de la organizacin que mantiene la biblioteca de etiquetas. El URL no se utiliza para acceder a la organizacin, sino para identificar de forma exclusiva la biblioteca de etiquetas.

Introduzca el prefijo que se utilizar con las etiquetas. El prefijo permite identificar una etiqueta en una pgina como parte de una biblioteca de etiquetas especfica.

Haga clic en Aceptar.

Importacin de etiquetas JSP de un servidor (web.xml) Puede importar etiquetas JSP de un servidor.
Para importar etiquetas JSP de un servidor:

1 2 3

Abra una pgina JSP en Dreamweaver. Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). Haga clic en el botn de signo ms (+) y elija JSP > Importar del servidor (web.xml). Aparecer el cuadro de dilogo Importar del servidor (web.xml). Seleccione una biblioteca de etiquetas. Introduzca un URI para identificar la biblioteca de etiquetas. El URI (Indicador universal de recursos, Uniform Resource Identifier) suele ser el URL de la organizacin que mantiene la biblioteca de etiquetas. El URL no se utiliza para acceder a la organizacin, sino para identificar de forma exclusiva la biblioteca de etiquetas.

4 5

Haga clic en Aceptar.

Importacin de etiquetas JRun Si utiliza Macromedia JRun, puede importar etiquetas JRun a Dreamweaver.
Para importar etiquetas JRun a Dreamweaver:

1 2 3 4 5 6

Abra una pgina JSP en Dreamweaver. Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). En el Editor de la biblioteca de etiquetas, haga clic en el botn de signo ms (+) y elija JSP > Import JRun Server Tags From Folder. Especifique la carpeta que contiene las etiquetas JRun. Introduzca un URI para identificar la biblioteca de etiquetas. Introduzca el prefijo que se utilizar con las etiquetas. El prefijo permite identificar una etiqueta en una pgina como parte de una biblioteca de etiquetas especfica.

Configuracin del entorno de codificacin 205

Cuando haya terminado de introducir los cambios, haga clic en Aceptar para cerrar el Editor de la biblioteca de etiquetas.

Utilizacin de un editor de HTML externo con Dreamweaver

Puede iniciar un editor de HTML o de texto externo desde Dreamweaver para editar el cdigo fuente del documento actual y, seguidamente, volver a Dreamweaver para continuar editando grficamente. Dreamweaver detecta los cambios guardados externamente en el documento y solicita que vuelva a cargar el documento al regresar. Puede utilizar los siguientes editores de HTML integrados: Macromedia HomeSite (slo Windows) o BBEdit (slo Macintosh). Tambin puede utilizar cualquier otro editor de texto, por ejemplo el Bloc de notas, SimpleText, vi, emacs y TextPad. Utilizacin de un editor de HTML integrado Con Dreamweaver puede instalar HomeSite en Windows o una versin de prueba de BBEdit en Macintosh. Dreamweaver se integra perfectamente con ambos productos. Esto le permite editar un documento tanto en Dreamweaver como en HomeSite o BBEdit, cambiando de una aplicacin a otra, y el documento se mantiene sincronizado automticamente en ambas aplicaciones. Asimismo, ambos programas controlan la seleccin actual; por ejemplo, puede seleccionar texto en Dreamweaver y, seguidamente, cambiar a BBEdit, donde se encontrar seleccionado el mismo elemento. Utilizacin de HomeSite (slo Windows) No es necesario activar la integracin con HomeSite; se integra automticamente al instalar el programa.
Para utilizar HomeSite:

1 2 3

Elija Editar > Editar con HomeSite. Edite el documento en HomeSite y guarde los cambios. Para regresar a Dreamweaver, haga clic en Dreamweaver en la barra de herramientas Editor.

Utilizacin de BBEdit (slo Macintosh) Puede desactivar la integracin con BBEdit si prefiere trabajar con una versin ms antigua de BBEdit o con otro editor de texto HTML. Las selecciones no coinciden en ambas aplicaciones si est desactivada la integracin con BBEdit.
Para utilizar BBEdit con Dreamweaver:

1 2 3

Elija Editar > Editar con BBEdit. Edite el documento en BBEdit. Haga clic en el botn Dreamweaver de la paleta Herramientas HTML de BBEdit para regresar a Dreamweaver.

206 Captulo 12

Para desactivar la integracin con BBEdit:

1 2

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X), y seleccione Tipos de archivo/editores. Anule la seleccin de Activar integracin con BBEdit y haga clic en Aceptar.

Utilizacin de editores externos Puede abrir otros editores externos desde Dreamweaver, pero al contrario que con HomeSite o BBE, el documento no se mantiene sincronizado en ambas aplicaciones. Cuando haya introducido los cambios en el editor externo, deber actualizar manualmente el documento en Dreamweaver.
Para seleccionar un editor de HTML externo:

1 2

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X), y seleccione Tipos de archivo/editores. (Slo Macintosh) Para utilizar un editor de HTML distinto de BBEdit, anule la seleccin de la opcin Activar integracin con BBEdit. Para utilizar BBEdit, deje seleccionada la opcin Activar integracin con BBEdit y omita los pasos restantes. Haga clic en el botn Examinar situado junto al cuadro Editor de cdigo externo y elija un editor de texto. En la opcin Volver a cargar archivos modificados, especifique lo que desea que haga Dreamweaver cuando detecte cambios realizados externamente en un documento abierto en Dreamweaver. En la opcin Guardar al iniciar, especifique si Dreamweaver debe guardar siempre el documento actual antes de iniciar el editor, no guardarlo nunca o solicitar confirmacin antes de guardarlo cada vez que se inicie el editor externo.

3 4

Para iniciar un editor de HTML externo:

Elija Editar > Editar con [nombre del editor].

Configuracin del entorno de codificacin 207

208 Captulo 12

CAPTULO 13 Codificacin en Dreamweaver

Macromedia Dreamweaver MX ofrece un entorno de codificacin completo diseado para cualquier tipo de desarrollo Web, desde la creacin de pginas HTML sencillas hasta el diseo, comprobacin y despliegue de aplicaciones Web complejas. Este captulo contiene los siguientes temas:

Entorno de codificacin de Dreamweaver en la pgina 209 Escritura y edicin de cdigo en la pgina 211 Cmo copiar y pegar cdigo en la pgina 215 Bsqueda y reemplazo de etiquetas y atributos en la pgina 217 Acceso a referencias de lenguaje en la pgina 221

Para obtener informacin sobre la migracin de Macromedia HomeSite a Dreamweaver, visite el Centro de servicio tcnico de Dreamweaver MX en http://www.macromedia.com/go/ migrate_from_homesite.
Temas relacionados

Configuracin del entorno de codificacin en la pgina 193 Optimizacin y depuracin del cdigo en la pgina 223 Edicin de cdigo en la vista Diseo en la pgina 237

Entorno de codificacin de Dreamweaver

El entorno de codificacin de Dreamweaver le permite acceder a todo el cdigo de las pginas. Esta seccin trata sobre los siguientes temas:

Tipos de archivos compatibles en la pgina 210 Cmo respeta Dreamweaver el cdigo en la pgina 210 Roundtrip HTML en la pgina 210 Cdigo insertado por comportamientos del servidor en la pgina 211

Tema relacionado

Visualizacin de los cdigos en la pgina 193

209

Tipos de archivos compatibles Para la codificacin del lado del cliente, puede trabajar con muchos tipos de archivos en Dreamweaver, incluidos HTML, XML, CSS (Hojas de estilos en cascada, Cascading Style Sheets), JavaScript, VBScript, WML (Lenguaje de formato inalmbrico, Wireless Markup Language), EDML (Lenguaje de formato de datos de extensin, Extension Data Markup Language), plantillas de Dreamweaver (.dwt) y archivos de texto. Para la codificacin del lado del servidor, puede trabajar con los siguientes tipos de archivos: ColdFusion, componentes de ColdFusion (.cfc), Visual Basic ASP.NET, C# ASP.NET, VBScript ASP, JavaScript ASP, JSP y PHP. Asimismo, puede crear archivos C#, Visual Basic y Java independientes. Cmo respeta Dreamweaver el cdigo Dreamweaver genera cdigos vlidos y limpios en los entornos de codificacin y visualizacin. Asimismo, respeta los cdigos escritos manualmente o generados por otro editor. Dreamweaver nunca reescribe los cdigos. Por ejemplo, no modifica los espacios en blanco ni el uso de maysculas o minsculas en los atributos. Si elige Ver > Opciones de vista de Cdigo > Resaltar HTML no vlido, Dreamweaver resaltar todos los errores en amarillo. Opcionalmente, puede especificar los criterios que deben seguirse para limpiar el cdigo. Asimismo, puede personalizar el formato que Dreamweaver aplica al cdigo. Para obtener ms informacin, consulte Configuracin de las preferencias de codificacin en la pgina 194. Roundtrip HTML Roundtrip HTML permite pasar los documentos de un editor de HTML basado en texto a Dreamweaver y a la inversa sin que se vean prcticamente afectados el contenido y la estructura del cdigo fuente HTML original del documento. Entre sus principales funciones se encuentran:

De forma predeterminada, cuando vuelve a Dreamweaver desde un editor externo o cuando

abre un documento HTML que no ha sido creado con Dreamweaver, ste reescribe las etiquetas solapadas, aade las etiquetas de cierre necesarias y elimina las etiquetas de cierre adicionales. Sin embargo, no realiza ningn otro cambio en el cdigo, aunque ste no sea vlido, siempre que los navegadores puedan mostrarlo correctamente. Si lo desea, puede desactivar la reescritura del cdigo (consulte Configuracin de las preferencias de reescritura del cdigo en la pgina 197).

Dreamweaver no cambia las etiquetas que no reconoce (incluidas las etiquetas XML), ya que
carece de criterios para juzgar cules son vlidas o no. Si una etiqueta no reconocida se superpone a otra (por ejemplo, <MyNewTag><b>text</MyNewTag></b>), Dreamweaver la marca como un error aunque no reescribe el cdigo.

Opcionalmente, puede establecer que Dreamweaver resalte en amarillo los cdigos HTML no
vlidos incompatibles con los navegadores. Al seleccionar una seccin resaltada, el inspector de propiedades muestra informacin sobre cmo corregir el error.

Dreamweaver permite iniciar un editor de texto de terceros para editar el documento actual.
Para obtener ms informacin, consulte Utilizacin de un editor de HTML externo con Dreamweaver en la pgina 206.

210 Captulo 13

Cdigo insertado por comportamientos del servidor Cuando desarrolla una pgina dinmica o elige un comportamiento del servidor en el panel Comportamientos del servidor, Dreamweaver inserta uno o varios bloques de cdigo (o participantes) en la pgina para que funcione el comportamiento del servidor. Si cambia el cdigo de un participante, ya no podr utilizar una herramienta visual para editar o eliminar el comportamiento del servidor. Dreamweaver busca modelos especficos en la pgina del cdigo para detectar comportamientos del servidor y mostrarlos en el panel Comportamientos del servidor. Si introduce algn cambio en el cdigo de un participante, incluido el espaciado entre palabras y los saltos de lnea, Dreamweaver no podr detectar el comportamiento del servidor ni mostrarlo en el panel Comportamientos del servidor. Sin embargo, el comportamiento del servidor se encuentra an en la pgina y podr editarlo en el entorno de codificacin de Dreamweaver.

Escritura y edicin de cdigo

Dreamweaver incluye varias funciones para ayudarle a escribir y editar cdigo eficazmente. Esta seccin trata de las siguientes funciones:

Utilizacin de Sugerencias para el cdigo en la pgina 211 Manipulacin de fragmentos de cdigo en la pgina 212 Utilizacin de la barra Insertar para insertar cdigo fcilmente en la pgina 213 Utilizacin del Selector de etiquetas para insertar etiquetas en la pgina 214 Edicin de etiquetas utilizando editores de etiquetas en la pgina 214 Edicin de etiquetas utilizando el inspector de etiquetas en la pgina 215 Aplicacin de sangra a los bloques de cdigo en la pgina 215 Cmo copiar y pegar cdigo en la pgina 215 Insercin de comentarios HTML en la pgina 216 Cmo mostrar funciones JavaScript y VBScript en la pgina en la pgina 216

Utilizacin de Sugerencias para el cdigo Sugerencias para el cdigo permite insertar y editar cdigo mientras escribe en la vista Cdigo (o en el Inspector de cdigo). Cuando escriba ciertos caracteres, se mostrar una lista con posibles opciones para completar la entrada. Puede utilizar esta funcin para insertar o editar cdigo, o simplemente para ver los atributos disponibles para una etiqueta, los parmetros disponibles para una funcin o los mtodos disponibles para un objeto. Podr establecer el tiempo que debe transcurrir antes de que Sugerencias para el cdigo muestre una lista de opciones, especificar las etiquetas que deben incluirse en la lista de etiquetas o desactivar Sugerencias para el cdigo. Para obtener ms informacin, consulte Configuracin de las preferencias de Sugerencias para el cdigo en la pgina 197.
Para insertar una etiqueta utilizando Sugerencias para el cdigo:

1 2 3

Escriba un parntesis angular de apertura (<) para mostrar una lista de etiquetas. Presione la tecla Escape para cerrar la lista. Desplcese por la lista y haga doble clic en una etiqueta para insertarla.

Codificacin en Dreamweaver

211

4 5 6 7

Si la etiqueta admite atributos, presione la barra espaciadora para mostrar una lista de los posibles atributos. Seleccione un atributo y presione Intro. Escriba el valor del atributo o, si ste slo admite ciertos valores, seleccione el valor de la lista de valores admitidos para el atributo. Para cada atributo que desee aadir a la etiqueta repita los dos pasos anteriores, evitando presionar la barra espaciadora entre un valor y las comillas de cierre ("). Escriba el parntesis angular de cierre de la etiqueta (>) despus del ltimo par atributo-valor.

Para editar una etiqueta, lleve a cabo una de estas operaciones:

Para aadir un atributo, site el punto de insercin a la izquierda del parntesis angular de
cierre de una etiqueta (>) y presione la barra espaciadora para mostrar una lista de los atributos admitidos por la etiqueta. Inserte el atributo y su valor siguiendo los pasos descritos anteriormente.

Para cambiar un atributo, elimnelo y aada el nuevo atributo como se ha descrito

anteriormente.

Para cambiar un valor, elimnelo y aada el nuevo valor como se ha descrito anteriormente.
Para insertar o editar el cdigo de una funcin u objeto:

Elija Edicin > Preferencias > Sugerencias para el cdigo o Dreamweaver > Preferencias > Sugerencias para el cdigo (Mac OS X) y, a continuacin, establezca que las sugerencias se muestren sin retraso. En la vista Cdigo (o en el Inspector de cdigo), escriba las funciones o el cdigo del objeto normalmente. Cuando escriba una palabra clave o un carcter para el que est disponible Sugerencias para el cdigo, se mostrar un men emergente con opciones para completarlos. Cuando desee, seleccione una opcin de la lista y presione Intro.

Para configurar o desactivar Sugerencias para el cdigo, consulte Configuracin de las preferencias de Sugerencias para el cdigo en la pgina 197. Manipulacin de fragmentos de cdigo Los fragmentos de cdigo permiten almacenar contenido para volverlo a utilizar posteriormente. Puede crear e insertar fragmentos, entre otros, de HTML, JavaScript, CFML, ASP y JSP. Dreamweaver tambin contiene fragmentos predefinidos que puede utilizar como punto de partida. Puede especificar si desea que el fragmento de cdigo se ajuste alrededor de una seleccin o que exista slo como bloque de cdigo. Por ejemplo, puede establecer un vnculo con una pgina que aparece frecuentemente en el sitio, pero que est adjuntada a distintos objetos y texto. Puede seleccionar un objeto, hacer clic con el botn derecho del ratn (Windows) o presionar la tecla Control y hacer clic en un fragmento en el panel Fragmentos y elegir Insertar en el men emergente. El cdigo del vnculo se ajustar alrededor de la seleccin. Puede tambin aadir comentarios a los fragmentos para ayudar a los dems a utilizarlos correctamente.
Para insertar un fragmento de cdigo:

Site el punto de insercin en la posicin deseada del documento; para insertar un fragmento de cdigo alrededor de una seleccin, realice la seleccin en el documento.

212 Captulo 13

En el panel Fragmentos (Ventana > Fragmentos), haga doble clic en el fragmento. Puede tambin hacer clic con el botn derecho del ratn (Windows) o presionar la tecla Control y hacer clic (Macintosh) y, a continuacin, elegir Insertar en el men emergente.

Para crear un fragmento de cdigo:

En el panel Fragmentos, haga clic en el icono Nuevo fragmento situado en la parte inferior del panel. Aparecer el cuadro de dilogo Snippet. Rellene el cuadro de dilogo y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Para editar o eliminar un fragmento de cdigo:

En el panel Fragmentos, seleccione un fragmento y haga clic en el icono Editar fragmento o Quitar situado en la parte inferior del panel. Puede identificar el icono Editar fragmento o Quitar por su descripcin de herramienta.

Para crear carpetas de fragmentos de cdigo y administrar fragmentos de cdigo.

1 2

En el panel Fragmentos, haga clic en el icono Nueva carpeta de fragmentos situado en la parte inferior del panel. Arrastre los fragmentos que desee a la nueva carpeta o a otras carpetas.

Para compartir un fragmento con otros miembros del equipo:

1 2 3

Busque el fragmento que desea compartir en la carpeta Configuration\Snippets de la carpeta de la aplicacin Dreamweaver MX. Copie el fragmento en una carpeta compartida de su equipo o de un equipo de red. Pida a los dems miembros del equipo que copien el fragmento en sus carpetas Configuration\Snippets.

Los miembros que tengan acceso a la carpeta compartida podrn aadir, editar y eliminar fragmentos de la carpeta. Utilizacin de la barra Insertar para insertar cdigo fcilmente Puede utilizar la barra Insertar para aadir cdigo fcilmente a una pgina. Para ello, site el punto de insercin en el cdigo y haga clic en un icono de la barra Insertar. Cuando hace clic en un icono, puede que aparezca inmediatamente el cdigo en la pgina o que un cuadro de dilogo solicite informacin adicional para completar el cdigo. Para averiguar la funcin de cada icono, site el puntero del ratn encima del icono y espere a que aparezca la descripcin de herramienta. El nmero y el tipo de iconos disponibles en la barra Insertar dependen del tipo de documento abierto en Dreamweaver. Tambin depende de si utiliza la vista Cdigo o la vista Diseo. Aunque la barra Insertar proporciona una coleccin de las etiquetas utilizadas habitualmente, no se incluyen todas. Para elegir de una seleccin ms completa de etiquetas, utilice el Selector de etiquetas.

Codificacin en Dreamweaver 213

Utilizacin del Selector de etiquetas para insertar etiquetas Puede utilizar el Selector de etiquetas para insertar en una pgina cualquier etiqueta de las bibliotecas de etiquetas de Dreamweaver (incluidas las bibliotecas de etiquetas de ColdFusion y ASP.NET). Para obtener ms informacin sobre las bibliotecas de etiquetas, consulte Administracin de bibliotecas de etiquetas en la pgina 200.
Para insertar una etiqueta utilizando el Selector de etiquetas:

Site el punto de insercin en el cdigo, haga clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y elija Insertar etiqueta. Aparecer el Selector de etiquetas. El panel izquierdo contiene una lista de las bibliotecas de etiquetas admitidas y el derecho las etiquetas de la carpeta de biblioteca de etiquetas seleccionada.

2 3

Seleccione una etiqueta de la lista. Si desea ver la sintaxis e informacin de utilizacin de la etiqueta, haga clic en el botn Datos de etiqueta. Si se dispone de ayuda para dicha etiqueta, se mostrar en el cuadro de dilogo. Si desea informacin de referencia acerca de la etiqueta, haga clic en el icono <?>. Si se dispone de informacin de referencia acerca de la etiqueta, se mostrar en el panel Referencia.

Haga clic en Insertar para insertar la etiqueta seleccionada en el cdigo. Las etiquetas que no requieren informacin adicional, y que aparecen en el panel derecho entre parntesis angulares (por ejemplo, <HTML></HTML>), se insertan en el documento en el punto de insercin. Las dems etiquetas muestran su propio editor de etiquetas.

Si se abre un editor de etiquetas, introduzca la informacin adicional y haga clic en Aceptar. Consulte Edicin de etiquetas utilizando editores de etiquetas en la pgina 214.

Edicin de etiquetas utilizando editores de etiquetas Los editores de etiquetas permiten especificar o editar los atributos de una etiqueta mediante un cuadro de dilogo. Si utiliza el Selector de etiquetas para insertar una etiqueta y sta requiere informacin adicional, se mostrar automticamente su editor de etiquetas. De lo contrario, el siguiente procedimiento explica cmo abrir el editor de etiquetas de una etiqueta. Para obtener ms informacin, consulte Utilizacin del Selector de etiquetas para insertar etiquetas en la pgina 214.
Para acceder al editor de etiquetas de una etiqueta:

1 2 3

Site el punto de insercin dentro de una etiqueta. Haga clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar etiqueta en el men emergente. Realice los cambios que desee y haga clic en Aceptar.

Sugerencia: Para obtener ms informacin sobre la etiqueta en el editor de etiquetas, haga clic en Datos de etiqueta.

214 Captulo 13

Edicin de etiquetas utilizando el inspector de etiquetas Puede utilizar el inspector de etiquetas para editar etiquetas en una hoja de propiedades parecida a las encontradas en otros IDE (Entorno de desarrollo integrado, Integrated Development Environment).
Para editar una etiqueta utilizando el inspector de etiquetas:

1 2

Compruebe que el inspector de etiquetas est abierto (Ventana > Inspector de etiquetas). En la vista Cdigo (o en el Inspector de cdigo), haga clic en una etiqueta. Si la etiqueta admite atributos, Dreamweaver muestra los atributos y sus valores actuales en la hoja de propiedades del inspector de etiquetas.

Realice los cambios a la etiqueta en la hoja de propiedades. Haga clic en un nombre de atributo para escribir un valor o, si el atributo toma valores predefinidos, para seleccionar de una lista.

Si el atributo toma un valor de una fuente de contenido dinmico (por ejemplo, una base de datos), haga clic en el icono de rayo situado al final de la fila del atributo seleccionado y seleccione la fuente. Para obtener informacin sobre cmo definir fuentes de contenido dinmico, consulte Definicin de fuentes de contenido dinmico en la pgina 553.

Haga clic en cualquier parte del panel para actualizar la etiqueta en el documento.

Aplicacin de sangra a los bloques de cdigo Mientras escribe y edita el cdigo en la vista Cdigo o en el Inspector de cdigo, puede aplicar sangra a los bloques de cdigo para que se distingan del resto y resulte ms fcil encontrarlos.
Para aplicar sangra a un bloque de cdigo:

1 2

Seleccione la lnea o lneas del bloque de cdigo al que desea aplicar sangra. (Debe seleccionar toda la lnea.) Elija Edicin > Sangrar cdigo.

Se aplicar sangra al cdigo. Elija Edicin > Anular sangra de cdigo para eliminar la sangra del cdigo. Cmo copiar y pegar cdigo Puede copiar y pegar cdigo fuente desde otra aplicacin o desde la vista Cdigo. Asimismo, puede copiar y pegar el cdigo como texto o como cdigo con las etiquetas intactas.
Para copiar y pegar cdigo fuente como texto:

1 2

Copie el cdigo desde Dreamweaver o desde otra aplicacin. Site el punto de insercin en la vista Diseo y elija Edicin > Pegar.

Para copiar y pegar cdigo fuente con las etiquetas intactas:

Copie el cdigo desde Dreamweaver o desde otra aplicacin. Para copiar desde la vista Diseo, elija Edicin > Copiar como HTML.

Codificacin en Dreamweaver 215

Lleve a cabo una de las siguientes operaciones: Diseo, presione F5 para actualizar la visualizacin del documento.

Site el punto de insercin en la vista Cdigo y elija Edicin > Pegar. Si se encuentra en la vista Site el punto de insercin en la vista Diseo y elija Edicin > Pegar como HTML.
Insercin de comentarios HTML Un comentario es un texto descriptivo que se inserta en el cdigo HTML para explicar el cdigo o facilitar otra informacin. El texto del comentario slo aparece en la vista Cdigo (o en el Inspector de cdigo) y no se mostrar en el navegador.
Para insertar un comentario:

1 2

En la vista Cdigo o en la vista Diseo, site el punto de insercin donde desee introducir el comentario. En la barra Insertar, haga clic en el icono Comentario de la ficha Comn. Utilice las descripciones de herramientas para identificar el icono Comentario.
-->

En la vista Cdigo, Dreamweaver inserta una etiqueta <!-comentario en la etiqueta. comentario y haga clic en Aceptar.

en la pgina. Introduzca el

En la vista Diseo, Dreamweaver muestra el cuadro de dilogo Comentario. Introduzca el

Para ver los marcadores de comentario en la vista Diseo, elija Ver > Ayudas visuales > Elementos invisibles. No olvide seleccionar comentarios en las preferencias de Elementos invisibles ya que, de lo contrario, no aparecer el marcador de comentario.
Para aadir texto a un comentario existente, lleve a cabo una de estas operaciones:

Seleccione el marcador Comentarios en la vista Diseo e introduzca texto en el inspector de

propiedades.

Busque el comentario en el cdigo y aada el texto directamente.

Cmo mostrar funciones JavaScript y VBScript en la pgina Puede ver todas las funciones JavaScript o VBScript en una pgina abierta en la vista Cdigo.
Para ver las funciones del script en una pgina:

1 2 3

Abra el documento en la vista Cdigo. Compruebe que se muestra la barra de herramientas del documento (Ver > Barras de herramientas > Documento). Haga clic en el icono Navegacin por el cdigo de la barra de herramientas. El icono consiste en un par de llaves ({ }).
Nota: En la vista Diseo est desactivado.

Si el cdigo contiene funciones JavaScript o VBScript, aparecern en el men emergente. Para ver las funciones en orden alfabtico, mantenga presionada la tecla Control (Windows) u Opcin (Macintosh) mientras hace clic en el botn Navegacin por el cdigo.

216 Captulo 13

Para pasar a una funcin del cdigo:

Seleccione una funcin en el men emergente Navegacin por el cdigo. La funcin aparecer resaltada en la vista Cdigo (o en el Inspector de cdigo).

Bsqueda y reemplazo de etiquetas y atributos

Puede utilizar Dreamweaver para buscar y reemplazar etiquetas y atributos en el cdigo. Esta seccin trata sobre los siguientes temas:

Bsqueda de cdigo fuente HTML en la pgina 217 Bsqueda de etiquetas y atributos en la pgina 217 Bsqueda de texto entre etiquetas especficas en la pgina 218 Almacenamiento de modelos de bsqueda en la pgina 219 Expresiones regulares en la pgina 220

Bsqueda de cdigo fuente HTML Utilice la opcin Cdigo fuente del cuadro de dilogo Buscar o Reemplazar para buscar cadenas de texto especficas en el cdigo fuente HTML. Por ejemplo, si busca black dog en el cdigo siguiente, encontrar dos coincidencias (en el atributo alt y en la primera frase):
<img src="barnaby.gif" width="100" height="100" alt="Barnaby, a black dog."><br> We saw several black dogs in the park yesterday. The black <a href="barnaby.html">dog</a> we liked best was called Barnaby.

El trmino black dog tambin aparece en la segunda frase, pero no coincide con el texto buscado porque est separado por un vnculo. Para obtener ms informacin, consulte Buscar y reemplazar texto en la pgina 322. Bsqueda de etiquetas y atributos Utilice la opcin Etiqueta especfica del cuadro de dilogo Buscar o Reemplazar para buscar etiquetas, atributos y valores de atributos especficos. Por ejemplo, puede buscar todas las etiquetas img sin atributo alt.
Para realizar una bsqueda de etiqueta:

1 2 3

Elija Edicin > Buscar y reemplazar, y especifique los archivos en los que desea buscar. Elija Etiqueta especfica en el men emergente Buscar. Elija una etiqueta especfica en el men emergente situado junto al men Buscar, introduzca una etiqueta o elija [any tag]. Si slo desea buscar todas las apariciones de la etiqueta especificada, presione el botn menos (-) y contine con el paso 6. En caso contrario, contine con el paso 4.

Limite la bsqueda con uno de los siguientes modificadores de etiqueta:

Con atributo permite elegir un atributo que debe encontrarse en la etiqueta para que sta coincida. Puede especificar un valor determinado para el atributo o elegir [any value]. Sin atributo

permite elegir un atributo que no debe encontrarse en la etiqueta para que sta coincida. Por ejemplo, elija esta opcin para buscar todas las etiquetas IMG sin atributo ALT.

Codificacin en Dreamweaver 217


5 6

Contiene

especifica texto o una etiqueta que deba encontrarse dentro de la etiqueta original para que sta coincida. Por ejemplo, en el cdigo <b><font face="Arial">heading 1</ font></b>, la etiqueta font se encuentra dentro de la etiqueta b.

No contiene especifica texto o una etiqueta que no debe encontrarse dentro de la etiqueta original para que sta coincida. En etiqueta especifica una etiqueta dentro de la cual debe encontrarse la etiqueta buscada para que sta coincida. No est en etiqueta

especifica una etiqueta dentro de la cual no debe encontrarse la etiqueta buscada para que sta coincida.

Haga clic en el botn ms (+) y repita el paso 4 para limitar an ms la bsqueda. Inicie la bsqueda: documento actual y, a continuacin, en los siguientes documentos si busca en ms de uno.

Haga clic en Buscar siguiente para resaltar la siguiente aparicin de la etiqueta en el Haga clic en Buscar todos para generar una lista de todas las apariciones de la etiqueta en el
documento actual o, si est buscando en un directorio o sitio, generar una lista de los documentos que contienen la etiqueta. La lista aparecer en la ficha Buscar del panel Resultados. Bsqueda de texto entre etiquetas especficas Utilice la opcin Texto (avanzado) en el cuadro de dilogo Buscar o Reemplazar para buscar cadenas de texto especficas que se encuentren dentro o fuera de una serie de etiquetas contenedoras. Por ejemplo, puede buscar la palabra sin t&iacute;tulo entre etiquetas <title> para localizar todas las pginas sin ttulo del sitio.
Para llevar a cabo una bsqueda de texto avanzada:

1 2 3

Elija Edicin > Buscar y reemplazar, y especifique los archivos en los que desea buscar. Elija Texto (avanzado) en el men emergente Buscar. Introduzca el texto que desea buscar en el campo de texto situado junto al men emergente Buscar. Por ejemplo, escriba el trmino sin t&iacute;tulo. Elija En etiqueta o No est en etiqueta y, a continuacin, elija una etiqueta en el men emergente que aparece al lado. Por ejemplo, elija En etiqueta y, seguidamente, title. Haga clic en el botn de signo ms (+) para restringir la bsqueda a etiquetas con un atributo o atributos especficos. Dado que la etiqueta <title >no tiene atributos, no necesitar emplear esta opcin para buscar en todas las pginas sin ttulo del sitio.

218 Captulo 13

Inicie la bsqueda: documento actual y, a continuacin, en los siguientes documentos si busca en ms de uno.

Haga clic en Buscar siguiente para resaltar la siguiente aparicin del texto en el Haga clic en Buscar todos para generar una lista de todas las apariciones de texto en el
documento actual o, si est buscando en un directorio o sitio, generar una lista de los documentos que contienen la etiqueta. La lista aparecer en la ficha Buscar del panel Resultados. Almacenamiento de modelos de bsqueda Puede guardar modelos de bsqueda y utilizarlos posteriormente haciendo clic en el botn Guardar consulta (identificado con un icono de disco) del cuadro de dilogo Buscar o Reemplazar. Conviene guardar consultas si realiza peridicamente las mismas bsquedas y no desea generar una y otra vez el mismo modelo de bsqueda. Por ejemplo, puede guardar modelos para eliminar etiquetas no estndar en documentos creados con otro editor visual HTML o para confirmar que todas las imgenes de un archivo tienen atributos height, width y alt antes de enviar el documento a la Web.
Para guardar un modelo de bsqueda:

En el cuadro de dilogo Buscar y reemplazar (Edicin > Buscar y reemplazar), establezca los parmetros de la bsqueda. Si realiza una bsqueda avanzada de texto o de etiquetas, consulte Bsqueda de etiquetas y atributos en la pgina 217 o Bsqueda de texto entre etiquetas especficas en la pgina 218 para obtener informacin sobre la configuracin de parmetros adicionales de bsqueda.

Haga clic en el icono Guardar consulte (identificado con un icono de disco). La ubicacin predeterminada para guardar las consultas es la carpeta Configuration/Queries, incluida en la carpeta de la aplicacin Dreamweaver.

En el cuadro de dilogo que aparece, asigne un nombre de archivo que identifique la consulta y haga clic en Guardar. Por ejemplo, si el modelo de bsqueda busca etiquetas img sin atributo alt, puede asignar el nombre img_sin_alt.dwr a la consulta. Las consultas de bsqueda tienen la extensin .dwq, mientras que las consultas de sustitucin tienen la extensin .dwr.

Para recuperar un modelo de bsqueda:

1 2

Elija Edicin > Buscar y reemplazar. Haga clic en el botn Cargar consulta (identificado con un icono de carpeta). El cuadro de dilogo Cargar consulta se abrir automticamente en la carpeta Configuration/ Queries. Si ha guardado las consultas en otra carpeta, puede acceder a ella.

Seleccione un archivo de consulta y haga clic en Abrir. En el cuadro de dilogo Buscar slo estn disponibles las consultas de bsqueda (archivos .dwq). En el cuadro de dilogo Reemplazar estn disponibles las consultas de bsqueda (archivos .dwq) y de sustitucin (archivos .dwr).

Haga clic en Buscar siguiente, Buscar todos, Reemplazar o Reemplazar todos para iniciar la bsqueda.

Codificacin en Dreamweaver 219

Expresiones regulares Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Utilcelas en las bsquedas para describir conceptos como frases que comiencen por El y valores de atributo que contengan un nmero. La tabla siguiente contiene los caracteres especiales de las expresiones regulares, su significado y ejemplos de uso. Para buscar texto que contenga uno de los caracteres especiales de la tabla, anule el valor del carcter colocando una barra invertida delante de l. Por ejemplo, para buscar el asterisco en la frase some conditions apply*, el modelo de bsqueda deber ser el siguiente: apply\*. Si no anula el valor del asterisco, encontrar todas las apariciones de apply (as como de appl, applyy y applyyy), no slo las que van seguidas de asterisco.
Carcter ^ $ * + ? Texto buscado Principio de entrada o lnea. Fin de entrada o lnea. El carcter anterior cero o ms veces. El carcter anterior una o ms veces. Ejemplo ^T encontrar T en This good earth, pero no en Uncle Toms Cabin h$ encontrar h en teach, pero no en teacher um* encontrar um en rum, umm en yummy y u en huge um+ encontrar um en rum y umm en yummy, pero no en huge

El carcter anterior una vez como mximo (es st?on encontrar son en Johnson y ston en Johnston, pero no en Appleton decir, indica que el carcter anterior es ni tension opcional). Cualquier carcter individual, salvo el de salto .an encontrar ran y can en la frase bran de lnea. muffins can be tasty x o y. FF0000|0000FF encontrar FF0000 en bgcolor=#FF0000 y 0000FF en font color=#0000FF o{2} encontrar oo en loom y las dos primeras oes de mooooo, pero no money F{2,4} encontrar FF en #FF0000 y las cuatro primeras efes de #FFFFFF

. x|y

{n} {n,m} [abc]

Exactamente n apariciones del carcter anterior. Como mnimo n y como mximo m apariciones del carcter anterior.

Cualquiera de los caracteres entre parntesis [e-g] encontrar e en bed, f en folly y g en guard angulares. Especifique un rango de caracteres con un guin (por ejemplo, [a-f] es equivalente a [abcdef]). Cualquier carcter que no est entre parntesis angulares. Especifique un rango de caracteres con un guin (por ejemplo, [^a-f] es equivalente a [^abcdef]). Lmite de palabra (como un espacio o un retorno de carro). Ausencia de lmite de palabra. Cualquier carcter de dgito. Equivalente a [0-9]. Cualquier carcter que no sea de dgito. Equivalente a [^0-9]. [^aeiou] encontrar inicialmente r en orange, b en book y k en eek!

[^abc]

\b \B \d \D

\bb encontrar b en book, pero no en goober ni en snob \Bb encontrar b en goober, pero no en book \d encontrar 3 en C3PO y 2 en apartment 2G \D encontrar S en 900S y Q en Q45

220 Captulo 13

Carcter \f \n \r \s

Texto buscado Salto de pgina. Salto de lnea. Retorno de carro. Cualquier carcter individual de espacio en blanco (espacios, tabulaciones, saltos de pgina o saltos de lnea). Cualquier carcter individual que no sea un espacio en blanco. Tabulacin. Cualquier carcter alfanumrico, incluido el de subrayado. Equivalente a [A-Za-z0-9_]. Cualquier carcter que no sea alfanumrico. Equivalente a [^A-Za-z0-9_]. Carcter de retorno. Desactive la opcin Omitir diferencias de espacios en blanco cuando realice esta bsqueda si no utiliza expresiones regulares. Observe que este mtodo busca un determinado carcter, no un salto de lnea. Por ejemplo, no busca etiquetas <br> o <p>. Los caracteres de retorno aparecen como espacios en la ventana de documento, no como saltos de lnea.

Ejemplo

\sbook encontrar book en blue book, pero no en notebook \Sbook encontrar book en notebook, pero no en blue book

\S \t \w \W Control+Intro o Mays+Intro (Windows), o Control+Retorno o Mays+Retorno o Comando+Retorno (Macintosh)

b\w* encontrar barking en the barking dog y big y black en the big black dog \W encontrar & en Jake & Mattie y % en 100%

Utilice parntesis para destacar agrupaciones dentro de la expresin regular. Posteriormente podr hacer referencia a la primera agrupacin entre parntesis, la segunda, la tercera y posteriores utilizando $1, $2, $3, etc. en el campo Buscar y utilizando la barra invertida (\) en el campo Reemplazar. Por ejemplo, si busca (\d+)\/(\d+)\/(\d+) y lo reemplaza por $2/$1/$3, cambiar el da y el mes de una fecha separada por barras (para convertir el formato de fechas americano en formato europeo).

Acceso a referencias de lenguaje

El panel Referencia ofrece una herramienta de consulta rpida de lenguajes de formato, objetos JavaScript y estilos CSS y sus atributos. Proporciona informacin sobre etiquetas, objetos o estilos especficos con los que est trabajando en la vista Cdigo (o en el Inspector de cdigo).
Para abrir el panel Referencia:

1 2

En la vista Cdigo, haga clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) en una etiqueta, atributo o palabra clave. Elija Referencia en el men emergente.

Se abrir el panel Referencia, mostrando informacin sobre la etiqueta, el objeto o estilo que ha seleccionado. Para ajustar el tamao del texto en el panel Referencia, seleccione Fuente grande, Fuente mediana y Fuente pequea en el men de opciones (una flecha pequea situada en la parte superior derecha del panel).

Codificacin en Dreamweaver 221

El men emergente Libro muestra el nombre del libro del que procede el material de referencia. Para mostrar etiquetas, objetos o estilos de otro libro, elija el libro que desee en el men emergente Libro.

El men emergente Etiqueta, Objeto o Estilo (segn el libro seleccionado) muestra la etiqueta, el objeto o estilo seleccionado en la vista Cdigo (o en el Inspector de cdigo). Para ver informacin sobre otra etiqueta, objeto o estilo, seleccinelo en el men. Junto al men emergente Etiqueta, Objeto o Estilo hay otro men que contiene la lista de atributos de la etiqueta elegida. La seleccin predeterminada es Description, que muestra una descripcin de la etiqueta seleccionada. Tambin puede seleccionar un atributo del men para ver ms informacin sobre el mismo.

222 Captulo 13

CAPTULO 14 Optimizacin y depuracin del cdigo

Puede utilizar Macromedia Dreamweaver MX para optimizar y depurar el cdigo. Por ejemplo, puede validar etiquetas, hacer un documento compatible con XHTML o depurar documentos JavaScript. Este captulo trata los siguientes temas:

Limpieza del cdigo en la pgina 223 Verificacin de que las etiquetas y llaves estn equilibradas en la pgina 224 Validacin de etiquetas en la pgina 225 Cmo hacer las pginas compatibles con XHTML en la pgina 225 Utilizacin del depurador JavaScript en la pgina 229 Utilizacin del depurador ColdFusion en la pgina 235

Limpieza del cdigo

Utilice el comando Limpiar HTML o Limpiar XHTML para eliminar etiquetas vacas, combinar etiquetas font anidadas y, en general, mejorar cdigos HTML o XHTML desordenados o ilegibles. En un documento XHTML, el comando Limpiar XHTML soluciona errores de sintaxis, establece que los atributos de etiqueta aparezcan en minsculas y agrega o informa de los atributos obligatorios de una etiqueta que faltan. (Despus de ejecutar el comando Limpiar XHTML, aparece un cuadro de dilogo con el nmero de etiquetas img y area que no tienen atributo alt.) Para limpiar HTML generado a partir de un documento de Microsoft Word, consulte Limpieza de HTML de Microsoft Word en la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver).
Para limpiar el cdigo:

Abra un documento.

Si el documento est en HTML, elija Comandos > Limpiar HTML. Si el documento est en XHTML, elija Comandos > Limpiar XHTML.
2

En el cuadro de dilogo que aparece dispone de las siguientes opciones:

Eliminar Etiquetas contenedoras vacas

elimina las etiquetas que carecen de contenido. Por ejemplo, <b></b> y <font color="FF0000"></font> se consideran etiquetas vacas, mientras que la etiqueta <b> en <b>some text</b> no se considera vaca.

223

Eliminar Etiquetas anidadas repetidas

elimina todas las repeticiones de una etiqueta. Por ejemplo, en el cdigo <b>This is what I <b>really</b> wanted to say </b>, las etiquetas b que rodean a la palabra really estn repetidas y se eliminaran.

Eliminar Comentarios HTML ajenos a Dreamweaver elimina todos los comentarios que no hayan sido insertados por Dreamweaver. Por ejemplo, <!--begin body text--> se eliminara, pero no <!-- #BeginEditable "doctitle" -->, ya que se trata de un comentario de Dreamweaver que marca el comienzo de una regin editable en una plantilla. Eliminar Formato especial de Dreamweaver

elimina las etiquetas especificadas en el campo de texto contiguo. Utilice esta opcin para eliminar etiquetas personalizadas insertadas por otros editores visuales y otras etiquetas que no desea que aparezcan en el sitio (por ejemplo, blink). Separe las distintas etiquetas mediante comas (por ejemplo, font, blink).
Eliminar Etiqueta(s) especfica(s) Combinar etiquetas de <font> anidadas cuando sea posible consolida dos o ms etiquetas font cuando controlan el mismo rango de texto. Por ejemplo, <font size="7"><font color="#FF0000">big red</font></font> se cambiara a <font font="7" font="#FF0000">big red</font>. Mostrar registro al terminar muestra un cuadro de alerta con detalles acerca de los cambios realizados en el documento inmediatamente despus de concluir la limpieza.

Haga clic en Aceptar. Segn el tamao del documento y el nmero de opciones seleccionadas, la operacin de limpieza puede tardar varios segundos en realizarse.

Verificacin de que las etiquetas y llaves estn equilibradas

Mientras escribe y edita el cdigo en la vista Cdigo o en el Inspector de cdigo, puede comprobar que las etiquetas o llaves ({ }) de la pgina estn equilibradas. Esto le permite asegurarse de que todas las etiquetas de apertura tienen sus correspondientes etiquetas de cierre y a la inversa, algo especialmente til cuando se utilizan distintos niveles de anidacin en el cdigo, por ejemplo, cuando hay tablas anidadas en otras tablas.
Para comprobar si las etiquetas estn equilibradas:

1 2 3

Abra el documento en la vista Cdigo. Site el punto de insercin en el cdigo anidado que desea comprobar. Elija Edicin > Seleccionar etiqueta padre. Se resaltarn las etiquetas de apertura y cierre en el cdigo. Si elige Edicin > Seleccionar etiqueta padre y las etiquetas estn equilibradas, Dreamweaver resaltar las etiquetas <html> y </html> ms externas.

Para comprobar si las llaves estn equilibradas:

1 2 3

Abra el documento en la vista Cdigo. Site el punto de insercin en el cdigo anidado que desea comprobar. Elija Edicin > Equilibrar llaves. Se resaltarn las etiquetas de apertura y cierre en el cdigo. Si elige otra vez Edicin > Equilibrar llaves, se resaltarn las etiquetas correspondientes que limitaban la seleccin anterior.

224 Captulo 14

Validacin de etiquetas
Puede utilizar el validador de Dreamweaver para comprobar si el cdigo contiene errores de etiqueta o de sintaxis. El validador admite distintos lenguajes basados en etiquetas, incluidas varias versiones de HTML, XHTML, CFML (ColdFusion Markup Language), JSP (JavaServer Pages) y WML (Lenguaje de marcas inalmbrico, Wireless Markup Language). Puede tambin validar un documento XML.
Nota: Para validar la accesibilidad de un documento, consulte Comprobacin de la accesibilidad del sitio Web en la pgina 376.

Puede establecer las preferencias del validador, por ejemplo especificar el lenguaje basado en etiquetas que debe utilizarse para la validacin, los problemas especficos que deben comprobarse y los tipos de errores de los que debe informarse. Para obtener ms informacin, consulte Configuracin de las preferencias del validador en la pgina 199. Puede ejecutar el validador para el documento actual o para una etiqueta seleccionada.
Para ejecutar el validador:

Lleve a cabo una de las siguientes operaciones:

Para un archivo XML (o XHTML), elija Archivo > Comprobar pgina > Validar como XML. O elija Archivo > Comprobar pgina > Validar formato.
La ficha Validacin del panel Resultados mostrar el mensaje No se han encontrado errores ni advertencias o una lista de los errores de sintaxis encontrados.
2 3

Haga doble clic en un mensaje de error para resaltarlo en el documento. Haga clic con el botn derecho del ratn (Windows) o presione Control y haga clic (Macintosh) en el informe para guardarlo como archivo XML o para verlo en un navegador (lo que le permitir imprimirlo).

Cmo hacer las pginas compatibles con XHTML

En esta seccin se describen los lenguajes XML y XHTML, los requisitos XHTML, los requisitos CSS (Hojas de estilos en cascada, Cascading Style Sheets) para XHTML y cmo crear documentos compatibles con XHTML. Esta seccin trata sobre los siguientes temas:

XML y XHTML en la pgina 226 Cdigo XHTML generado por Dreamweaver en la pgina 227 Utilizacin de CSS (Hojas de estilos en cascada, Cascading Style Sheets) con XHTML en la
pgina 228

Cmo hacer los documentos compatibles con XHTML en la pgina 229

Optimizacin y depuracin del cdigo 225

XML y XHTML El lenguaje XML (Lenguaje de formato ampliable, Extensible Markup Language) define la estructura de la informacin o cmo puede almacenarse en una base de datos. Por ejemplo, un lenguaje XML para la cocina podra tener una etiqueta <receta>, que a su vez puede contener etiquetas de <encabezado>, <ingredientes> e <instrucciones>. La utilidad del lenguaje XML radica en que la informacin puede almacenarse y recuperarse de una base de datos, mostrarse en una variedad de formatos y utilizarse para distintas finalidades (por ejemplo, en una pgina Web, en un porttil o en un telfono mvil, para un libro de cocina o una asociacin de intercambio de recetas, o en un libro acerca del cilantro). El lenguaje XHTML (Lenguaje de formato de hipertexto ampliable, Extensible Hypertext Markup Language) es un replanteamiento del lenguaje HTML como aplicacin XML. Se parece mucho a HTML 4.01, pero es ms estricto y limpio. Ventajas de XHTML En general, la utilizacin de XHTML permite aprovechar las ventajas del lenguaje XML, garantizando al mismo tiempo la compatibilidad inversa y futura de los documentos Web. Otros motivos especficos que justifican la utilizacin de XHTML son:

XHTML est diseado para sustituir al lenguaje HTML. Si desea que en el futuro su sitio Web
pueda mostrarse correctamente en Internet, es una buena inversin empezar a utilizar ya cdigos XHTML.

XHTML est diseado para que funcione en distintos dispositivos, no slo en un PC. XHTML es un lenguaje XML, por lo que ofrece posibilidades de extensibilidad. Asimismo,
puede utilizar herramientas XML estndar para ver, editar y validar documentos XHTML.

Los documentos XHTML pueden utilizar aplicaciones como scripts y applets basadas en el
Modelo de objeto de documento HTML o XML.

En XHTML se requiere la utilizacin de un cdigo de calidad, lo que reduce las discrepancias

entre los mtodos utilizados por los distintos agentes de usuario, por ejemplo los navegadores Web, para mostrar un documento Web, ya que estas discrepancias se deben a un formato de cdigo inapropiado o incorrecto. Migracin de HTML a XHTML XHTML funciona en navegadores y otros agentes de usuario que admiten HTML 4 y XML. Por ello, puede cambiar a XHTML sin excluir a nadie o sin esperar a que los agentes de usuario XML sean ms habituales. Como el lenguaje XHTML es tan parecido al HTML, no resulta difcil cambiar de HTML a XHTML. Recursos Web para XHTML Para obtener ms informacin sobre el lenguaje XHTML, consulte el sitio Web de World Wide Web Consortium (W3C), que contiene las especificaciones de XHTML 1.1: XHTML (http:// www.w3.org/TR/xhtml11/) y XHTML 1.0 (http://www.w3c.org/TR/xhtml1/) basados en mdulos, adems de los sitios del validador XHTML para archivos basados en la Web (http:// validator.w3.org/) y archivos locales (http://validator.w3.org/file-upload.html).

226 Captulo 14

Cdigo XHTML generado por Dreamweaver Dreamweaver genera cdigo XHTML y limpia el cdigo XHTML existente para que se ajuste automticamente a los numerosos requisitos del lenguaje XHTML. Para los restantes requisitos XHTML, Dreamweaver le proporciona las herramientas necesarias.
Nota: Algunos requisitos descritos en esta seccin tambin son obligatorios en distintas versiones de HTML.

La siguiente tabla describe los requisitos XHTML que cumple automticamente Dreamweaver.
Requisito XHTML Cuando la codificacin de caracteres de un documento no es UTF-8 predeterminado, el documento deber incluir una declaracin XML. Para cumplir este requisito, Dreamweaver... Agrega una declaracin XML a un documento XHTML y especifica la codificacin, por ejemplo: <?xml version="1.0" encoding="iso-8859-1"?>

Antes del elemento raz del documento, debe haber una Agrega una declaracin DOCTYPE de XHTML a un declaracin DOCTYPE que haga referencia a uno de los documento XHTML: tres archivos DTD (Definicin de tipo de documento, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Document Type Definition) para XHTML: strict Transitional//EN" "http://www.w3.org/TR/ (estricta), transitional (transitoria) o frameset (conjunto xhtml1/DTD/xhtml1-transitional.dtd"> de marcos). O, si el documento XHTML tiene un conjunto de marcos: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-frameset.dtd"> El elemento raz del documento debe ser html y el elemento html debe designar el atributo namespace de XHTML. Un documento estndar debe incluir los elementos estructurales head, title y body. Un documento de conjunto de marcos debe incluir los elementos estructurales head, title, body y frameset. Todos los elementos de un documento deben estar correctamente anidados. <p>This is a <i>bad example.</p></i> <p>This is a <i>good example.</i></p> Todos los nombres de elementos y atributos deben estar en minsculas. Agrega el atributo namespace al elemento html de la siguiente forma: <html xmlns="http://www.w3.org/1999/xhtml"> Incluye los elementos head, title y body en un documento estndar y, en un documento de conjunto de marcos, adems el elemento frameset. Genera cdigo correctamente anidado y, cuando limpia el XHTML, corrige la anidacin de cualquier cdigo no generado por Dreamweaver.

Obliga a utilizar las minsculas en los nombres de elementos y atributos HTML del cdigo XHTML que genera, y cuando limpia el XHTML, independientemente de las preferencias especificadas para las etiquetas y atributos. Inserta etiquetas de cierre en el cdigo que genera, y cuando limpia el XHTML.

Todos los elementos deben incluir una etiqueta de cierre, salvo que se especifique EMPTY (vaco) en la DTD.

Inserta elementos vacos con un espacio delante de la Los elementos vacos deben incluir una etiqueta de barra diagonal de cierre en el cdigo que genera, y cierre o la etiqueta de apertura debe terminar con />. cuando limpia el XHTML. Por ejemplo, <br> no es vlido, la forma correcta es <br></br> o <br/>. Los elementos vacos son los siguientes: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta y param. Y para la compatibilidad con navegadores que no admiten XML, debe haber un espacio delante de /> (por ejemplo, <br />, no <br/>).

Optimizacin y depuracin del cdigo 227

Requisito XHTML Los atributos no pueden abreviarse; por ejemplo, <td nowrap> no es vlido, la forma correcta es <td nowrap="nowrap">. Esto afecta a los siguientes atributos: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly y selected. Todos los valores de atributos deben aparecer entre comillas. Los siguientes elementos deben incluir un atributo id y un atributo name. a, applet, form, frame, iframe, img y map. Por ejemplo, <a name="intro">Introduction</a> no es vlido; la forma correcta es <a id="intro">Introduction</a> o <a id="section1" name="intro"> Introduction</a>.

Para cumplir este requisito, Dreamweaver... Inserta pares completos atributo-valor en el cdigo que genera, y cuando limpia el XHTML. Nota: Si una navegador HTML no admite HTML 4, podra no interpretar estos atributos booleanos cuando aparecen en su forma completa. Pone entre comillas los valores de atributo que genera, y cuando limpia el XHTML. Establece el mismo valor para los atributos name e id, siempre que el atributo name est definido por un inspector de propiedades, en el cdigo que genera Dreamweaver, y cuando limpia el XHTML.

Obliga a utilizar minsculas en los valores type Para atributos con valores type enumerados, stos enumerados del cdigo que genera, y cuando limpia el deben aparecer en minsculas. XHTML. Un valor type enumerado forma parte de una lista especificada de valores permitidos; por ejemplo, los valores posibles del atributo align son: center, justify, left y right. Todos los elementos script y style deben incluir un atributo type. (El atributo type del elemento script es obligatorio desde HTML 4, cuando el atributo language dej de utilizarse.) Establece los atributos type y language de los elementos script, y el atributo type de los elementos style, en el cdigo que genera, y cuando limpia el XHTML.

Todos los elementos img y area deben incluir un atributo Establece estos atributos en el cdigo que genera y, alt. cuando limpia el XHTML, informa de los atributos alt que faltan.

Utilizacin de CSS (Hojas de estilos en cascada, Cascading Style Sheets) con XHTML Para algunos estilos CSS, un agente de usuario HTML (por ejemplo, un navegador Web) puede producir distintos resultados visuales y auditivos que un agente de usuario XML. A continuacin se especifican algunas reglas para reducir estas discrepancias:

Utilice minsculas para los nombres de elementos y atributos de las hojas de estilo CSS.
Dreamweaver obliga a que los nombres de elementos y atributos aparezcan en minsculas en un documento XHTML, independientemente de las preferencias que haya especificado, en el cdigo que genera, y cuando limpia el XHTML.

Si bien los analizadores HTML deducen el elemento tbody, los analizadores XML, no lo
hacen. Por tanto, si define un estilo tbody, agregue el elemento tbody a las tablas.

El estilo CSS define reglas de conformidad distintas para los documentos HTML y XML; por
tanto, tenga en cuenta que las reglas HTML se aplican a un documento XHTML presentado como HTML, y las reglas XML a un documento XHTML presentado como XML.
Nota: En los documentos que especifican el namespace XHTML, es de esperar que los navegadores y otros agentes de usuario continuarn reconociendo el atributo class y el atributo id como un atributo de tipo ID. Por tanto, puede continuar utilizando la sintaxis . abreviada para hacer referencia a la clase CSS de un selector (por ejemplo, P.note); y utilizar la sintaxis de selector abreviada #, aunque el agente de usuario no lea la DTD.

228 Captulo 14

Cmo hacer los documentos compatibles con XHTML En esta seccin se describe cmo hacer un nuevo documento y un documento HTML existente compatible con XHTML.
Para crear un nuevo documento compatible con XHTML:

Seleccione Archivo> Nuevo. Aparecer el cuadro de dilogo Nuevo documento. Elija un tipo de documento. Seleccione la opcin Hacer el documento compatible con XHTML. Haga clic en Aceptar.

2 3 4

Para crear documentos compatibles con XHTML de forma predeterminada:

1 2 3

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X), y seleccione la categora Nuevo documento. En la categora Nuevo documento, elija un tipo de documento y seleccione la opcin Hacer el documento compatible con XHTML. Haga clic en Aceptar.

Para hacer un documento HTML existente compatible con XHTML:

Abra un documento.

Para un documento sin marcos, elija Archivo > Convertir > XHTML. Para un documento con marcos, seleccione un marco y elija Archivo > Convertir > XHTML.
Para convertir todo el documento, repite este paso con todos los marcos y con el documento de conjunto de marcos.
Nota: No se puede convertir una instancia (copia) de una plantilla, ya que debe estar en el mismo lenguaje que la plantilla en que se basa. Por ejemplo, una instancia de una plantilla XHTML ser siempre XHTML; y una instancia de una plantilla HTML ser siempre HTML y no puede convertirse a XHTML ni a ningn otro lenguaje.

Utilizacin del depurador JavaScript

El depurador JavaScript ayuda a aislar errores en el cdigo JavaScript del lado del cliente. Puede escribir cdigo en la vista Cdigo (o en el Inspector de cdigo) y luego ejecutar el depurador para comprobar si contiene errores de sintaxis y de lgica. Si la pgina contiene uno o ms errores de sintaxis, el navegador muestra un mensaje de error; si contiene un error de lgica, la pgina funcionar incorrectamente, pero el navegador no mostrar ningn mensaje de error. Puede utilizar el depurador JavaScript con Microsoft Internet Explorer y Netscape Navigator 4.0 (aunque no con Netscape Navigator 6.0). El depurador comprueba en primer lugar la existencia de posibles errores de sintaxis en el cdigo, y luego lo ejecuta con el navegador para ayudarle a identificar cualquier error de lgica. Si hay errores de lgica, puede utilizar el cuadro de dilogo Depurador JavaScript para examinar variables y propiedades del documento mientras se ejecuta el programa. Se pueden establecer puntos de corte (similares a declaraciones de alerta) en el cdigo para detener la ejecucin del programa y mostrar los valores de los objetos y propiedades de JavaScript en una lista de variables. Tambin se puede pasar a la siguiente declaracin o a una llamada de funcin para ver cmo cambian los valores de las variables.

Optimizacin y depuracin del cdigo 229

Esta seccin trata sobre los siguientes temas:

Ejecucin del depurador JavaScript en la pgina 230 Bsqueda de errores de sintaxis en la pgina 231 Bsqueda y solucin de errores de lgica en la pgina 232 Configuracin de puntos de corte en la pgina 232 Revisin paso a paso del cdigo en la pgina 233 Visualizacin y edicin de valores de variables en la pgina 233

Ejecucin del depurador JavaScript Despus de escribir el cdigo JavaScript, puede iniciar el depurador JavaScript para comprobar si hay errores. El depurador comprueba en primer lugar la existencia de posibles errores de sintaxis, y luego abre la pgina en el navegador para que pueda comprobar si hay errores de lgica.
Para iniciar la depuracin:

Elija Archivo > Depurar en navegador, y seleccione un navegador de la lista. En Windows, elija Internet Explorer o Netscape Navigator. En Macintosh, elija Netscape. Si el depurador encuentra un error de sintaxis, se detiene y lo muestra en una lista en la ventana Errores de sintaxis JavaScript. Para obtener ms informacin, consulte Bsqueda de errores de sintaxis en la pgina 231.

Si est utilizando Netscape Navigator, haga clic en Aceptar en el cuadro de advertencia que aparece en el depurador y, a continuacin, haga clic en Conceder en el cuadro de dilogo de seguridad de Java.
Nota: Si ya ha aceptado un certificado de seguridad de Macromedia, el cuadro de dilogo de seguridad de Java no aparecer.

(Slo en Windows) Si est utilizando Internet Explorer, haga clic en S en el cuadro de dilogo de seguridad de Java, y luego en Aceptar en el cuadro de advertencia que aparece en el depurador.
Nota: El cuadro de dilogo de seguridad es necesario porque el depurador utiliza un protocolo de Internet para conectar con el navegador, pero en realidad no establece una conexin de red ni se conecta con ningn servidor de Internet.

El cuadro de dilogo Depurador JavaScript aparece con la ventana del navegador. El depurador se detiene automticamente en la primera lnea de cdigo. La siguiente ilustracin muestra la barra de herramientas del cuadro de dilogo Depurador JavaScript:
Detener depuracin Quitar todos los puntos de corte Entrar

Ejecutar

Establecer/ Quitar punto de corte

Pasar

Salir

230 Captulo 14

Para ejecutar el depurador:

En la parte superior del cuadro de dilogo Depurador JavaScript, haga clic en el botn Ejecutar.
Para detener el depurador:

En la parte superior del cuadro de dilogo Depurador JavaScript, haga clic en el botn Detener depuracin. El cuadro de dilogo Depurador JavaScript se cierra. Bsqueda de errores de sintaxis Si el depurador encuentra errores de sintaxis en una pgina, se detiene e incluye una lista en el cuadro de dilogo Errores de sintaxis JavaScript, como se muestra en la siguiente ilustracin:

Para ver la descripcin de un error:

Seleccione el error en el cuadro de dilogo Errores de sintaxis JavaScript. En el cuadro Descripcin detallada aparecer una descripcin del error.
Para ir al error seleccionado del cdigo, lleve a cabo una de estas operaciones:

Haga doble clic en el error. Haga clic en Ir a lnea.

El cdigo aparecer resaltado en la vista Cdigo, o si no est abierta, en el Inspector de cdigo.

Optimizacin y depuracin del cdigo 231

Bsqueda y solucin de errores de lgica Cuando inicia el depurador, se abre el cuadro de dilogo Depurador JavaScript y detiene la ejecucin del navegador en la primera lnea del cdigo. Puede establecer puntos de corte adicionales en cualquier lnea del cdigo. El depurador detiene la ejecucin del cdigo en cada punto de corte, permitindole ver los valores de los objetos y las propiedades JavaScript en el panel de lista de variables.

Cuando el depurador se detiene en un punto de corte, se puede avanzar paso a paso por el cdigo (ejecutando las declaraciones de una en una). Esto permitir comprobar si el programa se ejecuta correctamente. El depurador puede entrar incluso en cdigo vinculado. Por ejemplo, si el cdigo contiene un vnculo con un archivo de origen, el depurador entrar en el archivo de origen y lo mostrar en el cuadro de dilogo Depurador JavaScript. Al ir avanzando por el cdigo, podr ver cmo cambian los valores de las variables a lo largo del programa. Configuracin de puntos de corte Un punto de corte marca un lugar del cdigo en el que se desea detener la ejecucin del programa. Cuando se establece un punto de corte, queda marcado con un pequeo punto rojo en el margen izquierdo del cuadro de dilogo Depurador JavaScript. Cuando la ejecucin del programa se detiene en ese punto de corte, aparece una pequea flecha sobre el punto; entonces se pueden examinar los objetos y las propiedades que hay en ese punto. Esto permite localizar rpidamente el origen del error en el cdigo JavaScript. Los puntos de corte slo se pueden establecer en el cdigo JavaScript (entre etiquetas script) o en una lnea con un manejador de eventos. Si establece un punto de corte en otro lugar, Dreamweaver establecer automticamente el punto de corte en la siguiente lnea de cdigo vlida (o situar all el punto de insercin, si en la lnea ya hay un punto de corte insertado). Si no hay ninguna lnea vlida en la que se pueda establecer un punto de corte, se oir un pitido.

232 Captulo 14

Para establecer un punto de corte:

1 2 3

En el cuadro de dilogo Depurador JavaScript, site el punto de insercin en la lnea donde desee el punto de corte. En la barra de herramientas, haga clic en el botn Establecer/Quitar punto de corte. Para quitar el punto de corte, vuelva a hacer clic en Establecer/Quitar punto de corte.

Para quitar todos los puntos de corte, lleve a cabo una de estas operaciones:

En la parte superior del cuadro de dilogo Depurador JavaScript, haga clic en el botn Quitar
todos los puntos de corte.

En la vista Cdigo (o en el Inspector de cdigo), elija Edicin > Quitar todos los puntos de
corte. Revisin paso a paso del cdigo Puede revisar paso a paso el cdigo, ejecutando las declaraciones de una en una y comprobando el resultado. Puede pasar, por ejemplo, por una condicin if y comprobar si el programa se detiene en la primera lnea dentro de la declaracin condicional o en la siguiente lnea ejecutable despus de la declaracin if. Cuando el depurador se detiene en una declaracin con una llamada de funcin, puede comprobar si la funcin se ejecuta correctamente. Si la funcin es correcta, puede salir de ella para que el depurador siga la ejecucin hasta que la funcin vuelva a aparecer. El programa se detendr de nuevo en la siguiente declaracin, despus de la llamada de funcin. Si intenta entrar en una declaracin que contiene una funcin JavaScript no estndar, el depurador JavaScript pasar sin entrar en ella.
Para pasar una declaracin:

En la parte superior del cuadro de dilogo Depurador JavaScript, haga clic en el botn Pasar. Cuando el programa se detiene en alguna declaracin (incluidas aquellas con una funcin de llamada), puede pasar esa declaracin para continuar y detenerse antes de la siguiente funcin.
Para entrar en una funcin:

En la parte superior del cuadro de dilogo Depurador JavaScript, haga clic en el botn Entrar.
Para salir de una funcin:

En la parte superior del cuadro de dilogo Depurador JavaScript, haga clic en el botn Salir. Solamente se puede usar Salir cuando el depurador est dentro de una funcin definida por el usuario. El hecho de salir provoca la ejecucin de las restantes declaraciones de la definicin de la funcin. El depurador se detendr en la siguiente declaracin. Visualizacin y edicin de valores de variables Para comprobar los valores de las variables al revisar paso a paso el cdigo, utilice el panel de lista de variables que se encuentra en la parte inferior del cuadro de dilogo Depurador JavaScript. Cuando agrega una variable, su nombre aparece en la columna izquierda; la columna derecha muestra el valor actual cuando el programa detiene la ejecucin en un punto de corte o despus de entrar en el cdigo.

Optimizacin y depuracin del cdigo 233

La siguiente ilustracin muestra el valor actual de distintas variables:

Para agregar una variable a la lista de variables, lleve a cabo una de estas operaciones:

Seleccione el nombre de la variable en la parte de cdigo correspondiente del cuadro de dilogo

Depurador JavaScript. Haga clic en el botn de signo ms (+) y presione Intro.

Haga clic en el botn de signo ms (+), escriba el nombre de la variable que desea ver y
presione Intro. Los valores aparecern junto a cada variable al revisar paso a paso el cdigo. Si la variable es un objeto con propiedades, puede ampliarla para que muestre sus propiedades y valores. Para ampliar la variable, haga clic en el botn de signo ms (+) (Windows) o en el botn de tringulo (Macintosh) que aparece al lado en la lista. La variable ampliada se contraer automticamente cada vez que pase por el cdigo.
Para eliminar una variable de la lista:

1 2

Seleccione el elemento en la lista de variables. Haga clic en el botn de signo menos (-).

Para editar un valor:

1 2

Seleccione el elemento en la lista de variables. Haga clic en el valor en la lista de valores.

234 Captulo 14

En el cuadro de texto que aparece, escriba el nuevo valor.

Utilizacin del depurador ColdFusion

Cuando desarrolla aplicaciones de Macromedia ColdFusion, puede configurar ColdFusion para que muestre informacin en un navegador que le ayude a depurar la aplicacin. Por ejemplo, si una pgina contiene un error, ColdFusion muestra las posibles causas en la parte inferior de una pgina de ColdFusion cuando la abre en un navegador. Si es desarrollador de ColdFusion y utiliza Macromedia ColdFusion MX como servidor de prueba de Dreamweaver, podr ver esta informacin y reparar la pgina sin salir de Dreamweaver.
Nota: Esta funcin no puede utilizarse en un Macintosh. Los desarrolladores de Macintosh pueden utilizar Vista previa en el Navegador (F12) para abrir una pgina de ColdFusion en otro navegador. Si la pgina contiene errores, aparecer informacin acerca de las posibles causas en la parte inferior de la pgina.

Antes de comenzar, asegrese de que la configuracin de depuracin est activada en ColdFusion Administrator. Para obtener ms informacin, consulte la Ayuda de ColdFusion en Dreamweaver (Ayuda > Utilizacin de ColdFusion). Compruebe tambin que el servidor de prueba de Dreamweaver ejecuta ColdFusion MX. Para obtener ms informacin sobre el servidor de prueba de Dreamweaver, consulte Especificacin de una carpeta en la que procesar pginas dinmicas.

Optimizacin y depuracin del cdigo 235

Para depurar una pgina de ColdFusion:

1 2

Abra la pgina de ColdFusion en Dreamweaver. Haga clic en el icono Depuracin del servidor de la barra de herramientas del documento (el icono de globo terrqueo y de rayo), o seleccione Ver > Depuracin del servidor. Dreamweaver solicita el archivo del servidor de ColdFusion MX y lo muestra en una ventana de navegador interna de Internet Explorer. Si la pgina contiene errores, aparecern las posibles causas en la parte inferior de la misma. Al mismo tiempo, se abrir un panel de Depuracin del servidor. Dicho panel ofrece una gran cantidad de informacin til, por ejemplo todas las pginas procesadas por el servidor para mostrar la pgina, todas las consultas SQL ejecutadas en la pgina y todas las variables de servidor con sus valores, si los hubiere. El panel incluye tambin un resumen de los tiempos de ejecucin.

Si aparece una categora Excepciones en el panel Depuracin del servidor, haga clic en el icono de signo ms (+) para ampliar la categora. La categora Excepciones aparece si el servidor tiene algn problema con la pgina. Ample la categora para averiguar ms sobre el problema.

En la columna Localizacin del panel Depuracin del servidor, haga clic en el URL de la pgina para abrirla en la vista Cdigo y repararla. Si Dreamweaver puede localizar la pgina, sta se abrir con las lneas en las que se encuentra el problema resaltadas. Si Dreamweaver no puede localizar la pgina, le pedir que lo haga usted.

Solucione el error, guarde el archivo en el servidor y haga clic en Examinar. Dreamweaver volver a mostrar la pgina en el navegador interno y actualizar el panel Depuracin del servidor. Si no hay ms problemas en la pgina, la categora Excepciones no aparecer de nuevo en el panel.

Para salir del modo de depuracin, cambie a la vista Cdigo (Ver > Cdigo) o a la vista Diseo (Ver > Diseo).

Para garantizar que la informacin de depuracin se actualiza al mostrar una pgina en el navegador interno, asegrese de que Internet Explorer comprueba si hay nuevas versiones del archivo cada vez que ste se solicita. En Internet Explorer, elija Herramientas > Opciones de Internet, seleccione la ficha General y haga clic en el botn Configuracin del rea Archivos temporales de Internet. En el cuadro de dilogo Configuracin, seleccione la opcin Cada vez que se visita la pgina.

236 Captulo 14

CAPTULO 15 Edicin de cdigo en la vista Diseo

Aunque Macromedia Dreamweaver MX le permite crear y editar pginas Web de forma visual sin preocuparse por el cdigo subyacente, en ocasiones necesitar editar el cdigo para ejercer un mayor control o para solucionar problemas de la pgina Web. Por ejemplo, supongamos que selecciona texto en el documento y aplica una nueva fuente, pero sta slo afecta a media frase. Examinando el cdigo, descubre que la etiqueta de cierre </font> se encuentra en mitad de la frase. Al desplazar </font> al final de la frase, el problema se resuelve. Este captulo est pensado para quienes prefieren trabajar en la vista Diseo pero tambin desean poder acceder al cdigo con rapidez. Dreamweaver permite editar el cdigo mientras se trabaja en la vista Diseo. Este captulo contiene los siguientes temas:

Edicin de cdigo con el inspector de propiedades en la pgina 237 Edicin del cdigo con un editor de etiquetas en la pgina 238 Edicin de cdigo con Quick Tag Editor en la pgina 238 Edicin de cdigo con el selector de etiquetas en la pgina 241 Edicin de scripts en la pgina 242 Manipulacin de server-side includes en la pgina 243

Edicin de cdigo con el inspector de propiedades

Puede utilizar el inspector de propiedades para inspeccionar y editar los atributos del texto o de los objetos de la pgina.
Para utilizar el inspector de propiedades:

Haga clic en el texto o seleccione un objeto de la pgina. El inspector de propiedades del texto o el objeto aparece bajo la ventana de documento. Si el inspector de propiedades no est visible, seleccione Ventana > Propiedades.

Modifique los atributos en el inspector de propiedades.

237

Edicin del cdigo con un editor de etiquetas

Puede utilizar un editor de etiquetas para inspeccionar y editar los atributos de los objetos de la pgina.
Para utilizar un editor de etiquetas:

Haga clic con el botn derecho (Windows) o presione la tecla Control y haga clic (Macintosh) en el objeto de la pgina y elija Editar etiqueta en el men emergente. Aparece el editor de etiquetas correspondiente a dicho objeto. Modifique los atributos del objeto y haga clic en Aceptar.

Edicin de cdigo con Quick Tag Editor

Puede utilizar Quick Tag Editor para inspeccionar y editar etiquetas HTML de forma rpida sin salir de la vista Diseo. Para abrir Quick Tag Editor, presione Control+T (Windows) o Comando+T (Macintosh). Esta seccin contiene los siguientes temas:

Quick Tag Editor en la pgina 238 Insercin de una etiqueta HTML con Quick Tag Editor en la pgina 239 Edicin de una etiqueta HTML con Quick Tag Editor en la pgina 239 Aplicacin de HTML a una seleccin con Quick Tag Editor en la pgina 240 Utilizacin del men de sugerencias en la pgina 240

Quick Tag Editor Quick Tag Editor dispone de tres modos de funcionamiento:

Insertar HTML, Editar etiqueta,

que se utiliza para insertar cdigo HTML nuevo. que se utiliza para editar una etiqueta existente. que se utiliza para ajustar una nueva etiqueta alrededor de la seleccin actual.

Ajustar etiqueta,

El modo en el que se abre Quick Tag Editor depende de la seleccin actual de la vista Diseo. El funcionamiento bsico de Quick Tag Editor es el mismo en los tres modos: se abre el editor, se introducen o se editan las etiquetas o atributos y se cierra el editor. Puede alternar entre los distintos modos presionando Control+T (Windows) o Comando+T (Macintosh) con Quick Tag Editor activo. Si utiliza un cdigo HTML no vlido en Quick Tag Editor, Dreamweaver intentar corregirlo insertando comillas y parntesis angulares de cierre en los lugares en los que sea necesario. Para llevar a cabo una edicin en mayor profundidad del cdigo HTML, utilice la vista Cdigo. Para obtener ms informacin, consulte Codificacin en Dreamweaver en la pgina 209.

238 Captulo 15

Insercin de una etiqueta HTML con Quick Tag Editor Puede utilizar Quick Tag Editor para insertar una etiqueta HTML en el documento.
Para insertar una etiqueta HTML con Quick Tag Editor:

1 2

En la vista Diseo, haga clic en la pgina para colocar el punto de insercin donde desee insertar cdigo. Presione Control+T (Windows) o Comando+T (Macintosh). Quick Tag Editor se abre en modo Insertar HTML.

Introduzca la etiqueta HTML y, a continuacin, presione Intro. La etiqueta se inserta en el cdigo. Presione Escape para salir sin realizar ningn cambio.

Edicin de una etiqueta HTML con Quick Tag Editor Puede utilizar Quick Tag Editor para editar una etiqueta HTML en el documento.
Para editar una etiqueta HTML con Quick Tag Editor:

Seleccione un objeto en la vista Diseo. Tambin puede seleccionar la etiqueta que desea editar en el selector de etiquetas situado en la parte inferior de la ventana de documento. Para obtener ms informacin, consulte Edicin de cdigo con el selector de etiquetas en la pgina 241.

Presione Control+T (Windows) o Comando+T (Macintosh). Quick Tag Editor se abre en modo Editar etiqueta. Introduzca nuevos atributos, edite atributos existentes o edite el nombre de la etiqueta. Presione Tab para pasar de un atributo al siguiente; presione Mays+Tab para retroceder. De forma predeterminada, los cambios se aplican al documento al presionar Tab o Mays+Tab. Para desactivar las actualizaciones automticas, seleccione Edicin > Preferencias > Quick Tag Editor o Dreamweaver > Preferencias > Quick Tag Editor (Mac OS X). Se abre el cuadro de dilogo Preferencias de Quick Tag Editor. Anule la seleccin de la opcin Aplicar cambios inmediatamente al editar y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

3 4

5 6

Para cerrar Quick Tag Editor y aplicar todos los cambios, presione Intro. Para salir sin hacer ningn otro cambio, presione Escape.

Edicin de cdigo en la vista Diseo 239

Aplicacin de HTML a una seleccin con Quick Tag Editor Puede utilizar Quick Tag Editor para encerrar una seleccin del documento entre etiquetas HTML de apertura y cierre.
Para aplicar HTML a una seleccin con Quick Tag Editor:

Seleccione texto sin formato o un objeto en la vista Diseo. Si ha seleccionado texto o un objeto que incluya una etiqueta HTML de apertura o cierre, Quick Tag Editor se abrir en modo Editar etiqueta.

Presione Control+T (Windows) o Comando+T (Macintosh), o bien haga clic en el botn Quick Tag Editor del inspector de propiedades. Quick Tag Editor se abre en modo Ajustar etiqueta. Introduzca una etiqueta de apertura, como <font="verdana">, y presione Intro. La etiqueta se insertar al principio de la seleccin actual y se insertar la correspondiente etiqueta de cierre al final.

Presione Escape para salir sin realizar ningn cambio.

Utilizacin del men de sugerencias Mientras se encuentra en Quick Tag Editor, puede acceder a un men de sugerencias sobre atributos que muestra todos los atributos vlidos de la etiqueta que est editando o insertando. Si Dreamweaver no reconoce la etiqueta que est editando, el men de sugerencias contendr todos los atributos que Dreamweaver reconoce para todas las etiquetas. Tambin puede desactivar el men de sugerencias o ajustar el tiempo que debe transcurrir antes de que aparezca el men en Quick Tag Editor. Para ver una lista de los atributos vlidos de una etiqueta, realice una pausa de unos segundos mientras edita un nombre de atributo en Quick Tag Editor. Aparecer un men de sugerencias con todos los atributos vlidos para la etiqueta que est editando. Utilice el men de sugerencias como se indica a continuacin:

Al comenzar a escribir un nombre de atributo, el men de sugerencias se desplaza para resaltar

el primer nombre de atributo que comience por las letras introducidas.

Para subir o bajar el resaltado por el men, utilice las teclas de flecha arriba y abajo o la barra de
desplazamiento.

Para elegir el nombre de atributo resaltado, presione Intro. Tambin puede hacer doble clic en
un nombre de atributo del men.

Para prescindir del men de sugerencias sin seleccionar ninguna entrada, presione Escape o
simplemente contine escribiendo. Al hacer una pausa mientras introduce o edita un nombre de etiqueta, aparecer un men de sugerencias similar en el que figuran los nombres de las etiquetas en lugar de los nombres de los atributos.

240 Captulo 15

Para prescindir del men de sugerencias o modificar el tiempo que debe transcurrir antes de que aparezca:

Seleccione Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Quick Tag Editor. Se abre el cuadro de dilogo Preferencias de Quick Tag Editor. Para desactivar el men de sugerencias, anule la seleccin de la opcin Activar sugerencias de etiquetas. Para modificar el tiempo que debe transcurrir antes de que el men aparezca, ajuste el control deslizante Retraso. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

2 3

Edicin de cdigo con el selector de etiquetas

Puede utilizar el selector de etiquetas para seleccionar, editar o quitar etiquetas sin salir de la vista Diseo. El selector de etiquetas est situado en la barra de estado de la parte inferior de la ventana de documento y muestra una serie de etiquetas, como se explica a continuacin.

Para editar una etiqueta:

Haga clic en el documento. Las etiquetas presentes en el punto de insercin aparecen en el selector de etiquetas. Haga clic con el botn derecho (Windows) o presione la tecla Control y haga clic (Macintosh) en una etiqueta del selector de etiquetas. Aparece un men emergente. En dicho men, seleccione Editar etiqueta. Se abre Quick Tag Editor. Para obtener ms informacin, consulte Edicin de una etiqueta HTML con Quick Tag Editor en la pgina 239.

Para eliminar una etiqueta:

Haga clic en el documento. Las etiquetas presentes en el punto de insercin aparecen en el selector de etiquetas. Haga clic con el botn derecho (Windows) o presione la tecla Control y haga clic (Macintosh) en una etiqueta del selector de etiquetas. Aparece un men emergente. En dicho men, seleccione Quitar etiqueta.

Para seleccionar un objeto representado por una etiqueta:

Haga clic en el documento. Las etiquetas presentes en el punto de insercin aparecen en el selector de etiquetas.

Edicin de cdigo en la vista Diseo 241

Haga clic en una etiqueta del selector de etiquetas. El objeto representado por la etiqueta se selecciona en la pgina.

Sugerencia: Utilice esta tcnica para seleccionar filas (etiquetas tr) o celdas (etiquetas td) de tabla.

Edicin de scripts
Puede trabajar con JavaScripts y VBScripts en el lado del cliente tanto en la vista Cdigo como en la vista Diseo. Esta seccin trata sobre los siguientes temas:

Cmo escribir un script en el lado del cliente en la vista Diseo en la pgina 242 Vinculacin con un archivo de script externo en la pgina 242 Edicin de un script en la vista Diseo en la pgina 243
Cmo escribir un script en el lado del cliente en la vista Diseo Puede escribir un script JavaScript o VBScript para la pgina sin salir de la vista Diseo. Antes de empezar, compruebe que Dreamweaver muestra marcadores de scripts en la pgina. Para mostrar los marcadores de scripts, seleccione Ver > Ayudas visuales > Elementos invisibles.
Para insertar un script en el lado del cliente en la vista Diseo:

1 2

Site el punto de insercin en el lugar donde desea introducir el script. Seleccione Insertar > Objetos de script > Script. Se abre el cuadro de dilogo Script. Rellene el cuadro de dilogo y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Vinculacin con un archivo de script externo En el documento, puede crear un vnculo con un archivo de script externo sin salir de la vista Diseo. Antes de empezar, compruebe que Dreamweaver muestra marcadores de scripts en la pgina. Para mostrar los marcadores de scripts, seleccione Ver > Ayudas visuales > Elementos invisibles.
Para establecer un vnculo con un archivo de script externo:

1 2

Site el punto de insercin en el lugar donde desea introducir el script. Seleccione Insertar > Objetos de script > Script. Se abre el cuadro de dilogo Script. Haga clic en Aceptar sin escribir nada en el cuadro Contenido. Seleccione el marcador de scripts en la vista Diseo de la ventana de documento. En el inspector de propiedades, haga clic en el icono de carpeta para acceder y seleccionar el archivo de script externo o escriba el nombre de archivo en el cuadro Origen.

3 4 5

242 Captulo 15

Edicin de un script en la vista Diseo Puede editar un script sin salir de la vista Diseo. Antes de empezar, compruebe que Dreamweaver muestra marcadores de scripts en la pgina. Para mostrar los marcadores de scripts, seleccione Ver > Ayudas visuales > Elementos invisibles.
Para editar el script en la vista Diseo:

1 2

Seleccione el marcador de scripts. En el inspector de propiedades, haga clic en el botn Editar. El script aparece en el cuadro de dilogo Propiedades del script. Si ha establecido un vnculo con un archivo de script externo, dicho archivo se abre automticamente en la vista Cdigo, donde podr editarlo.
Nota: Si hay cdigo entre las etiquetas script, se abre el cuadro de dilogo Propiedades del script, incluso aunque haya tambin un vnculo con un archivo de script externo.

Modifique el script y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo Propiedades del script.

Manipulacin de server-side includes

Server-side includes son instrucciones al servidor Web para que incluya un archivo especificado en una pgina Web antes de servir la pgina al navegador. Puede utilizar Dreamweaver para insertar server-side includes en sus pginas, editar los includes u obtener una vista previa de pginas que contengan includes. Esta seccin trata sobre los siguientes temas:

Server-side includes en la pgina 243 Insercin de un server-side include en la pgina 244 Edicin del contenido de un server-side include en la pgina 245
Server-side includes Al abrir un documento que se encuentra en un servidor Web, el servidor procesa las instrucciones del include y crea un documento en el que las instrucciones del include son sustituidas por el contenido del archivo incluido. A continuacin, el servidor enva este nuevo documento al navegador. Sin embargo, al abrir un documento local directamente en un navegador, no hay ningn servidor que procese las instrucciones del include en dicho documento, por lo que el navegador abre el documento sin procesar esas instrucciones y el archivo que supuestamente debera ser incluido no aparece en el navegador. Por eso, puede ser difcil, sin usar Dreamweaver, mirar archivos locales y verlos tal como los vern los visitantes una vez que han sido puestos en el servidor. Sin embargo, con Dreamweaver se puede obtener una vista previa de los documentos tal como aparecern en el servidor, tanto en la vista Diseo como al realizar una vista previa en un navegador. Al colocar un server-side include en un documento se inserta una referencia a un archivo externo; no se inserta el contenido del archivo especificado en el documento actual. Dreamweaver muestra el contenido del archivo externo en la vista Diseo, lo cual facilita el diseo de pginas.

Edicin de cdigo en la vista Diseo 243

No puede editar el archivo incluido directamente en un documento. Para editar el contenido de un server-side include, deber editar directamente el archivo que desea incluir. Los cambios realizados en el archivo externo se reflejarn automticamente en todos los documentos que lo incluyan. Hay dos tipos de server-side includes: Virtual y Archivo. Elija uno de los dos segn el tipo de servidor Web que use:

Si se trata de un servidor Web Apache, elija el tipo Virtual. (sta es la opcin predeterminada
en Dreamweaver.) En Apache, Virtual funciona en todos los casos, mientras que Archivo slo funciona en algunos casos.

Si su servidor es Microsoft Internet Information Server (IIS), elija Archivo. (Virtual funciona
con IIS slo en ciertos casos determinados.) Lamentablemente, IIS no le permitir incluir un archivo en una carpeta de una jerarqua superior a la de la carpeta actual, salvo en el caso de que se haya instalado un software especial en el servidor. Si es necesario incluir un archivo desde una carpeta de una jerarqua superior en un servidor IIS, pregunte al administrador del sistema si est instalado el software necesario.

Para otros tipos de servidores, o si desconoce el tipo de servidor que est usando, pregunte al
administrador del sistema la opcin que debe emplear. Algunos servidores estn configurados de manera que examinan todos los archivos para ver si contienen server-side includes; otros servidores estn configurados para examinar solamente los archivos con una extensin determinada, como .shtml, .shtm o .inc. Si un server-side include no le funciona, pregunte al administrador del sistema si es necesario utilizar una extensin concreta en el nombre del archivo que usa el server-side include. (Por ejemplo, si el archivo se llama canoe.html, puede ser necesario cambiarle el nombre por canoe.shtml.) Si desea que los archivos conserven las extensiones .html o .htm, solicite al administrador del sistema que configure el servidor para examinar todos los archivos (no slo los archivos con extensiones determinadas) para comprobar si contienen server-side includes. Sin embargo, el anlisis de un archivo para comprobar si contiene server-side includes implica un poco ms de tiempo de proceso, por lo que las pginas que el servidor analiza tardan un poco ms en estar disponibles que las otras; por ello, algunos administradores de sistemas no proporcionarn la opcin de analizar los archivos. Insercin de un server-side include Puede utilizar Dreamweaver para insertar server-side includes en la pgina.
Para insertar un server-side include:

1 2

Seleccione Insertar > Objetos de script> Server-Side Include. En el cuadro de dilogo que aparece, localice y seleccione un archivo.

Para cambiar el archivo incluido:

1 2 3

Seleccione el server-side include en la ventana de documento. Abra el inspector de propiedades (Ventana > Propiedades). Lleve a cabo una de las siguientes operaciones:

Haga clic en el icono de carpeta para localizar y seleccionar un nuevo archivo para incluir. En el cuadro de texto, escriba la ruta y el nombre del nuevo archivo para incluir.

244 Captulo 15

Edicin del contenido de un server-side include Puede utilizar Dreamweaver para editar server-side includes. Para editar el contenido asociado al archivo incluido, deber abrir el archivo.
Para editar un server-side include:

Seleccione el server-side include en la vista Diseo o la vista Cdigo y haga clic en Editar en el inspector de propiedades. El archivo incluido se abrir en una nueva ventana de documento. Edite el archivo y, a continuacin, gurdelo. Los cambios se reflejarn inmediatamente en el documento actual y en los documentos que abra posteriormente que contengan el archivo.

Edicin de cdigo en la vista Diseo 245

246 Captulo 15

Parte IV Diseo de la disposicin de la pgina

Utilice las herramientas de diseo visual de Dreamweaver para crear sofisticadas disposiciones de pgina. Esta parte contiene los siguientes captulos:

Parte IV

Captulo 16, Presentacin de contenido en tablas Captulo 17, Establecimiento de la disposicin de

pginas en la vista Disposicin

Captulo 18, Utilizacin de marcos

CAPTULO 16 Presentacin de contenido en tablas

Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer la disposicin 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. Aunque las columnas no suelen especificarse explcitamente en el cdigo HTML, Dreamweaver permite manipular tanto columnas como filas y celdas. Despus de crear una tabla, podr modificar fcilmente su aspecto y estructura. Puede llevar a cabo cualquiera de las operaciones siguientes:

Aadir contenido Aadir, eliminar, dividir y combinar filas y columnas Modificar las propiedades de tabla, fila o celda para aadir color y alineamientos Copiar y pegar celdas

Nota: Muchos diseadores utilizan tablas para establecer la disposicin de las pginas Web. Dreamweaver ofrece dos mtodos de visualizacin y manipulacin de tablas: la vista Estndar, en la que las tablas se presentan en forma de cuadrcula de filas y columnas, y la vista Disposicin, que permite dibujar, cambiar el tamao y mover cuadros en la pgina mientras se siguen utilizando tablas para la estructura subyacente (consulte Captulo 17, Establecimiento de la disposicin de pginas en la vista Disposicin, en la pgina 265).

Este captulo contiene las siguientes secciones:

Insercin de una tabla en la pgina 250 Adicin de contenido a la celda de una tabla en la pgina 250 Importacin de datos de tabla en la pgina 251 Seleccin de elementos de tabla en la pgina 251 Aplicacin de formato a tablas y celdas en la pgina 253 Cambio del tamao de las tablas en la pgina 256 Cambio del ancho de las columnas y el alto de las filas en la pgina 257 Adicin y eliminacin de filas y columnas en la pgina 258 Anidacin de tablas en la pgina 260 Cmo cortar, copiar y pegar celdas en la pgina 261 Ordenacin de tablas en la pgina 262 Exportacin de datos de tabla en la pgina 262

249

Insercin de una tabla

Utilice la barra o el men Insertar para crear una tabla. Para obtener informacin sobre la creacin de tablas accesibles en Dreamweaver, consulte Creacin de sitios Web accesibles en la pgina 369.
Para insertar una tabla:

En la vista Diseo de la ventana de documento, site el punto de insercin donde desee que aparezca la tabla.
Nota: Si no hay ningn contenido en el documento, la nica ubicacin posible ser al principio del mismo.

Lleve a cabo una de las siguientes operaciones:

En la categora Comn de la barra Insertar, haga clic en el botn Tabla. Elija Insertar > Tabla.
Se mostrar el cuadro de dilogo Insertar tabla.
3

Introduzca los nuevos valores que desee. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Adicin de contenido a la celda de una tabla

Puede aadir texto e imgenes a las celdas de una tabla del mismo modo que lo hara fuera de una tabla. Para obtener ms informacin, consulte Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297 y Captulo 20, Insercin de imgenes, en la pgina 325. Al aadir o editar el contenido de una tabla, ahorrar tiempo si utiliza el teclado para desplazarse por la tabla.
Para pasar de una celda a otra utilizando el teclado:

Presione la tecla Tab para desplazarse a la celda siguiente.

Si presiona la tecla Tab en la ltima celda de una tabla se aadir automticamente otra fila a la tabla.

Presione Mays+Tab para volver a la celda anterior. Presione las teclas de flecha para subir, bajar, desplazarse hacia la izquierda o hacia la derecha.

250 Captulo 16

Importacin de datos de tabla

Los datos de tabla creados con otra aplicacin (por ejemplo, Microsoft Excel) y guardados en un formato de texto delimitado (con elementos separados por tabuladores, comas, dos puntos, puntos y comas u otros delimitadores) se pueden importar a Dreamweaver y aplicarles formato de tabla.
Para importar datos de tabla:

Lleve a cabo una de las siguientes operaciones:

Elija Archivo > Importar > Datos de tabla. Seleccione Insertar > Objetos de tabla > Importar datos de tabla.
Aparece el cuadro de dilogo Importar datos de tabla.

En el cuadro de dilogo introduzca informacin acerca del archivo que contiene los datos. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Tema relacionado

Captulo 34, Visualizacin de registros de base de datos, en la pgina 579

Seleccin de elementos de tabla

Puede seleccionar toda una tabla, fila o columna al mismo tiempo. Tambin puede seleccionar un bloque de celdas contiguas dentro de una tabla. Una vez seleccionada las tabla o las celdas, puede realizar las siguientes operaciones:

Modificar el aspecto de las celdas seleccionadas o del texto que contienen. Consulte Aplicacin
de formato a tablas y celdas en la pgina 253.

Copiar y pegar celdas. Consulte Cmo cortar, copiar y pegar celdas en la pgina 261.
Tambin puede seleccionar varias celdas no contiguas de una tabla y modificar sus propiedades. No se pueden copiar ni pegar grupos de celdas no contiguas.

Presentacin de contenido en tablas 251

Para seleccionar toda la tabla, lleve a cabo una de estas operaciones:

Haga clic en la esquina superior izquierda de la tabla o en cualquier punto del borde derecho
o inferior.

Haga clic en una celda de la tabla y seleccione la etiqueta table en el selector de etiquetas
situado en la esquina inferior izquierda de la ventana de documento.

Haga clic en una celda de la tabla y elija Modificar > Tabla > Seleccionar tabla. Haga clic en una celda de la tabla y, a continuacin, seleccione la etiqueta table en el
inspector de etiquetas. Aparecern manejadores de seleccin en los bordes inferior y derecho de la tabla.

Para seleccionar filas o columnas:

1 2

Site el puntero en el borde izquierdo de una fila o en el borde superior de una columna. Cuando el puntero se convierta en una flecha de seleccin, haga clic para seleccionar una fila o columna, o arrastre para seleccionar varias filas o columnas.

Para seleccionar una sola celda, lleve a cabo una de estas operaciones:

Haga clic en la celda y seleccione la etiqueta td en el selector de etiquetas situado en la esquina

inferior izquierda de la ventana de documento.

Haga clic en la celda y, a continuacin, elija Edicin > Seleccionar todo.

Sugerencia: Para seleccionar toda la tabla, elija de nuevo Edicin > Seleccionar todo cuando una celda est seleccionada.

Haga clic en una celda de la tabla y, a continuacin, seleccione la etiqueta td en el inspector de

etiquetas.

252 Captulo 16

Para seleccionar un bloque de celdas lineal o rectangular, lleve a cabo una de estas operaciones:

Arrastre de una celda a otra. Haga clic en una celda y, a continuacin, presione la tecla Mays y haga clic en otra celda.
Todas las celdas de la regin lineal o rectangular definida por las dos celdas quedarn seleccionadas.

Para seleccionar celdas no contiguas:

Presione Control (Windows) o Comando (Macintosh) mientras hace clic en las celdas, filas o columnas que desea seleccionar. Las celdas, filas o columnas que no estn todava seleccionadas se aadirn a la seleccin. Las que ya lo estn, se eliminarn de la seleccin.

Aplicacin de formato a tablas y celdas

Puede cambiar el aspecto de una tabla configurando las propiedades de la misma y de sus celdas o aplicndole un diseo predefinido. Consulte Visualizacin y configuracin de las propiedades de una tabla en la pgina 254, Visualizacin y configuracin de las propiedades de celdas, filas y columnas en la pgina 254 y Utilizacin de un esquema de diseo para aplicar formato a una tabla en la pgina 255. Para dar formato al texto de la tabla, puede aplicar un formato al texto seleccionado o utilizar estilos. Consulte Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297. Conflictos en el formato de tablas A la hora de dar formato a tablas en la vista Diseo, puede definir propiedades que se apliquen a toda la tabla o a filas, columnas o celdas seleccionadas de la misma. Al definir el valor de una propiedad como, por ejemplo, el color de fondo o el alineamiento, para toda la tabla y otro valor para celdas individuales, el formato de celda tiene prioridad sobre el formato de fila, que a su vez tiene prioridad sobre el formato de tabla. El orden de prioridad en el formato de tabla es el siguiente:
1 2 3

Celdas Filas Tabla

Por ejemplo, si define un color de fondo azul para una sola celda y, a continuacin, establece el color de fondo de toda la tabla como amarillo, la celda azul no cambiar a amarillo, ya que el formato de celda tiene prioridad sobre el formato de tabla.
Nota: Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna.

Presentacin de contenido en tablas 253

Visualizacin y configuracin de las propiedades de una tabla Al seleccionar una tabla, el inspector de propiedades permite ver y modificar sus propiedades.
Para ver las propiedades de una tabla:

1 2

Seleccione la tabla. Elija Ventana > Propiedades para abrir el inspector de propiedades.

Para ver todas las propiedades de una tabla:

Si el inspector de propiedades no est ampliado an, haga clic en la flecha de ampliacin situada en la esquina inferior derecha para ver todas las propiedades.

Para aplicar formato a una tabla en el inspector de propiedades:

1 2 3

Seleccione una tabla. Para obtener ms informacin, consulte Seleccin de elementos de tabla en la pgina 251. Elija Ventana > Propiedades para abrir el inspector de propiedades. Para cambiar el formato de la tabla establezca las propiedades. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.

Tema relacionado

Utilizacin de un esquema de diseo para aplicar formato a una tabla en la pgina 255 Visualizacin y configuracin de las propiedades de celdas, filas y columnas El inspector de propiedades permite ver y modificar las propiedades de una celda o grupo de celdas seleccionadas.
Nota: Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna. Sin embargo, al establecer algunas de las propiedades de una fila, Dreamweaver modifica los atributos de la etiqueta tr en lugar de los atributos de cada etiqueta td de la fila. Al aplicar el mismo formato a todas las celdas de una fila mediante la etiqueta tr se obtiene un cdigo HTML ms claro y conciso.

Para ver las propiedades de un elemento de tabla:

1 2

Seleccione una celda o grupo de celdas de una fila o columna. Elija Ventana > Propiedades para abrir el inspector de propiedades.

254 Captulo 16

Para ver todas las propiedades de una celda, fila o columna:

Si el inspector de propiedades no est ampliado an, haga clic en la flecha de ampliacin situada en la esquina inferior derecha para ver todas las propiedades.

Para aplicar formato a los elementos de una tabla en el inspector de propiedades:

1 2 3

Seleccione una celda, fila o columna. Para obtener ms informacin, consulte Seleccin de elementos de tabla en la pgina 251. Elija Ventana > Propiedades para abrir el inspector de propiedades. Modifique el formato del elemento de la tabla configurando las propiedades. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.

Tema relacionado

Seleccin de elementos de tabla en la pgina 251 Utilizacin de un esquema de diseo para aplicar formato a una tabla Utilice el comando Formatear tabla para aplicar fcilmente un diseo predefinido a una tabla. A continuacin, podr seleccionar opciones para personalizar ms el diseo.
Nota: Slo se pueden aplicar formatos de diseos predefinidos a las tablas sencillas. No podr aplicar estos diseos a tablas que contengan celdas combinadas (colspan o rowspan), grupos de columnas u otros formatos poco habituales en los que la tabla deja de ser una cuadrcula rectangular de celdas.

Presentacin de contenido en tablas 255

Para utilizar un diseo de tabla predefinido:

Seleccione una tabla y, a continuacin, elija Comandos > Formatear tabla. Se mostrar el cuadro de dilogo Formatear tabla.

Personalice las opciones como desee. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aplicar o en Aceptar para dar formato a la tabla con el diseo seleccionado.

Cambio del tamao de las tablas

Puede cambiar el tamao de una tabla completa o de filas y columnas individuales. Al cambiar el tamao de toda la tabla, el tamao de todas sus celdas cambiar proporcionalmente.
Nota: Si el alto y el ancho de las celdas de una tabla est explcitamente especificado, al cambiar el tamao de la tabla tambin lo har el tamao visual de las celdas en la ventana de documento, aunque no el alto y el ancho especificado para las celdas.

Para cambiar el tamao de una tabla:

1 2

Seleccione la tabla. Lleve a cabo una de las siguientes operaciones:

Para cambiar el tamao horizontal de la tabla, arrastre el manejador de seleccin de la derecha. Para cambiar el tamao vertical de la tabla, arrastre el manejador de seleccin de la parte
inferior.

Para cambiar ambos, arrastre el manejador de seleccin de la esquina inferior derecha.

Temas relacionados

Seleccin de elementos de tabla en la pgina 251

256 Captulo 16

Cambio del ancho de las columnas y el alto de las filas

Puede cambiar el ancho de una columna o el alto de una fila utilizando el inspector de propiedades o arrastrando los bordes de la columna o fila. Tambin puede cambiar directamente el ancho y el alto de la celda en los cdigos HTML utilizando la vista Cdigo. Si encuentra problemas para cambiar el tamao, borre el ancho de la columna y el alto de la fila y empiece de nuevo.
Sugerencia: El alto y el ancho pueden especificarse en pxeles o en porcentajes y convertirse de una unidad a otra. Para obtener ms informacin, consulte Visualizacin y configuracin de las propiedades de una tabla en la pgina 254.

Para cambiar el tamao de una fila o columna visualmente, lleve a cabo una de estas operaciones:

Para cambiar el ancho de una columna, seleccinela y, a continuacin, arrastre el borde

derecho de la misma. Si la columna no es la que se encuentra en el extremo derecho de la tabla, el ancho de la columna contigua tambin cambiar, mantenindose la misma anchura total de la tabla. Si es la que se encuentra ms a la derecha, cambiar la anchura de toda la tabla y todas las columnas se ampliarn o estrecharn proporcionalmente.

Para cambiar el alto de una fila, seleccinela y, a continuacin, arrastre el borde inferior de la
misma.
Para establecer el ancho de una columna o el alto de una fila utilizando el inspector de propiedades:

1 2 3

Seleccione la columna o fila. Elija Ventana > Propiedades para abrir el inspector de propiedades. Modifique el formato del elemento de la tabla configurando las propiedades. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.

Para borrar cualquier ancho o alto establecido:

1 2

Seleccione la tabla. Lleve a cabo una de las siguientes operaciones: haga clic en el botn Borrar ancho de columna del inspector de propiedades.

Para borrar cualquier ancho especificado, elija Modificar > Tabla > Borrar ancho de celda, o Para borrar cualquier alto especificado, elija Modificar > Tabla > Borrar alto de celda, o haga
clic en el botn Borrar alto de fila del inspector de propiedades.
Temas relacionados

Seleccin de elementos de tabla en la pgina 251 Cambio del tamao de las tablas en la pgina 256 Codificacin en Dreamweaver en la pgina 209

Presentacin de contenido en tablas 257

Adicin y eliminacin de filas y columnas

Para aadir y quitar filas y columnas, utilice los comandos del submen Modificar > Tabla.
Sugerencia: Si presiona la tecla Tab en la ltima celda de una tabla se aadir automticamente otra fila a la tabla.

Para aadir filas o columnas:

1 2

Haga clic en una celda. Lleve a cabo una de las siguientes operaciones:

Para aadir una fila sobre la celda actual, elija Modificar > Tabla > Insertar fila. Para aadir una columna a la izquierda de la celda actual, elija Modificar > Tabla > Insertar
columna.

Para aadir varias filas o columnas al mismo tiempo, una fila debajo de la celda actual o una
columna a su derecha, elija Modificar > Tabla > Insertar filas o columnas. Aparece el cuadro de dilogo Insertar filas o columnas.
3

Si elige Insertar filas o columnas, especifique la informacin necesaria en el cuadro de dilogo y, a continuacin, haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Para eliminar una fila o columna:

1 2

Haga clic en una celda de la fila o columna que desea eliminar. Lleve a cabo una de las siguientes operaciones:

Para eliminar una fila, elija Modificar > Tabla > Eliminar fila. Para eliminar una columna, elija Modificar > Tabla > Eliminar columna.
Sugerencia: Tambin puede seleccionar toda una fila o columna y, a continuacin, elegir Edicin > Borrar o presionar la tecla Supr; se eliminar toda la fila o columna de la tabla.

Para aadir o eliminar filas o columnas utilizando el inspector de propiedades:

1 2

Seleccione toda la tabla. En el inspector de propiedades, lleve a cabo una de estas operaciones: Dreamweaver aade y elimina filas del final de la tabla.

Aumente o disminuya el valor de Filas para aadir o eliminar filas. Aumente o disminuya el valor de Cols para aadir o eliminar columnas.
Dreamweaver aade y elimina columnas de la derecha de la tabla.
Nota: Dreamweaver no advertir de que las filas o las columnas que desea eliminar contienen datos.

Temas relacionados

Seleccin de elementos de tabla en la pgina 251 Insercin de una tabla de repeticin en la pgina 491 Visualizacin de mltiples comportamientos en la pgina 586

258 Captulo 16

Divisin y combinacin de celdas Utilice el inspector de propiedades o los comandos del submen Modificar > Tabla para dividir o combinar celdas. Podr combinar cualquier nmero de celdas contiguas, siempre que toda la seleccin sea una lnea o un rectngulo de celdas, para obtener una sola celda que se extienda a lo largo de varias columnas o filas. Una celda puede dividirse en cuantas filas o columnas desee, aunque haya sido combinada anteriormente. Dreamweaver reestructura automticamente la tabla (aadiendo los atributos COLSPAN o ROWSPAN correspondientes) para crear la disposicin especificada. En la ilustracin siguiente, las celdas en la mitad de las dos primeras filas se han combinado para que ocupen dos filas.

Como alternativa a la divisin y combinacin de celdas, Dreamweaver incluye tambin herramientas que permiten aumentar o disminuir el nmero de filas o columnas que ocupa una celda.
Para combinar dos o ms celdas en una tabla:

Seleccione las celdas. Las celdas seleccionadas debern ser contiguas y tener forma rectangular. En la siguiente ilustracin, la seleccin es un rectngulo de celdas, por lo que stas se pueden combinar.

En la siguiente ilustracin, la seleccin no es un rectngulo, por lo que las celdas no se pueden combinar.

Presentacin de contenido en tablas 259

Elija Modificar > Tabla > Combinar celdas, o haga clic en el botn Combinar celdas del inspector de propiedades. El contenido de las celdas individuales se sita en la celda combinada resultante. Las propiedades de la primera celda seleccionada se aplicarn a la celda combinada.

Para dividir una celda:

1 2 3

Haga clic en la celda. Elija Modificar > Tabla > Dividir celda, o haga clic en el botn Dividir celda del inspector de propiedades. En el cuadro de dilogo Dividir celda, especifique cmo desea dividir la celda. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Para aumentar o disminuir el nmero de filas o columnas que ocupa una celda:

1 2

Seleccione una celda. Elija Modificar > Tabla > Aumentar tamao de fila o Modificar > Tabla > Aumentar tamao de columna o Modificar > Tabla > Reducir tamao de fila o Modificar > Tabla > Reducir tamao de columna.

Anidacin de tablas
Una tabla anidada es una tabla dentro de una celda o de otra tabla. Puede aplicar formato a una tabla anidada como lo hara con cualquier otra tabla; no obstante, su ancho estar limitado por el ancho de la celda en la que aparece.

Para anidar una tabla en una celda de otra tabla:

1 2 3

Haga clic en una celda de la tabla. Elija Insertar > Tabla. En el cuadro de dilogo Insertar tabla, especifique las propiedades que desee para la tabla anidada y, a continuacin, haga clic en Aceptar.

260 Captulo 16

Cmo cortar, copiar y pegar celdas

Puede cortar, copiar o pegar una o varias celdas de una tabla al mismo tiempo, conservando el formato de las celdas. Las celdas se pueden pegar en el punto de insercin o en el lugar de una seleccin en una tabla existente. Para pegar varias celdas de una tabla, el contenido del Portapapeles debe ser compatible con la estructura de la tabla o la seleccin de la tabla en la que se van a pegar las celdas.
Para cortar o copiar celdas de una tabla:

Seleccione una o ms celdas de la tabla. Las celdas seleccionadas debern ser contiguas y tener forma rectangular. En la siguiente ilustracin, la seleccin es un rectngulo de celdas, por lo que stas se pueden cortar o copiar.

En la siguiente ilustracin, la seleccin no es un rectngulo de celdas, por lo que stas no se pueden cortar ni copiar.

Corte o copie las celdas utilizando Edicin > Cortar o Edicin > Copiar. Si selecciona una fila o columna completa, y elige Edicin > Cortar, se eliminar toda la columna o fila de la tabla (no slo el contenido de las celdas).

Para pegar celdas de una tabla:

Elija dnde desea pegar las celdas. que tengan la misma disposicin que las del portapapeles. Por ejemplo, si ha copiado o cortado un bloque de celdas de 3 x 2, podr reemplazarlo por otro bloque de celdas de 3 x 2.

Para reemplazar las celdas actuales por las celdas que desea pegar, seleccione un grupo de celdas Para pegar toda una fila de celdas encima de una celda concreta, haga clic en dicha celda. Para pegar toda una columna de celdas a la izquierda de una celda concreta, haga clic en dicha
celda.

Para crear una nueva tabla con las celdas pegadas, site el punto de insercin fuera de la tabla.

Presentacin de contenido en tablas 261

Nota: Si no dispone de toda una fila o columna de celdas en el portapapeles y hace clic en una celda y, a continuacin, pega las celdas del portapapeles, puede reemplazar la celda en la que hizo clic y las que la rodean (dependiendo de su ubicacin en la tabla) por las celdas que est pegando.

Elija Edicin > Pegar. Si pega filas o columnas completas en una tabla existente, stas se aadirn a la tabla. Si pega una sola celda, se reemplazar el contenido de la celda seleccionada. Si pega fuera de una tabla, las filas, columnas o celdas se utilizarn para definir una tabla nueva.

Para eliminar el contenido y dejar las celdas intactas:

1 2

Seleccione una o ms celdas. (Asegrese de que la seleccin no consta slo de filas o columnas completas.) Elija Edicin > Borrar o presione Supr.

Nota: Si nicamente estn seleccionadas filas o columnas completas, cuando elija Edicin > Borrar o presione Eliminar, se eliminarn de la tabla todas las filas o columnas, y no slo su contenido.

Para eliminar filas o columnas que contienen celdas combinadas:

1 2

Seleccione la fila o columna que desea eliminar. Elija Modificar > Tabla > Eliminar fila o Modificar > Tabla > Eliminar columna.

Ordenacin de tablas
Puede ordenar las filas de una tabla en funcin del contenido de una sola columna. Tambin puede realizar una operacin ms compleja ordenndola en funcin del contenido de dos columnas. No se pueden ordenar tablas que contengan atributos COLSPAN o ROWSPAN; es decir, tablas con celdas combinadas. (Para obtener ms informacin, consulte Divisin y combinacin de celdas en la pgina 259.
Para ordenar una tabla:

1 2

Seleccione la tabla (o haga clic en cualquiera de las celdas). Elija Comandos > Ordenar tabla. Se abre el cuadro de dilogo Ordenar tabla. En el cuadro de dilogo, especifique cmo desea ordenar la tabla. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Exportacin de datos de tabla

Puede exportar los datos de una tabla desde Dreamweaver a un archivo de texto con el contenido de las celdas contiguas separado por un delimitador. Se pueden utilizar comas, dos puntos, puntos y comas o espacios como delimitadores. No se pueden exportar partes de una tabla, por lo que es necesario exportar la tabla entera en todos los casos. Si slo le interesan algunos de los datos de una tabla (por ejemplo, las seis primeras filas o columnas), copie las celdas que contienen dichos datos y pguelas fuera de la tabla para crear una nueva tabla y, a continuacin, exporte la nueva tabla.

262 Captulo 16

Para exportar una tabla:

1 2

Site el punto de insercin en cualquier celda de la tabla. Elija Archivo > Exportar > Tabla. Se mostrar el cuadro de dilogo Exportar tabla.

En este cuadro de dilogo, especifique las opciones para la exportacin de la tabla. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Exportar. En el cuadro de dilogo que aparece, especifique un nombre para el archivo y, a continuacin, haga clic en Guardar.

4 5

Presentacin de contenido en tablas 263

264 Captulo 16

CAPTULO 17 Establecimiento de la disposicin de pginas en la vista Disposicin

Dreamweaver le permite establecer la disposicin de las pginas Web de diversas formas. Un mtodo frecuente para crear la disposicin de una pgina consiste en utilizar tablas HTML para colocar los elementos. No obstante, las tablas pueden resultar difciles de usar como mtodo de disposicin, ya que inicialmente se crearon para mostrar datos tabulares y no para establecer la disposicin de pginas Web. Para optimizar el uso de tablas en el establecimiento de la disposicin de pginas, Dreamweaver ofrece la vista Disposicin. En la vista Disposicin, puede establecer la disposicin de una pgina utilizando tablas como estructura subyacente al mismo tiempo que evita algunos de los problemas que suelen presentarse al crear disposiciones basadas en tablas con medios tradicionales. Por ejemplo, en la vista Disposicin puede dibujar celdas de disposicin en la pgina y desplazarlas a continuacin al lugar en el que desea colocarlas. Tambin puede crear fcilmente tanto disposiciones con ancho fijo como disposiciones que se ajusten automticamente al ancho total de la ventana del navegador (consulte Establecimiento del ancho de columna en la pgina 275). Tambin puede establecer la disposicin de las pginas utilizando las tablas de la manera tradicional (consulte Presentacin de contenido en tablas en la pgina 249) o utilizando capas y convirtindolas en tablas (consulte Utilizacin de tablas y capas para diseo en la pgina 425). Sin embargo, la vista Disposicin de Dreamweaver es la forma ms sencilla de establecer la disposicin de una pgina.
Nota: En la vista Disposicin, puede utilizar las herramientas Insertar tabla y Dibujar capa que puede utilizar en la vista Estndar. Para utilizar dichas herramientas, primero debe cambiar a la vista Estndar.

Este captulo contiene las siguientes secciones:

Celdas y tablas de disposicin en la pgina 266 Cambio a la vista Disposicin y salida de ella en la pgina 267 Dibujo de celdas y tablas de disposicin en la pgina 267 Adicin de contenido a una celda de disposicin en la pgina 271 Cmo mover y cambiar el tamao de celdas y tablas de disposicin en la pgina 273 Aplicacin de formato a celdas y tablas de disposicin en la pgina 274 Establecimiento del ancho de columna en la pgina 275 Configuracin de las preferencias de la vista Disposicin en la pgina 279

265

Celdas y tablas de disposicin

En la vista Disposicin, puede establecer la distribucin de la pgina antes de aadirle contenido. Por ejemplo, puede dibujar una celda a lo largo de la parte superior de la pgina para insertar un grfico de encabezado, otra celda en la parte izquierda de la pgina para insertar una barra de navegacin y una tercera celda en la parte derecha para insertar contenido.

(Otra posibilidad es dibujar cada celda slo en el momento de insertar contenido en ella. Esta posibilidad le ofrece la mayor flexibilidad; deja ms espacio en blanco en la tabla de disposicin durante ms tiempo, permitindole cambiar el tamao de las celdas o su ubicacin con ms facilidad.) Al dibujar una celda de disposicin fuera de una tabla de disposicin, Dreamweaver crea automticamente una tabla de disposicin como contenedor para la celda. Una celda de disposicin no puede existir fuera de una tabla de disposicin. Puede establecer la disposicin de la pgina utilizando varias celdas de disposicin dentro de una tabla de disposicin, lo cual resulta ser el mtodo ms empleado. Para crear distribuciones ms complejas, puede utilizar varias tablas de disposicin. El uso de varias tablas de disposicin asla secciones de la distribucin para evitar que se vean afectadas por los cambios que afectan a otras secciones. Tambin puede anidar las tablas de disposicin situando una nueva tabla de disposicin dentro de otra existente. Esta estructura le permite simplificar la estructura de la tabla cuando las filas o columnas de una parte de la disposicin no estn alineadas con las filas o columnas de otra parte. Por ejemplo, el uso de tablas de disposicin anidadas le permite crear de forma sencilla una disposicin de dos columnas con cuatro lneas en la columna izquierda y tres filas en la columna derecha. Para obtener ms informacin, consulte Dibujo de una tabla de disposicin anidada en la pgina 269.

266 Captulo 17

Cambio a la vista Disposicin y salida de ella

Antes de poder dibujar tablas o celdas de disposicin, debe cambiar de la vista Estndar a la vista Disposicin.
Sugerencia: Si crea una tabla en la vista Estndar y a continuacin cambia a la vista Disposicin, es posible que la tabla de disposicin resultante contenga celdas de disposicin vacas. Es posible que necesite eliminar dichas celdas antes de poder crear nuevas celdas de disposicin o moverlas de sitio. Al crear una nueva disposicin que va a editar en la vista Disposicin, resulta ms sencillo crear la tabla en la vista Disposicin que crearla en la vista Estndar.

Para cambiar a la vista Disposicin:

Si la vista Diseo no est visible, elija Ver > Diseo o Ver > Cdigo y diseo. La vista Disposicin no puede activarse o desactivarse desde la vista Cdigo. Elija Ver > Vista de tabla > Vista de disposicin o haga clic en el botn Vista de disposicin en la categora Disposicin de la barra Insertar. (En el espacio de trabajo flotante de cuatro estilos de Dreamweaver, con una barra Insertar vertical, los elementos relacionados con la disposicin aparecen en la parte inferior del panel, en lugar de en una categora distinta.) Una barra gris llamada Vista de disposicin aparece a lo largo de la parte superior de la vista Diseo indicando que est en la vista de disposicin. Si la pgina contiene tablas, aparecen como tablas de disposicin.

Para salir de la vista Disposicin:

Si la vista Diseo no est visible, elija Ver > Diseo o Ver > Cdigo y diseo. La vista Disposicin no puede activarse o desactivarse desde la vista Cdigo. Elija Ver > Vista de tabla> Vista estndar o haga clic en el botn Vista estndar en la categora Disposicin de la barra Insertar.

Dibujo de celdas y tablas de disposicin

En la vista Disposicin puede dibujar celdas y tablas de disposicin en la pgina. Al dibujar una celda de disposicin fuera de una tabla de disposicin, Dreamweaver crea automticamente una tabla de disposicin como contenedor para la celda. Una celda de disposicin no puede existir fuera de una tabla de disposicin.
Nota: Cuando Dreamweaver crea automticamente una tabla de disposicin, al principio parece que la tabla ocupa toda la vista Diseo, aunque cambie el tamao de la ventana de documento. Esta tabla de disposicin predeterminada que ocupa toda la ventana le permite dibujar celdas de disposicin en cualquier lugar de la vista Diseo. Puede establecer un tamao especfico para la tabla haciendo clic en el borde de la tabla y arrastrando a continuacin los manejadores de cambio de tamao.

Para dibujar una celda de disposicin:

Sitese en la vista Disposicin (consulte Cambio a la vista Disposicin y salida de ella en la pgina 267) y, a continuacin, haga clic en el botn Dibujar celda de disposicin en la categora Disposicin de la barra Insertar. (En el espacio de trabajo flotante de cuatro estilos de Dreamweaver, con una barra Insertar vertical, los elementos relacionados con la disposicin aparecen en la parte inferior del panel, en lugar de en una categora distinta.) El puntero del ratn se convertir en un signo ms (+).

Establecimiento de la disposicin de pginas en la vista Disposicin 267

Site el puntero del ratn en la parte de la pgina en la que desee que comience la celda y, a continuacin, arrastre para crear la celda de disposicin. Para crear varias celdas sin tener que hacer clic en el botn Dibujar celda de disposicin cada vez, mantenga presionada la tecla Control (Windows) o Comando (Macintosh) mientras arrastra para crear cada una de las celdas de disposicin.

La celda aparece en la pgina con un contorno azul. (ste es el color de contorno predeterminado de las celdas de disposicin). Para cambiar el color del contorno, consulte Configuracin de las preferencias de la vista Disposicin en la pgina 279. El ancho de cada celda se muestra en el rea de encabezado de columna en la parte superior de la columna, siempre que las fichas de tabla de disposicin estn visibles (consulte Configuracin de las preferencias de la vista Disposicin en la pgina 279). Para obtener ms informacin sobre anchos de columna, consulte Establecimiento del ancho de columna en la pgina 275. Aparece una cuadrcula de lneas claras que se extiende desde los bordes de la nueva celda de disposicin hasta los bordes de la tabla de disposicin que la contiene. Estas lneas le ayudan a alinear las celdas nuevas con las celdas existentes y le ayudan a visualizar la estructura subyacente de la tabla HTML. Dreamweaver alinea automticamente los bordes de las nuevas celdas con los bordes de las celdas existentes cercanas. (Las celdas de disposicin no pueden solaparse.) Si dibuja una celda cerca del borde de la tabla, los bordes de la celda tambin se ajustan automticamente a los bordes de la tabla de disposicin que la contiene. Para desactivar temporalmente el ajuste, mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) mientras arrastra la celda.
Para dibujar una tabla de disposicin:

Sitese en la vista Disposicin. A continuacin, lleve a cabo una de estas operaciones: categora Disposicin de la barra Insertar. El puntero del ratn se convertir en un signo ms (+).

Para dibujar una tabla de disposicin, haga clic en el botn Dibujar tabla de disposicin en la Para dibujar ms de una tabla de disposicin sin tener que hacer clic repetidamente en el botn
Dibujar tabla de disposicin, mantenga presionado el botn Control (Windows) o Comando (Macintosh) mientras presiona el botn Dibujar tabla de disposicin. Una vez haya terminado de dibujar una tabla de disposicin, puede dibujar otra inmediatamente despus.
2

Coloque el puntero en la pgina y arrastre para crear la tabla de disposicin. Si la pagina no tiene contenido, la nueva tabla se coloca automticamente en la esquina superior izquierda de la pgina.

La tabla aparecer en la pgina con un contorno verde. (ste es el color de contorno predeterminado de las tablas de disposicin.) Para cambiar el color del contorno, consulte Configuracin de las preferencias de la vista Disposicin en la pgina 279. En la parte superior de cada tabla que dibuja aparece una ficha Tabla de disposicin que le ayuda a seleccionar la tabla y distinguirla del resto de los elementos de la pgina.

268 Captulo 17

El ancho de la tabla (expresado en pxeles o como un porcentaje del ancho de la pgina) se muestra en el rea de encabezado de columna de la parte superior de la tabla, siempre que las fichas de tabla de disposicin estn visibles (consulte Configuracin de las preferencias de la vista Disposicin en la pgina 279). Para obtener ms informacin sobre los anchos de tabla y columna, consulte Establecimiento del ancho de columna en la pgina 275.

Puede crear una tabla de disposicin en un rea vaca de la disposicin de la pgina, alrededor de celdas y tablas de disposicin existentes o anidada en una tabla de disposicin existente. Las tablas no pueden solaparse. Sin embargo, una tabla puede contener otra tabla. Para obtener ms informacin, consulte Dibujo de una tabla de disposicin anidada en la pgina 269.
Sugerencia: No puede dibujar una tabla de disposicin junto a contenido existente. Si su pgina ya tiene contenido, puede dibujar una nueva tabla de disposicin slo por debajo del final del contenido existente. Si intenta dibujar una tabla de disposicin junto a contenido existente pero aparece un puntero distinto que el puntero de dibujo, intente cambiar el tamao de la ventana de documento para crear ms espacio en blanco entre el final del contenido existente y el final de la ventana.

Dibujo de una tabla de disposicin anidada Puede dibujar una tabla de disposicin dentro de otra tabla de disposicin para crear una tabla anidada. Las celdas contenidas en una tabla anidada tambin estn aisladas de los cambios realizados a la tabla externa; por ejemplo, al cambiar el tamao de una fila o columna en la tabla externa, las celdas de la tabla interna no cambian de tamao. Puede insertar varios niveles de tablas anidadas. Una tabla de disposicin anidada no puede ser mayor que la tabla que la contiene.
Nota: Si dibuja una tabla de disposicin en el centro de la pgina antes de dibujar una celda de disposicin, la tabla que dibuja queda automticamente anidada dentro de una tabla mayor.

Establecimiento de la disposicin de pginas en la vista Disposicin 269

Para dibujar una tabla de disposicin anidada:

Sitese en la vista Disposicin y, a continuacin, haga clic en el botn Dibujar tabla de disposicin en la categora Disposicin de la barra Insertar. El puntero del ratn se convierte en un signo ms (+). Seale un rea vaca (gris) en la tabla de disposicin existente y, a continuacin, arrastre para crear la tabla de disposicin anidada.
Nota: No puede crear una tabla de disposicin dentro de una celda de disposicin. Puede crear una tabla de disposicin anidada slo en un rea vaca de una tabla de disposicin existente o alrededor de celdas de disposicin existentes.

Para dibujar una tabla de disposicin alrededor de tablas o celdas de disposicin existentes:

Sitese en la vista Disposicin y, a continuacin, haga clic en el botn Dibujar tabla de disposicin en la categora Disposicin de la barra Insertar. El puntero del ratn se convierte en un signo ms (+). Arrastre para dibujar un rectngulo en torno a un conjunto de celdas o tablas de disposicin existentes. Aparece una nueva tabla de disposicin anidada que encierra las celdas o tablas existentes.
Sugerencia: Para que una celda de disposicin existente se ajuste perfectamente a una esquina de la nueva tabla anidada, empiece a arrastrar desde cerca de la esquina de la celda. De este modo la esquina de la nueva tabla se ajusta a la esquina de la celda. No puede empezar a arrastrar desde el centro de una celda de disposicin porque no se puede crear una tabla de disposicin al completo dentro de una celda de disposicin.

Ajuste de celdas de disposicin a la cuadrcula Puede activar la cuadrcula de Dreamweaver para utilizarla como gua visual al dibujar la distribucin de la pgina. Puede hacer que los elementos de la pgina se ajusten automticamente a la cuadrcula cuando los mueva y cambiar la cuadrcula o controlar el comportamiento de ajuste especificando la configuracin de la cuadrcula. El ajuste funciona independientemente de que la cuadrcula est visible.
Para mostrar u ocultar la cuadrcula:

Elija Ver > Cuadrcula > Mostrar cuadrcula.

Para activar o desactivar el ajuste:

Elija Ver > Cuadrcula > Ajustar a cuadrcula.

270 Captulo 17

Para cambiar la configuracin de la cuadrcula:

Elija Ver > Cuadrcula > Configuracin de cuadrcula. Aparece el cuadro de dilogo Configuracin de la cuadrcula.

Seleccione las opciones deseadas. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Adicin de contenido a una celda de disposicin

En la vista Disposicin puede aadir texto, imgenes y otro contenido a las celdas de disposicin de la misma forma que aadira contenido a las celdas de tablas en la vista Estndar. Haga clic en la celda en la que desee aadir contenido y, a continuacin, escriba el texto o inserte otro contenido. Puede insertar contenido slo en una celda de disposicin, no en un rea vaca (gris) de una tabla de disposicin. As, antes de poder aadir contenido, debe crear celdas de disposicin (consulte Dibujo de celdas y tablas de disposicin en la pgina 267). Una celda de disposicin se ampla automticamente al aadir contenido que ocupe ms espacio que la celda. A medida que la celda se ampla, la columna que la contiene tambin se ampla, lo cual puede afectar al tamao de las celdas adyacentes. El rea de encabezado de columna cambia para mostrar el ancho que aparece en el cdigo, seguido del ancho visual de la columna (el ancho tal como aparece en la pantalla) entre parntesis. (Para obtener ms informacin sobre los anchos de columna, consulte Establecimiento del ancho de columna en la pgina 275.)

Establecimiento de la disposicin de pginas en la vista Disposicin 271

Para aadir texto a una celda de disposicin:

Site el punto de insercin en la celda de disposicin en la que desea aadir texto y lleve a cabo una de estas operaciones:

Escriba texto en la celda. Si es necesario, la celda se ampla a medida que escribe. Copie texto de otro documento y pguelo. Utilice el comando Pegar. Para obtener ms
informacin, consulte Insercin y aplicacin de formato al texto HTML en la pgina 297.
Para aadir una imagen a una celda de disposicin:

1 2

Site el punto de insercin en la celda de disposicin en la que desea aadir la imagen. Lleve a cabo una de las siguientes operaciones:

En la categora Comn de la barra Insertar, haga clic en el botn Imagen. Elija Insertar > Imagen.
3

En el cuadro de dilogo Seleccionar origen de imagen, seleccione un archivo de imagen.

Para obtener ms informacin, consulte Insercin de una imagen en la pgina 326. Cmo borrar los altos de celdas establecidos automticamente Al crear una celda de disposicin, Dreamweaver especifica automticamente un alto para que la celda se muestre con la altura que dibuj incluso aunque la celda est vaca. Tras insertar contenido en la celda, es posible que ya no necesite especificar el alto, de modo que puede borrar de la tabla los altos de celdas explcitos.
Para borrar los altos de celdas, lleve a cabo una de estas operaciones:

Seleccione Borrar altos de celda en el men de encabezado de columna.

Dreamweaver borra todos los altos especificados en la tabla. Es posible que algunas de las celdas de la tabla se contraigan verticalmente.

Seleccione una tabla de disposicin haciendo clic en la ficha de la parte superior de la tabla y, a
continuacin, haga clic en el botn Borrar alto de fila del inspector de propiedades. Dreamweaver borra todos los altos especificados en la tabla.

272 Captulo 17

Cmo mover y cambiar el tamao de celdas y tablas de disposicin

Para ajustar la distribucin de la pgina, puede mover y cambiar el tamao de las celdas de disposicin y de las tablas de disposicin anidadas. (En la tabla de disposicin externa slo se puede cambiar el tamao.) Las celdas de disposicin no pueden solaparse. No puede mover o cambiar el tamao de una celda de modo que exceda los lmites de la tabla de disposicin que la contiene. Una celda de disposicin no puede ser ms pequea que su contenido. No se puede cambiar el tamao de una tabla de disposicin de modo que sea ms pequea que el menor de los rectngulos que pueda contener todas sus celdas. Tampoco se puede cambiar el tamao de una tabla de disposicin de modo que se solape con otras tablas o celdas.
Para cambiar el tamao de una celda de disposicin:

Seleccione una celda haciendo clic en el borde de la celda o manteniendo presionada la tecla Control (Windows) o Comando (Macintosh) mientras hace clic en cualquier lugar de la celda. Aparecen manejadores de seleccin alrededor de la celda. Arrastre un manejador de seleccin para cambiar el tamao de la celda.

Los bordes de la celda se alinean automticamente con los bordes de otras celdas.
Para mover una celda de disposicin:

Seleccione una celda haciendo clic en el borde de la celda o manteniendo presionada la tecla Control (Windows) o Comando (Macintosh) mientras hace clic en cualquier lugar de la celda. Aparecen manejadores de seleccin alrededor de la celda. Lleve a cabo una de las siguientes operaciones:

Arrastre la celda a otra ubicacin dentro de su tabla de disposicin. Presione las teclas de flecha para mover la celda de pxel en pxel. Mantenga presionada la tecla
Mays a la vez que presiona una tecla de flecha para mover la celda de disposicin de 10 en 10 pxeles.
Para cambiar el tamao de una tabla de disposicin:

Seleccione una tabla haciendo clic en la ficha que se encuentra en la parte superior de la tabla. Aparecen manejadores de seleccin alrededor de la tabla. Arrastre un manejador de seleccin para cambiar el tamao de la tabla. Los bordes de la tabla se alinean automticamente con los bordes de otras celdas y tablas.

Establecimiento de la disposicin de pginas en la vista Disposicin 273

Para mover una tabla de disposicin:

Seleccione una tabla haciendo clic en la ficha que se encuentra en la parte superior de la tabla. Aparecen manejadores de seleccin alrededor de la tabla. Lleve a cabo una de las siguientes operaciones:
Nota: Puede mover una tabla de disposicin slo si est anidada dentro de otra tabla de disposicin.

Arrastre la tabla a otra ubicacin de la pgina. Presione las teclas de flecha para mover la tabla de pxel en pxel. Mantenga presionada la tecla
Mays a la vez que presiona una tecla de flecha para mover la tabla de 10 en 10 pxeles.
Tema relacionado

Para utilizar la cuadrcula de Dreamweaver como gua para mover o cambiar el tamao de celdas y tablas, consulte Ajuste de celdas de disposicin a la cuadrcula en la pgina 270.

Aplicacin de formato a celdas y tablas de disposicin

Puede cambiar la apariencia de cualquier celda o tabla de disposicin en el inspector de propiedades. Aplicacin de formato a celdas de disposicin Puede establecer varios atributos de una celda de disposicin en el inspector de propiedades, incluyendo el ancho y el alto, el color de fondo y el alineamiento de los contenidos de la celda.

Para aplicar formato a una celda de disposicin en el inspector de propiedades:

1 2 3

Seleccione una celda haciendo clic en el borde de la celda o manteniendo presionada la tecla Control (Windows) o Comando (Macintosh) mientras hace clic en cualquier lugar de la celda. Abra el inspector de propiedades eligiendo Ventana > Propiedades. Para cambiar el formato de la celda establezca las propiedades. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.

Aplicacin de formato a tablas de disposicin Puede establecer varios atributos de una tabla de disposicin en el inspector de propiedades, incluyendo el ancho, el alto, el relleno y el espaciado.

Para aplicar formato a una tabla de disposicin:

Seleccione una tabla haciendo clic en la ficha de la parte superior de la tabla o haciendo clic en la etiqueta <table> del selector de etiquetas.

274 Captulo 17

2 3

Abra el inspector de propiedades eligiendo Ventana > Propiedades. Para cambiar el formato de la tabla establezca las propiedades. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.

Establecimiento del ancho de columna

En la vista Disposicin, una columna puede tener bien un ancho fijo o bien un ancho que aumenta automticamente hasta ocupar tanto espacio de la ventana del navegador como resulte posible (autoampliar). El rea de encabezado de columna de la parte superior de cada columna de la tabla seleccionada muestra informacin sobre el ancho siempre que las fichas de la tabla de disposicin estn visibles (consulte Configuracin de las preferencias de la vista Disposicin en la pgina 279). Una columna de ancho fijo tiene un ancho numrico especfico, como por ejemplo 300 pxeles; el ancho aparece en el rea de encabezado de columna (a menos que la columna sea demasiado estrecha para mostrar los nmeros). El ancho de una columna autoampliable cambia automticamente dependiendo del ancho de la ventana del navegador; el rea de encabezado de columna de una columna autoampliable muestra una lnea ondulada en lugar de un nmero. Al incluir una columna autoampliable en la disposicin de una pgina, la disposicin ocupa siempre el ancho completo de la ventana del navegador del visitante.
Nota: El ancho que especifique para una columna se aplica a todas las celdas de dicha columna.

En una tabla de disposicin slo puede haber una columna autoampliable. Con frecuencia, se suele establecer como autoampliable la columna que contiene el contenido principal de la pgina, lo cual establece automticamente el resto de las columnas de la pgina con un ancho fijo. Por ejemplo, suponga que su disposicin incluye una imagen grande en la parte izquierda de la pgina y una columna de texto en la derecha. Puede establecer la columna de la izquierda con un ancho fijo y el rea de la barra lateral como autoampliable.

Establecimiento de la disposicin de pginas en la vista Disposicin 275

Al establecer una columna como autoampliable, Dreamweaver inserta imgenes de espaciador en las columnas de ancho fijo de modo que dichas columnas mantengan el ancho que deben tener, a menos que se especifique que no se deben usar imgenes de espaciador. Una imagen de espaciador es una imagen transparente que se utiliza para controlar el espaciado y no es visible en la ventana del navegador. Para obtener ms informacin, consulte Utilizacin de las imgenes de espaciador en la pgina 277.
Nota: Establecer una columna como autoampliable antes de que la disposicin est terminada podra afectar de forma imprevisible a la disposicin de la pgina. Para impedir que las columnas se ensanchen o se estrechen de forma inesperada, cree la disposicin completa de la pgina antes de establecer una columna como autoampliable y utilice imgenes de espaciador cuando establezca una columna como autoampliable. (No obstante, si las columnas ya tienen contenido que mantiene el ancho deseado, no ser preciso utilizar imgenes de espaciador.)

A veces, el ancho visual de una columna tal como aparece en el vista Disposicin no se corresponde con el ancho especificado en el cdigo HTML. En dicho caso, aparecen dos nmeros en el rea de encabezado de columna. (Para obtener ms informacin sobre anchos no coincidentes, haga clic en el botn Ayuda del inspector de propiedades de la tabla de disposicin.)
Para establecer una columna como autoampliable, lleve a cabo una de las siguientes operaciones:

En el rea de encabezado de columna de la parte superior de una columna de ancho fijo, en el

men de encabezado de la columna seleccione Hacer que la columna sea autoampliable. En una tabla de disposicin determinada, slo se puede establecer una columna como autoampliable.

Seleccione una celda de la columna haciendo clic en el borde de la celda o manteniendo

presionada la tecla Control (Windows) o Comando (Macintosh) mientras hace clic en cualquier lugar de la celda. A continuacin, en el inspector de propiedades, haga clic en Autoampliar.
Para establecer un ancho fijo en una columna, lleve a cabo una de estas operaciones:

En el rea de encabezado de columna de la parte superior de una columna autoampliable, en el

men de encabezado de la columna seleccione Hacer que la columna tenga ancho fijo. La opcin Hacer que la columna tenga ancho fijo especifica un ancho para la columna (en el cdigo) que coincide con el ancho visual actual de la columna.

276 Captulo 17

 Seleccione una celda de la columna haciendo clic en el borde de la celda o manteniendo

presionada la tecla Control (Windows) o Comando (Macintosh) mientras hace clic en cualquier lugar de la celda. A continuacin, en el inspector de propiedades, haga clic en Fijo y escriba un valor numrico. Si escribe un valor numrico menor que el ancho del contenido de la columna, Dreamweaver establece automticamente el ancho para que coincida con el ancho del contenido.
Para que el ancho de celda especificado en el cdigo HTML se corresponda con el ancho visual de las celdas:

Seleccione Igualar ancho de celdas en el men de encabezado de columna de cualquier columna.

Temas relacionados

Configuracin de las preferencias de la vista Disposicin en la pgina 279 Utilizacin de las imgenes de espaciador Una imagen de espaciador (tambin conocida como GIF espaciador) es una imagen transparente que se utiliza para controlar el espaciado en las tablas autoampliables. Una imagen de espaciador es una imagen GIF transparente de pxel nico que se ha ampliado para tener un nmero determinado de pxeles de ancho. Un navegador no puede dibujar una columna de tabla ms estrecha que la imagen ms ancha contenida en una celda de dicha columna, de modo que al colocar una imagen de espaciador en una columna de tabla se exige a los navegadores que mantengan la columna al menos tan ancha como la imagen. Dreamweaver aade imgenes de espaciador automticamente al establecer una columna como autoampliable a menos que usted especifique que no se deben usar imgenes de espaciador. Puede insertar y quitar manualmente las imgenes de espaciador de cada columna, si lo prefiere. Las columnas que contienen imgenes de espaciador presentan una barra doble en el rea de encabezado de columna.
Nota: Si decide no utilizar imgenes de espaciador en tablas autoampliables, es posible que las columnas de ancho fijo cambien de tamao o incluso desaparezcan por completo de la vista Diseo cuando no tengan contenido. (Las columnas seguirn existiendo en el cdigo aunque no aparezcan en la vista Diseo.)

Al insertar una imagen de espaciador en una columna o al establecer una columna como autoampliable, aparece un cuadro de dilogo que le pregunta cmo desea configurar el archivo de imagen de espaciador. Si ya ha establecido una imagen de espaciador para el sitio en las preferencias de Dreamweaver, este cuadro de dilogo no aparecer (consulte Configuracin de las preferencias de la vista Disposicin en la pgina 279). Puede insertar y quitar manualmente las imgenes de espaciador de determinadas columnas o quitar todas las imgenes de espaciador de la pgina.

Establecimiento de la disposicin de pginas en la vista Disposicin 277

Para configurar una imagen de espaciador:

Establezca una columna como autoampliable o elija Agregar imagen de espaciador en el men de encabezado de columna.

Se abre el cuadro de dilogo Elegir imagen de espaciador.

2

Elija una de las opciones: Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Para insertar una imagen de espaciador en una columna:

Seleccione Agregar imagen de espaciador en el men de encabezado de columna. La imagen de espaciador se inserta en la columna. Esta imagen no es visible, pero es posible que la columna se desplace ligeramente y que aparezca una doble barra en la parte superior indicando que contiene una imagen de espaciador.
Para quitar una imagen de espaciador de una columna:

Seleccione Quitar imagen de espaciador en el men de encabezado de columna. Se quita la imagen de espaciador. Es posible que la columna se desplace.
Para quitar todas las imgenes de espaciador de una tabla:

Lleve a cabo una de las siguientes operaciones:

Seleccione Quitar todas las imgenes de espaciador en el men de encabezado de columna de

cualquier columna de la tabla.

Haga clic en el botn Quitar todos los espaciadores en el inspector de propiedades de la tabla
de disposicin. Es posible que la disposicin de la tabla completa se desplace. Si no hay contenido en algunas columnas, es posible que desaparezcan por completo de la vista Diseo.

278 Captulo 17

Configuracin de las preferencias de la vista Disposicin

Utilice la categora Vista de disposicin del cuadro de dilogo Preferencias para especificar informacin acerca de los archivos de imagen de espaciador y sobre los colores que Dreamweaver utiliza para dibujar las tablas y las celdas de disposicin. De forma predeterminada, en la vista Disposicin, aparece una ficha llamada Tabla de disposicin en la parte superior de cada tabla de disposicin y un conjunto de controles de ancho de columna en la parte superior de la tabla de disposicin actualmente seleccionada. Puede ocultar las fichas y los controles, si lo prefiere.
Nota: Incluso cuando las fichas son visibles, la tabla de disposicin de la parte superior de la pgina no contiene una ficha al seleccionarla. La ficha de una tabla de disposicin de la parte superior de una pgina aparece slo cuando la tabla no est seleccionada.

Para establecer las preferencias de la vista Disposicin:

1 2 3

Elija Edicin > Preferencias. En la lista Categora, seleccione Vista de disposicin. Realice los cambios necesarios. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar para cerrar el cuadro de dilogo.

Para desactivar las fichas de la tabla de disposicin y los controles de ancho de columna de la vista Disposicin:

Elija Ver > Vista de tabla > Mostrar fichas de tabla de disposicin.

Establecimiento de la disposicin de pginas en la vista Disposicin 279

280 Captulo 17

CAPTULO 18 Utilizacin de marcos

Los marcos permiten dividir la ventana de un navegador en varias regiones, cada una las cuales puede mostrar un documento HTML diferente. Por lo general, un marco muestra un documento que contiene controles de navegacin, mientras que otro muestra un documento con contenido. Por ejemplo, la disposicin de marcos podra incluir tres marcos: un marco estrecho a un lado que contiene una barra de navegacin, un marco que se extiende por la parte superior y contiene el logotipo y el ttulo del sitio Web, y un marco grande que ocupa el resto de la pgina y presenta el contenido principal. Cada uno de estos marcos muestra un documento HTML diferente.

En este ejemplo, el documento mostrado en el marco superior nunca cambia cuando el visitante explora el sitio. El marco lateral de barra de navegacin contiene vnculos; al hacer clic en uno de ellos, cambia el contenido del marco de contenido principal, aunque el del marco lateral permanecer esttico. El marco de contenido principal de la derecha mostrar el documento correspondiente a cualquier vnculo de la izquierda seleccionado por el visitante. En este captulo no se incluye una descripcin pormenorizada de todos los mtodos de diseo y utilizacin de marcos, ni de los cdigos necesarios para su codificacin manual. Si necesita informacin detallada sobre los cdigos utilizados en las disposiciones de marcos avanzadas, consulte bibliografa sobre marcos y conjuntos de marcos. Este captulo contiene las siguientes secciones:

Marcos y conjuntos de marcos en la pgina 282 Cundo utilizar marcos en la pgina 283

281

Creacin de pginas Web basadas en marcos en Dreamweaver en la pgina 284 Creacin de marcos y conjuntos de marcos en la pgina 285 Seleccin de marcos y conjuntos de marcos en la pgina 288 Almacenamiento de archivos de marco y conjunto de marcos en la pgina 290 Visualizacin y configuracin de las propiedades de un marco en la pgina 291 Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 292 Control del contenido del marco con vnculos en la pgina 293 Manipulacin de navegadores que no pueden mostrar marcos en la pgina 293 Utilizacin de comportamientos JavaScript con marcos en la pgina 294

Marcos y conjuntos de marcos

Un marco es una regin de una ventana de navegador que puede mostrar un documento HTML independiente de lo que se muestra en el resto de la ventana. Un conjunto de marcos es un archivo HTML que define la disposicin y las propiedades de un grupo de marcos, incluido el nmero, tamao y ubicacin de los marcos y el URL de la pgina que se mostrar inicialmente en cada marco. El archivo de conjunto de marcos no incluye el contenido HTML que se mostrar en el navegador, excepto en la seccin noframes (consulte Manipulacin de navegadores que no pueden mostrar marcos en la pgina 293). El archivo nicamente ofrece al navegador informacin sobre cmo debe mostrarse un conjunto de marcos y los documentos que deben incluirse en los marcos. Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo de conjunto de marcos; el navegador abre entonces los documentos que deben mostrarse en los marcos. El archivo de conjunto de marcos de un sitio suele llamarse index.html. As, cuando el visitante no especifica ningn nombre de archivo, este archivo se muestra de forma predeterminada. Tenga en cuenta que un marco no es un archivo. Podra pensarse que el documento mostrado en un marco forma parte integral del mismo, pero en realidad esto no es as, ya que un marco puede mostrar cualquier documento.
Nota: La palabra pgina, en un sentido amplio, puede utilizarse para hacer referencia a un nico documento HTML o a todo el contenido de una ventana del navegador en un momento determinado, aunque se estn mostrando varios documentos HTML al mismo tiempo. Por ejemplo, la frase una pgina que utiliza marcos suele hacer referencia a un conjunto de marcos y a los documentos que aparecen en ellos inicialmente.

En Dreamweaver, puede utilizar cualquiera de los siguientes mtodos para crear un conjunto de marcos:

Para crear un conjunto de marcos en uno de los cuales se muestre el documento actual, utilice
la categora Marcos de la barra Insertar.

Para crear un conjunto de marcos con todos los marcos en blanco, utilice la categora
Conjuntos de marcos del cuadro de dilogo Nuevo documento. Puede aplicar formato a todos los marcos y conjuntos de marcos mediante el inspector de propiedades. Puede activar o desactivar el desplazamiento, establecer el ancho y el alto, asignar un nombre a cada marco, etc. Para obtener ms informacin, consulte Visualizacin y configuracin de las propiedades de un marco en la pgina 291 y Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 292.

282 Captulo 18

Un sitio que aparece en un navegador como una sola pgina compuesta de tres marcos consta realmente de al menos cuatro documentos HTML distintos: el archivo de conjunto de marcos y los tres documentos que albergan el contenido que aparece inicialmente dentro de los marcos. Al disear una pgina utilizando conjuntos de marcos en Dreamweaver, deber guardar cada uno de estos cuatro archivos para que la pgina funcione correctamente en el navegador. Para obtener ms informacin sobre cmo crear pginas Web con marcos, consulte Creacin de pginas Web basadas en marcos en Dreamweaver en la pgina 284.

Cundo utilizar marcos

El uso ms comn de los marcos es la navegacin. Un conjunto de marcos suele incluir un marco con una barra de navegacin y otro que muestra las pginas de contenido principal. Sin embargo, el diseo con marcos puede resultar complicado y, en ocasiones, las pginas Web que no los incluyen logran prcticamente los mismos objetivos. Por ejemplo, si desea que la barra de navegacin aparezca a la izquierda, puede reemplazar la pgina por un conjunto de marcos o, simplemente, incluir la barra de navegacin en todas las pginas del sitio. ((Dreamweaver le ayuda a crear varias pginas con la misma disposicin; consulte Plantillas de Dreamweaver en la pgina 481.) Aunque no utiliza marcos, la siguiente imagen muestra una disposicin de pgina que los imita.

Hay muchos diseadores Web profesionales que prefieren no utilizar marcos y muchas personas que navegan por la Web a las que no les gustan. Esto suele deberse a que encontraron sitios que utilizaban los marcos incorrecta o innecesariamente (por ejemplo, un conjunto de marcos que vuelve a cargar el contenido de los marcos de navegacin cada vez que el visitante hace clic en un botn de navegacin). Cuando se utilizan bien los marcos (por ejemplo, para incluir controles de navegacin estticos en un marco permitiendo al mismo tiempo que cambie el contenido de otro), pueden resultar muy tiles. No todos los navegadores son compatibles con el uso de marcos y algunos visitantes pueden experimentar dificultades para navegar por pginas con marcos. Por eso, si los utiliza, incluya siempre una seccin noframes en su conjunto de marcos para los visitantes que no pueden verlos. Si lo desea, puede incluir tambin un vnculo a una versin sin marcos del sitio para los visitantes con navegadores que no admitan marcos o que no deseen utilizarlos.

Utilizacin de marcos 283

Entre las ventajas de utilizar marcos se incluyen:

El navegador de un visitante no tendr que volver a cargar los grficos de navegacin para cada
pgina.

Cada marco dispone de su propia barra de desplazamiento (si el contenido es demasiado

grande para una ventana), permitiendo al visitante desplazarse por los marcos de forma independiente. (Por ejemplo, si la barra de navegacin se encuentra en otro marco, cuando el visitante se ha desplazado al final de una pgina de contenido muy grande en un marco no ser necesario volver al principio de la pgina para acceder a la barra de navegacin.) Entre los inconvenientes de utilizar marcos se incluyen:

Lograr un alineamiento grfico preciso de los elementos en distintos marcos puede resultar
difcil.

Comprobar las opciones de navegacin puede llevar mucho tiempo. Los URL de las pginas con marcos no se muestran en el navegador, por lo que puede resultar
complicado para un visitante marcar una pgina concreta (salvo que incluya cdigo de servidor que le permita cargar la versin con marcos de una determinada pgina).
Temas relacionados

Control del contenido del marco con vnculos en la pgina 293 Manipulacin de navegadores que no pueden mostrar marcos en la pgina 293

Creacin de pginas Web basadas en marcos en Dreamweaver

Dreamweaver permite ver y editar todos los documentos asociados a un conjunto de marcos, todos en una misma ventana de documento. Este enfoque permite obtener una visin aproximada de cmo se mostrarn las pginas con marcos en un navegador a medida que las edita. Sin embargo, algunos aspectos de este enfoque pueden resultar confusos hasta que se acostumbre a ellos.

En especial, recuerde que cada marco muestra un documento HTML distinto. Aunque los documentos estn vacos, deber guardarlos antes de obtener una vista previa de los mismos (ya que slo puede obtenerse una vista previa del conjunto de marcos si ste contiene el URL del documento que se muestra en cada marco).

284 Captulo 18

Para comprobar si un conjunto de marcos aparece correctamente en los navegadores:

1 2

Cree el conjunto de marcos y especifique el documento que debe aparecer en cada marco (consulte Creacin de marcos y conjuntos de marcos en la pgina 285). Guarde todos los archivos que se van a mostrar en un marco. Recuerde que cada marco muestra un documento HTML distinto y que deben guardarse todos los documentos. Guarde tambin el archivo de conjunto de marcos. (Consulte Almacenamiento de archivos de marco y conjunto de marcos en la pgina 290.) Establezca las propiedades de los marcos y del conjunto de marcos. Esto incluye asignar un nombre a cada marco, establecer las opciones de desplazamiento, etc. (Consulte Visualizacin y configuracin de las propiedades de un marco en la pgina 291 y Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 292.)
Sugerencia: Si lo desea, puede mejorar la accesibilidad estableciendo el atributo title de un marco. (Tenga en cuenta que los atributos title y name no son iguales.) Para establecer el atributo title, seleccione el marco y elija Modificar > Editar etiqueta; a continuacin, seleccione la categora Hoja de estilos/Accesibilidad e introduzca un ttulo en el cuadro de texto Ttulo. Tambin puede activar la opcin de creacin de accesibilidad para los marcos; para obtener ms informacin, consulte Creacin de sitios Web accesibles en la pgina 369.

No olvide establecer la propiedad Destino del inspector de propiedades para todos los vnculos de forma que el contenido vinculado se muestre en el rea correspondiente (consulte Control del contenido del marco con vnculos en la pgina 293).

Creacin de marcos y conjuntos de marcos

Hay dos formas de crear un conjunto de marcos en Dreamweaver: puede disearlo usted mismo o seleccionarlo de una serie de conjuntos de marcos predefinidos. Al elegir un conjunto de marcos predefinido, se configuran automticamente todos los marcos y conjuntos de marcos necesarios para crear la disposicin. sta es la forma ms sencilla de crear rpidamente una disposicin basada en marcos. Slo se puede insertar un conjunto de marcos predefinido en la vista Diseo de la ventana de documento. Creacin de un conjunto de marcos predefinido Los conjuntos de marcos predefinidos facilitan la seleccin del tipo de conjunto de marcos que desea crear. Hay dos formas de crear un conjunto de marcos predefinido: mediante la barra Insertar o mediante el cuadro de dilogo Nuevo documento. La barra Insertar permite crear un conjunto de marcos y mostrar el documento actual en uno de los nuevos marcos; el cuadro de dilogo Nuevo documento crea un conjunto de marcos vaco. En la categora Marcos de la barra Insertar y en la categora Conjuntos de marcos del cuadro de dilogo Nuevo documento, los iconos de conjunto de marcos predefinido ofrecen una representacin grfica de todos los conjuntos de marcos aplicados al documento actual.

Utilizacin de marcos 285

Al aplicar un conjunto de marcos mediante la barra Insertar, Dreamweaver configura automticamente el conjunto de marcos para mostrar el documento actual (el documento en el que se encuentra el punto de insercin) en uno de los marcos. El rea azul de un icono de conjunto de marcos predefinido representa el documento actual y las reas blancas representan marcos que mostrarn otros documentos.
Para crear un conjunto de marcos predefinido y mostrar un documento en un marco:

1 2

Site el punto de insercin en un documento. Lleve a cabo una de las siguientes operaciones: predefinido.

En la categora Marcos de la barra Insertar, haga clic en el icono de un conjunto de marcos Elija un conjunto de marcos predefinido en el submen Insertar > Marcos.
Para crear un conjunto de marcos predefinido vaco:

1 2 3 4

Seleccione Archivo > Nuevo. En el cuadro de dilogo Nuevo documento, seleccione la categora Conjuntos de marcos. Seleccione un conjunto de marcos de la lista Conjuntos de marcos. Haga clic en Crear.

Creacin y edicin de un conjunto de marcos Antes de crear un conjunto de marcos o utilizar marcos, haga visibles los bordes de los marcos en la vista Diseo de la ventana de documento seleccionando Ver > Ayudas visuales > Bordes de marco.
Para crear un conjunto de marcos:

En el submen Modificar > Conjunto de marcos, elija un elemento divisor (por ejemplo, Dividir marco a la izquierda o Dividir marco a la derecha). La ventana se dividir en marcos y el documento inicial se mostrar en uno de ellos.
Para dividir un marco en otros ms pequeos, lleve a cabo una de estas operaciones:

Para dividir el marco donde se encuentra el punto de insercin, elija un elemento divisor del
submen Modificar > Conjunto de marcos.

Para dividir un marco o conjunto de marcos vertical u horizontalmente, arrastre el borde del
marco desde el extremo hasta el centro de la vista Diseo.

Para dividir un marco utilizando un borde de marco que no se encuentra en el extremo de la

vista Diseo, arrastre el borde del marco mientras mantiene presionada la tecla Alt (Windows) u Opcin (Macintosh).

Para dividir un marco en cuatro, arrastre el borde del marco desde una esquina de la vista
Diseo al centro de un marco.
Sugerencia: Para crear tres marcos, empiece con dos marcos y, a continuacin, divida uno de ellos. No resulta fcil combinar dos marcos contiguos sin editar el cdigo del conjunto de marcos, por lo que convertir cuatro marcos en tres es ms difcil que convertir dos marcos en tres.

286 Captulo 18

Para eliminar un marco:

Arrastre el borde del marco fuera de la pgina o hasta el borde del marco padre. Cuando un documento de un marco que se va a eliminar incluye contenido no guardado, Dreamweaver le pedir que guarde el documento.
Nota: No se puede eliminar totalmente un conjunto de marcos arrastrando los bordes. Para eliminar un conjunto de marcos, cierre la ventana de documento que lo muestra. Si se ha guardado el archivo de conjunto de marcos, elimine el archivo.

Conjuntos de marcos anidados Un conjunto de marcos dentro de otro conjunto recibe el nombre de conjunto de marcos anidado. Un archivo de conjunto de marcos puede contener varios conjuntos de marcos anidados. La mayora de las pginas Web con marcos utilizan en realidad marcos anidados y la mayora de los conjuntos de marcos predefinidos en Dreamweaver tambin utilizan la anidacin. Cualquier conjunto de marcos que contenga nmeros de marcos diferentes en distintas filas o columnas requiere un conjunto de marcos anidado. Por ejemplo, la disposicin de marcos ms habitual emplea un marco en la primera fila (donde aparece el logotipo de la empresa) y dos marcos en la ltima fila (uno de navegacin y otro de contenido). Esta disposicin requiere un conjunto de marcos anidado: un conjunto de marcos de dos filas con un conjunto de marcos anidado de dos columnas en la segunda fila.
Conjunto de marcos principal

El marco de men y el marco de contenido se anidan en el conjunto de marcos principal.

Dreamweaver se ocupa de todos los conjuntos de marcos anidados que sean necesarios; si utiliza las herramientas de divisin de marcos de Dreamweaver, no tendr que preocuparse de qu marcos son anidados y cules no. Para obtener ms informacin sobre las herramientas de divisin de marcos, consulte Creacin y edicin de un conjunto de marcos en la pgina 286. Hay dos formas de anidar conjuntos de marcos en HTML: el conjunto de marcos interior puede definirse en el mismo archivo que el exterior o un archivo independiente. Los conjuntos de marcos predefinidos en Dreamweaver definen todos sus conjuntos de marcos en el mismo archivo. Ambos tipos de anidacin producen los mismos resultados visuales; sin ver el cdigo, no resulta sencillo distinguir cul se est utilizando. En Dreamweaver suele recurrirse a un archivo de conjunto de marcos externo cuando se utiliza el comando Abrir en marco para abrir un archivo de conjunto de marcos dentro de un marco, lo cual puede dificultar la tarea de establecer los destinos de los vnculos. Suele resultar ms sencillo definir todos los conjuntos de marcos en un mismo archivo.

Utilizacin de marcos 287

Seleccin de marcos y conjuntos de marcos

Para realizar cambios en las propiedades de un marco o conjunto de marcos, comience seleccionando el marco o conjunto de marcos que desea modificar. Puede seleccionar un marco o un conjunto de marcos en la ventana de documento o utilizando el panel Marcos. Al hacerlo, alrededor del marco o conjunto de marcos aparece un contorno de seleccin tanto en el panel Marcos como en la vista Diseo de la ventana de documento. Seleccin de marcos y conjuntos de marcos en el panel Marcos El panel Marcos proporciona una representacin grfica de los marcos de un conjunto de marcos. Puede hacer clic en un marco o conjunto de marcos en el panel Marcos para seleccionarlo en el documento y, seguidamente, ver o editar las propiedades del elemento seleccionado en el inspector de propiedades. Para obtener ms informacin, consulte Visualizacin y configuracin de las propiedades de un marco en la pgina 291 y Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 292. El panel Marcos tambin muestra la jerarqua de la estructura del conjunto de marcos de una forma quiz difcil de percibir en la ventana de documento. En dicho panel, puede observar que mientras los conjuntos de marcos estn rodeados por un borde grueso, los marcos estn rodeados por una lnea delgada gris y aparecen identificados por sus nombres.

Para mostrar el panel Marcos:

Elija Ventana > Otros > Marcos.

Para seleccionar un marco en el panel Marcos:

Haga clic en el panel Marcos.

Para seleccionar un conjunto de marcos en el panel Marcos:

Haga clic en el borde que rodea al conjunto de marcos. Seleccin de marcos y conjuntos de marcos en la ventana de documento Al seleccionar un marco en la ventana de documento de la vista Diseo, sus bordes muestran un contorno de lnea de puntos; al seleccionar un conjunto de marcos, todos los bordes de los marcos contenidos en el conjunto de marcos muestran un contorno de lnea de puntos fina.

288 Captulo 18

Nota: No es lo mismo situar el punto de insercin en un documento mostrado en un marco que seleccionar un marco. Para algunas operaciones (por ejemplo, establecer las propiedades del marco) es necesario seleccionar un marco.

Al seleccionar un marco o conjunto de marcos, el inspector de propiedades muestra las propiedades del elemento seleccionado, permitindole modificarlas (consulte Visualizacin y configuracin de las propiedades de un marco en la pgina 291 y Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 292).
Para seleccionar un marco en la ventana de documento:

En la vista Diseo, haga clic dentro de un marco mientras mantiene presionada la tecla Alt (Windows) o las teclas Opcin-Mays (Macintosh).
Para seleccionar un conjunto de marcos en la ventana de documento:

Haga clic en uno de los bordes del marco interior del conjunto de marcos en la vista Diseo. (Para ello, los bordes de los marcos deben estar visibles; si no lo estn, seleccione Ver > Ayudas visuales > Bordes de marco.)
Nota: Suele ser ms fcil seleccionar conjuntos de marcos en el panel Marcos que en la ventana de documento. Para obtener ms informacin, consulte Seleccin de marcos y conjuntos de marcos en el panel Marcos en la pgina 288.

Para seleccionar otro marco o conjunto de marcos, lleve a cabo una de estas operaciones:

Para seleccionar el marco o conjunto de marcos siguiente o anterior en el mismo nivel

jerrquico que la seleccin actual, presione Alt-flecha izquierda o Alt-flecha derecha (Windows), o Comando-flecha izquierda o Comando-flecha derecha (Macintosh). El uso de estas teclas le permite pasar por los distintos marcos y conjuntos de marcos en el orden en que estn definidos en el archivo de conjunto de marcos.

Para seleccionar el conjunto de marcos padre (el que contiene la seleccin actual), presione Altflecha arriba (Windows) o Comando-flecha arriba (Macintosh).

Para seleccionar el primer marco o conjunto de marcos hijo del conjunto de marcos
seleccionado actualmente (es decir, el primero en el orden en que estn definidos en el archivo de conjunto de marcos), presione Alt-flecha abajo (Windows) o Comando-flecha abajo (Macintosh). Cmo abrir un documento en un marco Puede especificar el contenido inicial de un marco insertando contenido nuevo en un documento vaco en un marco o abriendo un documento existente en un marco.
Para abrir un documento existente en un marco:

1 2 3

Site el punto de insercin en un marco. Elija Archivo > Abrir en marco. Seleccione el documento que desea abrir en el marco y haga clic en Aceptar (Windows), Seleccionar (Mac OS X) o Abrir (Mac OS 9). El documento se muestra en el marco. Para convertir dicho documento en el documento predeterminado que se mostrar en el marco al abrir el conjunto de marcos en un navegador, guarde el conjunto de marcos.

Utilizacin de marcos 289

Almacenamiento de archivos de marco y conjunto de marcos

Para obtener una vista previa de un conjunto de marcos en un navegador, deber guardar antes el archivo de conjunto de marcos y todos los documentos que se mostrarn en los marcos. Puede guardar cada archivo de conjunto de marcos y documento con marcos individualmente, o guardar al mismo tiempo el archivo de conjunto de marcos y todos los documentos que aparecen en los marcos. Cuando utiliza herramientas visuales de Dreamweaver para crear un conjunto de marcos, a cada nuevo documento que aparece en un marco se le asigna un nombre de archivo predeterminado. Por ejemplo, el primer archivo de conjunto de marcos se llamar UntitledFrameset-1, mientras que el primer documento en un marco se llamar UntitledFrame-1. Al seleccionar uno de los comandos guardar, se muestra un cuadro de dilogo que le permite guardar un documento con su nombre de archivo predeterminado. Al ser tan parecidos los nombres de archivos predeterminados, puede resultarle difcil determinar el documento que est guardando. Para identificar el marco que muestra el documento que est guardando, mire el contorno de seleccin del marco en la ventana de documento (vista Diseo).

Para guardar un archivo de conjunto de marcos:

1 2

Seleccione el conjunto de marcos en el panel Marcos o en la ventana de documento. Lleve a cabo una de estas operaciones:

Para guardar el archivo de conjunto de marcos, elija Archivo > Guardar conjunto de marcos. Para guardar el archivo de conjunto de marcos como un archivo nuevo, elija Archivo >
Guardar conjunto de marcos como. Si el archivo de conjunto de marcos no se ha guardado anteriormente, estos dos comandos sern iguales.
Para guardar un documento que aparece dentro de un marco:

Haga clic en el marco y, a continuacin, elija Archivo > Guardar marco o Archivo > Guardar marco como.

290 Captulo 18

Para guardar todos los archivos asociados a un conjunto de marcos:

Elija Archivo > Guardar todo. Se guardarn todos los documentos abiertos en el conjunto de marcos, incluidos el archivo de conjunto de marcos y todos los documentos con marco. Si el archivo de conjunto de marcos no se ha guardado todava, en la vista Diseo aparecer un borde grueso alrededor del conjunto de marcos y un cuadro de dilogo que le permitir seleccionar un nombre de archivo. A continuacin, alrededor de cada marco que no se haya guardado an aparecer un borde grueso y un cuadro de dilogo que le permitir elegir un nombre de archivo.
Nota: Si ha utilizado Archivo > Abrir en marco para abrir un documento en un marco, cuando guarde el conjunto de marcos, este documento se convertir en el predeterminado para mostrarse en dicho marco. Si no desea que este documento sea el predeterminado, no guarde el archivo de conjunto de marcos.

Visualizacin y configuracin de las propiedades de un marco

Utilice el inspector de propiedades para ver y establecer las propiedades de un marco. Para cambiar el color de fondo de un marco, establezca el color de fondo del documento en el marco.
Para ver o establecer las propiedades de un marco:

Seleccione un marco llevando a cabo una de estas operaciones: las teclas Mays-Opcin (Macintosh).

Haga clic en un marco en la ventana de documento mientras presiona la tecla Alt (Windows) o Haga clic en un marco en el panel Marcos.
2

Elija Ventana > Propiedades para abrir el inspector de propiedades, si es que no est abierto.

Para ver todas las propiedades del marco, haga clic en la flecha de ampliacin que se encuentra en la esquina inferior derecha del inspector de propiedades. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.

Para cambiar el color de fondo de un documento en un marco:

1 2 3

Site el punto de insercin en el marco. Elija Modificar > Propiedades de la pgina. Haga clic en el men emergente Fondo para seleccionar un color.

Temas relacionados

Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 292 Configuracin de las propiedades del documento en la pgina 129

Utilizacin de marcos 291

Visualizacin y configuracin de las propiedades de un conjunto de marcos

Utilice el inspector de propiedades para ver y establecer las propiedades de un conjunto de marcos. Para establecer el ttulo del conjunto de marcos seleccionado, utilice el cuadro de dilogo Propiedades de la pgina o el campo Ttulo de la barra de herramientas de la ventana de documento.
Para ver o establecer las propiedades de un conjunto de marcos:

Seleccione un conjunto de marcos llevando a cabo una de estas operaciones: de la vista Diseo de la ventana de documento.

Haga clic en uno de los bordes que se encuentran entre dos marcos en el conjunto de marcos Haga clic en el borde que rodea a un conjunto de marcos en el panel Marcos.
2 3

Elija Ventana > Propiedades para abrir el inspector de propiedades, si es que no est abierto. Para ver todas las propiedades del conjunto de marcos, haga clic en la flecha de ampliacin que se encuentra en la esquina inferior derecha del inspector de propiedades.

Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
Para establecer el ttulo de un documento de conjunto de marcos:

Seleccione un conjunto de marcos llevando a cabo una de estas operaciones: de la vista Diseo de la ventana de documento.

Haga clic en uno de los bordes que se encuentran entre dos marcos en el conjunto de marcos Haga clic en el borde que rodea a un conjunto de marcos en el panel Marcos.
2

En el campo Ttulo de la barra de herramientas de documento, introduzca un nombre para el documento. Cuando un visitante vea el conjunto de marcos en un navegador, el ttulo aparecer en la barra de ttulo del navegador .

Temas relacionados

Visualizacin y configuracin de las propiedades de un marco en la pgina 291 Configuracin de las propiedades del documento en la pgina 129 Utilizacin de la barra de herramientas Documento en la pgina 52

292 Captulo 18

Control del contenido del marco con vnculos

Para incluir un vnculo en un marco que abra un documento en otro marco, deber establecer el destino del vnculo. El atributo target de un vnculo especifica el marco o ventana en la que se abrir el contenido vinculado. Por ejemplo, si la barra de navegacin est en el marco de la izquierda y desea que el material vinculado aparezca en el marco de contenido principal de la derecha, deber especificar el nombre del marco de contenido principal como destino de todos los vnculos de la barra de navegacin. Cuando un visitante haga clic en un vnculo de navegacin, el contenido especificado se abrir en el marco principal. Para seleccionar el marco en el que debe abrirse un archivo, deber utilizar el men emergente Destino del inspector de propiedades. Podr establecer que un archivo sustituya al documento mostrado en otro marco, que aparezca en lugar de todo el conjunto de marcos, que aparezca en el marco donde estaba el vnculo (si no elige un destino) o que se abra en una nueva ventana de navegador.
Para establecer un marco como destino:

1 2

En la vista Diseo, seleccione texto o un objeto. En el campo Vnculo del inspector de propiedades, lleve a cabo una de estas operaciones:

Haga clic en el icono de carpeta y seleccione el archivo con el que debe establecerse el vnculo. Arrastre el icono de sealizacin de archivo para seleccionar el archivo con el que debe
establecerse el vnculo.
3

En el men emergente Destino, elija el marco o ventana en la que debe aparecer el documento vinculado. Seleccione un marco con nombre para abrir el documento vinculado en el marco seleccionado.
Nota: Los nombres de marcos slo aparecen al editar un documento dentro de un conjunto de marcos. Cuando edita un documento en su propia ventana de documento, fuera del conjunto de marcos, los nombres de marcos no aparecern en el men emergente Destino. Si edita un documento fuera del conjunto de marcos, puede introducir el nombre del marco de destino en el cuadro de dilogo Destino.

Si ha asignado nombres a los marcos en el inspector de propiedades, aparecern en este men.

_blank

abre el documento vinculado en una nueva ventana del navegador, sin modificar la ventana actual. abre el documento vinculado en el conjunto de marcos padre del marco en el que aparece el vnculo, sustituyendo todo el conjunto de marcos. abre el vnculo en el marco actual y sustituye el contenido de dicho marco.

_parent _self _top

abre el documento vinculado en la ventana actual del navegador, eliminando de esta forma todos los marcos.

Sugerencia: Si desea establecer un vnculo con una pgina que no se encuentra en su sitio Web, utilice siempre target="_top" o target="_blank" para que la pgina no parezca formar parte del mismo.

Manipulacin de navegadores que no pueden mostrar marcos

Dreamweaver permite especificar el contenido que se visualizar en navegadores basados en texto y en navegadores grficos antiguos que no admiten marcos. Este contenido se almacena en el archivo de conjunto de marcos, entre etiquetas noframes. Cuando un navegador que no admite marcos carga un archivo de conjunto de marcos, solamente mostrar el contenido que aparece entre etiquetas noframes.

Utilizacin de marcos 293

Nota: El contenido del rea noframes no debera limitarse a un mensaje que diga Debera actualizar a un navegador que admita marcos. Para algunas personas est ms que justificado el uso de un sistema que no permite la visualizacin de marcos. Procure que el contenido sea accesible para dichas personas.

Para ofrecer contenido para navegadores que no admiten marcos:

Elija Modificar > Conjunto de marcos > Editar contenido sin marcos. Dreamweaver borra la vista Diseo, al tiempo que aparecen las palabras Contenido sin marcos en la parte superior de la misma.

Para crear el contenido sin marcos, lleve a cabo una de estas operaciones: documento normal.

En la ventana de documento, escriba o inserte el contenido como lo hara en cualquier Elija Ventana > Inspector de etiquetas, site el punto de insercin entre las etiquetas body que
aparecen dentro de las etiquetas noframes, y escriba el cdigo HTML para el contenido.
3

Elija de nuevo Modificar > Conjunto de marcos > Editar contenido sin marcos para volver a la vista normal del documento de conjunto de marcos.

Utilizacin de comportamientos JavaScript con marcos

Existen varios comportamientos JavaScript y comandos de navegacin especialmente apropiados para su uso con marcos:
Definir texto de marco sustituye el contenido y el formato de un marco por el contenido que usted especifique. Dicho contenido puede incluir cualquier cdigo HTML. Utilice esta accin para mostrar informacin de forma dinmica en un marco. (Consulte Definir texto de marco en la pgina 400.) Ir a URL abre una nueva pgina en la ventana actual o en el marco especificado. Esta accin resulta

especialmente til para cambiar el contenido de dos o ms marcos con un solo clic. (Consulte Ir a URL en la pgina 395.) El comando Insertar barra de navegacin aade una barra de navegacin a la pgina; a continuacin, podr adjuntar comportamientos a las imgenes y establecer las imgenes que se mostrarn dependiendo de las acciones del visitante. Por ejemplo, quizs desee mostrar una imagen de botn en su estado presionado y sin presionar para indicar al visitante qu pgina del sitio est viendo. (Consulte Insercin de una barra de navegacin en la pgina 458.) El comando Insertar men de salto permite configurar una lista de men con vnculos que abren archivos en una ventana del navegador al hacer clic en ellos. Tambin puede definir como destino una ventana o un marco concreto para que se abra en el mismo el documento. (Consulte Insercin de un men de salto en la pgina 455.)

294 Captulo 18

Parte V Adicin de contenido

Utilice las herramientas visuales de Dreamweaver para aadir diversos contenidos a las pginas Web. Aada y aplique formato a elementos como texto, imgenes, colores, pelculas, sonido y otros elementos multimedia. Asegrese de que las personas con discapacidades puedan acceder a las pginas. Esta parte contiene los siguientes captulos:

Parte V

Captulo 19, Insercin y aplicacin de formato al texto Captulo 20, Insercin de imgenes Captulo 21, Integracin de Dreamweaver con otras
aplicaciones

Captulo 22, Insercin de medios Captulo 23, Funciones de accesibilidad de

Dreamweaver

CAPTULO 19 Insercin y aplicacin de formato al texto

Macromedia Dreamweaver MX ofrece varias formas de aadir texto y aplicarle formato en un documento. En este captulo se describe cmo insertar texto, establecer la fuente, el tamao, el color y los atributos de alineamiento. Tambin se describe cmo crear y aplicar sus propios estilos personalizados mediante el uso de estilos HTML y estilos CSS (hoja de estilos en cascada). Este captulo trata los siguientes temas:

Insercin y aplicacin de formato al texto HTML en la pgina 297 Aplicacin de formato al texto en la pgina 299 Utilizacin de estilos HTML para aplicar formato a texto en la pgina 306 Hojas de estilos en cascada en la pgina 311 Conversin de estilos CSS a etiquetas HTML en la pgina 320 Buscar y reemplazar texto en la pgina 322

Insercin y aplicacin de formato al texto HTML

Las opciones de formato de Dreamweaver son similares a las de los programas estndar de tratamiento de texto. Utilice el submen Texto > Formato de prrafo o el men emergente Formato del inspector de propiedades para establecer el estilo predeterminado (Prrafo, Preformateado, Encabezado 1, Encabezado 2, etc.) de un bloque de texto. Para cambiar la fuente, el tamao, el color y el alineamiento del texto seleccionado, use el men Texto o el inspector de propiedades. Para aplicar formato como negrita, cursiva, cdigo, subrayado, etc., utilice el submen Texto > Estilo. Tambin puede combinar varias etiquetas HTML estndar para formar un estilo, denominado estilo HTML. Por ejemplo, puede aplicar formato HTML manualmente utilizando una combinacin de etiquetas y atributos y guardar ese formato como un estilo HTML que se almacenar en el panel Estilos HTML. La prxima vez que quiera aplicar formato a texto utilizando esa combinacin de etiquetas HTML, lo nico que tendr que hacer ser seleccionar el estilo guardado en el panel Estilos HTML. Los estilos HTML son compatibles con casi todos los navegadores Web y permiten un ahorro de tiempo considerable en comparacin con la aplicacin manual de formato de texto.

297

Otro tipo de estilo, denominado CSS (hojas de estilos en cascada), permite aplicar formato a texto y pginas, con la ventaja de que se actualiza de manera automtica. Puede almacenar estilos CSS directamente en el documento o, si desea tener mayor control y flexibilidad, en una hoja de estilos externa. Si adjunta una hoja de estilos externa a varias pginas Web, todas las pginas reflejarn automticamente los cambios realizados en la hoja. Para acceder a estilos CSS, use el panel Estilos CSS o el modo CSS del inspector de propiedades. Para obtener ms informacin sobre la utilizacin del inspector de propiedades para aplicar estilos HTML o CSS, consulte Definicin de opciones de propiedades de texto en la Ayuda de Dreamweaver. La aplicacin manual de formato HTML y los estilos HTML utilizan etiquetas HTML estndar para aplicar el formato (como b, i, font y code) que reconocen los navegadores Web ms utilizados. Los estilos CSS definen el formato del texto de una determinada clase o redefinen el formato de una etiqueta HTML especfica (como h1, h2, p o li). Los estilos CSS slo son compatibles con los navegadores Web Netscape Navigator 4.0 y Microsoft Internet Explorer 4.0 o versiones posteriores. Puede utilizar estilos CSS, estilos HTML y opciones de formato manual HTML en la misma pgina. La aplicacin de formato se realiza de forma jerrquica: la aplicacin de formato manual HTML anula la aplicacin de formato de un estilo HTML o CSS, y los estilos CSS incrustados en un documento anulan los estilos CSS externos. Consulte Hojas de estilos en cascada en la pgina 311. Adicin de texto a un documento Hay varias formas de aadir texto a un documento de Dreamweaver. Puede escribir el contenido directamente en una ventana de documento de Dreamweaver o puede cortar y pegar o importar texto desde otros documentos.
Para aadir texto al documento, lleve a cabo una de estas operaciones:

Escriba texto directamente en la ventana de documento. Copie texto de otra aplicacin, cambie a Dreamweaver, coloque el punto de insercin en la
vista Diseo de la ventana de documento y elija Edicin > Pegar. Dreamweaver no mantiene el formato de texto aplicado en la otra aplicacin, pero conserva los saltos de lnea. Importacin de texto desde otros documentos Puede importar datos de tabla en el documento guardando en primer lugar los archivos (por ejemplo, de Microsoft Excel o de archivos de base de datos) en formato de texto delimitado. Para obtener informacin adicional sobre la importacin y aplicacin de formato a datos de tabla, consulte Importacin de datos de tabla en el Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297. Tambin puede importar texto desde documentos HTML de Microsoft Word. Para obtener informacin sobre la importacin de documentos HTML de Word, consulte Apertura de documentos existentes en la pgina 128.
Para importar datos tabulares:

Elija Archivo > Importar > Importar datos de tabla o elija Insertar > Objetos de tabla > Importar datos de tabla. Aparecer el cuadro de dilogo Importar datos de tabla. Localice el archivo deseado o introduzca su nombre en el cuadro de texto.

298 Captulo 19

Seleccione el delimitador empleado cuando se guard el archivo como texto delimitado. Las opciones disponibles son: Tab, Coma, Punto y coma, Dos puntos y Otro. Si selecciona Otro, aparecer un campo en blanco al lado de la opcin. Introduzca el carcter empleado como delimitador.

3 4

Utilice las restantes opciones para aplicar formato o definir la tabla en la que se importarn los datos. Haga clic en Aceptar cuando termine.

Adicin de espacio entre caracteres HTML slo permite un espacio entre caracteres; para aadir espacio adicional en un documento debe insertar un espacio indivisible. Puede establecer una preferencia para que se agreguen espacios indivisibles en un documento de forma automtica. Para hacerlo, elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y, en la categora General compruebe que la casilla Permitir mltiples espacios consecutivos est marcada.
Para insertar un espacio indivisible, lleve a cabo una de estas operaciones:

En la barra Insertar, seleccione Caracteres y luego haga clic en el icono Espacio indivisible. Elija Insertar > Caracteres especiales > Espacio indivisible. Pulse Control+Mays+Espacio (Windows) o Comando+Mays+Espacio (Macintosh).
Adicin de espaciado de prrafo Dreamweaver funciona de forma similar a muchas aplicaciones de tratamiento de textos: presione Intro (Windows) o Retorno (Macintosh) para crear un nuevo prrafo. Los navegadores Web insertan automticamente una lnea en blanco de espacio entre los prrafos. Puede aadir una nica lnea de espacio entre los prrafos mediante la insercin de un salto de lnea.
Para aadir un retorno de prrafo:

Presione Intro (Windows) o Retorno (Macintosh).

Para aadir un salto de lnea, lleve a cabo una de estas operaciones:

Presione Mays+Intro (Windows) o Mays+Retorno (Macintosh). En la barra Insertar, seleccione Caracteres y luego haga clic en el icono Salto de lnea. Elija Insertar > Caracteres especiales > Salto de lnea. Aplicacin de formato al texto
Puede aplicar formato de texto HTML a una letra o crear un sitio completo utilizando los comandos de Texto > Formato de prrafo o las opciones del inspector de propiedades. Este tipo de formato manual prevalece sobre el establecido por un estilo HTML o CSS. Al aplicar formato de texto HTML se utiliza el inspector de propiedades y los comandos del men Texto, como Texto > Formato de prrafo y Texto > Estilo.

Insercin y aplicacin de formato al texto 299

Temas relacionados

Utilizacin de estilos HTML para aplicar formato a texto en la pgina 306 Creacin de un estilo HTML en la pgina 308 Creacin de un nuevo estilo CSS en la pgina 314 Configuracin y cambio de fuentes y estilos Utilice las opciones del inspector de propiedades o el men Texto para establecer o cambiar las caractersticas de fuente del texto seleccionado. Puede establecer el tipo, estilo (negrita, cursiva) y el tamao de la fuente. Cuando utiliza el inspector de propiedades para aplicar el estilo en negrita o cursiva, Dreamweaver aplica automticamente las etiquetas <strong> o <em>, respectivamente. Si disea pginas para navegadores de la versin 3.0 o anterior, debe cambiar esta preferencia en la categora General del cuadro de dilogo Preferencias (Edicin > Preferencias). Las tamaos de fuente HTML son tamaos relativos, no de puntos. Los usuarios establecen el tamao de puntos de la fuente predeterminada para sus navegadores. ste ser el tamao de fuente que vern cuando elijan Predeterminada o 3 en el inspector de propiedades o el submen Texto > Tamao. Los tamaos 1 y 2 aparecern ms pequeos que el tamao de fuente predeterminado; los tamaos 4 a 7 aparecern ms grandes. Asimismo, las fuentes suelen aparecer con un mayor tamao en Windows que en Macintosh, si bien Macintosh Internet Explorer 5 utiliza el mismo tamao predeterminado que Windows.
Sugerencia: Una forma de asegurar el uso del mismo tamao de fuente consiste en utilizar estilos CSS con el tamao de fuente definido en pxeles. Para obtener ms informacin sobre CSS, consulte Hojas de estilos en cascada en la pgina 311.

Tema relacionado

Modificacin de combinaciones de fuentes en la pgina 301

Para establecer o cambiar las caractersticas de fuente:

1 2

Seleccione el texto. Si no hay texto seleccionado, el cambio se aplicar al texto que escriba a continuacin. Dispone de las opciones siguientes: submen Texto > Fuente. Elija Predeterminada para quitar los tipos de fuente aplicados anteriormente y aplicar la fuente predeterminada al texto seleccionado (la fuente predeterminada del navegador o la fuente asignada a la etiqueta en la hoja de estilos CSS).

Para cambiar la fuente, elija una combinacin de fuentes en el inspector de propiedades o en el

Para cambiar el estilo de fuente, haga clic en Negrita o Cursiva en el inspector de propiedades o
elija un estilo de fuente (Negrita, Cursiva, Subrayado, etc.) en el submen Texto > Estilo.

Para cambiar el tamao de fuente, elija un tamao (de 1 a 7) en el inspector de propiedades o

en el submen Texto > Tamao.

Para aumentar o reducir el tamao del texto seleccionado, elija un tamao relativo (desde + o
1 hasta +4 o 3) en el inspector de propiedades o en el men Texto > Cambio de tamao.

300 Captulo 19

Nota: Estos nmeros indican una diferencia relativa respecto al tamao de la fuente base. El valor predeterminado de la fuente base es 3. Por tanto, un valor de +4 produce un tamao de fuente de 3 + 4, es decir, 7. El valor mximo del tamao de fuente es 7. Si intenta definir uno ms alto, aparecer como 7. Dreamweaver no muestra la etiqueta basefont (que se encuentra en la seccin head ), aunque el tamao de fuente se mostrar correctamente en un navegador. Para comprobarlo, compare el texto definido en 3 con el texto definido en +3.

Modificacin de combinaciones de fuentes Utilice el comando Editar lista de fuentes para establecer las combinaciones de fuentes que aparecen en el inspector de propiedades y el submen Texto > Fuente. Las combinaciones de fuentes determinan cmo muestra un navegador el texto de la pgina Web. Un navegador utiliza la primera fuente de la combinacin que se encuentre en el sistema del usuario; si no est instalada ninguna de las fuentes de la combinacin, el navegador mostrar el texto de acuerdo con las preferencias que tenga definidas.
Para modificar las combinaciones de fuentes:

1 2

Elija Texto > Fuente > Editar lista de fuentes. Seleccione la combinacin de fuentes en la lista de la parte superior del cuadro de dilogo. Las fuentes de la combinacin seleccionada aparecern en la lista Fuentes elegidas, situada en la esquina inferior izquierda del cuadro de dilogo. A la derecha se encuentra una lista con todas las fuentes disponibles instaladas en el sistema.

Dispone de las opciones siguientes: entre las listas Fuentes elegidas y Fuentes disponibles.

Para aadir o quitar fuentes de una combinacin, haga clic en los botones de flecha (<< o >>) Para aadir o quitar una combinacin de fuentes, haga clic, respectivamente, en los botones
ms (+) y menos (-) de la parte superior del cuadro de dilogo.

Para aadir una fuente que no est instalada en el sistema, escriba el nombre de la fuente en el
cuadro de texto situado bajo la lista Fuentes disponibles y haga clic en el botn << para aadirla a la combinacin. Aadir una fuente que no est instalada en el sistema resulta til, por ejemplo, para especificar una fuente slo para Windows cuando desarrolla pginas con Macintosh.

Para desplazarse por la lista de combinaciones de fuentes, haga clic en los botones de flecha de
la parte superior del cuadro de dilogo.
Para aadir una nueva combinacin a la lista de fuentes:

1 2 3

Elija Texto > Fuente > Editar lista de fuentes. Seleccione una fuente de la lista de Fuentes disponibles y haga clic en el botn << para aadir la fuente a la lista de Fuentes elegidas. Repita el paso 2 con cada fuente de la combinacin. Para aadir una fuente que no est instalada en el sistema, escriba el nombre de la fuente en el campo de texto situado bajo la lista Fuentes disponibles y haga clic en el botn << para aadirla a la combinacin. Aadir una fuente que no est instalada en el sistema resulta til, por ejemplo, para especificar una fuente slo para Windows cuando desarrolla pginas con Macintosh.

Insercin y aplicacin de formato al texto 301

Cuando termine de seleccionar fuentes especficas, seleccione una familia genrica de fuentes en el men Fuentes disponibles y haga clic en el botn << para pasar la familia genrica de fuentes a la lista Fuentes elegidas. Las familias genricas de fuentes son: cursiva, fantasa, monoespacio, sans-serif y serif. Si ninguna de las fuentes de la lista Fuentes elegidas est disponible en el sistema del usuario, el texto aparecer en la fuente predeterminada asociada con la familia genrica de fuentes. Por ejemplo, la fuente monoespacio predeterminada en la mayora de los sistemas es Courier.

Aplicacin de formato a prrafos Utilice el men Formato del inspector de propiedades o el submen Texto > Formato de prrafo para aplicar las etiquetas estndar de prrafo y encabezado. Cuando aplica una etiqueta de encabezado a un prrafo, Dreamweaver aade automticamente la siguiente lnea de texto como un prrafo sencillo. Para cambiar esta configuracin, elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y luego, en la categora General, en la seccin Opciones de edicin, compruebe que la casilla Cambiar a prrafo sencillo tras el encabezado no est marcada.
Temas relacionados

Creacin de un estilo HTML en la pgina 308 Definicin de opciones de propiedades de texto (en la Ayuda de Dreamweaver) Definicin de propiedades de tipo CSS (en la Ayuda de Dreamweaver)
Para aplicar una etiqueta de prrafo o encabezado:

1 2

Site el punto de insercin en el prrafo o seleccione parte del texto del prrafo. En el submen Texto > Formato de prrafo o en el men emergente Formato del inspector de propiedades, elija una opcin: La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1 para Encabezado 1, h2 para Encabezado 2, pre para Preformateado, etc.) se aplicar a todo el prrafo.

Elija un formato de prrafo (por ejemplo, Encabezado 1, Encabezado 2, Preformateado, etc.). Elija Ninguno para quitar un formato de prrafo.
Alineamiento del texto Puede alinear texto en la pgina utilizando el inspector de propiedades o el submen Texto > Alinear. Asimismo, puede centrar cualquier elemento en una pgina usando el comando Texto > Alinear > Centro.
Para alinear texto:

1 2

Seleccione el texto que desea alinear o, simplemente, inserte el puntero al principio del texto. Haga clic en una opcin de alineacin (Izquierda, Derecha o Centro) del inspector de propiedades o elija Texto > Alinear y seleccione un comando.

302 Captulo 19

Para centrar elementos:

1 2

Seleccione el elemento que desea centrar (imagen, plug-in, tabla u otro elemento de pgina). Elija Texto > Alinear > Centro.

Nota: Se pueden alinear y centrar bloques completos de texto, pero no partes de un encabezado o de un prrafo.

Sangrar texto El comando Sangra aplica la etiqueta HTML blockquote al prrafo de texto, y aplica sangra a ambos lados de la pgina.
Para aplicar y quitar sangra al texto:

1 2

Site el punto de insercin en el prrafo al que desea aplicar sangra. Haga clic en el botn Sangra o Anular sangra del inspector de propiedades, elija Texto > Sangra o Anular sangra, o elija Lista > Sangra o Anular sangra en el men contextual.

Nota: Puede aplicar varias sangras a un prrafo. Cada vez que utiliza este comando, la sangra del texto aumenta en ambos lados del documento.

Cambio del color del texto Puede cambiar el color del texto seleccionado de modo que el nuevo color prevalezca sobre el color establecido en Propiedades de la pgina. Si no se ha establecido ningn color de texto en Propiedades de la pgina, se utilizar el negro como color predeterminado.
Para cambiar el color del texto:

1 2

Seleccione el texto. Dispone de las opciones siguientes: color del inspector de propiedades.

Elija un color en la paleta de colores vlidos para los navegadores haciendo clic en el selector de Elija Texto > Color. Aparecer el cuadro de dilogo del selector de color del sistema. Seleccione
un color y haga clic en Aceptar.

Escriba el nombre del color o un nmero hexadecimal directamente en el campo del inspector
de propiedades.

Para definir el color predeterminado del texto, utilice el comando Modificar > Propiedades de
la pgina. Consulte Definicin de colores predeterminados de texto en la pgina 131.
Para restablecer el color predeterminado del texto:

1 2

En el inspector de propiedades, haga clic en el cuadro de color para abrir la paleta de colores seguros para la Web. Haga clic en el botn Tachado (el botn cuadrado blanco y atravesado por una lnea roja que se encuentra en la esquina superior derecha).

Insercin y aplicacin de formato al texto 303

Creacin de listas ordenadas y sin ordenar Puede crear listas ordenadas (numeradas), listas sin ordenar (con vietas) y listas de definicin a partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de definicin no utilizan caracteres iniciales como puntos de vieta o nmeros y suelen utilizarse en glosarios o descripciones. Adems, las listas se pueden anidar. Una lista anidada es aqulla que contiene otras listas. Por ejemplo, en algunos casos puede resultar conveniente anidar una lista ordenada o con vietas en otra numerada u ordenada. Para obtener informacin sobre un tipo concreto de lista y otras opciones para toda la lista o un elemento especfico (por ejemplo, restablecer la numeracin, utilizar nmeros romanos en una lista ordenada o establecer vietas cuadradas), consulte Definicin de opciones de propiedades de lista en la Ayuda de Dreamweaver.
Para crear una lista nueva:

En el documento de Dreamweaver, coloque el punto de insercin en el lugar en el que desea aadir la lista y lleve a cabo una de estas operaciones:

Haga clic en el botn Lista ordenada o Lista sin ordenar del inspector de propiedades Elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar (con vietas), Lista
ordenada (numerada) o Lista de definicin. El carcter inicial del elemento especificado de la lista aparecer en la ventana de documento.
2 3

Escriba el texto del elemento de la lista y presione Intro (Windows) o Retorno (Macintosh) para crear otro elemento de la lista. Para terminar la lista, presione dos veces Intro (Windows) o Retorno (Macintosh).

Para crear una lista usando texto existente:

1 2

Seleccione una serie de prrafos para convertirlos en una lista. Haga clic en el botn Lista sin numerar o Lista ordenada del inspector de propiedades o elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar, Lista ordenada o Lista de definicin.

Para crear una lista anidada:

1 2

Seleccione los elementos de lista que desea anidar. Haga clic en el botn Sangra del inspector de propiedades o elija Texto > Sangra. Dreamweaver sangrar el texto y crear una lista distinta con los atributos HTML de la lista original.

Aplique un nuevo estilo o tipo de lista al texto sangrado siguiendo el procedimiento detallado.

Insercin de fechas Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual con el formato que prefiera (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el archivo.
Nota: Las fechas y horas que aparecen en el cuadro de dilogo Insertar fecha no son las actuales y tampoco reflejan las que ver el usuario cuando visite el sitio. Slo son ejemplos de la forma en que se puede presentar esta informacin.

304 Captulo 19

Para insertar la fecha actual en un documento:

1 2

En la ventana de documento, site el punto de insercin en el lugar donde desea insertar la fecha. Lleve a cabo una de las siguientes operaciones:

Elija Insertar > Fecha. En la barra Insertar, seleccione Comn y luego haga clic en el botn Fecha.
3 4

En el cuadro de dilogo que aparece, seleccione el formato de da de la semana, fecha y hora. Si desea que la fecha insertada se actualice cada vez que guarde el documento, seleccione Actualizar automticamente al guardar. Si desea que la fecha se convierta en texto normal cuando se inserte y no se actualice automticamente, desactive esa opcin. Haga clic en Aceptar para insertar la fecha.

Sugerencia: Si ha seleccionado Actualizar automticamente al guardar, puede editar el formato de fecha despus de insertarlo en el documento haciendo clic en el texto formateado y seleccionando Editar formato de fecha en el inspector de propiedades.

Insercin de caracteres especiales Algunos caracteres especiales se representan en HTML mediante un nombre o un nmero, denominado entidad. HTML incluye nombres de entidad para caracteres como el smbolo de copyright (&copy;) el signo & (&amp;) y el smbolo de marca comercial registrada (&reg;). Cada entidad tiene un nombre (como &mdash;) y un equivalente numrico (como &#151;).
Sugerencia: HTML utiliza parntesis angulares <> en el cdigo, pero quiz necesite expresar los caracteres especiales mayor que y menor que sin que Dreamweaver los interprete como cdigo. En este caso, utilice &gt; para mayor que (>) y &it; para menor que (<).

Desgraciadamente, muchos navegadores (especialmente, los productos ms desfasados y de marcas distintas a Navigator e Internet Explorer) no muestran correctamente muchas de las entidades con nombre. Puede insertar varios caracteres especiales (con forma de entidades HTML) utilizando la categora Caracteres de la barra Insertar.
Para insertar un carcter especial en un documento:

1 2

En la ventana de documento, site el punto de insercin en el lugar donde desea insertar un carcter especial. Lleve a cabo una de las siguientes operaciones:

Elija el nombre del carcter en el submen Insertar > Caracteres especiales. En la barra Insertar, seleccione la categora Caracteres y luego haga clic en el carcter que desea.
Sugerencia: Hay muchos otros caracteres especiales. Para seleccionar uno de ellos, elija Insertar > Caracteres especiales > Otro o haga clic en el icono Otro carcter de la barra Insertar, seleccione un carcter y haga clic en Aceptar.

Utilizacin de reglas horizontales Las reglas horizontales (lneas) son tiles para organizar la informacin. Puede separar visualmente el texto y los objetos de una pgina con una o ms reglas.

Insercin y aplicacin de formato al texto 305

Para crear una regla horizontal:

1 2

En la ventana de documento, site el punto de insercin en el lugar donde desea insertar una regla horizontal. Lleve a cabo una de las siguientes operaciones:

Elija Insertar > Regla horizontal. En la barra Insertar, seleccione Comn y luego haga clic en el botn Regla horizontal.
Para modificar una regla horizontal:

1 2

En la ventana de documento, seleccione la regla horizontal. Elija Ventana > Propiedades para abrir el inspector de propiedades y modificar las propiedades que desee.
An

y Al especifican el ancho y el alto de la regla en pxeles o como porcentaje del tamao de la pgina.

Alinear especifica la alineacin de la regla (Predet., Izquierda, Centro o Derecha). Esta configuracin slo es aplicable si el ancho de la regla es inferior al ancho de la ventana del navegador. Sombreado especifica si la regla debe trazarse con sombreado. Desactive esta opcin para trazar la regla con un color slido.

Utilizacin de estilos HTML para aplicar formato a texto

Mediante la configuracin de estilos HTML puede aplicar de forma rpida y adecuada formato de fuente al texto de sus documentos. Los estilos HTML pueden constar de atributos nicos o mltiples de etiqueta de fuente HTML como color, tipo, tamao y otros atributos de formato como negrita o cursiva. Por ejemplo, puede crear un estilo HTML para texto Arial, de tamao 4+, verde y en cursiva. Puede aplicar de forma rpida el estilo seleccionando el texto al que desea aplicar el formato y, seguidamente, eligiendo el estilo HTML en el panel Estilos HTML. Como los estilos HTML slo contienen etiquetas de fuente, se pueden ver en navegadores no compatibles con hojas de estilo en cascada (CSS), como 3.0 y navegadores anteriores. Uno de los inconvenientes de los estilos HTML es que no actualizan automticamente los cambios realizados en el estilo del documento. Si aplica un estilo y posteriormente lo modifica, tendr que volver a aplicar el estilo al texto para que se actualice el formato. A diferencia de los estilos CSS, el formato de los estilos HTML slo afecta al texto al que se aplica o al que se crea usando un estilo HTML seleccionado. Si desea poder cambiar el formato y actualizar automticamente todas las apariciones de ese formato, use estilos CSS (consulte Hojas de estilos en cascada en la pgina 311). Puede utilizar el panel Estilos HTML para configurar los estilos HTML que usa en el sitio y, posteriormente, compartirlos con otros usuarios o sitios locales y remotos. Para obtener informacin, consulte Uso de sus estilos HTML en otros sitios en la pgina 311.
Para mostrar el panel Estilos HTML, lleve a cabo una de estas operaciones:

Elija Ventana > Estilos HTML. Pulse Control + F11 (Windows) o Comando + F11 (Macintosh). Haga clic en el icono Estilos de HTML en el lanzador.

306 Captulo 19

Utilizacin del panel Estilos HTML El panel Estilos HTML muestra los estilos HTML disponibles para el sitio actual.

Existen dos tipos de estilos HTML: Estilos de prrafo y estilos de seleccin. Se pueden identificar por el smbolo que aparece en la primera columna del panel Estilos HTML:
Los estilos de prrafo

estn precedidos de una marca de prrafo y le permiten aplicar formato a

prrafos.
Los estilos de seleccin estn precedidos por una a y le permiten aplicar formato al texto seleccionado. Los dos primeros estilos del panel Estilos HTML, Borrar estilo de la seleccin y Borrar estilo del prrafo, le permiten eliminar o aplicar todas las etiquetas de formato del texto que seleccione.

En el panel Estilos HTML que se muestra, observe el estilo Negrita. Un signo ms (+) delante del estilo indica que ste aade formato al texto al que se aplica. Si un estilo no tiene este signo ms, se borrar cualquier estilo existente antes aplicar el estilo seleccionado. Por ejemplo, el estilo HTML "a+ Red" simplemente aade el rojo a cualquier formato que ya se haya aplicado al texto seleccionado mientras que el estilo HTML "nfasis" borra cualquier formato existente antes de aplicarse.
Para ver los atributos de estilo de un estilo HTML existente:

1 2

En el panel Estilos HTML, seleccione un estilo. En el panel Estilos HTML, haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Editar en el men contextual o haga doble clic en el estilo HTML y elija Editar en el men contextual. En el cuadro de dilogo Definir estilo HTML, especifique la configuracin del estilo. Las opciones de Aplicar a determinan si el estilo se aplica al texto seleccionado (Seleccin) o al bloque de texto actual (Prrafo). Las opciones de Al aplicar determinan si la configuracin del estilo se aade al formato de texto original (Aadir a estilo existente) o se elimina del formato existente y se sustituye por la nueva configuracin (Borrar estilo existente).

Para aplicar un estilo HTML existente:

En el panel Estilos HTML, seleccione un estilo.

Si la casilla de verificacin Aplicacin automtica de la parte inferior del panel est

seleccionada, haga clic en el estilo.

Si no est seleccionada, haga clic en el estilo y, a continuacin, en Aplicar.

Insercin y aplicacin de formato al texto 307

Para borrar formato de texto en el documento:

1 2

Seleccione el texto formateado. En el panel Estilos HTML, haga clic en Borrar estilo del prrafo o Borrar estilo de la seleccin. Borrar estilo del prrafo elimina el formato del bloque de texto actual en el documento. Borrar estilo de la seleccin elimina el formato del texto seleccionado.

Nota: Puede utilizar Borrar estilo del prrafo y Borrar estilo de la seleccin para eliminar todo el formato (salvo el formato CSS), independientemente de cmo se aplic originalmente (por ejemplo, a travs del panel Estilos HTML o del inspector de propiedades).

Para eliminar un estilo del panel Estilos HTML:

1 2 3

En el panel Estilos HTML, desactive la casilla de verificacin para inhabilitar la opcin Aplicacin automtica. Seleccione un estilo HTML. Haga clic en el icono Eliminar estilo (papelera de reciclaje) situado en la esquina inferior derecha del panel.

Creacin de un estilo HTML Puede crear estilos de dos formas: aplicando formato al texto del documento y creando un estilo basado en el texto seleccionado, o creando un estilo en el panel Estilos HTML (seleccionando los atributos de formato que desea aplicar).
Para crear un estilo HTML nuevo:

En el panel Estilos HTML, haga clic en el icono Nuevo estilo. Tambin puede elegir Texto > Estilos HTML > Nuevo estilo. Aparecer el cuadro de dilogo Definir estilo HTML.

En el cuadro de texto Nombre, introduzca un nombre para el estilo.

308 Captulo 19

En Aplicar a, seleccione cmo desea aplicar el estilo llevando a cabo una de estas operaciones:

Para establecer un estilo de seleccin, elija Seleccin. Para establecer un estilo de prrafo, elija Prrafo.
Nota: Un estilo de prrafo se aplica a todo el bloque de texto en el que est situado el punto de insercin, independientemente de qu parte del texto est seleccionada.

En la opcin Al aplicar, seleccione si desea aplicar el estilo HTML adems del estilo existente del texto o el prrafo seleccionado o si prefiere borrar el formato de la seleccin o el prrafo y sustituirlo por el nuevo estilo.
Nota: La jerarqua en la aplicacin de estilos es la siguiente: los estilos HTML tienen prioridad sobre los estilos CSS, que a su vez tienen prioridad sobre los estilos CSS externos. Para obtener ms informacin, consulte Hojas de estilos en cascada en la pgina 311.

5 6

En Atributos de fuente, utilice los mens desplegables para seleccionar las opciones de formato que desea aplicar. Si quiere crear un estilo de prrafo, seleccione una etiqueta de prrafo (por ejemplo, Prrafo, Encabezado 1 o Preformateado) en el men desplegable Formato del apartado Atributos de prrafo. En Alineacin, haga clic en los botones Alinear a la izquierda, Alinear al centro o Alinear a la derecha dependiendo del tipo de alineamiento que desee. Haga clic en Aceptar. El estilo se aadir a la lista Estilos HTML.

7 8

Para crear un estilo HTML nuevo basado en texto existente:

En el documento, seleccione o cree texto que tenga el formato que desea utilizar para el nuevo estilo HTML.
Sugerencia: Puede utilizar el inspector de propiedades para ver y aplicar formato y posteriormente guardarlo como un estilo HTML.

En el panel Estilos HTML, haga clic en el icono Nuevo estilo (+) situado en la esquina inferior derecha. Aparecer el cuadro de dilogo Definir estilo HTML. En el cuadro de texto Nombre, introduzca un nombre para el estilo. En Aplicar a, seleccione cmo desea aplicar el estilo llevando a cabo una de estas operaciones:

3 4

Para establecer un estilo de seleccin, elija Seleccin. Para establecer un estilo de prrafo, elija Prrafo.
Nota: Un estilo de prrafo se aplica a todo el bloque de texto en el que est situado el punto de insercin, independientemente de qu parte del texto est seleccionada.

En la opcin Al aplicar, seleccione si desea aplicar el estilo HTML adems del estilo existente del texto o el prrafo seleccionado o si prefiere borrar el formato de la seleccin o el prrafo y sustituirlo por el nuevo estilo.
Nota: La jerarqua en la aplicacin de estilos es la siguiente: los estilos HTML tienen prioridad sobre los estilos CSS, que a su vez tienen prioridad sobre los estilos CSS externos. Para obtener ms informacin, consulte Hojas de estilos en cascada en la pgina 311.

Insercin y aplicacin de formato al texto 309

Si quiere crear un estilo de prrafo, seleccione una etiqueta de prrafo (por ejemplo, Prrafo, Encabezado 1 o Preformateado) en el men desplegable Formato del apartado Atributos de prrafo. En Alineacin, haga clic en los botones Alinear a la izquierda, Alinear al centro o Alinear a la derecha dependiendo del tipo de alineamiento que desee. Haga clic en Aceptar.

7 8

Aplicacin de un estilo HTML Para aplicar un estilo lo nico que tiene que hacer es seleccionar el texto o prrafo al que desea aplicar el formato y, seguidamente, elegir el estilo en el panel Estilos HTML.
Para aplicar un estilo HTML:

1 2

En la esquina inferior izquierda del panel Estilos HTML, compruebe que la opcin Aplicar est seleccionada para aplicar automticamente el estilo que seleccione. En la ventana de documento, lleve a cabo una de las siguientes operaciones para seleccionar el texto al que desea aplicar el formato: prrafo.

Coloque el punto de insercin en cualquier lugar del prrafo al que va a aplicar el estilo de Utilice el cursor para seleccionar el texto al que desea aplicar el estilo de la seleccin.
3

En el panel Estilos HTML, haga clic en el estilo HTML que desea aplicar al texto. El texto se actualizar automticamente en la ventana de documento.

Edicin de un estilo HTML Al editar un estilo HTML, Dreamweaver no actualiza automticamente el texto formateado anteriormente con ese estilo. Para actualizar el estilo del texto al que ha aplicado formato anteriormente, debe volver a aplicar el estilo de forma manual.
Para editar un estilo HTML existente:

1 2

Compruebe que no hay texto seleccionado en la ventana de documento. En el panel Estilos HTML, compruebe que la casilla de verificacin Aplicacin automtica est desactivada. Si est activada, el estilo HTML se aplicar cuando lo seleccione en el panel Estilos HTML. En el panel Estilos HTML, lleve a cabo una de estas operaciones: (Macintosh) en el estilo y, a continuacin, elija Editar en el men contextual.

Haga clic con el botn derecho del ratn (Windows) o haga clic mientras pulsa la tecla Control Haga doble clic en el estilo.
Aparecer el cuadro de dilogo Definir estilo HTML.
4 5

En el cuadro de dilogo, defina las siguientes opciones de atributo de estilo: Para restablecer las opciones predeterminadas, haga clic en Borrar.

310 Captulo 19

Uso de sus estilos HTML en otros sitios Puede utilizar el panel Estilos HTML para registrar los estilos HTML que usa en el sitio y, posteriormente, compartirlos con otros usuarios o sitios locales y remotos. Los estilos HTML se almacenan automticamente en la carpeta local Library del sitio, en un archivo llamado Styles.xml. Puede copiar este archivo desde la carpeta Library de un sitio local a la carpeta Library de otro sitio local y reutilizar de esta forma los estilos que ya ha creado.
Nota: Cada sitio contiene un archivo Styles.xml; por ello, si ha creado estilos HTML nuevos en el sitio en el que est copiando un archivo Styles.xml file, ste sustituir al archivo existente. No perder los cambios de formato que ya ha aplicado y podr volver a crear los estilos simplemente seleccionando el texto del documento y definiendo un estilo HTML nuevo.

Para compartir los estilos HTML con otros sitios o usuarios:

1 2

Elija Ventana > Sitio o Sitio > Archivos del sitio para abrir el panel Sitio en Ver archivos del sitio. En el panel Sitio, localice y abra la carpeta Library. Observe que hay un archivo llamado styles.xml. Este archivo contiene todos los estilos HTML del sitio. Puede colocar, desproteger, proteger y copiar este archivo como lo hara con cualquier otro archivo del sitio. Tambin puede crear Design Notes para el archivo styles.xml. Primero debe proteger el archivo styles.xml antes de crear o editar un estilo para un sitio remoto. Para obtener ms informacin sobre el uso de estas opciones, consulte Configuracin de una carpeta remota en la pgina 77.

Hojas de estilos en cascada

Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que controlan el aspecto del contenido de una pgina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una pgina, desde la posicin precisa de elementos hasta el diseo de fuentes y estilos concretos. Los estilos CSS permiten definir muchas propiedades que no se pueden controlar utilizando slo HTML. Por ejemplo, puede asignar vietas de lista personalizadas y especificar distintos tamaos y unidades de fuente (pxeles, puntos, etc.). Si utiliza estilos CSS y define el tamao de fuente en pxeles, conseguir un tratamiento ms coherente del diseo y el aspecto de la pgina en mltiples navegadores. Adems del formato del texto, puede controlar el formato y la posicin de elementos de nivel de bloque (block-level) de una pgina Web. Por ejemplo, puede ajustar mrgenes, bordes, texto flotante sobre texto fijo, etc. Una regla de estilo CSS consta de dos partes: el selector y la declaracin. El selector es el nombre del estilo (TR o P, por ejemplo) y la declaracin define qu elementos forman el estilo. La declaracin, a su vez, consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica). La expresin en cascada hace referencia a la posibilidad de aplicar varias hojas de estilos a una misma pgina Web. Por ejemplo, puede crear una hoja de estilos que aplique color y otra que aplique los mrgenes. Puede aplicar las dos a la misma pgina y crear as el diseo que desea. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automticamente.

Insercin y aplicacin de formato al texto

311

En Dreamweaver, se utiliza el panel Estilos CSS para crear, ver y adjuntar atributos de estilo a los documentos. Para obtener informacin sobre el uso del panel Estilos CSS, consulte Utilizacin del panel Estilos CSS en la pgina 312. Adems de los estilos y de las hojas de estilos que crea, puede usar hojas de estilos suministradas con Dreamweaver para aplicarlas a los documentos. Consulte Creacin de un documento basado en un archivo de diseo de Dreamweaver en la pgina 125. Puede definir los siguientes tipos de hojas de estilos CSS en Dreamweaver:

Los estilos CSS personalizados, tambin llamados estilos de clase, le permiten configurar
atributos de estilo a cualquier rango o bloque de texto. Consulte Aplicacin de un estilo CSS personalizado (clase) en la pgina 315.

Los estilos de etiquetas HTML redefinen el formato de una determinada etiqueta, como h1.

Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con dicha etiqueta se actualiza inmediatamente.

Los estilos del selector CSS redefinen el formato de una determinada combinacin de etiquetas
(por ejemplo, td h2 se aplica cada vez que aparece un encabezado h2 dentro de una celda de tabla) o de todas las etiquetas que contienen un atributo id especfico (por ejemplo, #miEstilo se aplica a todas las etiquetas que contienen el par atributo-valor ID=miEstilo).

Las hojas de estilos CSS residen en el rea head del documento. Los estilos CSS pueden definir los atributos de formato de etiquetas HTML o rangos de texto identificados mediante un atributo class. Dreamweaver MX reconoce los estilos definidos en documentos existentes siempre que se ajusten a las directrices de los estilos CSS.
Sugerencia: Para mostrar la gua de referencia CSS de OReilly incluida con Dreamweaver, haga clic en el botn Referencia de la barra de herramientas y elija OReilly CSS Reference en el men desplegable.

La aplicacin manual de formato HTML prevalece sobre el formato aplicado con estilos CSS (o HTML). Para que los estilos CSS controlen el formato de un prrafo, deber quitar todos los estilos HTML y el formato HTML manual. La mayora de los atributos de estilo que aplique se pueden ver en la ventana de documento. Tambin puede obtener una vista previa del documento en la ventana del navegador para comprobar el resultado. Algunos de los atributos de estilo CSS se reproducen de forma distinta en Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0, y otros no son compatibles actualmente con ningn navegador. Mientras trabaja en el panel Estilos CSS, puede usar la funcin de Dreamweaver Hoja de estilos de tiempo de diseo. Esta funcin le permite ocultar o mostrar los atributos de hoja de estilos mientras disea una pgina con Dreamweaver (para poder ver, por ejemplo, un documento con una hoja de estilos diseada para Navigator o para Internet Explorer). Para obtener informacin sobre el uso de las Hojas de estilos en tiempo de diseo, consulte Utilizacin de hojas de estilos de tiempo de diseo en la pgina 318. Utilizacin del panel Estilos CSS El panel Estilos CSS se utiliza para crear, ver las propiedades y aplicar los estilos CSS a los elementos de un documento.
Para abrir el panel Estilos CSS, lleve a cabo una de estas operaciones:

Elija Ventana > Estilos CSS. Pulse Mays+F11.

312 Captulo 19

Los botones de opcin Aplicar estilos y Editar estilos situados en la parte superior del panel Estilos CSS le permiten seleccionar distintas vistas de los estilos CSS asociados al documento actual. La vista Aplicar estilos se utiliza para seleccionar un estilo de clase y aplicarlo a un elemento del documento. Esta vista slo muestra los estilos personalizados (de clase). Los estilos HTML redefinidos y los estilos del selector no se muestran en este panel. Como estn asociados a una etiqueta HTML, sus atributos de estilo se aplican automticamente a cualquier etiqueta del documento afectada por el estilo definido. Por ejemplo, si define atributos de estilo para la etiqueta table, la tabla de su documento se actualizar automticamente con las definiciones de estilo que haya seleccionado.

El vista Editar estilos le permite visualizar la definicin de los estilos asociados al documento actual. Esta vista muestra la definicin de los estilos CSS personalizados (de clase), las etiquetas HTML redefinidas y los estilos CSS del selector. Tambin puede utilizar la vista Editar estilos para visualizar las Hojas de estilos de tiempo de diseo que ha aplicado al documento.

Al crear o adjuntar hojas de estilos CSS, el nombre y los atributos del estilo aparecern en la vista Editar estilos del panel Estilos CSS. Esta vista muestra una lista de los selectores definidos en todas las etiquetas de estilo y hojas de estilos importadas o vinculadas externamente. Aplicar estilos le permite visualizar los estilos aplicados en el documento actual, as como los estilos disponibles en una hoja de estilos externa adjunta.

Insercin y aplicacin de formato al texto 313

Cuando se crea un estilo personalizado (clase), aparece en el panel Estilos CSS y en el submen Texto > Estilos CSS. Los botones que se muestran a continuacin se encuentran en la parte inferior del panel Estilos CSS:

Adjuntar hoja de estilos abre el cuadro de dilogo Vincular hoja de estilos externa. Seleccione una hoja de estilos externa para adjuntar o para importar al documento actual. Para obtener informacin sobre cmo adjuntar una hoja de estilos externa, consulte Creacin y establecimiento de vnculos con una hoja de estilos CSS externa en la pgina 316. Nuevo estilo CSS abre el cuadro de dilogo Nuevo estilo CSS. Puede utilizar el cuadro de dilogo Nuevo estilo CSS para seleccionar el tipo de estilo que va a crear, por ejemplo, para crear un estilo de clase, redefinir una etiqueta HTML o definir un selector CSS. Para obtener informacin sobre la creacin de un nuevo estilo, consulte Creacin de un nuevo estilo CSS en la pgina 314. Editar hoja de estilos abre

el cuadro de dilogo Editar hoja de estilos. Edite los estilos en el documento actual o en una hoja de estilos externa. Para obtener informacin sobre la actualizacin de una hoja de estilos, consulte Edicin de un estilo CSS en la pgina 317.

Eliminar estilo CSS elimina el estilo seleccionado del panel Estilos CSS, as como el formato de cualquier elemento al que se haya aplicado dicho estilo.
Nota: Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) en el panel Estilos CSS para abrir un men contextual de opciones de trabajo con comandos de la hoja de estilos CSS.

Creacin de un nuevo estilo CSS Cree un estilo CSS para automatizar la aplicacin de formato a etiquetas HTML o a rangos de texto identificados mediante un atributo class.
Para crear un estilo CSS nuevo:

Site el punto de insercin en el documento y lleve a cabo una de las siguientes operaciones para abrir el cuadro de dilogo Nuevo estilo CSS. situado en la parte inferior derecha del panel.

En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en el botn Nuevo estilo CSS (+) Si es necesario, en el inspector de propiedades, haga clic en el botn Alternar modos CSS/
HTML para cambiar al Modo CSS y, a continuacin, en el men emergente Estilo CSS, seleccione Nuevo estilo CSS.

Elija Texto > Estilos CSS > Nuevo estilo CSS.

Aparecer el cuadro de dilogo Nuevo estilo CSS.

314 Captulo 19

Defina el tipo de estilo CSS que desea crear: bloque de texto, seleccione Crear estilo person. (clase) y escriba el nombre del estilo en el campo Nombre.
Nota: Los nombres de estilos personalizados (clase) deben comenzar por un punto y pueden contener cualquier combinacin alfanumrica. Por ejemplo, .miencabezado1. Si no introduce el punto inicial, Dreamweaver lo har de forma automtica.

Para crear un estilo personalizado que se pueda aplicar como atributo clase a un rango o un

Para redefinir el formato predeterminado de una etiqueta HTML especfica, seleccione

Redefinir etiqueta HTML. En el campo Etiqueta, introduzca una etiqueta HTML o elija una en el men emergente.

Para redefinir el formato predeterminado de una combinacin concreta de etiquetas que

contengan un cdigo especfico de atributo Id, seleccione Usar selector CSS. En el campo Selector, introduzca una o ms etiquetas HTML o eljalas en el men emergente. Los selectores disponibles en el men emergente son a:activos, a:activable, a:vnculo y a:visitado. Seleccione la ubicacin donde se definir el estilo:

Para crear una hoja de estilos externa, elija Nuevo archivo de hoja de estilos. Para incrustar el estilo en el documento actual, seleccione Slo este documento.
4

Haga clic en Aceptar. Aparecer el cuadro de dilogo Definicin de estilos. Elija las opciones de estilo que desea establecer para el estilo CSS nuevo. Cuando termine de configurar los atributos de estilo, haga clic en Aceptar.

5 6

Para obtener informacin sobre la configuracin de estilos CSS especficos, consulte los siguientes temas en la Ayuda de Dreamweaver:

Definicin de propiedades de tipo CSS Definicin de propiedades de fondo de estilos CSS Definicin de propiedades de bloque de estilos CSS Definicin de propiedades de cuadro de estilos CSS Definicin de propiedades de borde de estilos CSS Definicin de propiedades de lista de estilos CSS Definicin de propiedades de posicin de estilos CSS Definicin de propiedades de extensiones de estilos CSS

Aplicacin de un estilo CSS personalizado (clase) Los estilos CSS personalizados (clase) son los nicos que se pueden aplicar a cualquier texto del documento, independientemente de las etiquetas que controlen dicho texto. Todos los estilos personalizados (clase) asociados al documento actual se muestran en la vista Aplicar estilos del panel Estilos CSS y en el modo CSS del inspector de propiedades de texto.

Insercin y aplicacin de formato al texto 315

La mayora de los estilos se actualiza inmediatamente; sin embrago, es recomendable que obtenga una vista previa de su pgina en un navegador para comprobar que el estilo se ha aplicado correctamente. Cuando se aplican dos o ms estilos CSS al mismo texto, stos pueden entrar en conflicto y producir resultados imprevistos. Consulte Estilos en conflicto en la pgina 319 para obtener ms informacin.
Para aplicar un estilo CSS personalizado:

En el documento, seleccione el texto al que desea aplicar un estilo CSS. Site el punto de insercin en un prrafo para aplicar el estilo a todo el prrafo. Si selecciona un rango de texto dentro de un prrafo, el estilo CSS slo afectar al rango seleccionado. Para especificar la etiqueta exacta a la que se deber aplicar el estilo CSS, seleccinela con el selector de etiquetas situado en la parte inferior izquierda de la ventana de documento.

Para aplicar un estilo de clase, lleve a cabo una de estas operaciones: en la lista Estilos CSS, haga clic en el nombre del estilo que desea aplicar.

En el panel Estilos CSS (Ventana > Estilos CSS), seleccione Aplicar estilos y, a continuacin, Si es necesario, en el inspector de propiedades, haga clic en el botn Alternar modos CSS/
HTML para cambiar al Modo CSS y, a continuacin, en el men emergente Estilo CSS, seleccione el estilo de clase que desea aplicar.

En la ventana de documento, haga clic con el botn derecho (Windows) o presione la tecla
Control y haga clic (Macintosh) sobre el texto seleccionado y, en el men contextual que aparece, elija Estilos CSS y seleccione el estilo que desea aplicar.

Seleccione Texto > Estilos CSS y, en el submen, seleccione el estilo que desea aplicar.
Para borrar un estilo personalizado de una seleccin:

Seleccione el objeto o texto del que desea eliminar el estilo y lleve a cabo una de las siguientes operaciones:

Si es necesario, en el inspector de propiedades, haga clic en el botn Alternar modos CSS/

HTML para cambiar al Modo CSS y, a continuacin, en el men emergente Estilo CSS, seleccione Sin estilo CSS.

En el panel Estilos CSS, seleccione la vista Aplicar estilos y, a continuacin, elija Sin estilo
CSS. Creacin y establecimiento de vnculos con una hoja de estilos CSS externa Una hoja de estilos CSS es un archivo de texto externo que contiene estilos y especificaciones de formato. Si edita una hoja de estilos CSS externa, todos los documentos vinculados a esa hoja se actualizarn para reflejar los cambios. Puede exportar los estilos CSS de un documento para crear una nueva hoja de estilos CSS, as como adjuntar o vincular dichos estilos a una hoja de estilos externa para aplicarlos. Adems de las hojas de estilos CSS que crea, puede usar hojas de estilos CSS suministradas con Dreamweaver para adjuntarlas a las pginas de un sitio. Para obtener informacin sobre la utilizacin de hojas de estilos de diseo suministradas con Dreamweaver, consulte Creacin de un documento basado en un archivo de diseo de Dreamweaver en la pgina 125.

316 Captulo 19

Para obtener informacin sobre cmo aplicar un estilo, consulte Aplicacin de un estilo CSS personalizado (clase) en la pgina 315.
Para establecer vnculos o importar una hoja de estilos CSS externa:

Abra el panel Estilos CSS llevando a cabo una de estas operaciones:

Elija Ventana > Estilos CSS Pulse Mays + F11 Haga clic en el icono Estilos CSS en el lanzador.
2

En panel Estilos CSS, haga clic en el botn Adjuntar hoja de estilos. Aparecer el cuadro de dilogo Vincular hoja de estilos externa. En el cuadro de dilogo Vincular hoja de estilos externa, lleve a cabo una de estas operaciones: CSS externa o introduzca la ruta de la hoja de estilos en cuadro Archivo/URL.

Haga clic en Examinar (Windows) o Seleccionar (Macintosh) para localizar una hoja de estilos
4

En Aadir como, seleccione una de las siguientes opciones: esta forma se crea una etiqueta de vnculo href en el cdigo HTML y conduce al URL al lugar en el que se encuentra la hoja de estilos publicada. Este mtodo es compatible con Microsoft Internet Explorer y Netscape Navigator.

Para crear un vnculo entre el documento actual y la hoja de estilos externa, elija Vincular. De

Para utilizar una hoja de estilos externa como referencia, elija Importar. De esta forma se crea
una etiqueta @import en el cdigo HTML y conduce al URL al lugar en el que se encuentra la hoja de estilos publicada. Este mtodo no funciona con Netscape Navigator.
5

Haga clic en Aceptar El nombre de la hoja de estilos CSS externa aparece en la vista Editar estilos del panel Estilos CSS, y los estilos personalizados (clase) lo hacen en la vista Aplicar estilos, precedidos del identificador de hoja de estilos externa.

Edicin de un estilo CSS Puede editar fcilmente tanto estilos internos como externos que haya aplicado al documento. En la vista Editar estilos, seleccione el estilo que desea modificar y abra el cuadro de dilogo Editar hoja de estilos para modificarlo. Al editar una hoja de estilos CSS que controla el texto del documento, cambiar inmediatamente el formato de todo el texto controlado por dicha hoja de estilos. La edicin de una hoja de estilos externa afecta a todos los documentos vinculados a ella. Puede configurar un editor externo para la edicin de las hojas de estilos. Para obtener informacin sobre la configuracin de un editor externo, consulte Inicio de un editor externo de archivos multimedia en la pgina 352.
Nota: Si tiene instalado TopStyle, un editor CSS de Bradbury Software, Dreamweaver lo detectar automticamente y lo establecer como su editor externo para archivos .css. Dreamweaver suministra una copia de evaluacin de TopStyle.

Insercin y aplicacin de formato al texto 317

Para editar un estilo CSS:

1 2

En el panel Estilos CSS, haga clic en el botn de opcin Editar estilos para ver los estilos disponibles del documento actual. Haga clic en el estilo que desea editar para seleccionarlo y luego lleve a cabo una de las siguientes operaciones:

Haga doble clic en el estilo seleccionado. Haga clic con el botn derecho del ratn (Windows) o haga clic mientras pulsa la tecla Control
(Macintosh) y, a continuacin elija Editar.

Haga clic en el botn Editar hoja de estilos situado en la parte inferior del panel Estilos CSS.
Se abrir el cuadro de dilogo Definicin de estilos CSS.
3

Realice los cambios que estime oportunos y haga clic en Aceptar.

Edicin de una hoja de estilos CSS Una hoja de estilos CSS suele incluir uno o varios estilos. Puede editarlos por separado en una hoja de estilos CSS (consulte Edicin de un estilo CSS en la pgina 317), pero en ciertas ocasiones querr editar varios estilos. El cuadro de dilogo Editar hoja de estilos le permite trabajar con hojas de estilos de distintas maneras. Puede utilizar este cuadro para vincular a una hoja de estilos CSS, para crear una nueva, para editar una existente o para duplicar o eliminar una hoja de estilos CSS.
Para editar una hoja de estilos CSS:

1 2

En el panel Estilos CSS, seleccione Editar estilos. En la lista Estilos, haga clic en la hoja de estilos que desea editar para seleccionarla y luego lleve a cabo una de las siguientes operaciones:

Haga clic en el botn Editar hoja de estilos situado en la parte inferior del panel Estilos CSS. Haga clic con el botn derecho sobre la hoja de estilos y seleccione Editar hoja de estilos. En el
cuadro de dilogo que aparece a continuacin, elija la hoja de estilos que desea editar y haga clic en Editar. Se abrirn los estilos para la hoja de estilos CSS seleccionada.
3

En el cuadro de dilogo, seleccione el estilo que desea editar y haga clic en Editar. Aparecer el cuadro de dilogo Definicin de estilos CSS. Modifique los estilos como desee y haga clic en Aceptar.

Utilizacin de hojas de estilos de tiempo de diseo Las hojas de estilos de tiempo de diseo le permiten mostrar u ocultar el diseo aplicado por una hoja de estilos CSS mientras trabaja con un documento de Dreamweaver. Por ejemplo, puede utilizar esta opcin para aprovechar o evitar el efecto de las hojas de estilos exclusivas de Macintosh o Windows mientras disea una pgina. Las Hojas de estilos de tiempo de diseo slo se aplican mientras trabaja en el diseo de un documento de Dreamweaver; cuando la pgina se muestra en la ventana de un navegador, aparecen slo los estilos que realmente estn adjuntos o incrustados en el documento.

318 Captulo 19

Para mostrar u ocultar la hoja de estilos CSS de tiempo de diseo:

Abra el cuadro de dilogo Hojas de estilos de tiempo de diseo llevando a cabo una de estas operaciones: Hoja de estilos de tiempo de diseo.

Haga clic con el botn derecho en el panel Estilos CSS y, en el men contextual, seleccione Elija Texto > Estilos CSS > Hojas de estilos de tiempo de diseo.
2

En el cuadro de dilogo, defina las opciones para que se muestre o se oculte la hoja de estilos seleccionada: sobre Mostrar slo en tiempo de diseo. En el cuadro de dilogo Seleccionar una hoja de estilos, vaya a la hoja de estilos CSS que desea mostrar.

Para mostrar una hoja de estilos de tiempo de diseo, haga clic en el botn ms (+) situado Para mostrar una hoja de estilos de tiempo de diseo, haga clic en el botn ms (+) situado
sobre Mostrar slo en tiempo de diseo. En el cuadro de dilogo Seleccionar una hoja de estilos, vaya a la hoja de estilos CSS que desea mostrar.

Para eliminar una hoja de estilos de cualquier lista, haga clic en la hoja de estilos que desea
eliminar y pulse el botn menos () correspondiente.
3

Haga clic en Aceptar para cerrar el cuadro de dilogo.

El panel Estilos CSS se actualiza con el nombre de la hoja de estilos seleccionada y con un indicador, oculto o diseo, que refleja el estado de la hoja de estilos. Exportacin de estilos para crear una hoja de estilos CSS Puede exportar estilos desde un documento para crear una nueva hoja de estilos CSS. A continuacin, puede establecer vnculos con otros documentos para aplicar estos estilos.
Para exportar estilos CSS desde un documento y crear una hoja de estilos CSS:

Elija Archivo > Exportar > Exportar estilos CSS o elija Texto > Exportar hoja de estilos. Aparecer el cuadro de dilogo Exportar estilos como archivo CSS. Introduzca un nombre para el estilo y haga clic en Guardar. El estilo se guardar como una hoja de estilos CSS.

Estilos en conflicto Cuando se aplican dos o ms estilos CSS al mismo texto, stos pueden entrar en conflicto y producir resultados imprevistos. Los navegadores aplican atributos de estilo de acuerdo con las reglas siguientes:

Si se aplican dos estilos al mismo texto, el navegador muestra todos los atributos de ambos
estilos a menos que entren en conflicto. Por ejemplo, un estilo puede especificar azul como color de texto y el otro estilo puede especificar rojo.

Si los atributos de dos estilos aplicados al mismo texto entran en conflicto, el navegador
mostrar el atributo del estilo ms interno (el ms prximo al texto).

Si hay un conflicto directo, los atributos de estilos CSS (estilos aplicados con el atributo class)
prevalecern sobre los atributos correspondientes a estilos de etiquetas HTML.

Insercin y aplicacin de formato al texto 319

En el ejemplo siguiente, el estilo definido para h1 podra especificar la fuente, el tamao y el color de todos los prrafos h1, pero el estilo CSS personalizado .Blue aplicado a este prrafo prevalece sobre la configuracin de color del estilo H1. El segundo estilo CSS personalizado .Red prevalece sobre .Blue porque se encuentra dentro del estilo .Blue.
<h1><span class="Blue">Este prrafo est controlado por el estilo personalizado .Blue y el estilo de la etiqueta HTML h1.<span class="Red">Excepto esta frase, que est controlada por el estilo .Red.</span> Ahora volvemos al estilo .Blue.</span></h1>

Conversin de estilos CSS a etiquetas HTML

Si ha utilizado estilos CSS para especificar opciones de formato de texto (como familia, tamao, color y decoracin de fuentes) y, posteriormente, decide que desea que las opciones de formato se puedan ver en un navegador 3.0, puede utilizar el comando Archivo > Convertir > Compatible con navegador 3.0 para convertir toda la informacin posible de estilos a etiquetas HTML.
Nota: No se pueden convertir todos los estilos CSS a HTML, pues las etiquetas HTML no cubren ni reconocen todos los atributos posibles en CSS.

Para convertir un archivo que utiliza estilos CSS en un archivo compatible con navegadores 3.0:

1 2

Elija Archivo > Convertir > Compatible con navegador 3.0. En el cuadro de dilogo que aparece, seleccione Estilos CSS a formato HTML. Si elige la opcin Capas a tabla, Dreamweaver reemplazar todas las capas por una sola tabla que conservar la posicin original. Los estilos CSS se sustituyen, si es posible, por etiquetas HTML como b y font. Todo el formato CSS que no se pueda convertir a HTML ser eliminado. Consulte Tabla de conversin de CSS a formato HTML en la pgina 320 para obtener informacin sobre los estilos que se convierten y los que se eliminan.

Haga clic en Aceptar. Dreamweaver abrir el archivo convertido en una ventana nueva y sin ttulo.

Nota: Es imprescindible realizar este procedimiento de conversin cada vez que cambia el archivo original para actualizar el archivo compatible con navegadores 3.0. Por este motivo, recomendamos no llevar a cabo la operacin hasta estar completamente satisfecho con el archivo original.

Tabla de conversin de CSS a formato HTML Los atributos CSS que figuran en la tabla siguiente se convierten a formato HTML con el comando Archivo > Convertir > Compatible con navegador 3.0. (Consulte Conversin de estilos CSS a etiquetas HTML en la pgina 320.) Los atributos que no figuran en ella se eliminan.
Atributo CSS color font-family font-size font-style: oblique font-style: italic Convertido a FONT COLOR FONT FACE FONT SIZE="[1-7]" I I B

font-weight

320 Captulo 19

Atributo CSS list-style-type: square list-style-type: circle list-style-type: disc list-style-type: upper-roman list-style-type: lower-roman list-style-type: upper-alpha list-style-type: lower-alpha list-style text-align text-decoration: underline text-decoration: line-through

Convertido a UL TYPE="square" UL TYPE="circle" UL TYPE="disc" OL TYPE="I" OL TYPE="i" OL TYPE="A" OL TYPE="a" UL u OL con TYPE, segn el caso P ALIGN o DIV ALIGN, segn el caso U STRIKE

Comprobacin de la ortografa
Utilice el comando Ortografa del men Texto para revisar la ortografa del documento actual. El comando Ortografa no tiene en cuenta las etiquetas HTML ni los valores de atributo. De forma predeterminada, el corrector ortogrfico utiliza el diccionario de ingls de Estados Unidos. Para cambiar esta configuracin, elija Edicin > Preferencias > General o Dreamweaver > Preferencias > General (Mac OS X) y luego seleccione el diccionario que desea utilizar en el men emergente Diccionario ortogrfico. Se pueden descargar diccionarios de otros idiomas desde el Centro de servicio tcnico de Dreamweaver.
Para comprobar y corregir la ortografa:

Elija Texto > Ortografa o pulse Mays+F7. Cuando Dreamweaver encuentra una palabra que no reconoce, aparece el cuadro de dilogo Ortografa.

En este cuadro de dilogo, seleccione la opcin adecuada teniendo en cuenta las discrepancias mostradas:
Aadir a personal incorpora Omitir ignora

la palabra no reconocida al diccionario personal.

esta aparicin de la palabra no reconocida. todas las apariciones de la palabra no reconocida.

Omitir todas ignora

Cambiar sustituye esta aparicin de la palabra no reconocida por el texto que usted escriba en el cuadro Cambiar por o por la seleccin de la lista Sugerencias. Cambiar todas reemplaza

de la misma manera todas las apariciones de la palabra no

reconocida.

Insercin y aplicacin de formato al texto 321

Buscar y reemplazar texto

Puede realizar bsquedas de texto, texto con etiquetas o etiquetas HTML y atributos en el documento actual, en archivos seleccionados, en un directorio o en todo el sitio. Se utilizan comandos distintos para buscar archivos; para buscar texto y/o etiquetas HTML 1 dentro de los archivos: Localizar en sitio local y Localizar en sitio remoto buscan archivos, mientras que Edicin > Buscar y reemplazar busca texto y etiquetas dentro de los archivos.
Para buscar texto y/o HTML dentro de los documentos:

Dispone de las opciones siguientes: Buscar y reemplazar.

En la vista Diseo, desde la ventana de documento o el panel Sitio, elija Edicin > En la vista Cdigo, haga clic con el botn derecho (Windows) o mientras presiona la tecla
Control (Macintosh) y elija Buscar y reemplazar en el men contextual.
2

En el cuadro de dilogo Buscar y reemplazar que aparece, use la opcin Buscar en para especificar los archivos en los que desea buscar: cuando se elige Buscar y reemplazar con la ventana de documento activa o en el men contextual del inspector de cdigo.

Documento actual limita la bsqueda al documento activo. Esta opcin slo est disponible Todo el sitio local ampla la bsqueda a todos los documentos HTML, los archivos de
biblioteca y los documentos de texto del sitio actual. Despus de elegir Sitio actual, el nombre del sitio actual aparecer a la derecha del men emergente. Si no es ste el sitio en el que desea buscar, elija otro en el men emergente de sitios actuales del panel Sitio.

Archivos seleccionados en el sitio limita la bsqueda a los archivos y las carpetas seleccionados
en el panel Sitio. Esta opcin slo est disponible cuando se elige Buscar y reemplazar con el panel Sitio activo (es decir, delante de la ventana de documento).

Carpeta limita la bsqueda a un grupo de archivos especfico. Despus de elegir Carpeta, haga
clic en el icono de carpeta para localizar y seleccionar el directorio deseado.
3

Utilice la opcin Buscar para especificar el tipo de bsqueda que desea realizar. Bsqueda y reemplazo de etiquetas y atributos en la pgina 217.

Cdigo fuente permite buscar cadenas de texto especficas en el cdigo HTML. Consulte Texto permite buscar cadenas de texto especficas en la ventana de documento. La bsqueda de
texto omite el cdigo HTML que interrumpe la cadena. Por ejemplo, si busca the black dog, encontrar the black dog y the <i>black</i> dog.

Texto (avanzado) permite buscar cadenas de texto especficas que se encuentran dentro o fuera
de una o varias etiquetas. Por ejemplo, en un documento que contiene el cdigo HTML siguiente, si busca intenta fuera de i, slo encontrar la segunda aparicin de la palabra intenta. Juan <i>intenta</i> hacer su trabajo a tiempo, pero no siempre lo consigue. Lo intenta con energa. Consulte Bsqueda de texto entre etiquetas especficas en la pgina 218.

Etiqueta permite buscar etiquetas, atributos y valores de atributo especficos, como todas las

etiquetas td con valign definido como top. Consulte Bsqueda de etiquetas y atributos en la pgina 217.

322 Captulo 19

Nota: Al presionar Control+Intro o Mays+Intro (Windows), o bien Control+Retorno, Mays+Retorno o Comando+Retorno (Macintosh), se aadirn saltos de lnea en los campos de bsqueda de texto, lo que le permite buscar un carcter de retorno. No olvide desactivar la opcin Omitir diferencias de espacios en blanco cuando realice esta bsqueda si no utiliza expresiones regulares. Observe que este mtodo busca un carcter de retorno en particular, no la aparicin de un salto de lnea. Por ejemplo, no busca etiquetas <br> o <p>. Los caracteres de retorno aparecen como espacios en la vista Diseo, no como saltos de lnea.

Utilice las opciones siguientes para ampliar o limitar la bsqueda: exactamente con el uso de maysculas y minsculas del texto buscado. Por ejemplo, si busca aguas azules, no encontrar Aguas Azules.
Nota: La opcin Omitir diferencias de espacios en blanco considera todos los espacios en blanco como un solo espacio a efectos de bsqueda. Por ejemplo, si esta opcin est seleccionada, este texto coincidir con este texto, pero no con estetexto. Esta opcin no est disponible cuando est activada la opcin Usar expresiones regulares; en este caso es necesario escribir explcitamente la expresin regular para omitir el espacio en blanco. Observe que las etiquetas <p> y <br> no se consideran espacios en blanco.

La opcin Coincidir maysculas y minsculas limita la bsqueda al texto que coincide

La opcin Usar expresiones regulares considera algunos caracteres y cadenas cortas (por
ejemplo, ?, *, \w y \b) de la cadena de bsqueda como operadores de expresiones regulares. Por ejemplo, si busca el perro l\w*\b puede encontrar el perro ladrador y el perro lanudo. Consulte Expresiones regulares en la pgina 220.
Nota: Si est trabajando en la vista Cdigo, realiza cambios en el documento e intenta buscar y reemplazar elementos que no son cdigo, aparecer un cuadro de dilogo informndole de que Dreamweaver est sincronizando las dos vistas antes de realizar la bsqueda. Para obtener ms informacin sobre la sincronizacin de vistas, consulte Visualizacin de los cdigos en la pgina 193.

Insercin y aplicacin de formato al texto 323

324 Captulo 19

CAPTULO 20 Insercin de imgenes

Las imgenes se utilizan normalmente para aadir interfaces grficas (como botones de navegacin, por ejemplo), atractivo visual (a travs de fotografas, por ejemplo) o elementos de diseo interactivo, como son las imgenes de sustitucin o un mapa de imagen. En Macromedia Dreamweaver MX, puede trabajar en la vista Diseo o en la vista Cdigo para insertar imgenes en un documento. Al aadir imgenes a un documento de Dreamweaver, puede establecer o modificar las propiedades de imagen y ver los cambios directamente en la ventana de documento. Para establecer un flujo de trabajo eficaz durante el diseo Web, puede seleccionar una preferencia de editor de imgenes e iniciarlo automticamente para editar imgenes mientras trabaja en Dreamweaver. Este captulo contiene las siguientes secciones:

Imgenes en la pgina 325 Insercin de una imagen en la pgina 326 Cambio el tamao de una imagen en la pgina 329 Creacin de una imagen de sustitucin en la pgina 330 Utilizacin de un editor de imgenes externo en la pgina 331 Aplicacin de comportamientos a imgenes en la pgina 332

Imgenes
Existen muy diversos formatos de archivo grfico, aunque para pginas Web generalmente se utilizan tres formatos de archivo grfico: GIF, JPEG y PNG. Actualmente, GIF y JPEG son los formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayora de los navegadores. Los archivos PNG son los ms adecuados para casi cualquier tipo de grfico Web debido a su flexibilidad y su tamao de archivo reducido; no obstante, la visualizacin de imgenes PNG slo es parcialmente compatible con los navegadores Microsoft Internet Explorer (4.0 y posteriores) y Netscape Navigator (4.04 y posteriores). De manera que, a no ser que est diseando para un tipo de usuario concreto que utilice un navegador compatible con el formato PNG, deber utilizar archivos GIF o JPEG para poder llegar a ms usuarios.

325

Los archivos GIF (Formato de intercambio de grficos, Graphic Interchange Format)

utilizan un mximo de 256 colores y son idneos para visualizar imgenes con tonos no continuos o imgenes con grandes reas de color homogneo, como barras de navegacin, botones, iconos, logotipos u otras imgenes con colores y tonos uniformes.

El formato de archivo JPEG (Grupo conjunto de expertos fotogrficos, Joint Photographic Experts Group) es el mejor para imgenes fotogrficas o de tonos continuos, ya que puede

contener millones de colores. A medida que la calidad de un archivo JPEG aumenta, tambin lo hace su tamao y el tiempo que tarda en descargarse. A menudo es posible conseguir un equilibrio adecuado entre la calidad de la imagen y el tamao de archivo comprimiendo el archivo JPEG.
El formato de archivo PNG (Grupo de redes porttiles, Portable Network Group) es un sustituto del formato GIF sin patente compatible con imgenes con color indexado, escala de grises y color verdadero, adems de ser compatible con el canal alfa para transparencias. PNG es el formato de archivo nativo de Macromedia Fireworks MX. PNG conserva toda la informacin original de capas, vectores, colores y efectos (como las sombras) y permite editar todos los elementos en cualquier momento. Los archivos se deben guardar con la extensin .png para que Macromedia Dreamweaver MX pueda reconocerlos como tales.
Nota: La compatibilidad de los navegadores con PNG no es homognea, por lo que, si trabaja con archivos PNG, tambin deber exportarlos como GIF o JPEG para asegurarse de que dispone de versiones de stos aptas para la Web.

Insercin de una imagen

Al insertar una imagen en un documento de Dreamweaver, el programa genera automticamente una referencia al archivo de imagen en el cdigo HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deber estar en el sitio actual. Si no lo est, Dreamweaver le preguntar si desea copiar el archivo en el sitio. Tambin puede aadir imgenes como contenido dinmico; para obtener informacin, consulte Conversin de imgenes en contenido dinmico en la pgina 573.
Para insertar una imagen:

Coloque el punto de insercin en el lugar de la ventana de documento en el que desea que aparezca la imagen y, a continuacin, lleve a cabo una de las siguientes operaciones:

En la categora Comn de la barra Insertar, haga clic en el icono Imagen. En la categora Comn de la barra Insertar, arrastre el icono Imagen a la ventana de
documento (o a la ventana de vista Cdigo si est trabajando en el cdigo).

Elija Insertar > Imagen. Arrastre una imagen desde el panel Activos (Ventana > Activos) hasta la posicin deseada de la
ventana de documento. A continuacin, siga con el paso 3.

Arrastre una imagen desde el panel Sitio hasta la posicin deseada de la ventana de documento.
A continuacin, siga con el paso 3.

Arrastre una imagen desde el escritorio hasta la posicin deseada de la ventana de documento.
A continuacin, siga con el paso 3.
2

En el cuadro de dilogo que aparece, lleve a cabo una de las siguientes operaciones:

Elija Sistema de archivos para elegir un archivo grfico. Elija Fuentes de datos para elegir una fuente de imagen dinmica.

326 Captulo 20

Busque y elija la fuente de imagen o contenido que desee insertar. Si est trabajando en un documento que no est guardado, Dreamweaver genera una referencia de archivo:// para el archivo de imagen. Al guardar el documento en cualquier lugar del sitio, Dreamweaver convierte la referencia en una ruta relativa al documento.

En el inspector de propiedades (Ventana > Propiedades), establezca las propiedades de la imagen. Para obtener ms informacin, consulte Configuracin de propiedades de imagen en la Ayuda de Dreamweaver.

Temas relacionados

Establecimiento de una imagen de fondo o un color de fondo de pgina en la pgina 129 Utilizacin de las imgenes de espaciador en la pgina 277 Insercin de un marcador de posicin de imagen Un marcador de posicin de imagen es un grfico que se utiliza hasta que el grfico definitivo est listo para su incorporacin a la pgina Web. Puede definir diversos atributos del marcador de posicin. Puede establecer el tamao y el color del marcado de posicin y asignarle una etiqueta de texto. Los atributos de color y tamao y la etiqueta de un marcador de posicin de imagen aparecen al mostrar el marcador de posicin de imagen en la ventana de documento de Dreamweaver.

Al visualizar la pgina en la ventana de un navegador, la etiqueta y el texto de tamao no aparecen.

Para insertar un marcador de posicin de imagen:

1 2

En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar el grfico del marcador de posicin. Lleve a cabo una de las siguientes operaciones: imagen.

En la barra Insertar, seleccione Comn y luego haga clic en el icono Marcador de posicin de En la barra Insertar, seleccione Comn y luego arrastre el icono Marcador de posicin de
imagen a la ventana de documento.

Elija Insertar > Marcador de posicin de imagen.

Aparecer el cuadro de dilogo Marcador de posicin de imagen.
3

En dicho cuadro de dilogo, seleccione las opciones para el marcador de posicin de imagen. Para obtener informacin detallada sobre la configuracin de las opciones de marcador de posicin de imagen, haga clic en el botn Ayuda del cuadro de dilogo.

Haga clic en Aceptar.

Insercin de imgenes 327

Temas relacionados

Sustitucin de un marcador de posicin de imagen en la pgina 328 Cambio el tamao de una imagen en la pgina 329 Actualizacin de un marcador de posicin de imagen de Dreamweaver en Fireworks en la pgina 338. Sustitucin de un marcador de posicin de imagen Un marcador de posicin de imagen no es la imagen grfica que aparece en un navegador. Antes de publicar el sitio, debe reemplazar todos los marcadores de posicin de imgenes que haya aadido por archivos grficos aptos para la Web, como son los archivos GIF o JPEG. Si dispone de Fireworks MX, puede crear un nuevo grfico desde el marcador de posicin de imagen de Dreamweaver. La nueva imagen se configura con el mismo tamao que la imagen del marcador de posicin. Puede editar la imagen y luego reemplazarla en Dreamweaver. Para obtener ms informacin sobre la creacin con Fireworks MX de una imagen que reemplace al marcador de posicin, consulte Actualizacin de un marcador de posicin de imagen de Dreamweaver en Fireworks en la pgina 338.
Para actualizar el origen de la imagen:

En la ventana de documento, lleve a cabo una de estas operaciones:

Haga doble clic en el marcador de posicin de imagen Haga clic en el marcador de posicin de imagen para seleccionarlo y, a continuacin, en el
inspector de propiedades (Ventana > Propiedades), haga clic en el icono de carpeta situado junto al campo Origen. Se abre el cuadro de dilogo Seleccionar origen de imagen.
2 3

En el cuadro de dilogo, desplcese hasta la imagen con la que desea reemplazar el marcador de posicin de imagen. Haga clic en Aceptar. La imagen seleccionada aparece en el documento.

Alineamiento de una imagen Utilice el inspector de propiedades de imagen para establecer el alineamiento de una imagen en relacin con otros elementos del mismo prrafo o lnea.
Nota: HTML no ofrece ningn mtodo para ajustar texto alrededor del contorno de una imagen, como ocurre con algunos procesadores de textos.

328 Captulo 20

Puede alinear una imagen con el texto, con otra imagen, con un plug-in o con otros elementos de la misma lnea. Tambin puede utilizar los botones de alineamiento (izquierda, derecha y centro) para establecer el alineamiento horizontal de una imagen.

Predeterminado suele

especificar una alineacin con la lnea de base. (El valor predeterminado puede variar en funcin del navegador del visitante del sitio.) la lnea de base del texto (u otro elemento del mismo prrafo) con la parte inferior del objeto seleccionado. la parte superior de una imagen con la parte superior del elemento ms alto (imagen o texto) de la lnea actual. la parte central de la imagen con la lnea de base de la lnea actual.

Lnea de base e Inferior alinean Superior alinea Medio alinea

Texto superior alinea la parte superior de la imagen con la parte superior del carcter ms alto de la lnea de texto. Medio absoluta alinea

la parte central de la imagen con la parte central del texto de la lnea actual.

Inferior absoluta alinea

la parte inferior de la imagen con la parte inferior de la lnea de texto (incluidos los trazos descendentes, como en el caso de la letra g).
Izquierda sita la imagen seleccionada en el margen izquierdo, ajustando a la derecha el texto que la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda suelen pasar a una nueva lnea. Derecha sita

la imagen en el margen derecho, ajustando a la izquierda el texto que la rodea. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a una nueva lnea.

Cambio el tamao de una imagen

Puede cambiar visualmente el tamao de elementos tales como imgenes, plug-ins, pelculas Macromedia Shockwave o Flash, applets y controles ActiveX en la vista Diseo de la ventana de documento de Dreamweaver. El cambio visual del tamao ayuda a determinar cmo afecta al diseo un elemento con distintas dimensiones. Al cambiar el tamao se restauran los atributos width y height del elemento al tamao original. Los campos An (Ancho) y Al (Alto) del inspector de propiedades muestran el ancho y el alto actuales del elemento conforme cambia su tamao. El tamao de archivo del elemento no cambia.

Insercin de imgenes 329

Los elementos de mapas de bits, como las imgenes GIF, JPEG y PNG, pueden distorsionarse al aumentar o reducir sus atributos width y height. Mantenga presionada la tecla Mays mientras cambia el tamao de un mapa de bits para mantener la relacin de aspecto. No obstante, slo es recomendable cambiar visualmente el tamao de los mapas de bits en Dreamweaver para determinar el diseo. Una vez determinado el tamao idneo de la imagen, edite el archivo en una aplicacin de edicin de imgenes. La edicin de la imagen tambin puede reducir su tamao de archivo y, por consiguiente, el tiempo de descarga.
Para cambiar el tamao de un elemento:

Seleccione el elemento (por ejemplo, una imagen o una pelcula Shockwave) en la ventana de documento. Aparecen manejadores de cambio de tamao en los lados inferior y derecho del elemento y en la esquina inferior derecha. Si no aparecen, haga clic fuera del elemento cuyo tamao desea cambiar y vuelva a seleccionarlo o haga clic en la etiqueta correspondiente del selector de etiquetas para seleccionar el elemento.

Cambie el tamao del elemento llevando a cabo una de estas operaciones:

Para ajustar el ancho del elemento, arrastre el manejador de seleccin del lado derecho. Para ajustar el alto del elemento, arrastre el manejador de seleccin de la parte inferior. Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el manejador de seleccin
de la esquina.

Para conservar las proporciones del elemento (su relacin ancho/alto) al ajustar sus
dimensiones, arrastre el manejador de seleccin de la esquina mientras presiona la tecla Mays. Puede cambiar visualmente el tamao de los elementos hasta un mnimo de 8 por 8 pxeles. Si desea ajustar el ancho y el alto de un elemento a un tamao menor (por ejemplo, 1 por 1 pxel), utilice el inspector de propiedades para introducir un valor numrico. Para restaurar las dimensiones originales de un elemento, elimine los valores de los campos An (Ancho) y Al (Alto) o haga clic en el botn Restab. tamao (Restablecer tamao) en el inspector de propiedades.

Creacin de una imagen de sustitucin

Una imagen de sustitucin es una imagen que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella. Una imagen de sustitucin consta en realidad de dos imgenes: la imagen principal (la que aparece al cargarse inicialmente la pgina) y la imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Ambas imgenes deben tener el mismo tamao. Si tienen tamaos distintos, Dreamweaver cambia automticamente el tamao de la segunda imagen para que se ajuste a las propiedades de la primera. No es posible ver el efecto de una imagen de sustitucin en la ventana de documento de Dreamweaver. Si desea ver el efecto de sustitucin, presione F12 para obtener una vista previa de la imagen en un navegador y, a continuacin, pase el puntero por la imagen. Las imgenes de sustitucin estn automticamente configuradas para que respondan al evento onMouseOver. Para obtener informacin sobre la configuracin de una imagen para que responda a otro evento (por ejemplo, un clic del ratn) o sobre la edicin de una imagen de sustitucin para que muestre otra imagen, consulte Intercambiar imagen en la pgina 409.

330 Captulo 20

Una forma ms compleja de imagen de sustitucin es la barra de navegacin. Para crear una barra de navegacin, utilice el comando Insertar > Imgenes interactivas > Barra de navegacin (consulte Insercin de una barra de navegacin en la pgina 458).
Para crear una imagen de sustitucin:

1 2

En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca la imagen de sustitucin. Introduzca la imagen de sustitucin mediante uno de estos mtodos:

En la barra Insertar, seleccione Comn y luego haga clic en el icono Imagen de sustitucin. En la barra Insertar, seleccione Comn, arrastre el icono Imagen de sustitucin hasta la
posicin deseada de la ventana de documento.

Elija Insertar > Imgenes interactivas >Imagen de sustitucin.

Se abre el cuadro de dilogo Insertar imagen de sustitucin.
3 4

En el campo Nombre de la imagen, introduzca un nombre para la imagen de sustitucin. En el cuadro de texto Imagen original, haga clic en Examinar y seleccione la imagen que desea que aparezca al cargarse la pgina o introduzca la ruta del archivo de imagen en el cuadro de texto. En el cuadro de texto Imagen de sustitucin, haga clic en Examinar y seleccione la imagen que desea que aparezca al pasar el puntero sobre la imagen original o introduzca la ruta del archivo de imagen en el cuadro de texto. Si desea que las imgenes se carguen previamente en el cach del navegador para que la imagen no tarde en aparecer cuando el usuario pase el puntero sobre la imagen, seleccione la opcin Carga previa de imagen de sustitucin. En el campo Al hacerse clic, ir a URL, haga clic en Examinar y seleccione el archivo o escriba la ruta del archivo que desea que se abra cuando un usuario haga clic en la imagen de sustitucin.
Nota: Si no establece un vnculo para la imagen, Dreamweaver insertar un vnculo nulo (#) en el cdigo HTML relativo al comportamiento de sustitucin. Si elimina el vnculo nulo, la imagen de sustitucin dejar de funcionar.

8 9 10

Haga clic en Aceptar para cerrar el cuadro de dilogo Insertar imagen de sustitucin. Elija Archivo > Vista previa en el navegador o presione F12. En el navegador, desplace el puntero sobre la imagen original. Debe aparecer la imagen de sustitucin.

Utilizacin de un editor de imgenes externo

Desde Dreamweaver puede abrir una imagen seleccionada en un editor de imgenes externo. Al regresar a Dreamweaver despus de guardar el archivo de imagen editado, los cambios realizados sern visibles en la ventana de documento. Puede utilizar Macromedia Fireworks como editor de imgenes externo. Fireworks 3 y versiones posteriores utilizan Design Notes para controlar el lugar en el que est almacenado el archivo PNG original en el disco duro local. Al abrir la imagen en Fireworks, podr editar el archivo PNG original.

Insercin de imgenes 331

Si establece otra aplicacin de edicin de imgenes como editor externo y la inicia desde Dreamweaver, la aplicacin se inicia y abre la imagen seleccionada. Utilice el editor de imgenes para modificar la imagen y guardar los cambios realizados. A continuacin, vea la imagen actualizada en Dreamweaver. Si el archivo de imagen se gener a partir de un archivo PNG, podr abrir manualmente el archivo original, realizar cambios y guardar la imagen modificada. Dreamweaver actualiza la imagen en la ventana de documento al regresar al programa. Si tras regresar a la ventana de Dreamweaver no ve una imagen actualizada, seleccione la imagen y, a continuacin, haga clic en el botn Actualizar en el inspector de propiedades. Inicio de un editor de imgenes externo Elija Edicin > Preferencias > Tipos de archivo/editores o Dreamweaver > Preferencias > Tipos de archivo/editores (Mac OS X) para configurar un editor de imgenes externo para los tipos de archivo de imgenes que especifique. Para obtener ms informacin sobre la seleccin de un editor de imgenes, consulte Configuracin de las preferencias del editor de imgenes externo en la Ayuda de Dreamweaver.
Para iniciar el editor de imgenes externo, lleve a cabo una de estas operaciones:

Haga doble clic en la imagen que desea editar. Haga clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic
(Macintosh) en la imagen que desea editar y elija Editar con > Examinar y seleccione un editor.

Seleccione la imagen que desea editar y haga clic en Editar en el inspector de propiedades. Haga doble clic en el archivo de imagen en el panel Sitio para iniciar el editor de imgenes
principal. Si no ha especificado ningn editor de imgenes, Dreamweaver iniciar el editor predeterminado para el tipo de archivo en cuestin.
Nota: Al abrir una imagen desde el panel Sitio, las funciones de integracin de Fireworks no surten efecto y Fireworks no abre el archivo PNG original. Para utilizar las funciones de integracin de Fireworks, abra las imgenes desde la ventana de documento.

Aplicacin de comportamientos a imgenes

Puede aplicar cualquier comportamiento disponible a una imagen o zona interactiva de imagen. Al aplicar un comportamiento a una zona interactiva, Dreamweaver inserta el cdigo HTML en la etiqueta area. Hay tres comportamientos que se aplican especficamente a las imgenes: Carga previa de imgenes, Intercambiar imagen y Restaurar imagen intercambiada.
Carga previa de imgenes

carga en la memoria cach del navegador las imgenes que no aparecen en la pgina de inmediato (como aqullas que se intercambiarn por lneas de tiempo, comportamientos, capas o scripts de JavaScript). Esto contribuye a evitar las demoras debidas a la descarga cuando llega el momento de que aparezcan las imgenes. Consulte Carga previa de imgenes en la pgina 399.

Intercambiar imagen

img.

intercambia una imagen por otra cambiando el atributo SRC de la etiqueta Use esta accin para crear sustituciones de botones y otros efectos de imgenes (incluido el intercambio de varias imgenes a la vez). Consulte Intercambiar imagen en la pgina 409.

332 Captulo 20

Restaurar imagen intercambiada

restaura los archivos de origen del ltimo conjunto de imgenes intercambiadas. Esta accin se aade automticamente siempre que se adjunta la accin Intercambiar imagen a un objeto de forma predeterminada. No suele ser necesario seleccionarla manualmente. Consulte Restaurar imagen intercambiada en la pgina 410. Tambin puede utilizar comportamientos para crear sistemas de navegacin ms sofisticados, como una barra de navegacin o un men de salto. Consulte Creacin de barras de navegacin en la pgina 457 y Creacin de mens de salto en la pgina 455.

Insercin de imgenes 333

334 Captulo 20

CAPTULO 21 Integracin de Dreamweaver con otras aplicaciones

Macromedia Fireworks MX y Macromedia Flash MX son dos potentes herramientas de desarrollo de pginas Web diseadas para crear grficos y pelculas SWF que se puedan ver en pginas Web. Macromedia Dreamweaver MX est estrechamente integrado con estas herramientas para permitirle simplificar el flujo de trabajo de diseo de sitios Web. Para obtener una buena integracin entre Dreamweaver y Flash o Fireworks, active Design Notes cuando vaya a definir los sitios en Dreamweaver. De forma predeterminada, esta opcin est preseleccionada en la configuracin de Definicin del sitio. Para obtener informacin sobre la activacin de Design Notes, consulte Activacin y desactivacin de Design Notes en la pgina 113. Al exportar archivos directamente desde Fireworks o Flash a un sitio de Dreamweaver definido, se exportan automticamente al sitio las Design Notes que contienen referencias al archivo PNG o Flash (FLA) junto con el archivo preparado para la Web (GIF, JPEG o SWF). Insertar imgenes o tablas de Fireworks y pelculas Flash en un documento de Dreamweaver es sencillo. Tambin puede utilizar las funciones de integracin entre Dreamweaver y Fireworks o Flash para modificar una imagen o pelcula una vez la haya insertado en un documento de Dreamweaver. Mientras trabaja con Dreamweaver, tambin puede iniciar el proceso de produccin del grfico insertando un grfico de marcador de posicin de imagen y actualizndolo posteriormente. Para obtener informacin sobre los marcadores de posicin de imagen, consulte Insercin de un marcador de posicin de imagen en la pgina 327. Tras insertar un marcador de posicin de imagen en Dreamweaver, puede iniciar Fireworks MX para crear un nuevo grfico. Fireworks le permite disear el grfico, aadir zonas interactivas, comportamientos o cualquier otro elemento. A continuacin, puede guardar el grfico como un PNG y exportarlo como un archivo grfico preparado para la Web, como por ejemplo un GIF, un JPEG o, en el caso de una tabla con cortes, exportarla como HTML e imgenes. Al regresar a Dreamweaver, la imagen que reemplaz o la tabla de Fireworks se actualiza en el documento. Este captulo contiene las siguientes secciones: Especificacin de preferencias de ejecucin y edicin de archivos origen de Fireworks en la pgina 337 Cmo se trabaja con Dreamweaver y Fireworks en la pgina 336 Edicin de una imagen o una tabla de Fireworks en la pgina 340

335

Creacin de un lbum de fotos Web en la pgina 344 Cmo trabajar con Dreamweaver y Flash en la pgina 346 Edicin de una pelcula Flash en Dreamweaver en la pgina 347

Integracin de Fireworks y Flash

La edicin Roundtrip y las Design Notes permiten a Dreamweaver integrar su funcionamiento con el de Fireworks y Flash. La edicin Roundtrip asegura que las actualizaciones de cdigo se transfieran correctamente entre Dreamweaver y estas aplicaciones para preservar, por ejemplo, comportamientos de sustitucin o vnculos a otros archivos mientras que las Design Notes permiten a Dreamweaver localizar el documento de origen correspondiente a un archivo de imagen o pelcula exportado. Para obtener informacin sobre el uso de Design Notes con Fireworks, consulte Utilizacin de Design Notes en Fireworks y Flash con Dreamweaver en la pgina 116. Adems de la informacin de localizacin, las Design Notes contienen otra informacin relevante acerca de los archivos exportados. Por ejemplo, al exportar una tabla de Fireworks, Fireworks escribe una Design Note para cada archivo de imagen exportado de la tabla. Si el archivo exportado contiene zonas interactivas o imgenes de sustitucin, el cdigo JavaScript correspondiente a dichas zonas o imgenes est contenido en el documento HTML que Fireworks exporta. Para obtener mejores resultados, al desarrollar grficos y pelculas para su publicacin en la Web, guarde los archivos de origen y los archivos preparados para la Web de Fireworks y Flash en un sitio de Dreamweaver definido. De esta forma se asegura que cualquier usuario que comparta el sitio ser capaz de localizar el documento de origen al editar una imagen o una tabla de Fireworks o una pelcula SWF en Dreamweaver. La clave para desarrollar un proceso de trabajo fluido e integrado con estas aplicaciones es configurar primero el entorno de trabajo. Para obtener informacin acerca de cmo configurar el entorno de trabajo de Dreamweaver y Fireworks, consulte Cmo se trabaja con Dreamweaver y Fireworks en la pgina 336. Para obtener informacin acerca de cmo configurar el entorno de trabajo de Dreamweaver y Fireworks, consulte Cmo trabajar con Dreamweaver y Flash en la pgina 346.

Cmo se trabaja con Dreamweaver y Fireworks

Dreamweaver y Fireworks reconocen y comparten muchas de las mismas funciones de edicin de archivos, incluyendo la modificacin de vnculos, los mapas de imgenes y los cortes de tablas, entre otras. Juntas, las dos aplicaciones le ofrecen un flujo de trabajo racionalizado para editar, optimizar y colocar archivos grficos Web en pginas HTML. Para definir un entorno de trabajo integrado, debe llevar a cabo algunas tareas previas, como definir un sitio local en Dreamweaver y comprobar que las Design Notes estn activadas para dicho sitio. A menos que modifique la configuracin predeterminada, las Design Notes estn activadas automticamente. Tambin debe configurar Fireworks como el principal editor de imgenes externo para que Dreamweaver lo ejecute para editar. Para obtener informacin sobre la configuracin de Fireworks como editor de imgenes externo, consulte Utilizacin de un editor de imgenes externo en la pgina 331.

336 Captulo 21

Para asegurar una buena integracin de ejecucin y edicin, exporte los archivos HTML y grficos de Fireworks a la carpeta del sitio de Dreamweaver. Al exportar un grfico GIF o JPEG de Fireworks a una carpeta de un sitio de Dreamweaver, Fireworks crea una carpeta llamada _notes en la misma carpeta. Esta carpeta contiene las Design Notes, pequeos archivos con la extensin de archivo de nota de Macromedia (.mno). Las Design Notes contienen informacin sobre los archivos grficos que Fireworks exporta. Al ejecutar y editar una imagen o una tabla de Fireworks en Dreamweaver, Dreamweaver utiliza esta informacin para localizar el PNG origen. Para obtener informacin acerca de cmo especificar si Dreamweaver ejecuta automticamente el archivo PNG cuando est disponible, consulte Especificacin de preferencias de ejecucin y edicin de archivos origen de Fireworks en la pgina 337. Al seleccionar una imagen en un documento de Dreamweaver que ha sido exportado desde Fireworks y tiene un archivo .mno correspondiente, el inspector de propiedades muestra el icono de Fireworks y la ruta de origen del archivo. Configurar Fireworks como el editor de imgenes externo para Dreamweaver le permite pasar de Dreamweaver a Fireworks y viceversa sin complicaciones siempre que necesite editar una imagen. En las preferencias de Dreamweaver, defina Fireworks como el editor principal para los tipos de archivo grfico GIF, PNG y JPEG. Para obtener informacin sobre la configuracin de un editor de imagen, consulte Utilizacin de un editor de imgenes externo en la pgina 331 o el tema Configuracin de las preferencias del editor de imgenes externo. Especificacin de preferencias de ejecucin y edicin de archivos origen de Fireworks Las preferencias de ejecucin y edicin de Fireworks permiten especificar cmo manejar los archivos PNG origen al ejecutar archivos de Fireworks desde otra aplicacin, como Dreamweaver. Dreamweaver reconoce dichas preferencias slo en determinados casos en los que se ejecuta y optimiza una imagen de Fireworks. En concreto, debe ejecutar y optimizar una imagen que no sea parte de una tabla de Fireworks y que no contenga una ruta de acceso correcta de Design Notes a un archivo PNG origen. En todos los dems casos, incluyendo todos los casos de ejecucin y edicin de imgenes de Fireworks, Dreamweaver ejecuta automticamente el archivo PNG origen y, cuando no puede encontrarlo, le solicita que especifique su ubicacin.
Para especificar las preferencias de ejecucin y edicin de Fireworks:

En Fireworks, seleccione Editar > Preferencias o Fireworks > Preferencias (Mac OSX) y, a continuacin, haga clic en la ficha Ejecutar y editar (Windows) o elija Ejecutar y editar en el men emergente (Macintosh).

Integracin de Dreamweaver con otras aplicaciones 337

Especifique las opciones de preferencia que se utilizarn al editar u optimizar imgenes de Fireworks colocadas en una aplicacin externa:
Utilizar siempre PNG origen ejecuta automticamente el archivo PNG de Fireworks definido en la Design Note como origen de la imagen colocada. Las actualizaciones se realizan tanto en el archivo PNG origen como en su correspondiente imagen colocada. No utilizar nunca PNG origen ejecuta

automticamente la imagen de Fireworks colocada, exista o no un archivo PNG origen. Las actualizaciones slo se realizan en la imagen colocada.

Preguntar al ejecutar permite especificar cada vez si ejecutar o no el archivo PNG origen. Al editar u optimizar una imagen colocada, Fireworks muestra un mensaje solicitndole que tome una decisin de ejecucin y edicin. Este mensaje tambin le permite especificar preferencias de ejecucin y edicin globales.

Insercin de una imagen de Fireworks en un documento de Dreamweaver Los grficos de Fireworks se pueden colocar en un documento de Dreamweaver de distintas formas. Puede colocar un grfico de Fireworks exportado directamente en un documento de Dreamweaver utilizando el comando Insertar Imagen o crear un nuevo grfico de Fireworks a partir de un marcador de posicin de imagen de Dreamweaver.
Para insertar una imagen de Fireworks en un documento de Dreamweaver:

En el documento de Dreamweaver, coloque el punto de insercin en el lugar en el que desea que aparezca la imagen y lleve a cabo una de estas operaciones:

Elija Insertar > Imagen. En la categora Comn de la barra Insertar, haga clic en el botn Imagen o arrstrelo al
documento.
2

Desplcese hasta el archivo exportado de Fireworks que desea y haga clic en Aceptar (Windows) o Abrir (Macintosh).
Nota: Si el archivo Fireworks no se encuentra en el sitio de Dreamweaver actual, aparece un mensaje que le pregunta si desea copiar el archivo en la carpeta raz. Haga clic en S.

Actualizacin de un marcador de posicin de imagen de Dreamweaver en Fireworks Puede crear un marcador de posicin de imagen en un documento de Dreamweaver y, a continuacin, ejecutar Fireworks para disear una imagen grfica o una tabla de Fireworks para sustituirlo. Para obtener informacin sobre cmo insertar un marcador de posicin de imagen, consulte Insercin de un marcador de posicin de imagen en la pgina 327. Para crear una nueva imagen a partir de un marcador de posicin de imagen, debe tener tanto Dreamweaver MX como Fireworks MX instalados en el sistema. Fireworks reconoce la siguiente configuracin del marcador de posicin de imagen que ha establecido al trabajar con el marcador de posicin de imagen en Dreamweaver: el tamao de imagen que guarda correlacin con el tamao de lienzo de Fireworks, el identificador de imagen que Fireworks utiliza como nombre de documento predeterminado para el archivo origen y el archivo de exportacin que crea, el alineamiento del texto y los comportamientos (como por ejemplo la imagen intercambiada, el men emergente, la barra de navegacin y la definicin de texto). Fireworks tambin reconoce los vnculos que ha adjuntado al marcador de posicin de imagen mientras trabajaba en Dreamweaver.

338 Captulo 21

Nota: Aunque los vnculos aadidos a un marcador de posicin de imagen no se pueden ver en Fireworks, se mantienen. Si dibuja una zona interactiva y aade un vnculo en Fireworks MX, no eliminar el vnculo que ha aadido al marcador de posicin de imagen en Dreamweaver. No obstante, si dibuja un corte en Fireworks en la nueva imagen, eliminar el vnculo en el documento de Dreamweaver al sustituir el marcador de posicin de imagen.

Estos parmetros del marcador de posicin de imagen se desactivan en el inspector de propiedades de marcadores de imagen puesto que Fireworks no los reconoce: Alinear, Color, Espacio V, Espacio H y Mapa. En Fireworks MX, cree la nueva imagen y haga clic en Listo. Fireworks le solicita que guarde al archivo como un archivo PNG (documento origen), y que lo exporte en un formato preparado para la Web como GIF, JPEG o, en caso de imgenes con cortes, como HTML e imgenes. La nueva imagen o tabla de Fireworks sustituye automticamente el marcador de posicin de imagen en el documento de Dreamweaver.
Para editar un marcador de posicin de imagen de Dreamweaver en Fireworks:

Compruebe que ya ha definido Fireworks como el editor de imgenes para los archivos .png. Para obtener informacin, consulte Configuracin de las preferencias del editor de imgenes externo en la Ayuda de Dreamweaver. En la ventana de documento, haga clic en el marcador de posicin de imagen para seleccionarlo. Para ejecutar Fireworks y comenzar a editar, lleve a cabo una de estas operaciones:

2 3

En el inspector de propiedades, haga clic en Crear. Presione Control (Windows) o Comando (Macintosh) y haga doble clic en el marcador de
posicin de imagen.

Haga clic con el botn derecho en el marcador de posicin de imagen y, a continuacin, elija
Crear imagen en Fireworks. Fireworks se inicia en el modo Edicin desde Dreamweaver

4 5

Utilice las opciones de Fireworks para disear la imagen. Cuando haya terminado, haga clic en Listo. Se abre el cuadro de dilogo Guardar como. Fireworks le solicita que guarde el archivo PNG. En el campo Guardar en, elija la carpeta que ha definido como la carpeta del sitio local Dreamweaver. Si ha nombrado el marcador de posicin de imagen al insertarlo en el documento de Dreamweaver, Fireworks completa el campo Nombre de archivo con dicho nombre. Puede cambiar el nombre si desea hacerlo.

Integracin de Dreamweaver con otras aplicaciones 339

Haga clic en Guardar para guardar el archivo PNG. Se abre el cuadro de dilogo Exportar. Utilice este cuadro de dilogo para exportar la imagen como un GIF.

8 9 10 11

En el cuadro de dilogo, elija la carpeta del sitio local Dreamweaver como valor para el campo Guardar en. El campo de texto Nombre se actualiza automticamente con el mismo nombre que ha utilizado para el archivo PNG. Escriba otro texto para cambiar el nombre si desea hacerlo. En el campo Guardar como tipo, seleccione el tipo de archivo o archivos que desea exportar, por ejemplo Slo imgenes o HTML e imgenes. Haga clic en Guardar para guardar el archivo exportado. El archivo se guarda y la atencin regresa a Dreamweaver. En el documento de Dreamweaver, el archivo o la tabla de Fireworks exportados sustituyen al marcador de posicin de imagen.

Edicin de una imagen o una tabla de Fireworks Puede ejecutar Fireworks para editar imgenes insertadas en un documento de Dreamweaver. Al ejecutar y editar una imagen o un corte de imagen que forma parte de una tabla de Fireworks, Dreamweaver ejecuta Fireworks y el archivo PNG desde el que se export la imagen o la tabla. Cuando la imagen forma parte de una tabla de Fireworks, puede ejecutar la tabla completa de Fireworks para editarla mientras que el comentario <!--fw table--> exista en el cdigo HTML. Si el PNG origen se export desde Fireworks a un sitio de Dreamweaver utilizando la configuracin para imgenes y HTML Estilo Dreamweaver, el comentario de la tabla de Fireworks se inserta automticamente en el cdigo HTML.
Para ejecutar y editar una imagen de Fireworks colocada en Dreamweaver:

1 2

En Dreamweaver, elija Ventana > Propiedades para abrir el inspector de propiedades, si es que no est ya abierto. Haga clic en la imagen o en el corte de imagen para seleccionarla. El inspector de propiedades identifica la seleccin como una imagen o tabla de Fireworks en funcin del elemento seleccionado y muestra el nombre del archivo PNG origen.

Para ejecutar Fireworks para editar, lleve a cabo una de estas operaciones:

En el inspector de propiedades, haga clic en Editar. Mantenga presionada la tecla Control (Windows) o Comando (Macintosh) y haga doble clic
en la imagen seleccionada.

Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y
haga clic (Macintosh) en la imagen deseada, y seleccione Editar con Fireworks en el men contextual. Fireworks se ejecuta y abre el PNG asociado para editarlo.
Nota: Si Fireworks no puede localizar el archivo origen, le solicita que indique la ubicacin del archivo PNG origen. Al trabajar con el archivo origen de Fireworks, los cambios se guardan tanto en el archivo origen como en el archivo exportado. De otro modo, slo se actualiza el archivo exportado.

En Fireworks, edite el PNG origen.

340 Captulo 21

Cuando haya terminado de hacer cambios, haga clic en Listo. Fireworks guarda los cambios en el archivo PNG, exporta la imagen actualizada (o HTML e imgenes), y devuelve la atencin a Dreamweaver. En Dreamweaver, aparece la imagen o la tabla actualizada.

Apertura de un men emergente de Fireworks en Dreamweaver Fireworks admite los mens emergentes basados en imgenes y los mens emergentes basados en HTML. Dreamweaver slo admite mens emergentes basados en HTML. En Dreamweaver, puede abrir un men emergente de Fireworks y editar todas las propiedades de los elementos de men excepto las imgenes de fondo de los mens emergentes basados en imgenes. El comportamiento Mostrar men emergente, de Dreamweaver, le permite editar o actualizar los contenidos de un men emergente de Fireworks basado en HTML. Puede aadir, eliminar o cambiar elementos de men, reorganizarlos y definir la posicin del men en la pgina. Para obtener informacin sobre cmo configurar y modificar opciones de men en Dreamweaver, consulte Mostrar men emergente en la pgina 405. Si el men emergente que desea editar es un men emergente basado en imgenes y desea conservar los fondos de celda basados en imgenes, debe editar el men emergente en Fireworks en lugar de en Dreamweaver. Para editar imgenes de fondo en un men emergente basado en imgenes, seleccione la imagen que desea actualizar y haga clic en Editar. Para obtener informacin sobre cmo editar una imagen en Fireworks, consulte Edicin de una imagen o una tabla de Fireworks en la pgina 340.
Para abrir el men emergente de Fireworks:

1 2

En el documento de Dreamweaver, seleccione la zona interactiva o la imagen que activa el men emergente. Abra el panel Comportamientos (Mays+F3), si no est ya abierto y, en la lista Acciones, haga doble clic en Mostrar men emergente. Se abre el cuadro de dilogo Mostrar men emergente. Realice las modificaciones que desee en el men emergente. Al terminar de modificar el men emergente, haga clic en Aceptar.

3 4

Ejecucin de Fireworks para optimizar una imagen Puede ejecutar Fireworks desde Dreamweaver para realizar rpidos cambios de exportacin, como cambiar el tamao de una imagen o cambiar el tipo de archivo, en las imgenes y animaciones de Fireworks colocadas. Fireworks le permite cambiar la configuracin de optimizacin y animacin, y el tamao y el rea de la imagen exportada.
Para cambiar la configuracin de optimizacin de una imagen de Fireworks colocada en Dreamweaver:

1 2

En Dreamweaver, seleccione la imagen deseada y elija Comandos > Optimizar imagen en Fireworks. Si el sistema lo solicita, especifique si desea ejecutar un archivo origen de Fireworks para la imagen colocada.

Integracin de Dreamweaver con otras aplicaciones 341

En Fireworks, realice las modificaciones que desee en el cuadro de dilogo Optimizacin: ms informacin, consulte Uso de Fireworks.

Para modificar la configuracin de optimizacin, haga clic en la ficha Opciones. Para obtener Para modificar el tamao y el rea de la imagen exportada, haga clic en la ficha Archivo.
4

Cuando termine de editar la imagen, haga clic en Actualizar. Al hacer clic en Actualizar, la imagen se exporta con la nueva configuracin de optimizacin, el archivo GIF o JPEG colocado en Dreamweaver se actualiza y el archivo PNG origen, en caso de haber seleccionado uno, se guarda. Si ha cambiado el formato de la imagen, el verificador de vnculos de Dreamweaver le solicita que actualice las referencias a la imagen. Por ejemplo, si cambia el formato de la imagen mi_imagen de GIF a JPEG, el hecho de hacer clic en Aceptar respondiendo a la solicitud del verificador cambia todas las referencias a mi_imagen.gif del sitio por mi_imagen.jpg.

Insercin de cdigo HTML de Fireworks en un documento de Dreamweaver El comando Exportar de Fireworks permite exportar y guardar los archivos de imagen y de cdigo HTML optimizados a una ubicacin deseada de la carpeta del sitio de Dreamweaver. A continuacin puede insertar el archivo en Dreamweaver. Para obtener informacin sobre cmo exportar archivos de Fireworks como HTML, consulte Uso de Fireworks. Dreamweaver le permite insertar en un documento el cdigo HTML generado por Fireworks junto con las imgenes asociadas, los cortes y el cdigo JavaScript. Esta caracterstica de insercin le facilita la tarea de crear elementos de diseo en Fireworks para incorporarlos a continuacin a un documento de Dreamweaver existente.
Para insertar HTML de Fireworks en un documento de Dreamweaver:

1 2

En Dreamweaver, coloque el punto de insercin en el documento en el que desee que comience el cdigo HTML. Lleve a cabo una de las siguientes operaciones:

Elija Insertar > Imgenes interactivas > HTML de Fireworks. En la categora Comn de la barra Insertar, haga clic en el botn HTML de Fireworks.
3 4

En el cuadro de dilogo que aparece a continuacin, haga clic en Examinar para seleccionar el archivo HTML de Fireworks que desee. Seleccione la opcin Borrar archivo despus de insertar para mover el archivo HTML original de Fireworks a la Papelera de reciclaje (Windows) o a la Papelera (Macintosh) cuando termine la operacin. Utilice esta opcin cuando tras insertar el archivo de HTML de Fireworks no vaya a necesitarlo. Esta opcin no afecta al archivo PNG origen asociado con el archivo HTML.
Nota: Si el archivo HTML est en una unidad de red, se borrar de forma irreversible y no se mover a la Papelera de reciclaje o Papelera.

Haga clic en Aceptar para insertar el cdigo HTML, junto con sus imgenes, cortes y cdigos JavaScript asociados, en el documento de Dreamweaver.

342 Captulo 21

Cmo pegar cdigo HTML de Fireworks en Dreamweaver Un mtodo rpido para colocar imgenes y tablas generadas por Fireworks en Dreamweaver consiste en copiar y pegar el cdigo HTML de Fireworks directamente en el documento de Dreamweaver.
Para copiar y pegar cdigo HTML de Fireworks en Dreamweaver:

1 2

En Fireworks, seleccione Edicin > Copiar cdigo HTML. Siga los pasos del asistente conforme le gua en el proceso de configuracin de la exportacin del cdigo HTML y las imgenes. Cuando el sistema lo solicite, especifique la carpeta del sitio de Dreamweaver como destino de las imgenes exportadas. El asistente exporta las imgenes al destino especificado y copia el cdigo HTML en el Portapapeles.

En Dreamweaver, coloque el punto de insercin en el documento en el que desee pegar el cdigo HTML y seleccione Edicin > Pegar. Todo el cdigo HTML y JavaScript asociado con los archivos de Fireworks exportados se copia en el documento de Dreamweaver y todos los vnculos a imgenes se actualizan.

Para exportar y pegar cdigo HTML de Fireworks en Dreamweaver:

1 2 3 4 5

En Fireworks, elija Archivo > Exportar. En el cuadro de dilogo Exportar, especifique la carpeta del sitio de Dreamweaver como destino de las imgenes exportadas. En el men emergente Guardar como, seleccione HTML e imgenes. En el men emergente HTML, seleccione Copiar al Portapapeles y, a continuacin, haga clic en Guardar. En Dreamweaver, coloque el punto de insercin en el documento en el que desee pegar el cdigo HTML exportado y seleccione Edicin > Pegar. Todo el cdigo HTML y JavaScript asociado con los archivos de Fireworks exportados se copia en el documento de Dreamweaver y todos los vnculos a imgenes se actualizan.

Actualizacin de cdigo HTML de Fireworks colocado en Dreamweaver En Fireworks, el comando Archivo > Actualizar HTML ofrece una alternativa al mtodo de ejecucin y edicin para actualizar archivos de Fireworks colocados en Dreamweaver. La opcin Actualizar HTML permite editar una imagen PNG origen en Fireworks y, a continuacin, actualizar automticamente cualquier archivo de cdigo HTML y de imagen exportado que est colocado en un documento de Dreamweaver. Este comando permite actualizar archivos de Dreamweaver aunque Dreamweaver no est ejecutndose.
Para actualizar cdigo HTML de Fireworks colocado en Dreamweaver:

1 2 3 4

En Fireworks, abra el PNG origen y realice las modificaciones que desee. Seleccione Archivo > Guardar. En Fireworks, seleccione Archivo > Actualizar HTML. Desplcese al archivo de Dreamweaver que contenga el cdigo HTML que desee actualizar y haga clic en Abrir.

Integracin de Dreamweaver con otras aplicaciones 343

Desplcese a la carpeta de destino en la que desea colocar los archivos de imagen actualizados y haga clic en Seleccionar (Windows) o Elegir (Macintosh) Fireworks actualiza el cdigo HTML y JavaScript en el documento de Dreamweaver. Fireworks exporta tambin las imgenes actualizadas asociadas con el cdigo HTML y coloca las imgenes en la carpeta de destino especificada. Si Fireworks no encuentra el cdigo HTML correspondiente, ofrece la opcin de insertar el nuevo cdigo HTML en el documento de Dreamweaver. Fireworks coloca la seccin JavaScript del nuevo cdigo al comienzo del documento y la tabla HTML o el vnculo con la imagen al final.

Creacin de un lbum de fotos Web

El comando Crear lbum de fotos Web de Dreamweaver le permite generar automticamente un sitio Web que contenga un lbum de imgenes a partir de una carpeta dada. Este comando utiliza JavaScript para llamar a Fireworks, que crea una miniatura y una imagen de mayor tamao de cada una de las imgenes de la carpeta. A continuacin, Dreamweaver crea una pgina Web que contiene todas las miniaturas, as como vnculos con las imgenes ms grandes. Para utilizar Crear lbum de fotos Web, es necesario tener instalados en el sistema Dreamweaver y Fireworks 4 o una versin superior. Antes de empezar, coloque todas las imgenes del lbum de fotos en una sola carpeta. (No es necesario que la carpeta se encuentre dentro de un sitio). Adems, asegrese de que los nombres de archivos de imgenes tengan extensiones reconocidas por el comando Crear lbum de fotos Web (.gif, .jpg, .jpeg, .png, .psd, .tif o .tiff ). Las imgenes con extensiones de archivo no reconocidas no se incluyen en el lbum de fotos.
Para crear un lbum de fotos Web:

1 2

En Dreamweaver, seleccione Comandos > Crear lbum de fotos Web. En el campo de texto Ttulo del lbum de fotos, introduzca un ttulo. El ttulo aparecer en un rectngulo gris en la parte superior de la pgina que contiene las miniaturas. Si lo desea, puede introducir hasta dos lneas de texto adicional para que aparezca directamente debajo del ttulo, en los campos de texto Informacin de subencabezado y Otra informacin.

Haga clic en el botn Examinar situado junto al campo de texto Carpeta de imgenes de origen para elegir la carpeta que contiene las imgenes de origen. A continuacin elija (o cree) la carpeta de destino en la que colocar todas las imgenes y archivos HTML exportados haciendo clic en el botn Examinar situado junto al campo de texto Carpeta de destino. La carpeta de destino no debe contener ya un lbum de fotos; en tal caso, y si cualquiera de las nuevas imgenes tuviera el mismo nombre que las previamente utilizadas, podran sobrescribirse los archivos de miniaturas e imgenes existentes.

Especifique las opciones de visualizacin de las imgenes en miniatura: Las imgenes se ajustan a escala de forma proporcional para crear miniaturas que se adaptan a un cuadrado que tiene las dimensiones en pxeles indicadas.

Elija un tamao para las imgenes en miniatura en el men emergente Tamao de miniatura. Para visualizar el nombre del archivo de cada imagen original debajo de la miniatura
correspondiente, seleccione Mostrar nombres de archivos.

Introduzca el nmero de columnas de la tabla que muestra las miniaturas.

344 Captulo 21

Elija un formato para las imgenes en miniatura en el men emergente Formato de miniatura:
GIF WebSnap 128

crea miniaturas GIF que utilizan una paleta Web adaptable de hasta 128 crea miniaturas GIF que utilizan una paleta Web adaptable de hasta 256

colores.
GIF WebSnap 256

colores.
JPEG - Calidad superior crea miniaturas JPEG con calidad relativamente mayor y archivos ms

grandes.
JPEG - Archivo ms pequeo

crea miniaturas JPEG con calidad relativamente inferior y

archivos ms pequeos.
6

Elija un formato para las imgenes de tamao grande en el men emergente Formato de foto. Para cada una de las imgenes originales se crea una imagen de gran tamao con el formato especificado. Es posible especificar un formato para las imgenes de gran tamao que difiera del formato especificado para las miniaturas.
Nota: El comando Crear lbum de fotos Web no permite utilizar los archivos de imgenes originales como las imgenes de gran tamao, ya que es posible que los formatos de las imgenes originales que no sean GIF y JPEG no se visualicen apropiadamente en todos los navegadores. Tenga en cuenta que si las imgenes originales son archivos JPEG, las imgenes de gran tamao generadas pueden tener un tamao de archivo mayor o menor calidad que la de los archivos originales.

Elija un porcentaje de escala para las imgenes de gran tamao. Establecer la escala en 100% crea imgenes de gran tamao del mismo tamao que las originales. Tenga en cuenta que el porcentaje de escala se aplica a todas las imgenes; si las imgenes originales no son todas del mismo tamao, el ajuste a escala por el mismo porcentaje puede producir resultados no deseados.

Seleccione Crear pgina de navegacin para cada foto para crear una pgina Web individual para cada imagen de origen que contenga vnculos de navegacin etiquetados como Anterior, Inicio y Siguiente. Si selecciona esta opcin, las miniaturas se vincularn con las pginas de navegacin. Si no la selecciona, las miniaturas se vincularn directamente con las imgenes de gran tamao.

Haga clic en Aceptar para crear los archivos de cdigo HTML e imagen para el lbum de fotos Web. Fireworks se ejecuta (si todava no est abierto) y crea las miniaturas y las imgenes de gran tamao. Este proceso puede llevar varios minutos si se ha incluido un gran nmero de archivos de imagen. Una vez finalizado el proceso, Dreamweaver vuelve a activarse y crea la pgina que contiene las miniaturas.

Integracin de Dreamweaver con otras aplicaciones 345

10

Cuando aparezca el cuadro de dilogo con el mensaje de confirmacin lbum creado, haga clic en Aceptar. Puede que tenga que esperar unos segundos hasta visualizar la pgina del lbum de fotos. Las miniaturas se muestran ordenadas alfabticamente por nombre de archivo.

Nota: Una vez iniciado el proceso de creacin del lbum de fotos, el hecho de hacer clic en el botn Cancelar del cuadro de dilogo de Dreamweaver no lo detiene sino que simplemente evita que Dreamweaver presente la pgina principal del lbum de fotos.

Cmo trabajar con Dreamweaver y Flash

Insertar una pelcula Flash (archivo SWF) en un documento de Dreamweaver es sencillo. Una vez insertada, puede utilizar el inspector de propiedades para definir la reproduccin y las opciones de visualizacin para el archivo SWF en la pgina Web. Para obtener informacin sobre cmo insertar una pelcula Flash en Dreamweaver, consulte Insercin de pelculas Flash en la pgina 358. El verificador de vnculos de Dreamweaver le permite editar vnculos en los archivos que inserta en un documento de Dreamweaver, incluyendo las pelculas Flash. Puede actualizar el vnculo en la pelcula SWF y, a continuacin, actualizar el cambio en el documento de creacin de Flash. Para obtener informacin, consulte Actualizacin de vnculos en un archivo SWF en la pgina 348. Si dispone de Macromedia Flash MX y Dreamweaver MX tambin puede actualizar una pelcula colocada en un documento de Dreamweaver. Cuando ambas aplicaciones estn instaladas en su ordenador y se selecciona una pelcula en el documento de Dreamweaver, el inspector de propiedades muestra el botn Editar activo. Si no dispone de Flash MX, el botn Editar aparece desactivado. Al hacer clic en Editar, Dreamweaver inicia Flash y Flash intenta localizar el archivo de creacin Flash (.FLA) correspondiente al archivo SWF seleccionado. La informacin sobre el archivo origen inicial se almacena automticamente en una Design Note para el archivo SWF al exportarlo a un sitio de Dreamweaver (si la opcin Design Notes est activada en el sitio de Dreamweaver). Si Flash no encontrase el archivo de creacin Flash, le solicitara que indicase su ubicacin. No puede actualizar un archivo SWF directamente. Primero debe modificar el archivo origen y, a continuacin, exportarlo como un archivo de pelcula SWF.

346 Captulo 21

Tras ejecutar correctamente un documento origen para editarlo, puede trabajar en Flash para modificar una pelcula. Cuando haya terminado de hacer cambios haga clic en Listo. Flash actualiza el documento de creacin de Flash, vuelve a exportar el archivo de pelcula, se cierra y devuelve la atencin al documento de Dreamweaver. Puede ver el SWF actualizado en el documento haciendo clic en Reproducir en el inspector de propiedades o presionando F12 para obtener una vista previa de su pgina en una ventana de navegador.
Temas relacionados

Edicin de una pelcula Flash en Dreamweaver en la pgina 347 Actualizacin de vnculos en un archivo SWF en la pgina 348 Edicin de una pelcula Flash en Dreamweaver No es posible editar directamente un archivo SWF; si desea modificar un SWF exportado, seleccione el marcador de posicin de la pelcula Flash en el documento de Dreamweaver y, en el inspector de propiedades, haga clic en Editar. Al hacerlo se ejecuta Flash y, si est disponible la ruta del documento origen (FLA), tambin se ejecuta el archivo FLA. Cuando ha terminado de hacer las modificaciones, Flash guarda los cambios en el documento origen FLA y vuelve a exportar el archivo de pelcula SWF.
Para ejecutar y editar una pelcula Flash insertada desde Dreamweaver:

1 2

En Dreamweaver, elija Ventana > Propiedades para abrir el inspector de propiedades, si es que no est ya abierto. En el documento de Dreamweaver, lleve a cabo una de estas operaciones: en el inspector de propiedades, haga clic en Editar.

Haga clic en el marcador de posicin de la pelcula Flash para seleccionarlo y, a continuacin,

Mantenga presionada la tecla Control (Windows) o Comando (Macintosh) mientras hace

doble clic en el marcador de posicin de la pelcula correspondiente a la pelcula que desea editar.

Integracin de Dreamweaver con otras aplicaciones 347

 Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y
haga clic (Macintosh) en la imagen deseada y seleccione Editar con Fireworks en el men contextual. Dreamweaver ejecuta Flash y abre el archivo FLA para que lo edite o, si no lo encuentra, le solicita que indique su ubicacin.
Nota: Si el archivo FLA o el archivo SWF est bloqueado, Dreamweaver le solicita que compruebe el archivo, anule la solicitud o visualice el archivo.

En Flash, edite la pelcula. La ventana de documento indicar que est modificando una pelcula desde Dreamweaver.

Cuando haya terminado de hacer cambios, haga clic en Listo. Al hacerlo, se guardan los cambios del archivo FLA origen y se actualiza el archivo SWF.

Actualizacin de vnculos en un archivo SWF Puede actualizar un vnculo en un archivo SWF en la vista del mapa del sitio que ofrece Dreamweaver. Para obtener informacin sobre la vista del mapa del sitio, consulte Utilizacin del mapa del sitio en la pgina 95. Antes de crear un mapa de sitio, debe definir una pgina principal del sitio. En la vista del mapa del sitio, debe mostrar los archivos dependientes para actualizar un vnculo en un archivo SWF. De forma predeterminada, el mapa del sitio no muestra los archivos dependientes. Para obtener informacin sobre cmo mostrar archivos dependientes consulte Cmo mostrar y ocultar archivos de mapa de un sitio en la pgina 99. Seleccione el vnculo que desea actualizar, a continuacin seleccione una de las opciones de cambio de vnculos en funcin de lo que desee hacer cambiar un vnculo de forma aislada o cambiar un vnculo en todo el sitio. Cualquier vnculo actualizado por Dreamweaver en el archivo SWF se actualiza en el archivo FLA origen al realizar una operacin de ejecucin y edicin. Dreamweaver registra automticamente cualquier cambio de los vnculos del archivo SWF en las Design Notes y, cuando Flash actualiza los cambios en el archivo FLA, los elimina de las Design Notes.

348 Captulo 21

Para actualizar un vnculo de URL en un archivo SWF:

1 2 3

Defina una pgina principal del sitio, si no lo ha hecho an. Para construir un mapa del sitio, debe configurar una pgina principal. Abra la vista del mapa del sitio. Para mostrar los archivos dependientes, elija Ver > Mostrar archivos dependientes (Windows) o Sitio > Ver mapa del sitio > Mostrar archivos dependientes (Macintosh). El vnculo aparece bajo el archivo SWF. Para modificar el vnculo lleve a cabo una de estas operaciones: continuacin elija Cambiar vnculo y, despus, en el cuadro de dilogo que aparece en el campo URL, escriba la nueva ruta de URL.

Para cambiar el vnculo en el SWF seleccionado, haga clic con el botn derecho sobre l, a Para actualizar todas las instancias del vnculo, seleccione Sitio > Cambiar vnculo en todo el
sitio. A continuacin, en el cuadro de dilogo que se abre, en el campo Cambiar todos los vnculos a, desplcese hasta la ruta del vnculo que va a modificar o escrbala y en el campo Por vnculos a, desplcese hasta la ruta del nuevo URL o escrbala.
5

Haga clic en Aceptar.

Integracin de Dreamweaver con otras aplicaciones 349

350 Captulo 21

CAPTULO 22 Insercin de medios

Macromedia Dreamweaver le permite aadir sonido y pelculas al sitio Web de forma rpida y sencilla. Puede incorporar y editar archivos y objetos multimedia, como pelculas de Macromedia Flash y Shockwave, applets de Java, QuickTime, Active X y archivos de audio. Puede adjuntar Design Notes a dichos objetos, lo que le permitir comunicarse con el resto del equipo de diseo. Tambin puede insertar objetos de texto y botn Flash desde dentro de Dreamweaver. Este captulo contiene las siguientes secciones:

Insercin y reproduccin de objetos multimedia en la pgina 351 Inicio de un editor externo de archivos multimedia en la pgina 352 Utilizacin de Design Notes con objetos multimedia en la pgina 353 Contenido de Flash en la pgina 354 Insercin de un objeto de botn Flash en la pgina 354 Insercin de un objeto de texto Flash en la pgina 357 Insercin de pelculas Flash en la pgina 358 Insercin de pelculas Shockwave en la pgina 359 Adicin de vdeo en la pgina 360 Adicin de sonido a una pgina en la pgina 360 Insercin de contenido de plug-ins de Netscape Navigator en la pgina 362 Insercin de un control ActiveX en la pgina 363 Insercin de un applet de Java en la pgina 364 Utilizacin de comportamientos para controlar elementos multimedia en la pgina 364

Insercin y reproduccin de objetos multimedia

Puede insertar en un documento de Dreamweaver una pelcula o un objeto Flash, una pelcula QuickTime o Shockwave, un applet de Java, un control ActiveX y otros objetos de audio o vdeo. La categora Medio de la barra Insertar o del men Insertar le permiten seleccionar el tipo de objeto que desea insertar en un documento. Las pelculas y objetos Flash, Shockwave, Applets y ActiveX tienen botones definidos. Utilice el botn de plug-in de Netscape Navigator para insertar otros archivos multimedia. Para obtener ms informacin, consulte Insercin de contenido de plug-ins de Netscape Navigator en la pgina 362.

351

Para insertar un objeto multimedia en una pgina:

Coloque el punto de insercin en el lugar de la ventana de documento en el que desea que aparezca el objeto y, a continuacin, lleve a cabo una de las siguientes operaciones: objeto que desea insertar o arrstrelo a la ventana de documento.

En la barra Insertar, seleccione Medio, luego haga clic en el botn correspondiente al tipo de

Elija el objeto que corresponda del submen Insertar > Medio o Insertar > Imgenes
interactivas. En la mayora de los casos, aparecer un cuadro de dilogo que le permitir seleccionar un archivo origen y especificar diversos parmetros para el objeto multimedia.
Sugerencia: Para evitar que aparezcan estos cuadros de dilogo, elija Edicin > Preferencias > General o Dreamweaver > Preferencias > General (Mac OS X) y desactive la opcin Mostrar dilogo al insertar objetos. Para anular las preferencias de presentacin de cuadros de dilogo, mantenga presionada la tecla Control (Windows) u Opcin (Macintosh) mientras inserta el objeto. Por ejemplo, para insertar un marcador de posicin para una pelcula Shockwave sin especificar el archivo, mantenga presionada la tecla Control u Opcin y haga clic en el botn Shockwave.

Dreamweaver inserta automticamente el cdigo HTML necesario para que el objeto o el marcador de posicin aparezca en la pgina. Utilice el inspector de propiedades para especificar un archivo de origen y establecer las dimensiones y otros parmetros y atributos de cada objeto.

Inicio de un editor externo de archivos multimedia

Puede hacer doble clic en la mayora de los archivos del panel Sitio para editarlos directamente. Si el archivo es HTML, se abrir en Dreamweaver. Si se trata de otro tipo de archivo, como un archivo de imagen, se abrir en el editor externo correspondiente, como Macromedia Fireworks. Los tipos de archivo que Dreamweaver no trata directamente se pueden asociar a uno o ms editores externos que se encuentren en el sistema. El editor que se inicia al hacer doble clic en el archivo del panel Sitio se denomina editor principal. Puede definir los editores que desea asociar a los distintos tipos de archivos en las preferencias de Tipos de archivos/editores. Si hay varios editores asociados al tipo de archivo, podr iniciar un editor secundario para un archivo concreto. Haga clic con el botn derecho (Windows) o presione la tecla Control (Macintosh) y haga clic en el nombre del archivo en el panel Sitio y elija un editor del submen Abrir con el men contextual. Para especificar de forma explcita qu editores externos deben iniciarse para un tipo de archivo concreto, elija Edicin > Preferencias y seleccione Tipos de archivo/editores en la lista Categora. Las extensiones de nombres de archivo, como .gif, .wav y .mpg, aparecen a la izquierda, bajo Extensiones. Los editores asociados a una extensin seleccionada figuran en la parte derecha, bajo Editores. Tambin puede buscar un editor externo para editar el archivo. En la vista Diseo de la ventana de documento, haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) en el archivo y elija Editar con > Examinar o seleccione el archivo y elija > Edicin > Editar con Editor externo.

352 Captulo 22

Para aadir un tipo de archivo a la lista de extensiones en las preferencias de Tipos de archivo/ editores:

1 2

Haga clic en el botn ms (+) situado sobre la lista Extensiones. Introduzca una extensin de tipo de archivo (incluido el punto situado al principio de la extensin) o varias extensiones relacionadas separadas por espacios. Por ejemplo, puede introducir .css, .png .jpg.

Para aadir un editor para un tipo de archivo concreto:

1 2 3

Seleccione la extensin correspondiente al tipo de archivo en la lista Extensiones. Haga clic en el botn ms (+) situado sobre la lista Editores. En el cuadro de dilogo que aparece a continuacin, elija la aplicacin que desea aadir a la lista Editores. Por ejemplo, elija el icono de aplicacin de Excel para aadir esa aplicacin a la lista Editores.

Para eliminar un tipo de archivo de la lista:

Seleccione el tipo de archivo en la lista Extensiones.

Nota: La eliminacin de un tipo de archivo no se puede deshacer. Por tanto, asegrese antes de ejecutarla.

Haga clic en el botn menos (-) situado sobre la lista Extensiones.

Para convertir un editor en el editor principal para un tipo de archivo:

1 2 3

Seleccione el tipo de archivo. Seleccione el editor (o adalo si no est en la lista). Haga clic en Convertir en principal.

Para anular la asociacin de un editor con un tipo de archivo:

1 2 3

Seleccione el tipo de archivo en la lista Extensiones. Seleccione el editor en la lista Editores. Haga clic en el botn de signo menos () situado sobre la lista Editores.

Utilizacin de Design Notes con objetos multimedia

Al igual que ocurre con otros objetos de Dreamweaver, puede aadir Design Notes a un objeto multimedia. Para obtener ms informacin sobre la utilizacin de Design Notes, consulte Utilizacin de Design Notes en la pgina 113.
Para aadir Design Notes a un objeto multimedia:

Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) en el objeto de la ventana de documento.
Nota: Deber definir el sitio antes de aadir Design Notes a ningn objeto (consulte Activacin y desactivacin de Design Notes en la pgina 113).

2 3

Elija Design Notes en el men contextual. Introduzca la informacin deseada en la Design Note.

Insercin de medios 353

Sugerencia: Tambin puede aadir una Design Note a un objeto multimedia desde el panel Sitio seleccionando el archivo, abriendo el men contextual y eligiendo Design Notes en el men contextual.

Contenido de Flash
La tecnologa Flash de Macromedia es la principal solucin para la reproduccin de grficos y animaciones vectoriales. Flash Player est disponible tanto como plug-in de Netscape Navigator como en formato de control ActiveX para Microsoft Internet Explorer en PC, y ya viene incorporado en las ltimas versiones de Netscape Navigator, Microsoft Internet Explorer y America Online. Dreamweaver se suministra con objetos Flash que puede utilizar con independencia de si dispone o no de Flash. Puede utilizar estos objetos para crear botones Flash y texto Flash que puede insertar en un documento de Dreamweaver. Si dispone de Flash, consulte Cmo trabajar con Dreamweaver y Flash en la pgina 346 para obtener informacin sobre la utilizacin de estas aplicaciones de manera integrada. Antes de utilizar los comandos Flash disponibles en Dreamweaver, conviene conocer los tres tipos de archivo Flash que existen:
El archivo Flash (.fla) es el archivo de origen de cualquier proyecto y se crea en el programa Flash. Este tipo de archivo slo se puede abrir en Flash (no en Dreamweaver ni en los navegadores). Puede abrir el archivo en Flash y, a continuacin, exportarlo a SWF o SWT para utilizarlo en los navegadores. El archivo de pelcula Flash (.swf) es

una versin comprimida del archivo Flash (.fla) optimizada para la Web. Este archivo se puede reproducir en navegadores y ver en Dreamweaver, pero no se puede editar en Flash. ste es el tipo de archivo que se crea utilizando objetos de texto y el botn Flash. Para obtener ms informacin, consulte Insercin de un objeto de botn Flash en la pgina 354, Insercin de un objeto de texto Flash en la pgina 357 e Insercin de pelculas Flash en la pgina 358.

Los archivos de plantilla Flash (.swt) permiten

modificar y reemplazar informacin de un archivo de pelcula Flash. Estos archivos se utilizan en el objeto de botn Flash, que permite modificar la plantilla con texto o vnculos propios, para crear un SWF personalizado e insertarlo en el documento. En Dreamweaver, estos archivos de plantilla se encuentran en las carpetas Dreamweaver/Configuration/Flash Objects/Flash Buttons y FlashText. Tambin puede descargar nuevas plantillas de botones del sitio Web Macromedia Exchange for Dreamweaver y colocarlas en la carpeta Flash Button. Para obtener ms informacin sobre la creacin de plantillas de botones, consulte el artculo sobre este tema que se encuentra en el Sitio web de Macromedia en http://www.macromedia.com/go/flash_buttons.

Insercin de un objeto de botn Flash

El objeto de botn Flash es un botn actualizable basado en una plantilla Flash. Puede personalizar un objeto de botn Flash aadindole texto, color de fondo y vnculos con otros archivos. Los botones Flash pueden insertarse mientras se trabaja en la vista Diseo o en la vista Cdigo.
Nota: Deber guardar el documento antes de insertar un objeto o texto de botn Flash .

354 Captulo 22

El cuadro de dilogo Insertar botn Flash le permite seleccionar un botn Flash entre un conjunto de botones Flash ya diseados. Puede ver un ejemplo del botn en el campo Muestra. Haga clic en esta muestra para ver cmo funciona en el navegador. Mientras define el botn Flash (por ejemplo, mientras cambia el texto o las opciones de fuente), el campo Muestra no se actualiza automticamente para reflejar los cambios. Estos cambios aparecern al cerrar el cuadro de dilogo y ver el botn en la vista Diseo.
Para insertar un objeto de botn Flash:

1 2

En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar el botn Flash. Para abrir el cuadro de dilogo Insertar botn Flash, realice una de las siguientes operaciones:

En la barra Insertar, seleccione Medio y, a continuacin, haga clic en el icono Botn Flash. En la barra Insertar, seleccione Medio y luego arrastre el icono Botn Flash a la ventana de
documento, o a la ventana de vista Cdigo si est trabajando en el cdigo.

Elija Insertar > Imgenes interactivas > Botn Flash.

Aparecer el cuadro de dilogo Insertar botn Flash.

3 4

Seleccione el estilo de botn que desee en la lista Estilo. En el campo Texto del botn (opcional), escriba el texto que desea mostrar. Este campo slo acepta cambios si el botn seleccionado tiene definido el parmetro {Button Text}. Esto se puede observar en el campo Muestra. El texto que escriba reemplazar {Button Text} al obtener una vista previa del archivo.

En el men emergente Fuente, seleccione la fuente que desea utilizar. Si la fuente predeterminada de un botn no est disponible en el sistema, seleccione otra fuente en el men emergente. No ver la fuente seleccionada en el campo Muestra, aunque puede hacer clic en Aplicar para insertar el botn en la pgina y ver la apariencia que tendr el texto.

6 7

En el campo Tamao, introduzca un valor numrico para el tamao de la fuente. En el campo Vnculo (opcional), introduzca un vnculo absoluto o relativo al documento para el botn.

Insercin de medios 355

En el campo Destino (opcional), especifique la ubicacin en la que se abrir el documento vinculado. Puede seleccionar una opcin de marco o ventana en el men emergente. Los marcos slo aparecen en la lista si el objeto Flash se edita mientras se encuentra en un conjunto de marcos. En el campo Color de fondo (opcional), establezca el color del fondo de la pelcula Flash. Utilice el selector de color o escriba un valor hexadecimal para la Web (como #FFFFFF). En el campo Guardar como, introduzca un nombre de archivo para guardar el nuevo archivo SWF. Puede utilizar el nombre de archivo predeterminado (por ejemplo, button1.swf ) o escribir uno nuevo. Si el archivo contiene un vnculo relativo al documento, deber guardarlo en el mismo directorio que el documento HTML actual para mantener los vnculos relativos al documento.

9 10

11

Haga clic en Obtener ms estilos para pasar al sitio Macromedia Exchange y descargar ms estilos de botn. Para obtener ms informacin, consulte Adicin de extensiones a Dreamweaver en la pgina 67.

12

Haga clic en Aplicar o Aceptar para insertar el botn Flash en la ventana de documento.

Sugerencia: Seleccione Aplicar para ver los cambios realizados en la vista Diseo mientras mantiene el cuadro de dilogo abierto (de esta forma, podr continuar realizando cambios en el botn).

Modificacin de un objeto de botn Flash Puede modificar las propiedades y el contenido del objeto de botn Flash.
Para modificar un objeto de botn Flash:

1 2

En la ventana de documento, haga clic en el objeto de botn Flash para seleccionarlo. Abra el inspector de propiedades si es que no est abierto an. El inspector de propiedades muestra las propiedades del botn Flash. Puede utilizar el inspector de propiedades para modificar los atributos HTML del botn, como su ancho, alto y color de fondo.

Para realizar cambios en el contenido, muestre el cuadro de dilogo Insertar botn Flash utilizando uno de estos mtodos:

Haga doble clic en el objeto de botn Flash. Haga clic en Editar en el inspector de propiedades. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y
elija Editar en el men contextual.
4

En el cuadro de dilogo Insertar botn Flash, edite los campos descritos en Insercin de un objeto de botn Flash en la pgina 354. En la vista Diseo, puede cambiar el tamao del objeto fcilmente utilizando los manejadores de cambio de tamao. Puede restaurar el tamao original del objeto seleccionando Restab. tamao (Restablecer tamao) en el inspector de propiedades (consulte Cambio el tamao de una imagen en la pgina 329).

356 Captulo 22

Reproduccin de un botn Flash en el documento Puede obtener una vista previa de un botn Flash en la ventana de documento de Dreamweaver.
Para ver la reproduccin del objeto de botn Flash en la ventana de documento:

1 2 3

En la vista Diseo, seleccione el objeto de botn Flash en el documento. En el inspector de propiedades, haga clic en Reproducir. Haga clic en Detener para poner fin a la vista previa.

Nota: No se puede editar el objeto de botn Flash mientras se est reproduciendo.

Conviene obtener siempre una vista previa del documento en el navegador para comprobar exactamente la apariencia que tendr el botn Flash.

Insercin de un objeto de texto Flash

El objeto de texto Flash permite crear e insertar una pelcula Flash que slo contiene texto. Esto permite crear una pequea pelcula de grficos vectoriales con fuentes de diseo y el texto que elija.
Para insertar un objeto de texto Flash:

1 2

En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar el texto Flash. Para abrir el cuadro de dilogo Insertar texto Flash, realice una de las siguientes operaciones:

En la barra Insertar, seleccione Medio y luego haga clic en el icono Texto Flash. En la barra Insertar, seleccione Medio y luego arrastre el icono Texto Flash a la ventana de
documento, o a la ventana de vista Cdigo si est trabajando en el cdigo.

Elija Insertar > Imgenes interactivas > Texto Flash.

Aparecer el cuadro de dilogo Insertar texto Flash.

Seleccione una fuente en el men emergente Fuente. Este men muestra todas las fuentes TrueType cargadas actualmente en el sistema. Introduzca un tamao de fuente (de puntos) en el campo Tamao.

Insercin de medios 357

5 6 7

Especifique los atributos de estilo, como negrita o cursiva, y el alineamiento del texto haciendo clic en los botones apropiados. En el campo Color, establezca el color del texto utilizando el selector de color o introduciendo un valor hexadecimal para la Web (como #FFFFFF). En el campo Color de sustitucin, establezca el color que aparece cuando el puntero pasa sobre el objeto de texto Flash. Utilice el selector de color o escriba un valor hexadecimal para la Web (como #FFFFFF). Introduzca el texto deseado en el campo Texto. Para ver el estilo de fuente que se muestra en el campo Texto, seleccione Mostrar fuente. Si desea asociar un vnculo con el objeto de texto Flash, introduzca un vnculo absoluto o relativo al documento en el campo Vnculo. No se admiten vnculos relativos al sitio porque los navegadores no los reconocen en las pelculas Flash. Si utiliza un vnculo relativo al documento, guarde el archivo SWF en el mismo directorio que el archivo HTML. (Los navegadores interpretan los vnculos relativos al documento de distintas formas y, por tanto, al guardar los vnculos en el mismo directorio se garantiza su correcto funcionamiento.)

10 11 12

Si ha introducido un vnculo, el campo Destino le permite especificar el marco o la ventana de destino en la que desea se cargue el vnculo. En el campo Color de fondo, elija un color de fondo para el texto. Utilice el selector de color o escriba un valor hexadecimal para la Web (como #FFFFFF). En el campo Guardar como, introduzca un nombre para el archivo. Puede utilizar el nombre de archivo predeterminado (por ejemplo, tex1.swf ) o escribir uno nuevo. Si el archivo contiene un vnculo relativo al documento, deber guardarlo en el mismo directorio que el documento HTML actual para mantener los vnculos relativos al documento.

13

Haga clic en Aplicar o Aceptar para insertar el texto Flash en la ventana de documento. Si hace clic en Aplicar, el cuadro de dilogo permanecer abierto y podr obtener una vista previa del texto en el documento.

Para modificar o reproducir el objeto de texto Flash, siga el procedimiento utilizado para el botn Flash (consulte Modificacin de un objeto de botn Flash en la pgina 356).

Insercin de pelculas Flash

Cuando se inserta una pelcula Flash en un documento, Dreamweaver usa tanto la etiqueta object (definida por Microsoft Internet Explorer para los controles ActiveX) como la etiqueta embed (definida por Netscape Navigator) para ofrecer los mejores resultados en todos los navegadores. Al realizar cambios relativos a la pelcula en el inspector de propiedades, Dreamweaver asocia los datos introducidos a los parmetros correspondientes para las etiquetas object y embed.

358 Captulo 22

Para insertar una pelcula Flash:

En la vista Diseo de la ventana de documento, site el punto de insercin en el lugar donde desea insertar la pelcula y, a continuacin, realice una de las siguientes operaciones.

En la barra Insertar, seleccione Medio y luego haga clic en el icono Flash. En la barra Insertar, seleccione Medio y luego arrastre el icono Flash a la ventana de
documento.

Elija Insertar > Medio > Flash.

2

En el cuadro de dilogo que aparece, seleccione un archivo de pelcula Flash (.swf ). En la ventana de documento aparecer un marcador de posicin Flash (al contrario que en el caso de los objetos de botn y texto Flash). Para obtener informacin sobre la configuracin de propiedades de una pelcula Flash, seleccione el marcador de posicin y luego haga clic en el botn Ayuda del inspector de propiedades.

Para obtener una vista previa de la pelcula Flash en la ventana de documento:

1 2

En la ventana de documento, haga clic en el marcador de posicin Flash para seleccionar la pelcula Flash de la que desea obtener una vista previa. En el inspector de propiedades, haga clic en el botn Reproducir. Haga clic en Detener para poner fin a la vista previa. Tambin puede obtener una vista previa de la pelcula Flash en un navegador presionando F12.

Sugerencia: Para obtener una vista previa de todo el contenido Flash de una pgina, presione Control+Alt+Mays+P (Windows) o Mays+Opcin+Comando+P (Macintosh). Al hacerlo, todos los objetos y pelculas se establecern en Reproducir.

Insercin de pelculas Shockwave

Shockwave, el estndar de Macromedia para multimedia interactivo en la Web, es un formato comprimido que permite la descarga rpida de los archivos multimedia creados en Macromedia Director y su reproduccin en los navegadores de uso ms frecuente. El software que reproduce las pelculas Shockwave est disponible como plug-in para Netscape Navigator y en formato de control ActiveX. Cuando se inserta una pelcula Shockwave, Dreamweaver usa tanto la etiqueta object (para el control ActiveX) como la etiqueta embed (para el plug-in) para conseguir los mejores resultados en todos los navegadores. Al realizar cambios relativos a la pelcula en el inspector de propiedades, Dreamweaver asocia los datos introducidos a los parmetros correspondientes para las etiquetas object y embed.
Para insertar una pelcula Shockwave:

En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar una pelcula Shockwave y lleve a cabo una de estas operaciones.

En la barra Insertar, seleccione Medio y luego haga clic en el icono Shockwave. En la barra Insertar, seleccione Medio y luego arrastre el icono Shockwave a la ventana de
documento, o a la ventana de vista Cdigo si est trabajando en el cdigo.

Elija Insertar > Medio > Shockwave.

2 3

En el cuadro de dilogo que aparece, seleccione un archivo de pelcula. En el inspector de propiedades, introduzca el ancho y el alto de la pelcula en los cuadros An y Al.

Insercin de medios 359

Adicin de vdeo
Puede aadir vdeo a su pgina Web de distintas formas y empleando diferentes formatos. El vdeo puede descargarse al usuario o reproducirse en flujo (streaming) mientras se descarga. Los formatos de flujo ms comunes disponibles en la Web para la transmisin de archivos de vdeo son RealMedia, QuickTime y Windows Media. Debe descargar una aplicacin auxiliar para ver estos formatos. Con estos formatos, podr reproducir en flujo audio y vdeo simultneamente. Si desea incluir un vdeo-clip breve que pueda descargarse en lugar de reproducirse en flujo, puede establecer un vnculo con el vdeo-clip o incrustarlo en la pgina. Estos vdeo-clips suelen tener el formato de archivo AVI o MPEG. Puede utilizar Director para crear pelculas Shockwave o Flash para crear presentaciones multimedia interactivas de ancho de banda estrecho para la Web. Con Flash, el tamao del archivo es sorprendentemente pequeo y su tecnologa es compatible con numerosas plataformas. (Obviamente, los usuarios deben descargar el plug-in de reproductor gratuito para poder ver estos archivos.)

Adicin de sonido a una pgina

Hay varios tipos de archivos y formatos de sonido, as como diversas formas de aadir sonido a una pgina Web. Los factores que hay que tener en cuenta antes de optar por un formato y un mtodo para aadir sonido son: su finalidad, el tipo de usuarios a los que est destinado, el tamao de archivo, la calidad de sonido y las diferencias en los navegadores.
Nota: Cada navegador trata los archivos de sonido de una forma muy distinta. Si lo desea, puede aadir un archivo de sonido a una pelcula Flash y luego incrustar el archivo SWF para mejorar la coherencia.

Formatos de archivo de audio La siguiente lista describe los formatos de archivo de audio ms comunes junto con algunas de sus ventajas y desventajas en relacin con el diseo Web.
El formato .midi o .mid (Interfaz digital para instrumentos musicales, Musical Instrument Digital Interface) es un formato de msica instrumental. Los archivos MIDI son compatibles con

numerosos navegadores y no precisan ningn plug-in. Aunque su calidad de sonido es muy alta, sta puede variar en funcin de la tarjeta de sonido del visitante. Un archivo MIDI pequeo es capaz de proporcionar un clip de sonido largo. Los archivos MIDI no se pueden grabar y deben sintetizarse en un ordenador con hardware y software especiales. una buena calidad de sonido, son compatibles con numerosos navegadores y no requieren ningn plug-in. Puede grabar sus propios archivos WAV desde un CD, una cinta, a travs de un micrfono, etc. Sin embargo, el gran tamao de archivo limita considerablemente la duracin de los clips de sonido que se pueden utilizar en las pginas Web.
El formato .aif (Formato de archivo de intercambio de audio, Audio Interchange File Format o AIFF), al igual que el formato WAV, ofrece buena calidad de sonido, se puede reproducir en la Los archivos de formato .wav (Extensin de forma de onda, Waveform Extension) ofrecen

mayora de los navegadores y no requiere plug-in. Tambin se pueden grabar archivos AIFF desde un CD, una cinta, a travs de un micrfono, etc. Sin embargo, el gran tamao de archivo limita considerablemente la duracin de los clips de sonido que se pueden utilizar en las pginas Web.

360 Captulo 22

El formato .mp3 (Audio del Grupo de Expertos en Imgenes en Movimiento, Motion Picture Experts Group Audio o MPEG-Audio Nivel-3) es un formato comprimido que reduce

considerablemente el tamao de los archivos de sonido. La calidad de sonido es excelente: si se graba y comprime correctamente un archivo MP3, su calidad es equiparable a la de un CD. La nueva tecnologa permite reproducir el archivo en flujo de modo que el visitante no tenga que esperar a que se descargue todo el archivo para escucharlo. Sin embargo, el tamao de archivo es mayor que el de Real Audio, por lo que una cancin entera puede tardar bastante en descargarse a travs de una conexin telefnica normal. Para reproducir archivos MP3, los visitantes debern descargar e instalar una aplicacin auxiliar o un plug-in como QuickTime, Windows Media Player o RealPlayer.
El formato .ra, .ram, .rpm o Real Audio tiene un alto grado de compresin con tamaos de archivo ms pequeos que MP3. Permite descargar archivos de canciones completas en un perodo de tiempo razonable. Dado que los archivos se pueden reproducir en flujo desde un servidor Web normal, los visitantes pueden comenzar a escuchar el sonido antes de que el archivo se haya descargado por completo. La calidad de sonido es ms pobre que la de los archivos MP3, aunque los nuevos reproductores y codificadores la mejoran considerablemente. Los visitantes debern descargar e instalar la aplicacin auxiliar o plug-in RealPlayer para reproducir estos archivos.

Establecimiento de un vnculo con archivos de audio

El establecimiento de vnculos con archivos de audio es una forma sencilla y eficaz de aadir sonido a una pgina Web. Este mtodo de incorporar archivos de sonido permite a los visitantes decidir si quieren escuchar el archivo o no y poner el archivo a disposicin de un mayor nmero de usuarios. (Algunos navegadores no admiten los archivos de sonido incrustados.) Consulte Incrustacin de un archivo de sonido en la pgina 361.
Para establecer un vnculo con un archivo de audio:

1 2

Seleccione el texto o la imagen que desea usar como vnculo con el archivo de audio. En el inspector de propiedades, haga clic en el icono de carpeta para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el campo Vnculo.

Incrustacin de un archivo de sonido

Al incrustar audio se incorpora el reproductor de sonido directamente en la pgina, pero el sonido slo se reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido elegido. Incruste archivos si desea utilizar el sonido como msica de fondo o si desea obtener un mayor control sobre la presentacin de sonido. Por ejemplo, puede establecer el volumen, la apariencia del reproductor en la pgina y los puntos inicial y final del archivo de sonido.
Para incrustar un archivo de audio:

En la vista Diseo, site el punto de insercin en el lugar en el que desea colocar el archivo y luego lleve a cabo una de estas operaciones:

En la barra Insertar, seleccione Medio y luego haga clic en el icono Plug-in. En la barra Insertar, seleccione Medio y luego arrastre el icono Plug-in a la ventana de
documento, o a la ventana de vista Cdigo si est trabajando en el cdigo.

Elija Insertar > Medio > Plug-in.

Para obtener ms informacin sobre el objeto Plug-in, consulte Insercin de contenido de plug-ins de Netscape Navigator en la pgina 362.

Insercin de medios 361

2 3

En el inspector de propiedades, haga clic en el icono de carpeta para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el campo Vnculo. Especifique el ancho y el alto introduciendo los valores en los campos correspondientes o cambiando el tamao del marcador de posicin del plug-in en la ventana de documento. Estos valores determinan con qu tamao se muestran los controles de audio en el navegador. Por ejemplo, pruebe con un ancho de 144 pxeles y un alto de 60 para ver cmo aparece el reproductor de audio en Navigator y en Internet Explorer.

Insercin de contenido de plug-ins de Netscape Navigator

Los plug-ins mejoran Netscape Navigator, ya que proporcionan modos de ver contenido multimedia en una amplia gama de formatos. Los plug-ins son el medio por el cual se reproducen y muestran los archivos de contenido en su sitio Web. Por ejemplo, RealPlayer y QuickTime son plug-ins muy comunes; adems, algunos archivos de contenido incluyen en s mismos MP3 y pelculas QuickTime. Despus de crear contenido para un plug-in de Navigator, puede utilizar Dreamweaver para insertar dicho contenido en un documento HTML. Dreamweaver utiliza la etiqueta embed para marcar la referencia al archivo de contenido.
Para insertar contenido de plug-ins de Navigator:

En la vista Diseo de la ventana de documento, site el punto de insercin en el lugar donde desea insertar el contenido y luego realice una de las siguientes operaciones.

En la barra Insertar, seleccione Medio y luego haga clic en el icono Plug-in. Elija Insertar > Medio > Plug-in.
2

En el cuadro de dilogo que aparece, seleccione un archivo de contenido para un plug-in de Navigator.

Reproduccin de plug-ins en la ventana de documento En la vista Diseo de la ventana de documento puede obtener directamente una vista previa de las pelculas y animaciones basadas en plug-ins de Navigator, es decir, de los elementos que usan la etiqueta embed. (En la ventana de documento no es posible obtener vistas previas de pelculas o animaciones basadas en controles ActiveX.) Puede reproducir todos los elementos de plug-in a la vez para ver la apariencia que presentar la pgina ante el usuario, o bien puede reproducirlos uno por uno para asegurarse de que se han incrustado los elementos multimedia correctos. Para reproducir pelculas, debern estar instalados en el sistema los plug-ins adecuados. Al iniciarse, Dreamweaver busca automticamente todos los plug-ins instalados, primero en la carpeta Configuration/Plugins y luego en las carpetas de plug-ins de todos los navegadores instalados.
Para reproducir el contenido de plug-ins en la ventana de documento:

1 2

Inserte uno o ms elementos multimedia eligiendo Insertar > Medio > Shockwave, Insertar > Medio > Flash o Insertar > Medio > Plug-in. Reproduzca el contenido de los plug-ins: Reproducir o haga clic en el botn Reproducir del inspector de propiedades.

Seleccione uno de los elementos multimedia que ha insertado y elija Ver > Plug-ins >

362 Captulo 22

 Elija Ver > Plug-ins > Reproducir todo para reproducir todos los elementos multimedia de la
pgina seleccionada que emplean plug-ins.
Nota: La opcin Reproducir todo se aplica al documento actual, no a otros documentos de un conjunto de marcos, por ejemplo.

Para detener la reproduccin del contenido de plug-ins:

Seleccione un elemento multimedia y elija Ver > Plug-ins > Detener o haga clic en el botn Detener del inspector de propiedades. Tambin puede elegir Ver> Plug-ins > Detener todo para que se deje de reproducir el contenido de todos los plug-ins. Solucin de problemas de plug-ins de Navigator Si ha seguido los pasos indicados para reproducir contenido de plug-ins en la ventana de documento pero parte del contenido de los plug-ins no se reproduce, intente los procedimientos siguientes:

Asegrese de que el plug-in asociado est instalado en el ordenador y que el contenido es

compatible con la versin del plug-in que usted tiene.

Abra el archivo Configuration/Plugins/UnsupportedPlugins.txt en un editor de texto y

compruebe si en la lista aparece el plug-in en cuestin. Este archivo contiene informacin sobre aquellos plug-ins que pueden causar problemas en Dreamweaver y, por tanto, no tienen soporte. (Si algn plug-in concreto ocasiona problemas, es recomendable aadirlo a este archivo.)

Compruebe si el sistema dispone de suficiente memoria (y en Macintosh, si hay suficiente

memoria asignada a Dreamweaver). Algunos plug-ins necesitan entre 2 y 5 MB adicionales para poder ejecutarse.

Insercin de un control ActiveX

Los controles ActiveX (anteriormente denominados controles OLE) son componentes reutilizables, semejantes a aplicaciones en miniatura, que tienen capacidad para actuar a modo de plug-ins de navegador. Se ejecutan en Internet Explorer con Windows, pero no en Macintosh ni en Netscape Navigator. El objeto ActiveX de Dreamweaver permite proporcionar atributos y parmetros para un control ActiveX del navegador del visitante. Dreamweaver utiliza la etiqueta object para marcar el lugar de la pgina en el que aparecer el control ActiveX y para proporcionar parmetros al control ActiveX.
Para insertar contenido de controles ActiveX:

En la ventana de documento, site el punto de insercin en el lugar donde desea insertar el contenido y lleve a cabo una de estas operaciones:

En la barra Insertar, seleccione Medio y luego haga clic en el icono ActiveX. En la barra Insertar, seleccione Medio y luego arrastre el icono ActiveX a la ventana de
documento, o a la ventana de vista Cdigo si est trabajando en el cdigo.

Elija Insertar > Medio > ActiveX.

Un icono marca el lugar de la pgina de Internet Explorer donde aparecer el control ActiveX.

Insercin de medios 363

Insercin de un applet de Java

Java es un lenguaje de programacin que permite el desarrollo de aplicaciones pequeas (applets) que pueden incrustarse en pginas Web. Tras crear un applet de Java, podr insertarlo en un documento HTML mediante Dreamweaver. Dreamweaver utiliza la etiqueta applet para marcar la referencia al archivo de applet.
Para insertar un applet de Java:

En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar el applet y lleve a cabo una de estas operaciones.

En la barra Insertar, seleccione Medio y luego haga clic en el icono Applet. En la barra Insertar, seleccione Medio y luego arrastre el icono Applet a la ventana de
documento, o a la ventana de vista Cdigo si est trabajando en el cdigo.

Elija Insertar > Medio > Applet. Tambin puede arrastrar el icono de botn Flash sobre la
ventana de documento.
2

En el cuadro de dilogo que aparece, seleccione un archivo que contenga un applet de Java.

Utilizacin de comportamientos para controlar elementos multimedia

Puede aadir comportamientos a su pgina para iniciar y detener diversos objetos multimedia.
Controlar Shockwave o Flash le permite reproducir, detener, rebobinar o ir a un marco de una pelcula Shockwave o Flash (consulte Controlar Shockwave o Flash en la pgina 391). Reproducir sonido

permite reproducir sonido; por ejemplo, puede reproducir un efecto sonoro cuando el usuario mueva el puntero del ratn sobre un vnculo (consulte Reproducir sonido en la pgina 398).

Comprobar plug-in le permite comprobar si los visitantes del sitio disponen del plug-in necesario y luego los gua a URL distintos en funcin de si disponen o no del plug-in adecuado. El comportamiento Comprobar plug-in slo se aplica a los plug-ins de Netscape Navigator, ya que no comprueba los controles ActiveX. Para obtener ms informacin, consulte Comprobar plugin en la pgina 390.

364 Captulo 22

CAPTULO 23 Funciones de accesibilidad de Dreamweaver

La accesibilidad designa la capacidad de crear sitios y productos Web que puedan utilizar aquellas personas con discapacidades visuales, auditivas, motoras u otras. Macromedia Dreamweaver MX contiene herramientas que dotan al producto de accesibilidad y herramientas que le ayudan a crear contenido accesible. Entre los ejemplos de funciones de accesibilidad para productos de software y sitios web podemos citar la compatibilidad con lectores de pantalla, los equivalentes textuales para grficos, los accesos directos del teclado y el uso de colores de pantalla con alto contraste, entre otros. A medida que el nmero de personas con discapacidades que acceden a Internet aumenta, cobra importancia que los desarrolladores creen productos y sitios Web a los que puedan acceder todos los usuarios posibles. Tanto es as que el gobierno de EE.UU. en colaboracin con otras organizaciones ha creado leyes y directrices dirigidas a que los desarrolladores creen contenido accesible. Para obtener ms informacin acerca de dos iniciativas importantes, consulte la Iniciativa de Accesibilidad para la Web del World Wide Web Consortium (http://www.w3.org/wai) y la Seccin 508 de la Ley federal de insercin (Federal Rehabilitation Act) (http://www.section508.gov). Si usted disea sitios Web con Dreamweaver y necesita utilizar las funciones de accesibilidad de Dreamweaver, este captulo explica la compatibilidad de Dreamweaver con lectores de pantalla y con las funciones de accesibilidad del sistema operativo as como la navegacin mediante el teclado. Si usted disea sitios Web con Dreamweaver y necesita crear contenido accesible, este captulo le indica cmo utilizar los cuadros de dilogo de accesibilidad de Dreamweaver y cmo probar la accesibilidad del sitio. Para disear sitios Web accesibles deber comprender cules son los requisitos de accesibilidad y tomar numerosas decisiones subjetivas. Dreamweaver le ayuda a crear sitios Web accesibles. Dreamweaver le permite, por ejemplo, aadir equivalentes textuales para grficos. Y si lo olvida, incluso le recuerda que lo haga. No obstante, ninguna herramienta de creacin puede automatizar el proceso de desarrollo. Son los diseadores los que deben reflexionar sobre cmo los usuarios con discapacidades interactan con las pginas web. La mejor forma de garantizar que un sitio Web es accesible consiste en realizar una planificacin, un desarrollo, una comprobacin y una evaluacin deliberadas. Este captulo trata los siguientes temas:

Uso de las funciones de accesibilidad de Dreamweaver en la pgina 366 Creacin de sitios Web accesibles en la pgina 369 Comprobacin de la accesibilidad del sitio Web en la pgina 376

365

Uso de las funciones de accesibilidad de Dreamweaver

Dreamweaver ofrece funciones que lo hacen accesible a los usuarios con discapacidades. En concreto, Dreamweaver es compatible con lectores de pantallas, con las funciones de accesibilidad del sistema operativo y con la navegacin mediante el teclado.
Nota: Tanto el modo Espacio de trabajo de Dreamweaver 4 como el modo Espacio de trabajo de Dreamweaver 5 son compatibles con las funciones de accesibilidad de Dreamweaver pero le recomendamos que utilice el Espacio de trabajo de Dreamweaver 4. Para cambiar los modos, seleccione Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y, en la lista de categoras de la izquierda, seleccione General. Haga clic en el botn Cambiar espacio de trabajo y seleccione Espacio de trabajo de Dreamweaver 4. A continuacin, haga clic en Aceptar.

Uso de lectores de pantalla con Dreamweaver Un lector de pantalla recita el texto que aparece en la pantalla del equipo. Tambin lee informacin no textual, como los rtulos de los botones o las descripciones de las imgenes de la aplicacin que se suministran en etiquetas o atributos de accesibilidad durante el proceso de creacin. Dreamweaver es compatible con JAWS for Windows, de Freedom Scientific (http://www.freedomscientific.com) y con los lectores de pantalla Window Eyes, de GW Micro (http://www.gwmicro.com). En tanto que usuario de Dreamweaver, puede utilizar un lector de pantalla como ayuda para crear sus pginas Web. El lector de pantalla comienza a leer por la esquina superior izquierda de la ventana de documento. Uso de las funciones de accesibilidad del sistema operativo Dreamweaver es compatible con la configuracin de alto contraste del sistema operativo Windows. Esta opcin se activa a travs del Panel de control de Windows. Cuando el alto contraste est activado, afecta a Dreamweaver de la siguiente manera:

Los cuadros de dilogo y los paneles utilizan la configuracin de color del sistema.
Por ejemplo, si establece el color como Blanco sobre negro, todos los cuadros de dilogo y los paneles de Dreamweaver se mostrarn con el blanco como color de primer plano y el negro como color de fondo.

La aplicacin de color a la sintaxis de la vista Cdigo est desactivada.

La vista Cdigo utiliza el color de ventana y de texto del sistema y omite la configuracin de color establecida en Preferencias. Por ejemplo, si define el color del sistema como Blanco sobre negro y, a continuacin, cambia los colores del texto en Preferencias> Colores de cdigo, Dreamweaver omite los colores establecidos en Preferencias y muestra el texto del cdigo con el blanco como color de primer plano y el negro como color de fondo.

La vista Diseo utiliza los colores de fondo y de texto establecidos en Modificar > Propiedades
de la pgina. As, las pginas que disea presentan los colores como lo har el navegador. Uso del teclado para navegar Dreamweaver Puede utilizar el teclado para navegar por los paneles flotantes de Dreamweaver, el inspector de propiedades, los cuadros de dilogo, los marcos y las tablas sin necesidad de utilizar el ratn. Esta seccin trata sobre los siguientes temas:

Desplazamiento por los paneles en la pgina 367 Desplazamiento por el inspector de propiedades en la pgina 367
366 Captulo 23

 Desplazamiento por los cuadros de dilogo en la pgina 368 Desplazamiento por marcos en la pgina 368 Desplazamiento por tablas en la pgina 369
Desplazamiento por los paneles Puede desplazarse por los paneles mediante el teclado.
Nota: El uso de la tecla de tabulacin y las teclas de flecha slo es compatible con Windows.

Para desplazarse por los paneles:

En la ventana de documento, presione Control+Alt+Tab para entrar en un panel. Un contorno blanco alrededor de la barra de ttulo del panel indica el panel en el que ha entrado. El lector de pantalla lee la barra de ttulo del panel en el que ha entrado.

Presione de nuevo la combinacin de teclas Control+Alt+Tab para entrar en el siguiente panel. Siga hacindolo hasta que alcance el panel en el que desea trabajar. Presione la combinacin de teclas Control+Alt+Mays+Tab para regresar al panel previo, si fuese necesario. Si el panel en el que quiere trabajar no est abierto, utilice los accesos directos del teclado listados en el men Ventana para mostrar el panel apropiado y, a continuacin, presione Control+Alt+Tab para entrar en dicho panel. Si el panel en el que desea trabajar est abierto pero no ampliado, desplcese hasta dicho panel y presione la barra espaciadora. Si desea contraer el panel, presione la barra espaciadora de nuevo.

3 4

Una vez en el panel, presione la tecla Tab para desplazarse a travs de las opciones. Un contorno punteado alrededor de la opcin indica que la opcin a la que ha accedido. Utilice las teclas de flecha como convenga: ellos y, a continuacin, presione la barra espaciadora para seleccionar uno.

Cuando una opcin tiene varios valores, utilice las teclas de flecha para desplazarse a travs de Si en el grupo de paneles hay fichas que dan acceso a otros paneles, sitese en la ficha abierta y,
a continuacin, utilice las teclas de flecha izquierda o derecha para abrir otras fichas. Una vez haya abierto una nueva ficha, presione la tecla Tab para desplazarse a travs de las opciones de dicho panel. Desplazamiento por el inspector de propiedades Puede utilizar el teclado para desplazarse por el inspector de propiedades y modificar el documento.
Nota: El uso de la tecla de tabulacin y las teclas de flecha slo es compatible con Windows.

Para desplazarse por el inspector de propiedades:

1 2 3

Presione la tecla Control+F3 para mostrar el inspector de propiedades, si no est visible. Presione Control+Alt+Tab hasta que haya entrado en el inspector de propiedades. Presione la tecla Tab para desplazarse a travs de las opciones del inspector de propiedades.

Funciones de accesibilidad de Dreamweaver 367

4 5

Utilice las teclas de flecha como mejor convenga para desplazarse a travs de las distintas opciones y presione la tecla Intro (Windows) o Retorno (Macintosh) para seleccionar una. Presione Control+Tab (Windows) u Opcin+Tab (Macintosh) para abrir y cerrar la seccin ampliada del inspector de propiedades. De otro modo, puede situarse en la flecha de ampliacin situada en el ngulo inferior derecho y presionar la barra espaciadora.

Desplazamiento por los cuadros de dilogo Puede utilizar el teclado para desplazarse por los cuadros de dilogo.
Nota: El uso de la tecla de tabulacin y las teclas de flecha slo es compatible con Windows.

Para desplazarse por un cuadro de dilogo:

1 2

Para desplazarse a travs de las opciones de un cuadro de dilogo, presione la tecla Tab. Utilice las teclas de flecha para desplazarse a travs de los valores de cada opcin. Por ejemplo, si una opcin tiene un men desplegable, acceda a dicha opcin y, a continuacin, utilice la flecha abajo para desplazarse por sus valores.

Si el cuadro de dilogo tiene una lista de categoras, presione Control+Tab (Windows) u Opcin+Tab (Macintosh) para entrar en dicha lista de categoras y, a continuacin, utilice las teclas de flecha para desplazarse hacia arriba o hacia abajo en la lista. Vuelva a presionar Control+Tab (Windows) u Opcin+Tab (Macintosh) para cambiar a las opciones de una categora. Para salir del cuadro de dilogo presione Intro (Windows) o Retorno (Macintosh).

4 5

Desplazamiento por marcos Si el documento contiene marcos, puede utilizar las teclas de flechas para entrar en un marco.
Nota: El uso de la tecla de tabulacin y las teclas de flecha slo es compatible con Windows.

Para seleccionar un marco:

1 2

Site el punto de insercin en la ventana de documento. Presione Alt+Flecha arriba para seleccionar el marco en el que se encuentra en este momento. Una lnea punteada indica el marco en el que se encuentra. Siga presionando Alt+Flecha arriba para entrar en el conjunto de marcos y, a continuacin, en el conjunto de marcos padre, si existen conjuntos de marcos anidados. Presione Alt+Flecha abajo para entrar en un conjunto de marcos hijo o en un marco individual del conjunto de marcos. Una vez haya entrado en un marco individual, presione Alt+Flecha izquierda o derecha para desplazarse por los marcos. Presione Alt+Flecha abajo para colocar el punto de insercin en la ventana de documento.

3 4 5 6

368 Captulo 23

Desplazamiento por tablas Tras seleccionar una tabla, puede utilizar el teclado para desplazarse por ella.
Nota: El uso de la tecla de tabulacin y las teclas de flecha slo es compatible con Windows.

Para desplazarse por una tabla:

En la ventana de documento, lleve a cabo una de estas operaciones para seleccionar la tabla: derecha.

Si el punto de insercin se encuentra en la parte izquierda de la celda, presione Mays+Flecha Si el punto de insercin se encuentra en la parte derecha de la celda, presione Mays+Flecha
izquierda.
2 3

Presione la flecha abajo para situar el cursor en la primera celda. Utilice las teclas de flecha o presione Tab para desplazarse a otras celdas, segn sea necesario.
Sugerencia: Al presionar la tecla Tab mientras se est en una celda de la derecha, se aade otra fila a la tabla.

4 5

Para seleccionar una celda, coloque el punto de insercin en dicha celda y presione Control+A. Para salir de la tabla, utilice el comando Seleccionar todo (Control+A en Windows u Opcin+A en Macintosh) dos veces y, a continuacin, presione la tecla de flecha arriba, izquierda, derecha o abajo.

Creacin de sitios Web accesibles

Dreamweaver le ayuda a crear pginas accesibles con contenido til para los lectores de pantalla y que cumplan las directrices gubernamentales (consulte http://www.section508.gov). Al activar los cuadros de dilogo de accesibilidad (consulte Activacin de los cuadros de dilogo de accesibilidad en la pgina 370), Dreamweaver le solicita que introduzca los atributos de accesibilidad siempre que inserte elementos de pgina.
Nota: Para ver pginas de muestra diseadas como pginas accesibles, seleccione Archivo > Nuevo. En el cuadro de dilogo Nuevo documento, seleccione Page Design (Accessible) en la lista de categoras y, a continuacin, seleccione una pgina en la lista Page Design (Accessible). Para obtener ms informacin, consulte Manipulacin del cuadro de dilogo Nuevo documento en la pgina 124.

Desarrollo de contenido para lectores de pantalla Para que la informacin sea accesible a los lectores de pantalla y a los usuarios de su sitio Web, Dreamweaver facilita la tarea de aadir equivalentes textuales para los elementos grficos de una pgina y le permite crear marcas en las tablas y los formularios en HTML para los lectores de pantalla y otras tecnologas de ayuda. Por ejemplo, puede aadir una imagen de producto a su documento y asociarle una descripcin como por ejemplo Chaqueta roja de chico, talla grande. De esta forma, cuando la imagen aparezca en una pgina para un usuario con discapacidades visuales, el lector de pantalla leer la descripcin y el usuario sabr qu producto est mostrando la pgina. Al activar los cuadros de dilogo de accesibilidad descritos en Activacin de los cuadros de dilogo de accesibilidad en la pgina 370, Dreamweaver le solicita que aada equivalentes textuales para los elementos grficos y otras marcas de accesibilidad.

Funciones de accesibilidad de Dreamweaver 369

Activacin de los cuadros de dilogo de accesibilidad Al crear pginas accesibles, debe asociar informacin en forma de rtulos y descripciones a los objetos de su pgina para que el contenido sea accesible a todos los usuarios. Para hacerlo, active los cuadros de dilogo de accesibilidad. De esta forma, Dreamweaver le solicita automticamente la informacin que es necesario aadir para que la pgina sea accesible. Estos cuadros de dilogo aparecen al insertar un objeto cuyo cuadro de accesibilidad correspondiente ha sido activado.
Para activar los cuadros de dilogo de accesibilidad:

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X). Aparece el cuadro de dilogo Preferencias. Seleccione Accesibilidad en la lista de categoras de la izquierda. El cuadro de dilogo Preferencias muestra las opciones de accesibilidad.

Complete este cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

A partir de ahora cada vez que inserte en un documento uno de los elementos que ha seleccionado, se abrir un cuadro de dilogo Accesibilidad que le solicita que introduzca etiquetas y atributos de accesibilidad para dicho elemento. Para obtener ms informacin sobre la adicin de contenido accesible al sitio Web, consulte las siguientes secciones:

Insercin de imgenes accesibles en la pgina 371 Insercin de objetos de formulario accesibles en la pgina 372 Insercin de marcos accesibles en la pgina 373 Insercin de objetos multimedia accesibles en la pgina 374 Insercin de tablas accesibles en la pgina 375

370 Captulo 23

Insercin de imgenes accesibles Cuando inserta una imagen y ha seleccionado la opcin Imgenes en la categora Accesibilidad del cuadro Preferencias, Dreamweaver le solicita que introduzca informacin para que la imagen sea accesible.
Nota: Para crear marcadores de posicin de imagen e imgenes interactivas, como las imgenes de sustitucin y las barras de navegacin, accesibles, introduzca un Texto alternativo al insertar la imagen. Para obtener ms informacin, consulte Insercin de imgenes en la pgina 325.

Para insertar una imagen accesible:

1 2

Coloque el punto de insercin en el lugar de la ventana de documento en el que desea que aparezca la imagen. Lleve a cabo una de las siguientes operaciones:

Elija Insertar > Imagen. En la ficha Comn de la barra Insertar, haga clic en el botn Imagen. Arrastre el icono Imagen desde la barra Insertar al documento.
Se abre el cuadro de dilogo Seleccionar origen de imagen.
3

Haga clic en Examinar para elegir un archivo o escriba la ruta del archivo de imagen. Si est trabajando en un documento que no est guardado, Dreamweaver genera una referencia de ubicacin de archivo para el archivo de imagen. Al guardar el documento en cualquier lugar del sitio, Dreamweaver convierte la referencia en una ruta relativa al documento.

Haga clic en Aceptar. Se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de imagen.

Introduzca valores en los cuadros de texto Texto alternativo y Descripcin larga. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
Nota: Puede completar uno o ambos cuadros de texto. Depende de sus necesidades.

Haga clic en Aceptar. La imagen aparece en el documento.

Nota: Si presiona Cancelar, la imagen aparece en el documento, pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.

Funciones de accesibilidad de Dreamweaver 371

Para editar los valores de accesibilidad de una imagen:

1 2

En la ventana de documento, seleccione la imagen. Lleve a cabo una de las siguientes operaciones:

Edite los atributos de imagen apropiados en la vista Cdigo. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control mientras
hace clic (Macintosh) y, a continuacin, seleccione Editar cdigo de etiqueta.

En el inspector de propiedades, edite el valor de Alt (Alternativo).

Insercin de objetos de formulario accesibles Cuando inserta un objeto de formulario y ha seleccionado la opcin Objetos de formulario en la categora Accesibilidad del cuadro Preferencias, Dreamweaver le solicita que introduzca informacin con el fin de hacerlo accesible.
Para aadir un objeto de formulario accesible:

1 2

En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca el formulario. Para insertar un objeto de formulario, lleve a cabo una de estas operaciones: desea insertar.

Elija Insertar > Objetos de formulario y, a continuacin, seleccione el objeto de formulario que Seleccione la ficha Formularios en la barra Insertar y haga clic en un botn de objeto. Seleccione la ficha Formularios en la barra Insertar y arrastre el icono apropiado al documento.
Se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada.

Complete este cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
Nota: Si presiona Cancelar, el objeto de formulario aparece en el documento pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.

Si Dreamweaver le pregunta si desea insertar una etiqueta de formulario, haga clic en S. El objeto de formulario aparece en el documento.

372 Captulo 23

Para editar los valores de accesibilidad de un objeto de formulario:

1 2

En la ventana de documento, seleccione el objeto. Lleve a cabo una de las siguientes operaciones:

Edite los atributos apropiados en la vista Cdigo. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control mientras
hace clic (Macintosh) y, a continuacin, seleccione Editar cdigo de etiqueta.
Para dotar un objeto de formulario de accesibilidad:

1 2 3

En la ventana de documento, seleccione el objeto de formulario que desea hacer dinmico. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control mientras hace clic (Macintosh) y, a continuacin, seleccione Editar cdigo de etiqueta. Edite los atributos como convenga para hacer que el objeto sea dinmico.

Nota: No puede utilizar el panel Vinculaciones para aadir un objeto de formulario dinmico accesible.

Insercin de marcos accesibles Cuando inserta un conjunto de marcos y ha seleccionado la opcin Marcos en la categora Accesibilidad del cuadro Preferencias, Dreamweaver le solicita que introduzca un nombre para cada marco con el fin de hacerlos accesibles.
Para insertar una conjunto de marcos accesible:

1 2

Site el punto de insercin en el documento. Para insertar un grupo de marcos, lleve a cabo una de las siguientes operaciones:

Elija Insertar > Marcos y, a continuacin, seleccione un conjunto de marcos. Haga clic en la ficha Marcos de la barra Insertar y, a continuacin, haga clic en el botn de
conjunto de marcos apropiado.

Seleccione la ficha Marcos en la barra Insertar y arrastre el icono del conjunto de marcos
apropiado al documento. El conjunto de marcos aparece en el documento y se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de marco.

Seleccione un marco en el men emergente y, a continuacin, introduzca un nombre para el marco. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
Sugerencia: Elija Ventana> Otros > Marcos para visualizar un diagrama de los marcos a los que est asignando un nombre.

Funciones de accesibilidad de Dreamweaver 373

4 5

Repita el paso anterior tantas veces como sea necesario para asignar un nombre a cada marco. Haga clic en Aceptar.
Nota: Si presiona Cancelar, el conjunto de marcos aparece en el documento pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.

Para editar los valores de accesibilidad de un marco:

1 2 3

Si est visualizando el documento con la vista Diseo, cmbiela a Cdigo o a una vista dividida. Elija Ventana > Otros> Marcos para abrir el panel Marcos. Seleccione uno de los marcos colocando el punto de insercin sobre l. Dreamweaver resalta la etiqueta de marco en el cdigo. Lleve a cabo una de las siguientes operaciones:

Edite el cdigo en la vista Cdigo. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control mientras
hace clic (Macintosh) y, a continuacin, seleccione Editar cdigo de etiqueta. Insercin de objetos multimedia accesibles Cuando inserta un objeto multimedia y ha seleccionado la opcin Medio en la categora Accesibilidad del cuadro Preferencias, Dreamweaver le solicita que introduzca informacin con el fin de hacerlo accesible.
Para insertar un objeto multimedia accesible:

1 2

En la ventana de documento, coloque el punto de insercin en el lugar en el que desea que aparezca el objeto multimedia . Lleve a cabo una de las siguientes operaciones:

Elija Insertar > Medio y seleccione un elemento. Seleccione la ficha Medio en la barra Insertar y haga clic en un botn de objeto. Seleccione la ficha Medio en la barra Insertar y arrastre el icono apropiado al documento.
Aparece un cuadro de dilogo Seleccionar archivo o Insertar Flash.
Nota: Cuando se trata de objetos Active X, aparece el cuadro de dilogo de accesibilidad. Si est trabajando con estos objetos, omita el siguiente paso.

Complete el cuadro de dilogo Seleccionar archivo o Insertar Flash y, a continuacin, haga clic en Aceptar. Se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de objeto.

374 Captulo 23

Complete este cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. El objeto multimedia aparece en el documento.
Nota: Si presiona Cancelar, en el documento aparece un marcador de posicin de objeto multimedia pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.

Para editar los valores de accesibilidad de un objeto multimedia:

1 2

En la ventana de documento, seleccione el objeto. Lleve a cabo una de las siguientes operaciones:

Edite los atributos apropiados en la vista Cdigo. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control mientras
hace clic (Macintosh) y, a continuacin, seleccione Editar cdigo de etiqueta. Insercin de tablas accesibles Cuando inserta una tabla y ha seleccionado la opcin Tablas en la categora Accesibilidad del cuadro Preferencias, Dreamweaver le solicita que introduzca un nombre para cada tabla con el fin de hacerlas accesibles.
Para insertar una tabla accesible:

1 2

En la ventana de documento, coloque el punto de insercin donde desee que aparezca la tabla. Lleve a cabo una de las siguientes operaciones:

Elija Insertar> Tabla. En la ficha Comn de la barra Insertar, haga clic en el botn Tabla. Arrastre el icono Tabla desde la ficha Comn de la barra Insertar al documento.
Aparece el cuadro de dilogo Insertar tabla con atributos de accesibilidad.

Complete este cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. La tabla aparece en el documento.
Nota: Si presiona Cancelar, la tabla no aparece en el documento.

Funciones de accesibilidad de Dreamweaver 375

Para editar los valores de accesibilidad de una tabla:

1 2

En la ventana de documento, seleccione la tabla. Lleve a cabo una de las siguientes operaciones:

Edite los atributos de tabla apropiados en la vista Cdigo. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control mientras
hace clic (Macintosh) y, a continuacin, seleccione Editar cdigo de etiqueta.

Comprobacin de la accesibilidad del sitio Web

La mejor forma de garantizar que el sitio es accesible a todos los usuarios es disear el sitio siguiendo las directrices de accesibilidad dispuestas en la Seccin 508 de la Ley de insercin de 1998. A continuacin, utilice la caracterstica de informes de Dreamweaver para comprobar que ha implementado las directrices en el sitio. Puede ejecutar un informe de accesibilidad sobre el documento actual, los archivos seleccionados, una carpeta o un sitio completo.
Para ejecutar un informe de accesibilidad sobre el documento actual:

1 2

Abra el documento que desea comprobar. Seleccione Archivo > Comprobar pgina > Comprobar accesibilidad. Los resultados del informe aparecen en el panel Informes de sitios (en el grupo de paneles Resultados).

Para ejecutar un informe de accesibilidad sobre el contenido seleccionado:

Realice una de las siguientes acciones para seleccionar el contenido que desea comprobar:

Abra un documento. Seleccione los archivos en el panel Sitio. Seleccione un sitio en el men emergente Sitio del panel Sitio.
Nota: Para ejecutar un informe de accesibilidad sobre una carpeta, no es necesario seleccionar la carpeta ahora; puede seleccionarla en el cuadro de dilogo Informes.

376 Captulo 23

Elija Sitio > Informes. Se abre el cuadro de dilogo Informes.

Seleccione el contenido sobre el que desea crear un informe en el men emergente Informe sobre y, a continuacin, seleccione Accesibilidad.
Nota: Si selecciona Carpeta en el men emergente Informe sobre, haga clic en Examinar para seleccionar una carpeta.

Haga clic en Ejecutar. Los resultados del informe aparecen en el panel Informes de sitios (en el grupo de paneles Resultados).

Para ver y editar los problemas detectados en el informe:

Ejecute un informe de accesibilidad sobre el contenido del sitio Web seleccionado, si no lo ha hecho an. Los resultados del informe aparecen en el panel Informes de sitios (en el grupo de paneles Resultados). Seleccione cualquier lnea del informe y haga clic en el botn Ms info. (Ms informacin) de la parte izquierda del panel Informes de sitios para obtener una descripcin del problema y sugerencias sobre cmo solucionarlo. La informacin aparece en el panel Referencia (en el grupo de paneles Cdigo).

Haga doble clic en cualquier lnea del informe para visualizar el cdigo correspondiente en la ventana de documento.
Nota: Si est en la vista Diseo, Dreamweaver cambia la visualizacin a la vista dividida para mostrar el problema detectado en el cdigo.

Funciones de accesibilidad de Dreamweaver 377

En la ventana de documento, en la vista Cdigo, edite o aada atributos a las etiquetas apropiadas para hacer que el contenido cumpla las directrices de accesibilidad. Para utilizar el editor de etiquetas como ayuda para la creacin del cdigo, seleccione un fragmento de cdigo, haga clic con el botn derecho (Windows) o mantenga presionado el botn Control y haga clic (Macintosh) y elija el editor de etiquetas. Para obtener ms informacin sobre etiquetas y atributos, seleccione OReilly HTML Reference en el panel Referencia (en el grupo de paneles Cdigo) y, a continuacin, seleccione una etiqueta.

Para guardar un informe de accesibilidad:

Haga clic en el botn Guardar informe que se encuentra en el margen izquierdo del panel Informes de sitios. Informacin sobre esta funcin La funcin de validacin de la accesibilidad de Dreamweaver MX utiliza tecnologa de UsableNet. UsableNet es una empresa lder en el desarrollo de software fcil de utilizar para automatizar la comprobacin y la reparacin de problemas de usabilidad y accesibilidad. Para obtener ms ayuda con la comprobacin de la accesibilidad, pruebe LIFT for Macromedia Dreamweaver de UsableNet, una solucin completa para desarrollar sitios Web utilizables y accesibles. Lift for Macromedia Dreamweaver de UsableNet incluye asistentes para tablas, formularios e imgenes complejas, un editor de ALT global, informes personalizables y un nuevo modo de supervisin activo que asegura la accesibilidad al contenido a medida que se escriben las pginas. Solicite una versin de demostracin de Lift for Macromedia Dreamweaver en http://www.usablenet.com.

378 Captulo 23

Parte VI Utilizacin de comportamientos y animaciones

Muchas pginas Web slo contienen texto e imgenes, sin elementos interactivos. Utilice comportamientos JavaScript y lneas de tiempo de animacin de capas en Dreamweaver para aadir interactividad y animacin con el fin de mantener la atencin de los visitantes. Esta parte contiene los siguientes captulos:

Parte VI

Captulo 24, Utilizacin de comportamientos

JavaScript

Captulo 25, Animacin de capas

CAPTULO 24 Utilizacin de comportamientos JavaScript

Los comportamientos de Dreamweaver introducen en los documentos cdigo JavaScript que permite a los visitantes interactuar con la pgina Web para modificarla de diversas maneras o para que se realicen determinadas tareas. Un comportamiento es una combinacin de un evento con una accin que desencadena ese evento. En el panel Comportamientos, un comportamiento se aade a una pgina especificando en primer lugar una accin y, a continuacin, el evento que desencadena esa accin.
Nota: El cdigo del comportamiento es cdigo JavaScript del lado del cliente; es decir, se ejecuta en los navegadores, no en los servidores.

Los eventos son mensajes generados por los navegadores que indican que un visitante de la pgina ha hecho algo. Por ejemplo, cuando un visitante mueve el puntero sobre un vnculo, el navegador genera un evento onMouseOver para ese vnculo. A continuacin, comprueba si hay cdigo JavaScript (especificado en la pgina mostrada) al que deba llamar cuando se genere ese evento para ese vnculo. Los distintos elementos de la pgina tienen definidos diferentes eventos. Por ejemplo, en la mayora de los navegadores onMouseOver y onClick son eventos asociados a vnculos, mientras que onLoad es un evento asociado a imgenes y a la seccin body del documento. Las acciones constan de cdigo JavaScript ya definido que realiza una tarea especfica, como abrir la ventana de un navegador, mostrar u ocultar una capa, reproducir un sonido o detener una pelcula Shockwave. Las acciones que incorpora Macromedia Dreamweaver MX han sido cuidadosamente desarrolladas por los ingenieros de Dreamweaver para proporcionar la mxima compatibilidad con los distintos navegadores. Despus de adjuntar un comportamiento a un elemento de pgina, cada vez que se produce el evento especificado para ese elemento, el navegador llama la accin (el cdigo JavaScript) que usted ha asociado con ese evento. (Los eventos que puede utilizar para desencadenar una accin determinada varan en funcin del navegador de que se trate.) Por ejemplo, si adjunta la accin Mensaje emergente a un vnculo y especifica que el evento onMouseOver desencadena esa accin, cada vez que un visitante pase el puntero del ratn sobre ese vnculo en el navegador aparecer el mensaje en un cuadro de dilogo. Un mismo evento puede desencadenar varias acciones distintas, y se puede especificar el orden en que esas acciones tienen lugar. Dreamweaver MX incluye unas 24 acciones de comportamiento. Encontrar otras acciones en el sitio Web de Macromedia Exchange, as como en los sitios Web de otros desarrolladores. (Consulte Descarga e instalacin de comportamientos de otros proveedores en la pgina 386.) Si dispone de los conocimientos necesarios sobre JavaScript, puede escribir sus propias acciones de comportamiento. Para obtener ms informacin sobre cmo escribir acciones de comportamiento, consulte Ampliacin de Dreamweaver.

381

Nota: Los trminos comportamiento y accin son trminos de Dreamweaver, no de HTML. En lo que se refiere al navegador, una accin es igual que cualquier otro elemento de cdigo JavaScript.

Este captulo contiene las siguientes secciones:

Utilizacin del panel Comportamientos en la pgina 382 Eventos en la pgina 382 Aplicacin de un comportamiento en la pgina 383 Comportamientos y texto en la pgina 384 Cmo adjuntar un comportamiento a una lnea de tiempo en la pgina 385 Cambio de un comportamiento en la pgina 385 Actualizacin de un comportamiento en la pgina 386 Creacin de nuevas acciones en la pgina 386 Descarga e instalacin de comportamientos de otros proveedores en la pgina 386 Utilizacin de las acciones de comportamiento incluidas con Dreamweaver en la pgina 387

Utilizacin del panel Comportamientos

Use el panel Comportamientos para adjuntar comportamientos a los elementos de la pgina (ms concretamente, a las etiquetas) y para modificar parmetros de otros comportamientos adjuntados anteriormente. Para abrir el panel Comportamientos, elija Ventana > Comportamientos. Los comportamientos que ya se han adjuntado al elemento de pgina actualmente seleccionado aparecen en la lista de comportamientos (el rea principal del panel), en orden alfabtico por eventos. Si hay varias acciones para un mismo evento, las acciones se ejecutarn en el orden en que aparecen en la lista. Si en la lista de comportamientos no aparece ningn comportamiento, significa que no hay ningn comportamiento adjunto al elemento actualmente seleccionado. Para obtener ms informacin sobre las opciones del panel Comportamientos, elija Ayuda en el men Opciones, en la barra de ttulo del grupo de paneles.

Eventos
Cada navegador proporciona una serie de eventos que pueden asociarse a las acciones que figuran en el men emergente Acciones (+) del panel Comportamientos. Cuando un visitante de la pgina Web interacta con la pgina (por ejemplo, haciendo clic en una imagen) el navegador genera sucesos que pueden utilizarse para llamar a funciones JavaScript que, a su vez, provocan la ejecucin de una accin. (Los eventos tambin pueden generarse sin interaccin del usuario, por ejemplo, cuando se configura una pgina para que vuelva a cargarse cada 10 segundos.) Dreamweaver proporciona numerosas acciones comunes que pueden desencadenarse utilizando estos eventos. Para obtener nombres y descripciones de los eventos suministrados en cada navegador, consulte el Centro de servicio tcnico de Dreamweaver en http://www.macromedia.com/es/support/.

382 Captulo 24

Tenga en cuenta que la mayora de los eventos solamente pueden usarse con determinados elementos de pgina. Para conocer cules son los eventos que admite un navegador determinado para un elemento de pgina concreto, inserte el elemento de pgina en su documento, adjntele un comportamiento y luego mire el men emergente Eventos del panel Comportamientos. Para saber con exactitud cules son las etiquetas que se pueden usar con un evento en un navegador determinado, busque el evento en uno de los archivos de la carpeta Dreamweaver/Configuration/ Behaviors/Events.

Aplicacin de un comportamiento
Se pueden adjuntar comportamientos al documento completo (es decir, a la etiqueta body) o a vnculos, imgenes, elementos de formulario o cualquier otro elemento HTML. El navegador de destino que elija determinar los eventos posibles para un elemento dado. Internet Explorer 4.0, por ejemplo, tiene una gama de eventos para cada elemento mucho ms amplia que Navigator 4.0 o que la versin 3.0 de cualquier otro navegador.
Nota: No se puede adjuntar un comportamiento a texto normal. Para obtener ms informacin, consulte Comportamientos y texto en la pgina 384.

Se puede especificar ms de una accin para cada evento. Las acciones tienen lugar en el orden en el que figuran en la columna Acciones del panel Comportamientos. Para obtener informacin sobre la manera de cambiar el orden de las acciones, consulte Cambio de un comportamiento en la pgina 385.
Para adjuntar un comportamiento:

Seleccione un elemento de la pgina, como una imagen o un vnculo. Para adjuntar un comportamiento a la pgina completa, haga clic en la etiqueta <body> en el selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento.

2 3

Elija Ventana > Comportamientos para abrir el panel de comportamientos. Haga clic en el botn de signo ms (+) y elija una accin del men emergente Acciones. No se pueden seleccionar las acciones que aparecen atenuadas en el men. Es posible que se muestren atenuadas porque no existe un objeto especfico en el documento actual. Por ejemplo, la accin Reproducir lnea de tiempo se mostrar atenuada si el documento no tiene lneas de tiempo, y la accin Controlar Shockwave o Flash aparecer atenuada si el documento no contiene pelculas Shockwave o Flash. Si no hay eventos para el objeto seleccionado, todas las acciones aparecern atenuadas. Cuando se elige una accin, aparecer un cuadro de dilogo en el que se mostrarn los parmetros e instrucciones de la accin.

Introduzca los parmetros de la accin y haga clic en Aceptar. Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores de la versin 4.0 y posteriores. Algunas acciones no funcionan en los navegadores antiguos. Consulte Utilizacin de las acciones de comportamiento incluidas con Dreamweaver en la pgina 387.

Utilizacin de comportamientos JavaScript 383

El evento predeterminado que desencadena la accin aparece en la columna Eventos. Si no es ste el evento de desencadenamiento que desea, seleccione otro en el men emergente Eventos. (Para abrir el men emergente Eventos, seleccione un evento o una accin en el panel Comportamientos y haga clic en la flecha negra que seala hacia abajo y que aparece entre el nombre del evento y el nombre de la accin.) En el men emergente Eventos aparecen diferentes eventos en funcin del objeto seleccionado y de los navegadores especificados en el submen Mostrar eventos para. Los eventos pueden aparecer atenuados si an no existen en la pgina los objetos pertinentes o si el objeto seleccionado no puede recibir eventos. Si no aparecen los eventos esperados, asegrese de que est seleccionado el objeto correcto o cambie los navegadores de destino en el men emergente Mostrar eventos para. Al adjuntar un comportamiento a una imagen, algunos eventos (como onMouseOver) aparecen entre parntesis. Estos eventos solamente estn disponibles para vnculos. Cuando se elige uno de ellos, Dreamweaver ajusta una etiqueta a alrededor de la imagen para definir un vnculo nulo. El vnculo nulo es representado por javascript:; en el cuadro de texto Vnculos del inspector de propiedades. Puede cambiar el valor del vnculo si desea convertirlo en un vnculo real con otra pgina, pero si borra el vnculo JavaScript sin sustituirlo por otro vnculo, borrar el comportamiento.

Comportamientos y texto
No se puede adjuntar un comportamiento a texto normal. Las etiquetas como p y span no generan eventos en los navegadores, por lo que no es posible desencadenar una accin a partir de esas etiquetas. Sin embargo, s se puede adjuntar un comportamiento a un vnculo. Por ello, la manera ms fcil de adjuntar un comportamiento a texto consiste en aadir un vnculo nulo (que no seala a nada) al texto y, a continuacin, adjuntar el comportamiento al vnculo. Tenga en cuenta que al hacerlo, el texto tendr apariencia de vnculo. Puede cambiar el color del vnculo y eliminar el subrayado si no desea que parezca un vnculo, si bien de esta manera los visitantes del sitio no se darn cuenta de que hay una razn para hacer clic en ese texto.
Para adjuntar un comportamiento al texto seleccionado:

En el inspector de propiedades, introduzca javascript:; en el campo Vnculo. Asegrese de incluir tanto los dos puntos como el punto y coma.
Nota: Si lo desea, como alternativa, puede usar un signo de almohadilla (#) en el campo Vnculo. El problema de usar un signo de almohadilla es que cuando un visitante hace clic en un vnculo, algunos navegadores pueden saltar a la parte superior de la pgina. Hacer clic en el vnculo nulo de JavaScript no produce efecto alguno en la pgina, por lo que la solucin de JavaScript suele ser la preferible.

2 3

Con el texto todava seleccionado, abra el panel Comportamientos (Ventana> Comportamientos). Elija una accin en el men emergente Acciones, introduzca los parmetros de la accin y seleccione un evento que desencadene la accin. Para obtener ms informacin, consulte Aplicacin de un comportamiento en la pgina 383.

Para cambiar el aspecto de texto vinculado de modo que no parezca un vnculo:

1 2

Abra la vista Cdigo en la ventana de documento eligiendo Ver > Cdigo. Busque el vnculo

384 Captulo 24

En la etiqueta a href del vnculo, inserte este atributo: style="text-decoration:none; color:black". Al incluir este atributo, se desactiva el subrayado y el color del texto se establece en negro. (Por supuesto, si el texto contiguo es de un color distinto, use ese color en lugar del negro.) Observe que este atributo es un estilo CSS en lnea. Un estilo en lnea aplicado a un vnculo anula los otros estilos CSS que se aplican a ese vnculo, pero no tiene efecto fuera de ste. Para cambiar la apariencia del texto vinculado en todos los lugares en que aparece en la pgina o en todo el sitio, use los estilos CSS para crear un nuevo estilo de enlace. Para obtener ms informacin, consulte Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297.

Cmo adjuntar un comportamiento a una lnea de tiempo

Para desencadenar un comportamiento en un fotograma determinado de una lnea de tiempo (en lugar de que sea la interaccin del visitante la que lo desencadene), coloque el comportamiento en la lnea de tiempo. (Para obtener informacin sobre la creacin de una lnea de tiempo, consulte Animacin de las capas en la pgina 427.) Por ejemplo, puede hacer que se empiece a reproducir un sonido en el fotograma 15 de una lnea de tiempo. Slo un tipo de evento puede desencadenar una accin en una lnea de tiempo: la animacin llega a un nmero de fotograma determinado (un evento onFrame7, por ejemplo). El comportamiento puede afectar a cualquier objeto de la pgina y no slo a los objetos de la lnea de tiempo. Reproduzca la lnea de tiempo en un navegador para ver cmo funciona el comportamiento. Dentro de Dreamweaver no se puede obtener la vista previa de un comportamiento.
Para colocar un comportamiento en una lnea de tiempo:

1 2

Haga clic en un fotograma en el canal Behaviors del panel Lneas de tiempo. Use el panel Comportamientos para seleccionar la accin que desea que se realice en ese fotograma. La accin aparece en el panel Comportamientos, con un evento que indica el nmero de fotograma en el que se desencadena la accin. Aparecer un signo menos (-) en el canal Behaviors de la lnea de tiempo.

Cambio de un comportamiento
Despus de adjuntar un comportamiento, se puede cambiar el evento que desencadena la accin, aadir o eliminar acciones y cambiar los parmetros de las acciones.
Para cambiar un comportamiento:

1 2

Seleccione un objeto con un comportamiento adjunto. Elija Ventana > Comportamientos para abrir el panel de comportamientos. Los comportamientos aparecern en el panel ordenados alfabticamente por eventos. Si hay varias acciones para un mismo evento, las acciones aparecen en el orden en que se ejecutarn.

Utilizacin de comportamientos JavaScript 385

Dispone de las opciones siguientes: seleccinelo y presione la tecla Entrar (Windows) o Retorno (Macintosh); seguidamente, cambie los parmetros en el cuadro de dilogo y haga clic en Aceptar.

Para editar los parmetros de una accin, haga doble clic en el nombre del comportamiento o Para cambiar el orden de las acciones de un evento dado, seleccione una accin y haga clic en
los botones de flecha arriba o abajo.

Para eliminar un comportamiento, seleccinelo y haga clic en el botn de signo menos () o

presione Suprimir.

Actualizacin de un comportamiento
Si sus pginas contienen comportamientos creados con Dreamweaver 1 o Dreamweaver 2, dichos comportamientos no se actualizarn automticamente al abrir las pginas con la versin actual de Dreamweaver. No obstante, al actualizar una aparicin de un comportamiento en una pgina (siguiendo el procedimiento que se indica a continuacin) se actualizarn todas las dems apariciones de dicho comportamiento en la pgina. Los comportamientos creados en Dreamweaver 3 funcionan correctamente en Dreamweaver 4 sin necesidad de modificacin.
Para actualizar un comportamiento en una pgina:

1 2 3 4

Seleccione un elemento que tenga el comportamiento adjunto. Abra el panel Comportamientos. Haga doble clic en el comportamiento. Haga clic en Aceptar en el cuadro de dilogo del comportamiento.

Se actualizarn todas las apariciones del comportamiento en esa pgina.

Creacin de nuevas acciones

Las acciones constan de cdigo JavaScript y HTML. Si posee los conocimientos necesarios sobre JavaScript, puede escribir nuevas acciones y aadirlas al men emergente Acciones del panel Comportamientos. Para obtener ms informacin, consulte Ampliacin de Dreamweaver.

Descarga e instalacin de comportamientos de otros proveedores

Una de las caractersticas ms interesantes de Dreamweaver es su capacidad de ampliacin. Es decir, ofrece a aquellos usuarios que disponen de suficientes conocimientos de JavaScript la oportunidad de escribir cdigo JavaScript y ampliar as las posibilidades de Dreamweaver. Muchos de estos usuarios han decidido compartir sus extensiones con otros usuarios envindolas al sitio Web Macromedia Exchange for Dreamweaver.
Para descargar e instalar nuevos comportamientos desde el sitio Exchange:

Abra el panel Comportamientos y elija Obtener ms comportamientos en el men emergente Acciones (+). Se abrir su navegador principal y aparecer el sitio Exchange. (Para descargar comportamientos es necesario estar conectado a la Web.)

Examine o busque los paquetes.

386 Captulo 24

Descargue e instale el paquete de extensiones que desee. Para obtener ms informacin, consulte Adicin de extensiones a Dreamweaver en la pgina 67.

Utilizacin de las acciones de comportamiento incluidas con Dreamweaver

Las acciones de comportamiento incluidas con Dreamweaver han sido desarrolladas para que funcionen con todas las versiones de Netscape Navigator 4.0 e Internet Explorer 4.0 y posteriores. La mayora de estas acciones de comportamiento tambin funcionan con Netscape Navigator versin 3.0 y posteriores. (Los comportamiento relacionados con capas no funcionan con Navigator 3.0.) La mayora de estas acciones de comportamiento no producen resultados con Internet Explorer versin 3.0.
Nota: Las acciones de Dreamweaver han sido cuidadosamente desarrolladas para funcionar en el mayor nmero posible de navegadores. Si elimina manualmente cdigo de una accin de Dreamweaver o lo sustituye por su propio cdigo, puede perderse la compatibilidad con mltiples navegadores.

Aunque las acciones de Dreamweaver han sido escritas para maximizar la compatibilidad con mltiples navegadores, hay algunas que no funcionan en los navegadores ms antiguos. Por otra parte, algunos navegadores no son compatibles con JavaScript y, adems, muchos usuarios navegan por la Web con JavaScript desactivado en sus navegadores. Para obtener la mejor compatibilidad en distintas plataformas, incorpore interfaces alternativas incluidas en etiquetas noscript para que puedan usar el sitio las personas que no tienen JavaScript. Llamar JavaScript La accin Llamar JavaScript permite usar el panel Comportamientos para indicar que debe ejecutarse una funcin personalizada o lnea de cdigo JavaScript cuando se produce un evento determinado. (Puede escribir el cdigo JavaScript usted mismo o usar el cdigo que tiene a su disposicin en diversas bibliotecas JavaScript de acceso gratuito en la Web.)
Para usar la accin Llamar JavaScript:

1 2 3

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Llamar JavaScript en el men emergente Acciones. Escriba el cdigo JavaScript exacto que se ejecutar o el nombre de una funcin. Por ejemplo, para crear un botn Atrs, podra escribir if (history.length > 0){history.back()}. Si ha encapsulado el cdigo en una funcin, escriba solamente el nombre de la funcin (por ejemplo, hogback()).

4 5

Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Utilizacin de comportamientos JavaScript 387

Cambiar propiedad Use la accin Cambiar propiedad para cambiar el valor de una de las propiedades de un objeto (por ejemplo, el color de fondo de una capa o la accin de un formulario). Las propiedades que puede cambiar estn determinadas por el navegador. Son muchas ms las propiedades que este comportamiento puede cambiar en Internet Explorer 4.0 que en IE 3.0 o Navigator 3.0 o 4.0. Por ejemplo, puede configurar el color de fondo de una capa de forma dinmica.
Nota: Utilice esta accin slo si posee buenos conocimientos de HTML y JavaScript.

Para usar la accin Cambiar propiedad:

1 2 3

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Cambiar propiedad del men emergente Acciones. En el men emergente Tipo de objeto, elija el tipo de objeto cuyas propiedades desea cambiar. El men emergente Objeto con nombre muestra ahora todos los objetos con nombre del tipo elegido.

4 5

Seleccione un objeto en el men emergente Objeto con nombre. Seleccione una propiedad en el men emergente Propiedad o introduzca el nombre de la propiedad en el campo de texto. Para ver las propiedades que se pueden cambiar en cada navegador, elija diferentes navegadores o versiones de navegadores en el men emergente Navegador. Si introduce manualmente un nombre de propiedad, asegrese de usar el nombre exacto JavaScript de la propiedad (y recuerde que las propiedades de JavaScript distinguen maysculas de minsculas).

6 7

Introduzca el nuevo valor de la propiedad en el campo Nuevo valor y haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. (Cuando tiene lugar el evento, la accin se ejecuta y cambia la propiedad.) Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Comprobar navegador Use la accin Comprobar navegador para enviar a los visitantes a distintas pginas, dependiendo de las marcas y versiones de sus navegadores. Por ejemplo, puede resultar conveniente que los visitantes vayan a una pgina si su navegador es Navigator 4.0 o una versin posterior, que vayan a otra pgina si tienen Internet Explorer 4.0 o una versin posterior o que permanezcan en la pgina actual si usan un navegador de algn otro tipo. Resulta til adjuntar este comportamiento a la etiqueta body de una pgina que sea compatible prcticamente con cualquier navegador (y que no use ninguna otra secuencia JavaScript). De esta manera, los visitantes que visiten la pgina con JavaScript desactivado podrn ver algo de contenido.
<a href="javascript:;">)

Otra posibilidad consiste en adjuntar este comportamiento a un vnculo nulo (como y que la accin determine el destino del vnculo en funcin de la marca y la versin del navegador del visitante.

388 Captulo 24

Para usar la accin Comprobar navegador:

1 2 3

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Comprobar navegador en el men emergente Acciones. Determine el criterio de separacin que desea aplicar a los visitantes: por tipo de navegador, por versin de navegador o por ambas. Por ejemplo, desea que todos los usuarios que tengan un navegador de la versin 4.0 vean una pgina y que los dems vean otra pgina distinta? O prefiere quiz que los usuarios de Netscape Navigator vean una pgina y que los usuarios de Internet Explorer vean otra distinta?

4 5

Especifique una versin de Netscape Navigator. En los mens emergentes contiguos, elija las opciones sobre lo que debe ocurrir si el navegador corresponde a la versin de Netscape Navigator especificada o posterior y lo que debe ocurrir en caso contrario. Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta pgina. Especifique una versin de Internet Explorer. En los mens emergentes contiguos, elija las opciones sobre lo que debe ocurrir si el navegador corresponde a la versin de Internet Explorer especificada o posterior y lo que debe ocurrir en caso contrario. Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta pgina. Elija una opcin en el men emergente Otros navegadores para especificar lo que debe ocurrir si el navegador no es Navigator ni Internet Explorer. (Por ejemplo, el visitante puede estar utilizando un navegador basado en texto como Lynx.) Permanecer en esta pgina es la mejor opcin para los navegadores distintos de Navigator e IE porque la mayora de ellos no son compatibles con JavaScript y, si no pueden leer este comportamiento, permanecern en la misma pgina de todos modos.

6 7

Introduzca las rutas y los nombres de archivo del URL y del URL alternativo en los campos de texto situados en la parte inferior del cuadro de dilogo. Si introduce un URL remoto, deber introducir el prefijo http:// adems de la direccin www. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para. Recuerde que el objetivo de este comportamiento es comprobar las distintas versiones de los navegadores, por lo que lo mejor es elegir un evento que funcione en los navegadores de la versin 3.0 y posteriores.

10 11

Utilizacin de comportamientos JavaScript 389

Comprobar plug-in Use la accin Comprobar plug-in para remitir a los visitantes a distintas pginas dependiendo de si tienen instalado el plug-in en cuestin. Por ejemplo, puede resultar conveniente que los visitantes vayan a una pgina si tienen Shockwave y a otra distinta si no lo tienen.
Nota: No es posible detectar plug-ins especficos en Internet Explorer con JavaScript. No obstante, la seleccin de Flash o Director har que se aada el cdigo VBScript adecuado a la pgina para detectar los plug-ins en IE en Windows. La deteccin de plug-ins es imposible con Internet Explorer en Macintosh.

Para usar la accin Comprobar plug-in:

1 2 3

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Comprobar plug-in del men emergente Acciones. Seleccione un plug-in en el men emergente Plug-in o haga clic en Entrar e introduzca el nombre exacto del plug-in en el campo contiguo. Deber utilizar el nombre exacto del plug-in tal como se especifica en negrita en la pgina Acerca de los Plug-ins de Navigator. (En Windows, elija Ayuda > Acerca de Plug-ins de Navigator; en Macintosh, elija Acerca de Plug-ins en el men Apple.)

En el campo Si se encuentra, Ir a URL, especifique un URL para los visitantes que dispongan del plug-in. Si especifica un URL remoto, deber incluir el prefijo http:// en la direccin. Para hacer que los visitantes que disponen del plug-in permanezcan en la misma pgina, deje vaco este campo.

En el campo De lo contrario, Ir a URL, especifique un URL alternativo para los visitantes que no dispongan del plug-in. Para hacer que los visitantes que no disponen del plug-in permanezcan en la misma pgina, deje vaco este campo.

La deteccin de plug-ins no es posible en Internet Explorer para Macintosh; adems, Internet Explorer para Windows no permite detectar la mayora de los plug-ins. De forma predeterminada, cuando la deteccin resulta imposible, se enva al visitante al URL indicado en el campo De lo contrario. Para enviar al visitante al primer URL (Si se encuentra), seleccione la opcin Ir siempre al primer URL si no es posible detectar. Cuando est seleccionada, esta opcin hace que se d por hecho que el visitante dispone del plug-in, a no ser que el navegador indique explcitamente que el plug-in no est presente. En general, si el contenido del plug-in es parte integrante de la pgina, seleccione la opcin Ir siempre al primer URL si no es posible detectar; los visitantes que no dispongan del plug-in normalmente recibirn un mensaje del navegador para indicarles que deben descargar el plugin. Si el contenido del plug-in no es una parte esencial de la pgina, deje esta opcin sin seleccionar. Esta opcin afecta slo a Internet Explorer; Navigator siempre detecta los plug-ins.

7 8

Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

390 Captulo 24

Controlar Shockwave o Flash Use la accin Controlar Shockwave o Flash para reproducir, detener, rebobinar o ir a un fotograma de una pelcula Macromedia Shockwave o Macromedia Flash.
Para usar la accin Controlar Shockwave o Flash:

1 2

Elija Insertar > Medio > Shockwave o Insertar > Medio > Flash para insertar una pelcula Shockwave o Flash, respectivamente. Elija Ventana > Propiedades e introduzca un nombre para la pelcula en el campo situado ms arriba y a la izquierda (junto al icono Shockwave o Flash). Debe asignar un nombre a la pelcula para poder controlarla con la accin Controlar Shockwave o Flash. Seleccione el elemento que desea usar para controlar la pelcula Shockwave o Flash. Por ejemplo, si tiene una imagen de un botn Reproducir que se utilizar para reproducir la pelcula, seleccione esa imagen. Abra el panel Comportamientos (Ventana > Comportamientos). Haga clic en el botn de signo ms (+) y elija Controlar Shockwave o Flash en el men emergente Acciones. Aparecer un cuadro de dilogo de parmetros. Seleccione una pelcula en el men emergente Pelcula. Dreamweaver presenta automticamente una lista con los nombres de todas las pelculas Shockwave y Flash que hay actualmente en el documento. (En concreto, Dreamweaver presenta una lista con todos los nombres de los archivos con las extensiones .dcr, .dir, .swf o .spl que estn en las etiquetas object o embed.)

4 5

7 8 9

Elija reproducir, detener, rebobinar o ir a una secuencia de la pelcula. La opcin Reproducir reproduce la pelcula empezando en el fotograma en que se produce la accin. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el submen Mostrar eventos para del men emergente Eventos.

Arrastrar capa La accin Arrastrar capa permite al visitante arrastrar una capa. Use esta accin para crear puzzles, controles deslizantes y otros elementos mviles de interfaz. Se puede especificar la direccin en la que el visitante puede arrastrar la capa (en horizontal, vertical o en cualquier direccin), un destino hasta el que el visitante debe arrastrar la capa, si la capa debe ajustarse al destino cuando aqulla se encuentra a un cierto nmero de pxeles de ste y qu suceder cuando la capa llegue al destino, entre otras opciones. Dado que la llamada a la accin Arrastrar capa debe producirse antes de que el visitante pueda arrastrar la capa, asegrese de que el evento que desencadena la accin se produce antes de que el visitante intente arrastrar la capa. Es recomendable adjuntar la accin Arrastrar capa al objeto body (con el evento onLoad), aunque tambin puede adjuntarla a un vnculo que llene toda la capa (como, por ejemplo, un vnculo alrededor de una imagen) usando el evento onMouseOver.

Utilizacin de comportamientos JavaScript 391

Para usar la accin Arrastrar capa:

1 2 3 4

Elija Insertar > Capa o haga clic en el botn Dibujar capa de la barra Insertar y dibuje una capa en la ventana de documento de la vista Diseo. Seleccione la etiqueta body haciendo clic en <body> en el selector de etiquetas que se encuentra en la parte inferior de la ventana de documento. Abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Arrastrar capa del men emergente Acciones. Si la accin Arrastrar capa no est disponible, es muy probable que haya una capa seleccionada. Dado que las capas no aceptan eventos en la versin 4.0 de ninguno de los dos navegadores, deber seleccionar un objeto diferente, como la etiqueta body, o un vnculo (etiqueta a), o bien cambiar el navegador de destino a IE 4.0 en el men emergente Mostrar eventos para.

5 6

Seleccione la capa que desea hacer desplazable en el men emergente Capa. Seleccione Restringido o No restringido en el men emergente Movimiento. El movimiento no restringido es adecuado para puzzles y otros juegos de arrastrar y soltar. Para los controles deslizantes y los escenarios mviles, como cajones de archivos, cortinas y minipersianas, elija movimiento restringido.

Para movimiento restringido, introduzca valores (en pxeles) en los campos Arriba, Abajo, Derecha e Izquierda. Los valores son relativos a la posicin inicial de la capa. Para restringir el movimiento a una regin rectangular, introduzca valores positivos en los cuatro campos. Para permitir solamente el movimiento vertical, introduzca valores positivos para Arriba y Abajo, y 0 para Izquierda y Derecha. Para permitir slo el movimiento horizontal, introduzca valores positivos para Izquierda y Derecha, y 0 para Arriba y Abajo.

Introduzca valores (en pxeles) en los campos Izquierdo y Superior para definir el destino de la capa. El destino de la capa es la zona hasta la que usted desea que el visitante arrastre la capa. Se considera que una capa ha alcanzado el destino cuando sus coordenadas izquierda y superior coinciden con los valores introducidos en los campos Izquierdo y Superior. Los valores son relativos al ngulo superior izquierdo de la ventana del navegador. Haga clic en la opcin Obtener posicin actual para rellenar automticamente los campos con la posicin actual de la capa.

Introduzca un valor (en pxeles) en el campo Ajustar si a menos de para determinar a qu distancia del destino el visitante debe soltar la capa para que sta se ajuste al destino. Los valores grandes facilitan al visitante la localizacin el destino para soltar la capa. Para obtener puzzles sencillos y manipulacin de escenarios, puede detenerse aqu. Para definir el manejador de arrastre de una capa, controlar el movimiento de una capa mientras se arrastra y desencadenar una accin al soltar la capa, haga clic en la ficha Avanzado.

10

392 Captulo 24

11

Para definir una zona determinada de la capa en la que el visitante debe hacer clic para arrastrarla, elija Interior de capa en el men emergente Arrastrar selector; luego introduzca las coordenadas izquierda y superior, as como los valores de ancho y alto del manejador de arrastre. Esta opcin resulta til cuando la imagen contenida en la capa incluye un elemento que sugiere la posibilidad de arrastrarla, como una barra de ttulo o un asa de cajn. No configure esta opcin si desea que el visitante pueda hacer clic en algn lugar de la capa para arrastrarla.

12

Elija las opciones Al arrastrar que desee utilizar: de apilamiento mientras se est arrastrando. Si selecciona esta opcin, utilice el men emergente para determinar si desea dejar la capa en la primera posicin o devolverla a su posicin original en el orden de apilamiento.

Seleccione Traer la capa al frente si la capa debe desplazarse a la primera posicin en el orden

Introduzca cdigo JavaScript o un nombre de funcin (por ejemplo, monitorLayer()) en el

campo Llamar JavaScript para ejecutar repetidamente el cdigo o funcin mientras se est arrastrando la capa. Por ejemplo, podra escribir una funcin que controle las coordenadas de la capa y muestre mensajes y consejos como "ya est cerca" o "est lejsimos del destino donde soltar la capa" en el campo de texto.
13

Introduzca cdigo JavaScript o un nombre de funcin (por ejemplo, evaluateLayerPos()) en el segundo campo Llamar JavaScript para ejecutar el cdigo o la funcin cuando se suelte la capa. Seleccione la opcin Slo si se ajusta cuando el cdigo JavaScript deba ejecutarse solamente si la capa ha alcanzado a su destino. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para. Recuerde que las capas no son compatibles con los navegadores de la versin 3.0.

14 15

Nota: No se puede adjuntar la accin Arrastrar capa a un objeto con los eventos onMouseDown u onClick.

Recopilacin de informacin sobre la capa desplazable Cuando se adjunta a un objeto la accin Arrastrar capa, Dreamweaver inserta la funcin en la seccin head del documento. Adems de registrar la capa como desplazable, esta funcin define tres propiedades para cada capa desplazable (MM_LEFTRIGHT, MM_UPDOWN y MM_SNAPPED) que usted puede usar en sus propias funciones JavaScript para determinar la posicin horizontal relativa de la capa, la posicin vertical relativa de la capa y si la capa ha alcanzado el destino en el que debe soltarse.
MM_dragLayer()
Nota: La informacin que se ofrece en esta seccin est destinada exclusivamente a programadores expertos de JavaScript.

Utilizacin de comportamientos JavaScript 393

Por ejemplo, la siguiente funcin muestra el valor de la propiedad MM_UPDOWN (la posicin vertical actual de la capa) en un campo de formulario llamado curPosField. (Los campos de formulario son tiles para mostrar informaciones que se actualizan continuamente porque son dinmicos, es decir, que se puede cambiar su contenido una vez que la pgina ha terminado de cargarse, tanto en Navigator como en Internet Explorer.)
function getPos(layername){ var layerRef = MM_findObj(layername); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }

En lugar de mostrar el valor de MM_UPDOWN o MM_LEFTRIGHT en un campo de formulario, puede crear una funcin que presente un mensaje en el campo de formulario dependiendo de lo prximo que est el valor de la zona donde debe soltarse la capa, o bien puede llamar otra funcin para que muestre u oculte una capa dependiendo del valor. El nico lmite a las posibilidades de reaccin al valor de MM_UPDOWN o MM_LEFTRIGHT est en su imaginacin y en sus conocimientos de JavaScript. Resulta especialmente til leer la propiedad MM_SNAPPED cuando se tienen varias capas en la pgina y todas ellas deben alcanzar sus objetivos antes de que el visitante pueda pasar a la siguiente pgina o tarea. Por ejemplo, puede crear una funcin para determinar cuntas capas tienen un valor MM_SNAPPED igual a true (verdadero) y llamarlas cada vez que se suelte una capa. Cuando el recuento de capas ajustadas alcanza el nmero deseado, puede enviar al visitante a la pgina siguiente o presentarle un mensaje emergente de felicitacin. Si ha utilizado el evento onMouseOver para adjuntar la accin Arrastrar capa a vnculos contenidos en distintas capas, deber realizar un pequeo cambio en la funcin MM_dragLayer() para evitar que la propiedad MM_SNAPPED de una capa ajustada se restablezca con el valor false al pasar el puntero del ratn sobre la capa. (Esto puede ocurrir si ha utilizado Arrastrar capa para crear un puzzle de imagen, ya que es probable que el visitante pase el puntero del ratn por encima de las piezas ajustadas al colocar otras piezas.) La funcin MM_dragLayer() no impide este comportamiento, ya que ste resulta a veces deseable (por ejemplo, si desea establecer mltiples destinos para soltar una misma capa).
Para evitar que se vuelvan a registrar las capas ajustadas:

Realice una copia de seguridad del documento antes de modificar algn modo el cdigo. (Puede hacerlo en el panel Sitio de Dreamweaver, o en el Explorador de Windows (Windows) o en el Finder (Macintosh).) Elija Edicin > Buscar. Seleccione Cdigo HTML en el men emergente Buscar. Escriba (!curDrag) en el campo de texto contiguo. Haga clic en Buscar siguiente. Si Dreamweaver le pregunta si desea continuar buscando desde el principio del documento, haga clic en S. Dreamweaver encontrar una instruccin con el siguiente contenido:
if (!curDrag) return false;

2 3 4 5

394 Captulo 24

Cierre el cuadro de dilogo Buscar y modifique la instruccin en la vista Cdigo de la ventana de documento o en el inspector de cdigos, para que quede de la siguiente forma:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;

Las dos barras paralelas verticales (||) significan "o" y curDrag es una variable que representa la capa que se est registrando como desplazable. La instruccin viene a significar "Si curDrag no es un objeto o si ya tiene un valor MM_SNAPPED, no se ejecutar el resto de la funcin. Ir a URL La accin Ir a URL abre una nueva pgina en la ventana actual o en el marco especificado. Esta accin resulta especialmente til para cambiar el contenido de dos o ms marcos con un solo clic. Tambin puede llamarse en una lnea de tiempo para saltar a una nueva pgina despus de un intervalo de tiempo especificado.
Para usar la accin Ir a URL:

1 2 3

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Ir a URL del men emergente Acciones. Elija un destino para el URL en la lista Abrir en. La lista Abrir en muestra automticamente los nombres de todos los marcos del conjunto de marcos actual y de la ventana principal. Si no hay marcos, la ventana principal es la nica opcin posible.
Nota: Esta accin puede dar lugar a resultados inesperados si hay algn marco que se llame top, blank, self o parent. Los navegadores a veces confunden estos nombres con nombres de destino reservados.

4 5 6 7

Haga clic en Examinar para seleccionar el documento que desea abrir o introduzca la ruta y el nombre de archivo del documento en el campo URL. Repita los pasos 3 y 4 para abrir ms documentos en otros marcos. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para. Men de salto Al crear un men de salto mediante Insertar > Objetos de formulario > Men de salto, Dreamweaver crea un objeto de men y le adjunta el comportamiento del Men de salto (o Men de salto Ir). Normalmente no es preciso adjuntar manualmente la accin Men de salto a un objeto. Para obtener informacin sobre los mens de salto y la manera de crearlos, consulte Insercin de un men de salto en la pgina 455. Un men de salto existente se puede editar de dos formas:

Se pueden editar y reorganizar los elementos del men, cambiar los archivos a los que se salta y
cambiar la ventana en la que esos archivos se abren haciendo doble clic en una accin de Men de salto existente en el panel Comportamientos.

Los elementos de este men se editan igual que los de cualquier men, es decir, seleccionando
el men y usando el botn Valores de lista del inspector de propiedades. Consulte Creacin de mens emergentes en la pgina 644 para obtener ms informacin.

Utilizacin de comportamientos JavaScript 395

Para editar un men de salto utilizando el panel Comportamientos:

1 2 3 4

Cree un objeto de men de salto si todava ninguno en el documento. Seleccione el objeto de men de salto y abra el panel Comportamientos. Haga doble clic en Men de salto en la columna Acciones. Lleve a cabo los cambios que desee en el cuadro de dilogo Men de salto, y luego haga clic en Aceptar.

Men de salto Ir La accin Men de salto ir est estrechamente relacionada con la accin Men de salto. Men de salto ir le permite asociar un botn Ir con un men de salto. (Para utilizar esta accin debe existir ya un men de salto en el documento.) Al hacer clic en el botn Ir se abrir el vnculo seleccionado en el men de salto. Los mens de salto generalmente no necesitan un botn Ir; al elegir un elemento de un men de salto, normalmente se carga un URL sin necesidad de que el visitante lleve a cabo ninguna otra operacin. No obstante, si el visitante elige el mismo elemento que se encuentra ya seleccionado en el men de salto, el salto no se producir. En general, eso no importa, pero si aparece el men de salto en un marco y los elementos del men de salto contienen vnculos con pginas de otros marcos, conviene disponer de un botn Ir para permitir a los visitantes volver a elegir un elemento que ya est seleccionado en el men de salto.
Para aadir una accin Men de salto Ir:

1 2 3 4

Seleccione un objeto para utilizarlo como botn Ir (generalmente una imagen de un botn) y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Men de salto Ir del men emergente Acciones. En el men emergente Elegir men de salto, elija un men para que se active en l el botn Ir. Haga clic en Aceptar.

Abrir ventana del navegador Use la accin Abrir ventana del navegador para abrir un URL en una nueva ventana. Se pueden especificar las propiedades de la nueva ventana, incluidos su tamao, sus atributos (si se puede cambiar su tamao, si tiene barra de mens, etc.) y su nombre. Por ejemplo, este comportamiento se puede usar para abrir una imagen ms grande en otra ventana distinta cuando el visitante hace clic en una imagen en miniatura. Con este comportamiento, puede hacer que la nueva ventana tenga el mismo tamao que la imagen. Si no se especifican los atributos de la ventana, se abrir con el mismo tamao y los mismos atributos de la ventana que la inici. Al especificar algn atributo de la ventana, se desactivan automticamente todos los dems atributos que no se activen explcitamente. Por ejemplo, si no se establecen los atributos de la ventana, puede abrirse con un tamao de 640 x 480 pxeles y tener barra de navegacin, barra de herramientas de ubicacin, barra de estado y barra de mens. Si se establece explcitamente la anchura en 640 pxeles y la altura en 480 pxeles y no se establece ningn otro atributo, la ventana se abrir con un tamao de 640 x 480 pxeles y carecer de barra de navegacin, de barra de herramientas de ubicacin, de barra de estado, de barra de mens, de manejadores de cambio de tamao y de barras de desplazamiento.

396 Captulo 24

Para usar la accin Abrir ventana del navegador:

1 2 3 4

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Abrir ventana del navegador en el men emergente Acciones. Haga clic en Examinar para seleccionar un archivo o introduzca el URL que desea ver. Configure las opciones siguientes:
Ancho de la ventana Alto de la ventana

Especifica el ancho de la ventana en pxeles. Es la fila de botones del navegador que incluye Atrs,

Especifica el alto de la ventana en pxeles.

Barra de herramientas de navegacin

Adelante, Inicio y Actualizar.

Barra de herramientas de ubicacin

Es la fila de opciones del navegador que incluye el campo

de ubicacin.
Barra de estado Es la zona situada en la parte inferior de la ventana del navegador en la que aparecen mensajes (como el tiempo de carga restante y los URL asociados a los vnculos). Barra de mens Es la zona de la ventana del navegador (Windows) o del escritorio (Macintosh)

en la que aparecen mens tales como Archivo, Edicin, Ver, Ir a y Ayuda. Esta opcin debe establecerse explcitamente si desea que los visitantes puedan navegar desde la nueva ventana. Si no establece esta opcin, el usuario slo podr cerrar o minimizar la ventana (Windows) o cerrar la ventana y salir de la aplicacin (Macintosh) desde la nueva ventana.
Barras despl. si son necesarias Especifica que debern aparecer las barras de desplazamiento que sean precisas si el contenido se extiende ms all de la zona visible. Si no se establece explcitamente esta opcin, no aparecern barras de desplazamiento. Si la opcin Selectores de cambio de tamao tambin est desactivada, los visitantes no tendrn una forma fcil de ver el contenido situado ms all del tamao original de la ventana. (Aunque siempre pueden desplazar la ventana arrastrando el borde de la misma.) Selectores de cambio de tamao Especifica que el usuario tiene la posibilidad de cambiar el tamao de la ventana, bien arrastrando el ngulo inferior derecho de la ventana, o bien haciendo clic en el botn Maximizar (Windows) o en el cuadro de tamao (Macintosh) situado en la esquina superior derecha. Si esta opcin no se establece explcitamente, los controles de cambio de tamao no estarn disponibles y el ngulo inferior derecho no se podr arrastrar. Nombre de la ventana Es el nombre de la nueva ventana. Es imprescindible asignar un nombre a la ventana si desea usarla como destino de vnculos o controlarla con cdigo JavaScript. Este nombre no puede contener espacios ni caracteres especiales.

5 6

Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Utilizacin de comportamientos JavaScript 397

Reproducir sonido Utilice la accin Reproducir sonido para reproducir un sonido. Por ejemplo, puede hacer que se reproduzca un efecto sonoro cuando el puntero del ratn pase por encima de un vnculo o que se reproduzca msica al cargarse la pgina.
Nota: Es posible que los navegadores precisen algn tipo de compatibilidad adicional con audio (como un plug-in de audio, por ejemplo) para reproducir sonidos. Por ello, es frecuente que diferentes navegadores con diferentes plug-ins reproduzcan el sonido de forma diferente. Es difcil predecir de manera fiable la manera en que las personas que visiten el sitio percibirn los sonidos que usted ha incluido.

Para usar la accin Reproducir sonido:

1 2 3 4 5

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Reproducir sonido en el men emergente Acciones. Haga clic en Examinar para seleccionar un archivo de sonido o introduzca la ruta y el nombre del archivo en el campo Reproducir sonido. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Mensaje emergente La accin Mensaje emergente presenta una alerta de JavaScript con el mensaje que usted especifique. Dado que las alertas de JavaScript slo tienen un botn (Aceptar), esta accin resulta ms adecuada para proporcionar informacin que para proponer una eleccin. Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de funcin JavaScript vlida. Para incrustar una expresin JavaScript, encirrela entre llaves ({}). Para que aparezca una llave, antepngale una barra invertida (\{).
Ejemplo

The URL for this page is {window.location}, and today is {new Date()}.
Nota: No se puede controlar la apariencia de la alerta de JavaScript, puesto que est determinada por el navegador del visitante. Si desea tener un mayor control sobre la apariencia de su mensaje, puede usar el comportamiento Abrir ventana del navegador. Para obtener ms informacin, consulte Abrir ventana del navegador en la pgina 396.

Para usar la accin Mensaje emergente:

1 2 3 4 5

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Mensaje emergente del men emergente Acciones. Introduzca el mensaje en el campo Mensaje. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

398 Captulo 24

Carga previa de imgenes La accin Carga previa de imgenes carga imgenes que no aparecen en la pgina de inmediato (como aquellas que se intercambiarn por lneas de tiempo, comportamientos o scripts de JavaScript) en la memoria cach del navegador. Esto contribuye a evitar las demoras debidas a la descarga cuando llega el momento de que aparezcan las imgenes.
Nota: La accin Intercambiar imagen carga automticamente todas las imgenes resaltadas cuando se selecciona la opcin Carga previa de imgenes en el cuadro de dilogo Intercambiar imagen, por lo que no es necesario aadir manualmente la accin Carga previa de imgenes al usar Intercambiar imagen.

Para usar la accin Carga previa de imgenes:

1 2 3 4

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Carga previa de imgenes del men emergente Acciones. Haga clic en Examinar para seleccionar el archivo de imagen objeto de la carga previa o introduzca la ruta y el nombre de archivo en el campo Archivo de origen de imagen. Haga clic en el botn de signo ms (+), situado en la parte superior del cuadro de dilogo, para aadir la imagen deseada a la lista Carga previa de imgenes.
Nota: Si no hace clic en el botn de signo ms antes de introducir la siguiente imagen, la imagen elegida ser reemplazada en la lista por la siguiente imagen que elija.

5 6 7 8

Repita los pasos 3 y 4 para todas las imgenes restantes que desee cargar en la pgina actual. Para eliminar una imagen de la lista Carga previa de imgenes, seleccione la imagen en la lista y haga clic en el botn de signo menos (). Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Definir Imagen de barra de navegacin Utilice la accin Definir Imagen de barra de navegacin para convertir una imagen en una imagen de barra de navegacin o para cambiar la visualizacin y las acciones de imgenes en una barra de navegacin. (Para obtener ms informacin, consulte Insercin de una barra de navegacin en la pgina 458.) Utilice la ficha Bsico del cuadro de dilogo Definir Imagen de barra de navegacin para crear o actualizar una imagen o grupo de imgenes de barra de navegacin, cambiar el URL que debe mostrarse al hacer clic en un botn de una barra de navegacin y seleccionar una ventana distinta para mostrar un URL. Utilice la ficha Avanzado del cuadro de dilogo Definir Imagen de barra de navegacin para cambiar el estado de las imgenes de un documento en funcin del estado del botn actual. De forma predeterminada, al hacer clic en un elemento de una barra de navegacin, todos los dems elementos recuperan su estado Arriba. Utilice la ficha Avanzado si desea establecer un estado diferente para una imagen cuando la imagen seleccionada se encuentre su estado Abajo o Sobre.

Utilizacin de comportamientos JavaScript 399

Para editar una accin Definir Imagen de barra de navegacin:

1 2 3

Seleccione una imagen en la barra de navegacin para editarla y abra el panel Comportamientos. En la columna Acciones del panel Comportamientos, haga doble clic en la accin Definir Imagen de barra de navegacin asociada al evento que est modificando. En la ficha Bsico del cuadro de dilogo Definir Imagen de barra de navegacin, seleccione opciones de edicin de la imagen.

Para configurar varias imgenes para un botn de la barra de navegacin:

1 2 3 4

Seleccione una imagen en la barra de navegacin para editarla y abra el panel Comportamientos. En la columna Acciones del panel Comportamientos, haga doble clic en la accin Definir Imagen de barra de navegacin asociada al evento que est modificando. Haga clic en la ficha Avanzado del cuadro de dilogo Definir Imagen de barra de navegacin. En el men emergente Cuando el elemento est mostrado, elija un estado de imagen. Para obtener informacin sobre los estados de las imgenes, consulte Creacin de barras de navegacin en la pgina 457 en la imagen seleccionada.

Elija Imagen abajo si desea cambiar la visualizacin de otra imagen cuando un usuario hace clic Elija Sobre imagen o Sobre mientras imagen abajo si desea cambiar la visualizacin de otra
imagen cuando el puntero pase sobre la imagen seleccionada.
5 6 7

En la lista Tambin establecer imagen, seleccione otra imagen de la pgina que desee configurar. Haga clic en Examinar para seleccionar el archivo de imagen que desea que aparezca o escriba la ruta del archivo de imagen en el campo A archivo de imagen. Si seleccion Sobre imagen o Sobre mientras imagen abajo en el paso 4, dispondr de otra opcin. En el campo de texto Si Abajo, a archivo de imagen, haga clic en Examinar para seleccionar el archivo de imagen o escriba la ruta del archivo de imagen que debe aparecer.

Definir texto de marco La accin Definir texto de marco permite definir de forma dinmica el texto de un marco mediante la sustitucin del contenido y el formato de un marco con el contenido que usted especifique. Dicho contenido puede incluir cualquier cdigo HTML vlido. Utilice esta accin para mostrar informacin de forma dinmica. Aunque la accin Definir texto de marco sustituye el formato de un marco, puede seleccionar Conservar color de fondo para conservar los atributos de color del fondo y el texto de la pgina. Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de funcin JavaScript vlida. Para incrustar una expresin JavaScript, encirrela entre llaves ({}). Para que aparezca una llave, antepngale una barra invertida (\{).
Ejemplo

The URL for this page is {window.location}, and today is {new Date()}.

400 Captulo 24

Para crear un conjunto de marcos:

Elija Modificar > Conjunto de marcos > Dividir marco a la izquierda, a la derecha, hacia arriba o hacia abajo. Para obtener ms informacin, consulte Creacin de marcos y conjuntos de marcos en la pgina 285.
Para utilizar la accin Definir texto de marco:

1 2 3 4 5 6

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Definir texto > Definir texto de marco en el men emergente Acciones. En el cuadro de dilogo Establecer texto de marco, elija el marco de destino del men emergente Marco. Haga clic en el botn Obtener HTML actual para copiar el contenido actual de la seccin body del marco de destino. Introduzca un mensaje en el campo Nuevo HTML y luego haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si no aparecen los eventos que desea, cambie el navegador de destino en el men emergente Mostrar eventos para.

Definir texto de capa La accin Definir texto de capa reemplaza el contenido y el formato de una capa existente en una pgina con el contenido que usted especifique. Dicho contenido puede incluir cualquier cdigo HTML vlido. Definir texto de capa sustituye el contenido y el formato de la capa, pero mantiene sus atributos, incluido el color. Puede aplicar formato al contenido mediante la inclusin de etiquetas HTML en el campo Nuevo HTML del cuadro de dilogo Definir texto de capa. Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de funcin JavaScript vlida. Para incrustar una expresin JavaScript, encirrela entre llaves ({}). Para que aparezca una llave, antepngale una barra invertida (\{).
Ejemplo

The URL for this page is {window.location}, and today is {new Date()}.
Para crear una capa:

Elija Insertar > Capa. Para obtener ms informacin, consulte Creacin de capas en la pgina en la pgina 417. En el inspector de propiedades, escriba un nombre para la capa.

Para adjuntar una accin Definir texto de capa:

1 2

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Definir texto > Definir texto de capa en el men emergente Acciones.

Utilizacin de comportamientos JavaScript 401

3 4 5

En el cuadro de dilogo Definir texto de capa, utilice el men emergente Capa para elegir la capa de destino. Introduzca un mensaje en el campo Nuevo HTML y luego haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si no aparecen los eventos que desea, cambie el navegador de destino en el men emergente Mostrar eventos para.

Definir texto de barra de estado La accin Definir texto de barra de estado muestra un mensaje en la barra de estado, situada en la parte inferior izquierda de la ventana del navegador. Por ejemplo, puede usar esta accin para describir el destino de un vnculo en la barra de estado en lugar de mostrar el URL al que est asociado. Para ver un ejemplo de mensaje de estado, pase el ratn por encima de cualquiera de los botones de exploracin de la Ayuda de Dreamweaver. Tenga en cuenta, no obstante, que a menudo los visitantes omiten o no advierten los mensajes de la barra de estado (adems, no todos los navegadores proporcionan soporte completo para introducir texto en la barra de estado). Si el mensaje es importante, puede mostrarlo en forma de mensaje emergente o como texto de una capa. Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de funcin JavaScript vlida. Para incrustar una expresin JavaScript, encirrela entre llaves ({}). Para que aparezca una llave, antepngale una barra invertida (\{).
Ejemplo

The URL for this page is {window.location}, and today is {new Date()}.
Para utilizar la accin Definir texto de barra de estado:

1 2 3

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Definir texto > Definir texto de barra de estado en el men emergente Acciones. En el cuadro de dilogo Definir texto de barra de estado, escriba el mensaje en el campo Mensaje. Escriba un mensaje corto. El navegador cortar el mensaje si no cabe en la barra de estado. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

4 5

Definir texto de campo de texto La accin Definir texto de campo de texto sustituye el contenido de un campo de texto de un formulario por el contenido que usted especifique. Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de funcin JavaScript vlida. Para incrustar una expresin JavaScript, encirrela entre llaves ({}). Para que aparezca una llave, antepngale una barra invertida (\{).

402 Captulo 24

Ejemplo

The URL for this page is {window.location}, and today is {new Date()}.
Para crear un campo de texto con nombre:

Elija Insertar > Objetos de formulario> Campo de texto. Si Dreamweaver le pregunta si desea aadir una etiqueta de formulario, haga clic en S. Para obtener ms informacin, consulte Creacin de formularios interactivos en la pgina 629.

En el inspector de propiedades, introduzca un nombre para el campo de texto. Asegrese de que el nombre no se repite en la pgina (no utilice el mismo nombre para varios elementos de la misma pgina aunque se encuentren en formularios distintos).

Para utilizar la accin Definir texto de campo de texto:

1 2 3 4 5

Seleccione un campo de texto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Definir texto > Definir texto de campo de texto en el men emergente Acciones. En el cuadro de dilogo Definir texto de campo de texto, elija el campo de texto de destino en el men emergente Campo de texto. Introduzca texto en el campo Nuevo texto y luego haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si no aparecen los eventos que desea, cambie el navegador de destino en el men emergente Mostrar eventos para.

Mostrar-Ocultar capas La accin Mostrar-Ocultar capas muestra, oculta o restaura la visibilidad predeterminada de una o ms capas. Esta accin resulta til para mostrar informacin a medida que el usuario va interactuando con la pgina. Por ejemplo, cuando el usuario pasa el puntero del ratn por encima de la imagen de una planta, se puede mostrar una capa que le ofrezca informacin sobre la poca y regin de crecimiento de la planta, las horas de sol que necesita, el tamao que suele alcanzar, etc. La accin Mostrar-Ocultar capas tambin es til para crear una capa de carga previa, es decir, una capa grande que en un principio oculta el contenido de la pgina y luego desaparece cuando todos los componentes de la pgina se han terminado de cargar.
Para utilizar la accin Mostrar-Ocultar capas:

Elija Insertar > Capa o haga clic en el botn Capa en la barra Insertar y dibuje una capa en la ventana de documento. Repita este paso para crear capas adicionales. Haga clic en la ventana de documento para anular la seleccin de la capa y luego abra el panel Comportamientos.

Utilizacin de comportamientos JavaScript 403

Haga clic en el botn de signo ms (+) y elija Mostrar-Ocultar capas en el men emergente Acciones. Si la accin Mostrar-Ocultar capas no est disponible, es muy probable que haya una capa seleccionada. Dado que las capas no aceptan eventos en la versin 4.0 de ninguno de los dos navegadores, deber seleccionar un objeto diferente, como la etiqueta body, o un vnculo (etiqueta a), o bien cambiar el navegador de destino a IE 4.0 en el men emergente Mostrar eventos para.

4 5 6 7 8

Seleccione la capa cuya visibilidad desea cambiar en la lista Capas con nombre. Haga clic en Mostrar para mostrar la capa, en Ocultar para ocultarla o en Predeterminada para restaurar la visibilidad predeterminada de la capa. Repita los pasos 4 y 5 para todas las capas restantes cuya visibilidad desee cambiar en este momento. (Se puede cambiar la visibilidad de mltiples capas con un solo comportamiento.) Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Puede que las capas reduzcan su tamao para ajustarse al contenido cuando se muestren en una ventana de Netscape Navigator. Para evitar que esto ocurra, aada texto o imgenes a las capas o establezca valores de recorte de capa.
Para crear una capa de carga previa:

Haga clic en el botn Dibujar capa de la categora Comn de la barra Insertar y dibuje una capa grande en la vista Diseo de la ventana de documentos. Asegrese de que la capa cubra todo el contenido de la pgina. En el panel Capas, arrastre el nombre de la capa hasta la primera posicin de la lista de capas para especificar que la capa debe estar encima de todas las dems en el orden de apilamiento. Seleccione la capa si no est ya seleccionada, y asgnele el nombre loading, usando para ello el campo situado ms a la izquierda del inspector de propiedades. Con la capa todava seleccionada, establezca el color de fondo de la capa con el mismo color que el del fondo de la pgina del inspector de propiedades.

2 3 4

404 Captulo 24

Haga clic dentro de la capa (que ahora debe estar ocultando el resto del contenido de la pgina) y, si lo desea, escriba un mensaje. Por ejemplo, los mensajes Espere a que se cargue la pgina o Cargando... informan a los visitantes de lo que est ocurriendo para que sepan que la pgina tiene contenido.

6 7 8 9 10 11

Haga clic en la etiqueta <body> en el selector de etiquetas, situado en el ngulo inferior izquierdo de la ventana de documento. En el panel Comportamientos, seleccione Mostrar-Ocultar capas en el men emergente Acciones. Seleccione la capa llamada loading en la lista de Capas con nombre. Haga clic en Ocultar. Haga clic en Aceptar. Compruebe que el evento que aparece junto a la accin Mostrar-Ocultar capas en la lista de comportamientos es onLoad. (Si no lo es, seleccione el evento y haga clic en el tringulo que seala hacia abajo que aparece entre el evento y la accin. Elija onLoad en la lista de eventos del men emergente.)

Mostrar men emergente El comportamiento Mostrar men emergente sirve para crear o editar un men emergente de Dreamweaver o para abrir y modificar un men emergente de Fireworks insertado en un documento de Dreamweaver. Defina las opciones del cuadro de dilogo Mostrar men emergente para crear un men emergente horizontal o vertical. Puede utilizar este cuadro de dilogo para establecer o modificar el color, el texto y la posicin de un men emergente.
Nota: Deber utilizar el botn Editar del inspector de propiedades de Dreamweaver para editar las imgenes de un men emergente basado en imgenes de Fireworks. Sin embargo, puede utilizar el comando Mostrar men emergente para cambiar el texto de un men emergente basado en imgenes. Para obtener informacin sobre la edicin de imgenes en Fireworks MX, consulte Captulo 21, Integracin de Dreamweaver con otras aplicaciones, en la pgina 335.

Para ver un men emergente en un documento deber abrir el documento en la ventana de una navegador y, a continuacin, pasar el puntero sobre la imagen o el vnculo desencadenante.
Para utilizar la accin Mostrar men emergente:

1 2

Seleccione un objeto para adjuntar el comportamiento y abra el panel Comportamientos (Mays+F3). Haga clic en el botn de signo ms (+) y elija Mostrar men emergente en el men emergente Acciones.

Utilizacin de comportamientos JavaScript 405

En el cuadro de dilogo Mostrar men emergente, utilice las fichas siguientes para establecer las opciones del men emergente.
Contenido Permite establecer el nombre, la estructura, el URL y el destino de elementos de men individuales. Apariencia Permite establecer la apariencia del Estado Arriba y del Estado Sobre del men y definir la seleccin de fuentes para el texto del elemento del men. Avanzadas Permite definir las propiedades de las celdas del men. Por ejemplo, puede definir el alto, el ancho, el color y el ancho del borde de las celdas, la sangra del texto y la duracin del perodo que debe transcurrir antes de que el men aparezca cuando el usuario mueve el puntero sobre el desencadenante. Posicin

Permite establecer dnde se sita el men en relacin con la imagen o el vnculo desencadenante.

Adicin, eliminacin y cambio del orden de los elementos del men emergente Utilice la ficha Contenido del cuadro de dilogo Mostrar men emergente para crear elementos de men. Tambin puede emplear esta ficha para eliminar elementos existentes o para cambiar su orden de aparicin en el men.
Para aadir elementos al men emergente:

En la ficha Contenido, cree un elemento de men emergente siguiendo este procedimiento: En el campo Texto, seleccione el texto predeterminado (Nuevo elemento) y, a continuacin, escriba el texto que desea que aparezca en el men emergente.

Establezca las opciones adicionales deseadas: Si desea que el elemento de men abra otro archivo al hacer clic en l, escriba la ruta del archivo en el campo Vnculo o haga clic en el icono de carpeta y acceda al documento que desea abrir. Si desea establecer una ubicacin para abrir el documento, por ejemplo, una nueva ventana o un marco especfico, elija la ubicacin deseada en el men emergente Destino.
Nota: Si el marco deseado no aparece en el men emergente Destino, cierre el cuadro de dilogo Mostrar men emergente y, en la ventana de documento, seleccione y asigne un nombre al marco.

Haga clic en el botn de signo ms (+) para aadir entradas adicionales a la lista de vista previa Mostrar men emergente. Cuando termine de aadir elementos de men, haga clic en Aceptar para aceptar la configuracin predeterminada o seleccione otra ficha de Mostrar men emergente para definir opciones adicionales.

Para crear un elemento de submen:

En la lista Mostrar men emergente, seleccione el elemento que desea convertir en un elemento de submen y, a continuacin, lleve a cabo una de estas operaciones:

Para aplicar sangra a un elemento de la lista de men, haga clic en el botn Aplicar sangra a
elemento.

Para eliminar una sangra, haga clic en el botn Anular sangra de elemento.

406 Captulo 24

Nota: No es posible convertir el primer elemento de men de una lista en un elemento de submen.

Para cambiar el orden de un elemento del men:

En la lista Mostrar men emergente, seleccione el elemento que desea desplazar hacia arriba o hacia abajo y, a continuacin, haga clic en la flecha arriba o abajo para mover el elemento a la posicin deseada.
Para eliminar un elemento del men:

1 2

En la ficha Contenido, seleccione la entrada de men que desea eliminar de la lista Mostrar men emergente. Haga clic en el botn de signo menos (-).

Definicin de la apariencia de un men emergente Despus de crear los elementos del men, utilice la ficha Apariencia de Mostrar men emergente para definir la orientacin, los atributos de fuente y los atributos de estado de botn del men emergente.
Nota: El panel de vista previa de la ficha Apariencia ofrece una representacin aproximada de las opciones definidas en esta ficha.

Para definir la apariencia de un men emergente:

1 2

En el men emergente situado en la parte superior de la ficha Apariencia, elija Men Vertical o Men Horizontal para establecer la orientacin del men. Defina las opciones de formato de texto que desee: En el men emergente Fuente, seleccione la fuente que desea aplicar a los elementos del men.
Nota: Si la fuente que desea aplicar no figura en la lista, utilice la opcin Editar lista de fuentes para aadir la fuente deseada a la lista. Para asegurarse de que el men aparecer de la forma deseada, elija una fuente que pueda tener el visitante del sitio.

Defina el tamao de la fuente, los atributos de estilo, la alineacin del texto y las opciones de justificacin para el elemento de men.
3 4

En los cuadros Estado Arriba y Estado Sobre, utilice el selector de color para establecer los colores del texto y las celdas de los botones del elemento de men. Cuando termine de definir las opciones de apariencia, haga clic en Aceptar o seleccione otra ficha de Mostrar men emergente para definir opciones adicionales.

Definicin de opciones avanzadas de apariencia Utilice las opciones de la ficha Avanzadas para especificar atributos adicionales de las celdas del men. Por ejemplo, puede establecer el ancho, el alto, el espaciado de las celdas o el relleno del botn del men, la sangra de texto y atributos del borde.

Utilizacin de comportamientos JavaScript 407

Para definir los atributos de formato avanzados de un men emergente:

Haga clic en la ficha Avanzadas y defina las opciones que desea aplicar a los elementos del men:
Ancho de celda Establece el ancho especfico, en pxeles, de los botones del men. El ancho de celda se establece automticamente basndose en el elemento ms ancho. Para incrementar el ancho de celda, seleccione Pxeles en el men emergente e introduzca un valor mayor que el que aparece en el cuadro de texto Ancho de celda. Alto de celda Establece el alto especfico, en pxeles, de los botones del men. Para incrementar el alto de celda, seleccione Pxeles en el men emergente e introduzca un valor mayor que el que aparece en el cuadro de texto Alto de celda. Relleno de celda

Especifica el nmero de pxeles entre el contenido de una celda y sus lmites. Especifica el nmero de pxeles entre celdas contiguas.

Espacio entre celdas

Sangra de texto Permite especificar, en pxeles, la cantidad de sangra que se aplica al texto de un elemento de men en la celda. Demora de men Establece el perodo de tiempo entre el momento en que el usuario mueve el puntero sobre la imagen o el vnculo desencadenante y el momento de aparicin del men. Los valores se expresan en milisegundos, por lo que la opcin predeterminada, 1000, equivale a un segundo. Por cada segundo de demora que desee definir, aada 000. Por ejemplo, para una demora de tres segundos, escriba 3000. Bordes de ventana emergente Determina si aparece un borde alrededor de los elementos del men. Si desea que aparezca un borde alrededor de los elementos del men, active la casilla de verificacin Mostrar bordes. Ancho del borde

Establece el ancho del borde en pxeles.

Sombra, Color de borde y Resaltar

Permite seleccionar un color para estas opciones de borde. Sombra y Resaltar no se reflejan en la vista previa.

Cuando termine de definir las opciones de apariencia avanzadas, haga clic en Aceptar o seleccione otra ficha de Mostrar men emergente para definir opciones adicionales.

Definicin de la posicin de un men emergente en un documento Utilice las opciones de posicin para definir dnde desea mostrar el men emergente en relacin con la imagen o el vnculo desencadenante. Tambin puede establecer si el men se oculta o no cuando el usuario aleja el puntero del desencadenante.
Para definir las opciones de posicin del men emergente:

1 2

En el cuadro de dilogo Mostrar men emergente, haga clic en la ficha Posicin. Establezca la ubicacin del men emergente realizando una de estas operaciones:

Elija una de las opciones predefinidas: Establezca coordenadas de posicin personalizadas escribiendo un nmero en el cuadro de
texto X para establecer la coordenada horizontal y escribiendo un nmero en el cuadro de texto Y para establecer la coordenada vertical. Las coordenadas se cuentan a partir de la esquina superior izquierda del men.

408 Captulo 24

Para ocultar el men emergente cuando el puntero no est sobre l, compruebe que la opcin Ocultar men con evento onMouseOut est activada. Para dejar que el men siga mostrndose, desactive esta opcin. Cuando termine de crear o modificar el men emergente, haga clic en Aceptar.

Modificacin de un men emergente El comportamiento Mostrar men emergente permite editar o actualizar el contenido de un men emergente. Puede aadir, eliminar o cambiar elementos del men, reorganizarlos y establecer dnde se sita un men en relacin con la imagen o el vnculo desencadenante.
Para abrir un men emergente existente basado en HTML:

1 2

En el documento de Dreamweaver, seleccione el vnculo o la imagen que desencadena el men emergente. Abra el panel Comportamientos (Mays + F3) si no est abierto y, en la lista Acciones, haga doble clic en Mostrar men emergente. Aparecer el cuadro de dilogo Mostrar men emergente. Realice los cambios deseados en el men emergente. Cuando termine de modificar el men emergente, haga clic en Aceptar.

3 4

Para obtener informacin detallada sobre la configuracin de las opciones de men emergente, consulte Mostrar men emergente en la pgina 405. Intercambiar imagen La accin Intercambiar imagen sustituye una imagen por otra cambiando el atributo src de la etiqueta img. Use esta accin para crear sustituciones de botones y otros efectos de imgenes (incluido el intercambio de varias imgenes a la vez). Al insertar una imagen dinmica se aade automticamente un comportamiento Intercambiar imagen a la pgina.
Nota: Dado que slo el atributo src se ve afectado por esta accin, el intercambio debe hacerse con imgenes que tengan las mismas dimensiones (altura y anchura) que la imagen original. En caso contrario, la imagen que se intercambia aparecer reducida o ampliada para adaptarse a las dimensiones de la imagen original.

Para usar la accin Intercambiar imagen:

1 2

Elija Insertar > Imagen o haga clic en el botn Imagen en la barra Insertar para insertar una imagen. En el inspector de propiedades, introduzca un nombre para la imagen en el cuadro de texto situado ms a la izquierda. La accin Intercambiar imagen continuar funcionando aunque no asigne nombres a las imgenes, ya que asigna un nombre automticamente a las imgenes sin nombre cuando se adjunta el comportamiento a un objeto. No obstante, resultar ms fcil distinguir las imgenes en el cuadro de dilogo Intercambiar imagen si todas ellas disponen ya de un nombre.

3 4

Repita los pasos 1 y 2 para insertar ms imgenes. Seleccione un objeto (normalmente, la imagen que va a intercambiar) y abra el panel Comportamientos.

Utilizacin de comportamientos JavaScript 409

5 6 7 8

Haga clic en el botn de signo ms (+) y elija Intercambiar imagen del men emergente Acciones. Seleccione en la lista Imgenes la imagen cuyo origen desea cambiar. Haga clic en Examinar para seleccionar el archivo de la nueva imagen o introduzca la ruta y el nombre de archivo de la nueva imagen en el cuadro de texto Definir origen como. Repita los pasos 6 y 7 para todas las dems imgenes que desee cambiar. Puede usar la misma accin Intercambiar imagen para todas las imgenes que desee cambiar a la vez; en caso contrario, la accin correspondiente Restaurar imagen intercambiada no las restaurar todas. Seleccione la opcin Carga previa de imgenes para cargar las nuevas imgenes en la memoria cach del navegador al cargar la pgina. Esto contribuye a evitar las demoras debidas a la descarga cuando llega el momento de que aparezcan las imgenes.

10 11

Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Restaurar imagen intercambiada La accin Restaurar imagen intercambiada restaura el ltimo conjunto de imgenes intercambiadas a sus archivos de origen anteriores. Esta accin se aade automticamente siempre que se adjunta la accin Intercambiar imagen a un objeto; si dej seleccionada la opcin Restaurar al adjuntar Intercambiar imagen, no tendr que seleccionar manualmente la accin Restaurar imagen intercambiada. Ir a un fotograma en la lnea de tiempo La accin Ir a un fotograma en la lnea de tiempo desplaza el cabezal de reproduccin al fotograma especificado. Esta accin puede usarse en el canal Behavior del panel Lneas de tiempo para hacer que una parte de una lnea de tiempo se reproduzca en bucle un nmero determinado de veces, para crear un vnculo o botn Rebobinar o para permitir al usuario saltar a distintas partes de la animacin.
Para usar la accin Ir a un fotograma en la lnea de tiempo:

Elija Ventana > Lnea de tiempo para abrir el panel Lneas de tiempo y asegrese de que el documento contiene una lnea de tiempo. Si no aparece ninguna barra de animacin de color morado en el panel Lneas de tiempo, el documento no contiene ninguna lnea de tiempo. Consulte Desplazamiento de una capa utilizando una animacin de lnea de tiempo en la pgina 429.

Seleccione un objeto para adjuntar el comportamiento. Para adjuntar el comportamiento a un fotograma de la lnea de tiempo, haga clic en el canal Behavior en el fotograma deseado.

Abra el panel Comportamientos.

410 Captulo 24

Haga clic en el botn de signo ms (+) y elija Lnea de tiempo > Ir a un fotograma en la lnea de tiempo del men emergente Acciones. (Si esta accin aparece atenuada, significa que su documento no contiene ninguna lnea de tiempo.) Seleccione una lnea de tiempo en el men emergente Lnea de tiempo. Introduzca un nmero de fotograma en el cuadro de texto Ir a fotograma. Si est aadiendo esta accin al canal Behavior de una lnea de tiempo y desea que una parte de la lnea de tiempo se reproduzca en bucle, introduzca en el cuadro de texto Bucle el nmero de veces que ste debe repetirse. Este cuadro de texto debe dejarse en blanco si la accin Ir a un fotograma en la lnea de tiempo no se est adjuntando a un fotograma de una lnea de tiempo.

5 6 7

8 9

Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Reproducir lnea de tiempo y Detener lnea de tiempo Use las acciones Reproducir lnea de tiempo y Detener lnea de tiempo para permitir a los visitantes iniciar y detener una lnea de tiempo haciendo clic en un vnculo o en un botn; o iniciar y detener una lnea de tiempo automticamente cuando el visitante pasa el ratn por encima de un vnculo, una imagen u otro objeto. La accin Reproducir lnea de tiempo se adjunta automticamente a la etiqueta body con el evento onLoad cuando se selecciona Rep. Autom. en el panel Lneas de tiempo.
Para usar las acciones Reproducir lnea de tiempo y Detener lnea de tiempo:

Elija Ventana > Lnea de tiempo para abrir el panel Lneas de tiempo y asegrese de que el documento contiene una lnea de tiempo. Si no aparece ninguna barra de animacin de color morado en el panel Lneas de tiempo, el documento no contiene ninguna lnea de tiempo. Consulte Desplazamiento de una capa utilizando una animacin de lnea de tiempo en la pgina 429.

2 3 4 5 6

Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Reproducir lnea de tiempo o Detener lnea de tiempo en el men emergente Acciones. En el men emergente, seleccione la lnea de tiempo que desea reproducir o detener, o elija detener todas las lneas de tiempo. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Utilizacin de comportamientos JavaScript

411

Validar formulario La accin Validar formulario comprueba el contenido de los campos de texto especificados para asegurarse de que el usuario ha introducido el tipo correcto de datos. Adjunte esta accin a campos de texto individuales con el evento onBlur para validar los campos conforme el usuario vaya rellenando el formulario, o adjntela al formulario con el evento onSubmit para evaluar varios campos de texto cuando el usuario haga clic en el botn Enviar. Al adjuntar esta accin a un formulario se evita que ste sea enviado al servidor si alguno de los campos de texto especificados contiene datos no vlidos.
Para usar la accin Validar formulario:

1 2

Elija Insertar > Formulario o haga clic en el botn Formulario en la barra Insertar para insertar un formulario. Elija Insertar > Objetos de formulario > Campo de texto o haga clic en el botn Campo de texto en la barra Insertar para insertar un campo de texto. Repita este paso para insertar ms campos de texto. Realice una de estas operaciones: seleccione un campo de texto y elija Ventana > Comportamientos.

Para validar campos individuales conforme el usuario va rellenndolos en el formulario, Para validar mltiples campos cuando el usuario enva el formulario, haga clic en la etiqueta
<form>

en el selector de etiquetas, situado en el ngulo inferior izquierdo de la ventana de documento, y elija Ventana > Comportamientos.

4 5

Seleccione Validar formulario en el men emergente Acciones. Realice una de estas operaciones: de documento en la lista de Campos con nombre.

Si est validando campos individuales, seleccione el mismo campo que seleccion en la ventana Si est validando mltiples campos, seleccione un campo de texto en la lista de
Campos con nombre.
6 7

Seleccione la opcin Obligatorio si el campo debe contener algn dato. Elija una de las siguientes opciones Aceptar: determinado. (Si no est seleccionado Obligatorio, esta opcin carece de sentido (es lo mismo que si la accin Validar formulario no se hubiera adjuntado al campo).

Use Cualquier cosa si el campo es obligatorio pero no tiene que contener ningn tipo de dato Use Direccin de correo electrnico para comprobar si el campo contiene un smbolo arroba
(@).

Use Nmero para comprobar que el campo contiene solamente caracteres numricos. Use Nmero del para comprobar que el campo contiene solamente caracteres numricos
dentro de un rango determinado.
8

Si est validando mltiples campos, repita los pasos 6 y 7 para cada uno de los campos que desee validar.

412 Captulo 24

Haga clic en Aceptar. Si est validando mltiples campos cuando el usuario enva el formulario, en el men emergente Eventos aparecer automticamente el evento onSubmit.

10

Si est validando campos individuales, compruebe que el evento predeterminado sea onBlur u onChange. En caso de que no lo sea, seleccione onBlur o onChange en el men desplegable Eventos. Cualquiera de estos dos eventos desencadena la accin Validar formulario cuando el usuario abandona el campo. La diferencia entre ellos estriba en que onBlur tiene lugar independientemente de que el usuario haya escrito algo en el campo, mientras que onChange slo tiene lugar si el usuario ha cambiado el contenido del campo. El evento onBlur es preferible si ha configurado el campo como obligatorio.

Utilizacin de comportamientos JavaScript 413

414 Captulo 24

CAPTULO 25 Animacin de capas

Una capa es un elemento de pgina HTML que se puede colocar en cualquier lugar del documento. Las capas pueden contener texto, imgenes u otros contenidos que se pueden situar en el cuerpo de un documento HTML. Dreamweaver permite insertar y animar capas sin necesidad de utilizar cdigo JavaScript o HTML. Puede colocar unas capas delante o detrs de otras, ocultar algunas capas mientras muestra otras y mover capas por la pantalla. Puede colocar una imagen de fondo en una capa y, a continuacin, insertar una segunda capa, con texto y un fondo transparente, delante de la primera. Adems, puede animar capas para que aparezcan o desaparezcan gradualmente. Las capas proporcionan una gran flexibilidad a la hora de colocar contenido. Sin embargo, los navegadores Web anteriores a Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0 no pueden mostrar capas y los navegadores de la versin 4 no muestran las capas de una forma totalmente coherente. Si desea asegurarse de que todos los usuarios pueden ver su pgina Web, disela utilizando capas y, posteriormente, convierta las capas en tablas. Para obtener ms informacin, consulte Utilizacin de tablas y capas para diseo en la pgina 425. Si cree que los visitantes de la pgina van a usar navegadores ms recientes, puede realizar el diseo con capas, sin convertirlas en tablas.
Nota: Si no est familiarizado con el uso de capas y CSS, se recomienda emplear tablas o la vista Disposicin para disear las pginas (consulte Presentacin de contenido en tablas en la pgina 249 y Establecimiento de la disposicin de pginas en la vista Disposicin en la pgina 265). La vista Disposicin permite aplicar fcilmente el diseo a las pginas utilizando tablas como estructura subyacente.

Este captulo contiene las secciones siguientes:

Cdigo HTML para capas en la pgina 416 Creacin de capas en la pgina en la pgina 417 Anidacin de capas en la pgina 419 Manipulacin de capas en la pgina 419 Adicin de contenido a las capas en la pgina 422 Visualizacin y configuracin de las propiedades de las capas en la pgina 422 Utilizacin de tablas y capas para diseo en la pgina 425 Animacin de las capas en la pgina 427 Animacin de capas utilizando acciones de comportamiento en la pgina 435

415

Cdigo HTML para capas

Al insertar una capa en un documento, Dreamweaver inserta la etiqueta HTML de dicha capa en el cdigo. Puede configurar Dreamweaver para que utilice la etiqueta div o span para las capas. Dreamweaver crea las capas utilizando de forma predeterminada la etiqueta div.
Nota: Puede utilizar otras dos etiquetas para crear capas: layer e ilayer. Sin embargo, estas etiquetas slo son compatibles con Netscape Navigator 4; Internet Explorer no las reconoce y Netscape abandon su soporte en las versiones posteriores del navegador. Dreamweaver reconoce las etiquetas layer e ilayer, pero no crea capas utilizndolas.

Para cambiar la etiqueta predeterminada, consulte Configuracin de preferencias de capa en la pgina 418. La diferencia entre la etiqueta div y la etiqueta span estriba en que los navegadores que no admiten capas introducen saltos de lnea adicionales antes y despus de la etiqueta div. Es decir, la etiqueta div es un elemento de nivel de bloque, mientras que la etiqueta span es un elemento en lnea. En la mayora de los casos es ms conveniente que el contenido de la capa aparezca en un prrafo independiente en los navegadores que no admiten capas. Por tanto, la mayora de las veces ser preferible usar div en lugar de span. Para facilitar la lectura en navegadores antiguos, tenga cuidado dnde inserta el cdigo de una capa. El cdigo que define una capa puede situarse en cualquier lugar del cuerpo de un archivo HTML. Cuando dibuja una capa en Dreamweaver, sta se muestra donde la ha dibujado, pero Dreamweaver inserta su cdigo al principio de la pgina, inmediatamente despus de la etiqueta body. (Si utiliza el comando Insertar capa en lugar de dibujar una capa, el cdigo se colocar en el punto de insercin.) Si crea una capa anidada, Dreamweaver insertar el cdigo dentro de la etiqueta que define la capa padre.
Nota: Independientemente de la etiqueta que utilice, las versiones de Internet Explorer y Netscape Navigator anteriores a la 4.0 muestran el contenido de la capa, pero no la capa. El contenido de la capa aparecer en el punto de la pgina donde se encuentre el cdigo de la capa. Por ejemplo, si el cdigo de la capa se encuentra al principio de la pgina, su contenido aparecer al principio de la pgina en los navegadores que no admiten capas.

A continuacin se ofrece un ejemplo de cdigo HTML de una capa:

<div id="Layer1" style="position:absolute; visibility:inherit; width:200px; height:115px; z-index:1"> </div>

A continuacin se ofrece un ejemplo de cdigo HTML de una capa anidada en otra:

<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;"> Content inside the parent layer. <div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;"> Content inside the nested layer. </div> </div>

Puede definir las propiedades de colocacin de las capas en la pgina, incluidas las coordenadas x e y, ndice z (tambin denominado orden de apilamiento) y visibilidad. Para obtener ms informacin, consulte Visualizacin y configuracin de las propiedades de las capas en la pgina 422.

416 Captulo 25

Creacin de capas en la pgina

Dreamweaver permite crear capas en la pgina fcilmente y colocarlas con precisin.
Para crear una capa, lleve a cabo una de estas operaciones:

Para dibujar una capa, haga clic en el botn Dibujar capa de la barra Insertar y arrstrelo en la
vista Diseo de la ventana de documento para dibujar la capa.

Para colocar el cdigo de una capa en un determinado lugar del documento, site el punto de
insercin en la ventana de documento y, a continuacin, elija Insertar > Capa. Si tiene activada la opcin Elementos invisibles, aparecer un marcador de cdigo de capa en vista Diseo cada vez que coloque una capa en la pgina. Si los marcadores de cdigo de capa no estn visibles y desea verlas, elija Ver > Ayudas visuales > Elementos invisibles.
Nota: Cuando la opcin Elementos invisibles est activada, los elementos de la pgina pueden cambiar de posicin. Sin embargo, los elementos invisibles no se muestran en los navegadores. Por ello, cuando se ve la pgina en un navegador, todos los elementos invisibles aparecen en la posicin correcta.

Para dibujar mltiples capas consecutivamente:

1 2

Haga clic en el botn Dibujar capa del panel Insertar. Arrastre el ratn mientras presiona la tecla Control (Windows) o Comando (Macintosh) para dibujar cada capa. Podr continuar dibujando nuevas capas mientras no suelte la tecla Control o Comando.

Temas relacionados

Panel Capas en la pgina 417 Configuracin de preferencias de capa en la pgina 418 Cmo evitar el solapamiento de capas en la pgina 426 Panel Capas El panel Capas proporciona un medio para manejar las capas del documento. Para abrir el panel Capas, elija Ventana > Otros > Capas. Las capas se muestran en forma de lista de nombres; en orden de ndice z. La primera capa que se cre estar situada al final de la lista, mientras que la ltima que se cre aparecer en la primera posicin de la lista. Las capas anidadas se muestran como nombres relacionados con las capas padres. Haga clic en los iconos de signo ms (+) o menos (-) (Windows) o en la flecha de ampliacin (Macintosh) para mostrar u ocultar las capas anidadas.

Use el panel Capas para evitar solapamientos, cambiar la visibilidad de las capas, anidar o apilar capas y para seleccionar una o ms capas.

Animacin de capas 417

Temas relacionados

Creacin de capas en la pgina en la pgina 417 Configuracin de preferencias de capa en la pgina 418 Anidacin de capas en la pgina 419 Seleccin de capas en la pgina 420 Visualizacin y configuracin de las propiedades de las capas en la pgina 422 Cambio del orden de apilamiento de las capas en la pgina 424 Cambio de la visibilidad de una capa en la pgina 424 Cmo evitar el solapamiento de capas en la pgina 426 Configuracin de preferencias de capa Use la categora Capas del cuadro de dilogo preferencias para definir la configuracin predeterminada de las capas nuevas.
Para ver o definir las preferencias de capas:

1 2 3

Elija Edicin > Preferencias o Dreamweaver MX > Preferencias (Mac OS X). Seleccione Capas en la lista Categora. Realice los cambios necesarios. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar para cerrar el cuadro de dilogo.

Temas relacionados

Anidacin de capas en la pgina 419 Seleccin de capas en la pgina 420 Cambio del orden de apilamiento de las capas en la pgina 424 Cambio de la visibilidad de una capa en la pgina 424 Cmo evitar el solapamiento de capas en la pgina 426

418 Captulo 25

Anidacin de capas
Una capa anidada es aquella cuyo cdigo se encuentra dentro de otra capa. La anidacin se usa a menudo para agrupar capas. Una capa anidada se mueve junto con su capa padre y puede configurarse para que herede la visibilidad de sta.

Para crear una capa anidada, inserte o dibuje una capa dentro de otra o utilice el panel Capas. Para forzar la anidacin automtica de capas cuando dibuje una capa que comienza dentro de otra, seleccione la opcin Anidacin en las preferencias de Capa. Para obtener ms informacin, consulte Configuracin de preferencias de capa en la pgina 418.
Nota: Utilice el comando reparacin de cambio de tamao de Netscape cuando use capas anidadas en la pgina (Comandos > Aadir/Quitar reparacin de cambio de tamao de Netscape). En caso contrario, las capas perdern sus posiciones cuando el visitante cambie el tamao de una ventana del navegador en las versiones de Netscape 4. Puede definir una opcin de preferencia para insertar siempre la reparacin de cambio de tamao de Netscape. Para obtener ms informacin, consulte la Ayuda de Dreamweaver (Ayuda > Utilizacin de Dreamweaver).

Para crear una capa anidada, siga uno de estos procedimientos:

Para insertar una capa anidada, site el punto de insercin dentro de una capa existente y elija
Insertar > Capa.

Para dibujar una capa anidada, haga clic en el botn Dibujar capa de la barra Insertar y
arrstrelo para dibujar una capa dentro de otra existente. Si Anidar est desactivado en las preferencias de Capas, arrastre el ratn mientras presiona la tecla Alt (Windows) u Opcin (Macintosh) para dibujar una capa dentro de otra existente.
Sugerencia: Las capas anidadas pueden ofrecer distinto aspecto segn el navegador. Al crear capas anidadas, compruebe con frecuencia su aspecto en distintos navegadores durante el proceso de diseo.

Para anidar una capa existente dentro de otra utilizando el panel Capas:

1 2

Elija Ventana > Otros > Capas para abrir el panel Capas. Seleccione una capa en el panel Capas y, a continuacin, mientras presiona la tecla Control (Windows) o Comando (Macintosh) arrastre la capa con el ratn hasta la capa de destino del panel Capas. Suelte el botn del ratn cuando se resalte el nombre de la capa de destino.

Manipulacin de capas
Cuando trabaja con el diseo de la pgina puede seleccionar, mover, cambiar el tamao y alinear capas. Debe seleccionarse una capa para que sea posible moverla, cambiar su tamao o alinearla. Para evitar el solapamiento de unas capas con otras al moverlas o cambiar su tamao, use la opcin Evitar solapamiento (consulte Cmo evitar el solapamiento de capas en la pgina 426).

Animacin de capas 419

Seleccin de capas Seleccione una o varias capas para manipularlas o cambiar sus propiedades.
Para seleccionar una capa, lleve a cabo una de estas operaciones:

En el panel Capas, haga clic en el nombre de la capa. Haga clic en un manejador de seleccin de capa. Si el manejador de seleccin no est visible,
haga clic en cualquier punto dentro de la capa para hacerlo visible.

Haga clic en un borde de la capa. Haga clic dentro de una capa mientras presiona las teclas Control y Mays (Windows) o
Comando y Mays (Macintosh). Si hay mltiples capas seleccionadas, esta operacin anular la seleccin de todas las dems capas y slo dejar seleccionada aquella en la que ha hecho clic.

En la vista Diseo, haga clic en el marcador de cdigo de capa que representa la ubicacin de la
capa en el cdigo HTML. Si no ve el marcador de cdigo de capa, elija Ver > Ayudas visuales > Elementos invisibles.
Para seleccionar mltiples capas, lleve a cabo una de estas operaciones:

En el panel Capas, haga clic en dos o ms nombres de capas mientras presiona la tecla Mays. Presione Mays y haga clic dentro o en el borde de dos o ms capas.
Cuando haya mltiples capas seleccionadas, los manejadores de la ltima capa seleccionada se resaltarn en negro. Los manejadores de cambio de tamao de las dems capas se resaltarn en blanco. Cambio del tamao de capas Puede cambiar el tamao de una capa individual o de mltiples capas simultneamente para asignarles la misma anchura y altura. Si est activada la opcin Evitar solapamientos, no podr cambiar el tamao de una capa para que se superponga a otra (consulte Cmo evitar el solapamiento de capas en la pgina 426).
Para cambiar el tamao de la capa seleccionada, lleve a cabo una de estas operaciones:

Puede cambiar el tamao arrastrando uno de los manejadores de cambio de tamao de la capa. Para cambiar el tamao pxel a pxel, mantenga presionada la tecla Control (Windows) u
Opcin (Macintosh) mientras presiona una tecla de flecha.
Nota: Las teclas de flecha mueven los bordes derecho e inferior de la capa. Esta tcnica no permite cambiar el tamao utilizando los bordes superior e izquierdo.

420 Captulo 25

 Para cambiar el tamao en el incremento de ajuste a la cuadrcula, mantenga presionadas las

teclas Mays-Control (Windows) o Mays-Opcin (Macintosh) mientras presiona una tecla de flecha. Para obtener informacin sobre la configuracin del incremento de ajuste a la cuadrcula, consulte Ajuste de capas a la cuadrcula en la pgina 422.

En el inspector de propiedades, escriba los valores de anchura (An) y altura (Al).

Al cambiar el tamao de una capa cambiarn su anchura y altura. Esta operacin, sin embargo, no define qu cantidad de contenido de la capa queda visible. Para definir la regin visible de una capa, consulte Visualizacin y configuracin de las propiedades de las capas en la pgina 422.
Para cambiar el tamao de mltiples capas a la vez:

1 2

En la vista Diseo, seleccione dos o ms capas. Realice una de estas operaciones: Las primeras capas seleccionadas se ajustarn a la anchura o la altura de la ltima capa seleccionada (resaltada en negro).

Elija Modificar > Alinear > Asignar mismo ancho o Modificar > Alinear > Asignar mismo alto.

En el inspector de propiedades, bajo Varias capas, introduzca los valores de anchura y altura.
Estos valores se aplicarn a todas las capas seleccionadas. Cmo mover capas Puede mover las capas en la vista Diseo de forma muy similar a como se mueven los objetos en las aplicaciones grficas ms bsicas. Si est activada la opcin Evitar solapamientos, no podr mover una capa para que se superponga a otra. Consulte Cmo evitar el solapamiento de capas en la pgina 426.
Para mover una o varias capas seleccionadas, lleve a cabo una de estas operaciones:

Puede moverlas arrastrando el manejador de seleccin de la ltima capa seleccionada (resaltada

en negro).

Para mover la capa pxel a pxel, utilice las teclas de flecha. Mantenga presionada la tecla Mays
mientras presiona una tecla de flecha para mover la capa en el incremento actual de ajuste a la cuadrcula. Para obtener informacin sobre la configuracin del incremento de ajuste a la cuadrcula, consulte Ajuste de capas a la cuadrcula en la pgina 422. Alineamiento de capas Utilice los comandos de alineamiento de capas para alinear una o varias capas con el borde de la ltima capa seleccionada. Cuando se alinean capas, las capas hijas que no estn seleccionadas pueden moverse si se selecciona y se mueve su capa padre. Para evitarlo, no utilice capas anidadas.
Para alinear dos o ms capas:

1 2

Seleccione las capas. Elija Modificar > Alinear y seleccione una opcin de alineacin.

Animacin de capas 421

Por ejemplo, si selecciona Borde superior, se movern todas las capas de modo que sus bordes superiores queden en la misma posicin vertical que el borde superior de la ltima capa seleccionada (resaltada en negro). Ajuste de capas a la cuadrcula Utilice la cuadrcula como gua visual para dibujar, colocar o cambiar el tamao de las capas en la vista Diseo de la ventana de documento. Puede hacer que los elementos de la pgina se ajusten automticamente a la cuadrcula cuando los mueva y cambiar la cuadrcula o controlar el comportamiento de ajuste especificando la configuracin de la cuadrcula. El ajuste funciona independientemente de si la cuadrcula se encuentra o no visible.
Para mostrar u ocultar la cuadrcula:

Elija Ver > Cuadrcula > Mostrar cuadrcula.

Para activar o desactivar el ajuste:

Elija Ver > Cuadrcula > Ajustar a cuadrcula.

Para cambiar la configuracin de la cuadrcula:

Elija Ver > Cuadrcula > Configuracin de cuadrcula. Aparecer el cuadro de dilogo Configuracin de cuadrcula. Seleccione las opciones deseadas. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Adicin de contenido a las capas

Antes de colocar objetos en una capa es preciso colocar el punto de insercin en la capa.
Para colocar el punto de insercin en una capa:

Haga clic en cualquier lugar dentro de los bordes de la capa. Se resaltarn los bordes de la capa y aparecer el manejador de seleccin, pero la capa no quedar seleccionada. Para obtener ms informacin sobre la seleccin de capas, consulte Seleccin de capas en la pgina 420.

Visualizacin y configuracin de las propiedades de las capas

Puede ver y configurar diversos los atributos de la capa en el inspector de propiedades.
Para ver todas las propiedades de capas:

1 2

Seleccione una capa. Para obtener ms informacin sobre la seleccin de capas, consulte Seleccin de capas en la pgina 420. Abra el inspector de propiedades eligiendo Ventana > Propiedades.

422 Captulo 25

Si el inspector de propiedades no est ampliado, haga clic en la flecha de ampliacin situada en la esquina inferior derecha para ver todas las propiedades.

Para definir las propiedades de capas con el inspector de propiedades:

1 2 3

Seleccione una capa. Para obtener ms informacin sobre la seleccin de capas, consulte Seleccin de capas en la pgina 420. Abra el inspector de propiedades eligiendo Ventana > Propiedades. Cambie los atributos de la capa definiendo sus propiedades. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.

Visualizacin y configuracin de propiedades para mltiples capas Cuando se seleccionan dos o ms capas, el inspector de propiedades de capas muestra las propiedades de texto y un subconjunto de todas las propiedades de las capas, lo que permite modificar varias capas de una sola vez.
Para seleccionar mltiples capas:

Mantenga presionada la tecla Mays mientras selecciona las capas. Para obtener ms informacin sobre la seleccin de capas, consulte Seleccin de capas en la pgina 420.
Para ver todas las propiedades de mltiples capas:

1 2 3

Seleccione varias capas. Abra el inspector de propiedades eligiendo Ventana > Propiedades. Si el inspector de propiedades no est ampliado, haga clic en la flecha de ampliacin situada en la esquina inferior derecha para ver todas las propiedades.

Para definir las propiedades de mltiples capas a la vez con el inspector de propiedades:

1 2 3

Seleccione varias capas. Abra el inspector de propiedades eligiendo Ventana > Propiedades. Cambie los atributos de las capas definiendo sus propiedades. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades.

Animacin de capas 423

Temas relacionados

Visualizacin y configuracin de las propiedades de las capas en la pgina 422 Seleccin de capas en la pgina 420 Cambio del orden de apilamiento de las capas Utilice el inspector de propiedades o el panel Capas para cambiar el orden de apilamiento de las capas. La capa que figura en la parte superior de la lista del panel Capas es la primera en el orden de apilamiento y aparece delante de las otras capas. En el cdigo HTML, el orden de apilamiento o el ndice z de las capas determina el orden en que se dibujan las capas en un navegador. Puede cambiar el ndice z para cada capa mediante el panel Capas o el inspector de propiedades.
Para cambiar el orden de apilamiento de capas en la paleta de capas:

Elija Ventana > Otros > Capas para abrir el panel Capas. A continuacin, lleve a cabo una de estas operaciones:

Seleccione y arrastre una capa hacia arriba o hacia abajo hasta el nivel deseado dentro del orden
de apilamiento. A medida que mueve la capa aparece una lnea que indica dnde se mostrar la capa. Suelte el botn del ratn cuando la lnea de colocacin aparezca en el lugar deseado dentro del orden apilamiento.

En la columna Z, haga clic en el nmero de la capa que desea cambiar. Escriba un nmero
superior al existente para hacer ascender la capa en el orden de apilamiento o escriba un nmero inferior para hacerla descender.
Para cambiar el orden de apilamiento de capas utilizando el inspector de propiedades:

1 2 3

Elija Ventana > Otros > Capas para abrir el panel Capas y ver el orden de apilamiento actual. Seleccione una capa del panel Capas o de la ventana de documento. En el inspector de propiedades de capas, escriba un nmero en el cuadro de texto ndice Z.

Escriba un nmero superior para colocar la capa en un nivel superior del orden de apilamiento. Escriba un nmero inferior para colocar la capa en un nivel inferior en el orden de apilamiento.
Cambio de la visibilidad de una capa Mientras trabaja con un documento, puede mostrar y ocultar capas manualmente utilizando el panel Capas para ver qu apariencia tendr la pgina en distintas condiciones.
Nota: Al seleccionar una capa se hace visible y aparece delante de las otras.

Para cambiar la visibilidad de las capas:

1 2

Elija Ventana > Otros > Capas para abrir el panel Capas. Haga clic en la columna con el icono de ojo para cambiar su visibilidad.

Si el ojo est abierto significa que la capa es visible. Si est cerrado, la capa es invisible.

424 Captulo 25

 Si no hay icono de ojo, generalmente la capa hereda la visibilidad de su padre. (Cuando las
capas no estn anidadas, el padre es el cuerpo del documento, que siempre est visible.) Asimismo, el icono de ojo no aparece cuando no se especifica visibilidad (lo que se indica en el inspector de propiedades como visibilidad predeterminada).

Para cambiar la visibilidad de todas las capas a la vez:

1 2

Elija Ventana > Otros > Capas para abrir el panel Capas. Haga clic en el icono de ojo del encabezado de la columna.
Nota: Este procedimiento puede establecer que todas las capas estn visibles u ocultas, pero no que hereden esta propiedad.

Tema relacionado

Para obtener informacin sobre el establecimiento de visibilidad predeterminada para nuevas capas, consulte Configuracin de preferencias de capa en la pgina 418.

Utilizacin de tablas y capas para diseo

En lugar de utilizar tablas o la vista Disposicin para crear la disposicin (consulte Presentacin de contenido en tablas en la pgina 249 y Establecimiento de la disposicin de pginas en la vista Disposicin en la pgina 265), algunos diseadores Web prefieren trabajar con capas y tablas. Dreamweaver le permite crear su diseo utilizando capas y, si lo desea, convertirlas despus en tablas, puesto que los navegadores 3.0 no admiten capas. Puede alternar entre capas y tablas para ajustar y optimizar el diseo de la pgina. Puede convertir las capas en tablas o viceversa en una plantilla de documento o en un documento al que se haya aplicado una plantilla. Deber crear diseo en un documento sin plantilla y convertirlo antes de guardarlo como plantilla. No se puede convertir una sola tabla o una sola capa. Slo se pueden convertir capas en tablas y viceversa para toda la pgina. Si desea generar archivos compatibles con los navegadores 3.0 a partir de un archivo que utiliza capas, utilice la opcin Convertir del men Archivo (consulte Conversin para compatibilidad con los navegadores 3.0 en la pgina 427).
Nota: La conversin de capas en tablas puede dar lugar a tablas con un gran nmero de celdas vacas.

Animacin de capas 425

Conversin entre tablas y capas Puede crear el diseo utilizando capas y luego convertir las capas en tablas para que el diseo pueda verse en los navegadores antiguos.
Para convertir las capas en una tabla:

1 2

Elija Modificar > Convertir > Capas en tabla. En el cuadro de dilogo que aparece, seleccione las opciones deseadas. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Las capas se convertirn en una tabla.

Para convertir tablas en capas:

1 2

Elija Modificar > Convertir > Tablas en capas. En el cuadro de dilogo que aparece, seleccione las opciones deseadas. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Las tablas se convertirn en capas. Las celdas vacas no se convierten en capas a menos que tengan colores de fondo.
Nota: Los elementos de la pgina que estaban situados fuera de las tablas tambin se colocarn en capas.

Cmo evitar el solapamiento de capas Dado que las celdas de las tablas no se pueden solapar, Dreamweaver no puede crear una tabla a partir de capas solapadas. Si tiene previsto convertir las capas de un documento en tablas para ofrecer compatibilidad con los navegadores 3.0, utilice la opcin Evitar solapamiento a fin de limitar el movimiento y la ubicacin de las capas y evitar su solapamiento.
Para evitar el solapamiento de las capas, lleve a cabo una de estas operaciones:

Seleccione la opcin Evitar solapamientos en el panel Capas. Elija Modificar > Organizar > Evitar solapamiento capas.
Cuando est activada esta opcin, no podr crear capas delante de otras capas existentes, ni tampoco mover, cambiar el tamao o anidar capas en otras ya existentes. Si activa esta opcin despus de crear capas solapadas, arrastre cada una de las capas solapadas para apartarlas de las otras. Al activar la opcin Evitar solapamiento de capas, Dreamweaver no repara automticamente las capas solapadas que haya en la pgina. Cuando esta opcin y la de ajuste de posicin estn activadas, las capas no se ajustan a la cuadrcula si esto da lugar al solapamiento de dos capas. Ms bien se ajustan al borde de la capa ms prxima.
Nota: Algunas acciones le permiten superponer capas incluso cuando est activada la opcin Evitar solapamientos. Si inserta una capa utilizando el men Insertar, introduce nmeros en el inspector de propiedades o cambia las capas de posicin editando el cdigo HTML, puede provocar que las capas se solapen o aniden mientras esta opcin est activada. Si se produce el solapamiento, arrastre las capas solapadas en la vista Diseo para separarlas.

426 Captulo 25

Conversin para compatibilidad con los navegadores 3.0 Puede convertir las capas o CSS de una pgina en tablas y formato HTML a fin de compatibilizarla con los navegadores de la versin 3.0. Dreamweaver crea un documento convertido independiente y conserva el documento original. En general, slo deber convertir un documento cuando est completamente satisfecho con el diseo del documento original, ya que deber repetir la conversin cada vez que cambie el documento original.
Para convertir un archivo para uso con los navegadores 3.0:

1 2 3

Elija Archivo > Convertir > Compatible con navegador 3.0. En el cuadro de dilogo que aparece, elija si desea convertir capas en tablas, estilos CSS a formato HTML (estilos de carcter) o ambas opciones. Haga clic en Aceptar.

Dreamweaver abrir el archivo convertido en una ventana nueva y sin ttulo. Si ha seleccionado Convertir capas en tabla o ambos, todas las capas son sustituidas por una sola tabla que conserva la colocacin original del contenido.
Nota: Las capas solapadas no se pueden convertir, al igual que las capas que estn fuera de la pgina a la izquierda o en la parte superior.

Si ha seleccionado Convertir estilos CSS a formato HTML o ambos, el formato CSS ser sustituido, en los casos en que sea posible, por estilos con caracteres HTML. Todo el formato CSS que no se pueda convertir a HTML ser eliminado. Para obtener informacin sobre los estilos que se convierten y los que se eliminan, consulte la Tabla de conversin de CSS a formato HTML en la pgina 320. Se eliminar el cdigo de lnea de tiempo que anima capas. El cdigo de lnea de tiempo que no est relacionado con capas (por ejemplo, comportamientos o cambios en el archivo de origen de la imagen) seguir ejecutndose segn lo especificado. La lnea de tiempo se rebobinar automticamente hasta el fotograma 1. Para obtener ms informacin sobre lneas de tiempo, consulte Desplazamiento de una capa utilizando una animacin de lnea de tiempo en la pgina 429.

Animacin de las capas

Se denomina HTML dinmico (o DHTML) a la combinacin de HTML con un lenguaje de scripts que permite cambiar propiedades de estilo o posicionamiento de elementos HTML. En Dreamweaver, las lneas de tiempo usan HTML dinmico para cambiar las propiedades de las capas e imgenes con el transcurso del tiempo. Use lneas de tiempo para crear animaciones sin controles ActiveX, plug-ins ni applets de Java (aunque s requieren cdigo JavaScript).
Nota: La palabra dinmico puede tener distintos significados en distintos contextos relacionados con la Web. No hay que confundir el HTML dinmico con la idea de una pgina Web dinmica, que es una pgina Web generada dinmicamente por cdigo del lado del servidor antes de servirla a un visitante. Para obtener ms informacin sobre la creacin de pginas dinmicas, consulte Captulo 30, Flujo de trabajo de Dreamweaver para el diseo de pginas dinmicas, en la pgina 533.

Animacin de capas 427

Las lneas de tiempo permiten cambiar la posicin, el tamao, la visibilidad y el orden de apilamiento de una capa. (Las funciones de capa de las lneas de tiempo solamente funcionan en las versiones 4.0 o posteriores de los navegadores.) Las lneas de tiempo tambin sirven para realizar otras acciones cuando termine de cargarse la pgina. Por ejemplo, las lneas de tiempo pueden cambiar el archivo de origen de una etiqueta de imagen para que aparezcan distintas imgenes en la pgina durante un periodo de tiempo. Para ver el cdigo JavaScript generado por una lnea de tiempo, abra la vista Cdigo de la ventana de documento. El cdigo de lnea de tiempo est en la funcin MM_initTimelines dentro de una etiqueta script en la seccin head del documento. Al editar el cdigo HTML de un documento que contenga lneas de tiempo, procure no mover, eliminar o cambiar el nombre de elementos relacionados con la lnea de tiempo. Utilizacin del panel Lneas de tiempo El panel Lneas de tiempo muestra cmo cambian las propiedades de las capas e imgenes en el transcurso del tiempo. Elija Ventana > Otros > Lneas de tiempo para abrir el panel Lneas de tiempo.
Men emergente Lnea de tiempo Cabezal de reproduccin Nmeros de fotograma

Canal Behaviors

Cuadros clave Barra de animacin

Canal de animacin

Men emergente Lnea de tiempo Especifica Cabezal de reproduccin Muestra

qu lneas de tiempo del documento se estn mostrando actualmente en el panel Lneas de tiempo. qu fotograma de la lnea de tiempo se est mostrando actualmente en la ventana de documento. entre los botones Atrs y Reproducir corresponde al fotograma actual. La duracin de la animacin se controla estableciendo el nmero total de fotogramas y el nmero de fotogramas por segundo (fps). El valor predeterminado de 15 fotogramas por segundo es una buena velocidad media para la mayora de los navegadores que se ejecutan en sistemas normales Windows o Macintosh.

Nmero de fotogramas Indica la numeracin secuencial de los fotogramas. El nmero que aparece

Nota: Las velocidades ms altas no mejoran necesariamente los resultados. Los navegadores siempre reproducen todos los fotogramas de la animacin, incluso aunque en el sistema del usuario no puedan alcanzar la velocidad especificada. La velocidad de fotogramas se omite si es superior a la que puede admitir el navegador.

428 Captulo 25

Men contextual

Contiene varios comandos relacionados con la lnea de tiempo.

Canal Behaviors Es

el canal de los comportamientos que deben ejecutarse en un fotograma determinado de la lnea de tiempo.

Barras de animacin Muestran la duracin de la animacin de cada objeto. Una sola fila puede incluir mltiples barras en representacin de otros tantos objetos. Barras diferentes no pueden controlar un mismo objeto en el mismo fotograma. Cuadros clave Son

fotogramas de una barra en los que se han especificado propiedades del objeto (como posicin, por ejemplo). Dreamweaver calcula valores intermedios para fotogramas en cuadros clave. Los cuadros clave se sealan mediante pequeos crculos. barras para animar capas e imgenes.

Canales de animacin Muestran

Opciones de reproduccin A continuacin se enumeran las opciones de reproduccin para ver la animacin.

Rebobinar Desplaza Atrs Desplaza

el cabezal de reproduccin hasta el primer fotograma de la lnea de tiempo.

el cabezal de reproduccin un fotograma hacia la izquierda. Haga clic en el botn Atrs y mantngalo presionado para reproducir la lnea de tiempo hacia atrs.

Reproducir Desplaza

el cabezal de reproduccin un fotograma hacia la derecha. Haga clic en el botn Reproducir y mantngalo presionado para reproducir la lnea de tiempo hacia delante.

Rep. autom. Inicia automticamente la reproduccin de una lnea de tiempo cuando la pgina actual se carga en un navegador. Rep. autom. adjunta un comportamiento a la seccin body de la pgina que ejecuta la accin Reproducir lnea de tiempo cuando se carga la pgina. Bucle Hace

que la lnea de tiempo actual se reproduzca en bucle indefinidamente mientras la pgina est abierta en un navegador. Bucle inserta el comportamiento Ir a fotograma en lnea de tiempo en el canal Behaviors despus del ltimo fotograma de la animacin. Haga doble clic en el marcador del comportamiento en el canal Behaviors para editar los parmetros de dicho comportamiento y cambiar el nmero de repeticiones en bucle.

Desplazamiento de una capa utilizando una animacin de lnea de tiempo El tipo ms comn de animacin de lnea de tiempo est relacionado con el desplazamiento de una capa a lo largo de un recorrido. Las lneas de tiempo solamente pueden mover capas. Para hacer que se muevan imgenes o texto, cree una capa usando el botn Dibujar capa en la barra Insertar y luego inserte imgenes, texto o cualquier otro tipo de contenido en la capa (consulte Creacin de capas en la pgina en la pgina 417). Las lneas de tiempo tambin pueden cambiar otros atributos de capas e imgenes. Para obtener ms informacin, consulte Cambio de propiedades de imagen y capa con lneas de tiempo en la pgina 432.
Para animar una capa utilizando una lnea de tiempo:

1 2

Desplace la capa al lugar donde deber estar cuando se inicie la animacin. Elija Ventana > Otros > Lneas de tiempo.

Animacin de capas 429

Seleccione la capa que desea animar. Asegrese de haber seleccionado el elemento deseado. Haga clic en el marcador de capas o el manejador de seleccin de capas, o utilice el panel Capas para seleccionar una capa. Para obtener ms informacin, consulte Manipulacin de capas en la pgina 419. Al seleccionar una capa, a su alrededor aparecen manejadores, como se muestra en la siguiente ilustracin.
Haga clic en el manejador de seleccin de la capa para seleccionarla

Capa seleccionada con una imagen en su interior

Al hacer clic en la capa, aparecer un punto de insercin intermitente en su interior, pero no se seleccionar la capa.
4

Elija Modificar > Lnea de tiempo > Aadir objeto a lnea de tiempo o, simplemente, arrastre la capa seleccionada al panel Lneas de tiempo. Aparecer una barra en el primer canal de la lnea de tiempo. En la barra se mostrar el nombre de la capa.

5 6

Haga clic en el marcador del cuadro clave que se encuentra en el extremo de la barra. Desplace la capa al lugar de la pgina en el que deber estar cuando termine la animacin. Aparecer una lnea que indica la ruta de la animacin en la ventana de documento. Si desea que la capa se desplace describiendo una curva, seleccione su barra de animacin y mantenga presionada la tecla Control (Windows) o la tecla Comando (Macintosh) mientras hace clic en un fotograma en medio de la barra para aadir un cuadro clave en el fotograma en que ha hecho clic, o haga clic en un fotograma en medio de la barra de animacin y elija Aadir cuadro clave en el men contextual. Repita este paso para definir ms cuadros clave. Mantenga presionado el botn Reproducir para obtener una vista previa de la animacin en la pgina. Repita el procedimiento para aadir otras capas e imgenes a la lnea de tiempo y para crear una animacin ms compleja.

Creacin de una lnea de tiempo arrastrando una ruta Si desea crear una animacin con una ruta compleja, puede ser ms conveniente grabar la ruta al arrastrar la capa en lugar de crear cuadros clave individuales.

430 Captulo 25

Para crear una lnea de tiempo arrastrando una ruta:

1 2

Seleccione una capa. Desplace la capa al lugar donde deber estar cuando se inicie la animacin. Compruebe que ha seleccionado la capa. Si el punto de insercin se encuentra en la capa, sta no est seleccionada. Para seleccionar una capa, haga clic en el marcador de capas o el manejador de seleccin de capas o utilice el panel Capas. Para obtener ms informacin, consulte Manipulacin de capas en la pgina 419.

3 4 5

Elija Modificar > Lnea de tiempo > Ruta grabada de capa. Arrastre la capa por la pgina para crear una ruta. Suelte la capa en el punto donde debe detenerse la animacin. Dreamweaver aade una barra de animacin a la lnea de tiempo con el nmero adecuado de cuadros clave.

En el panel Lneas de tiempo, haga clic en el botn Rebobinar; luego, mantenga presionado el botn Reproducir para obtener una vista previa de la animacin.

Modificacin de lneas de tiempo Despus de definir los componentes bsicos de una lnea de tiempo, se pueden realizar cambios, como aadir y eliminar fotogramas, cambiar el momento de inicio de la animacin, etc.
Para modificar una lnea de tiempo, lleve a cabo una de estas operaciones:

Para prolongar la duracin de la animacin, arrastre el marcador del fotograma final hacia la derecha. Todos los cuadros clave de la animacin se desplazarn, por lo que sus posiciones relativas permanecern constantes. Para evitar que otros cuadros clave se desplacen, mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) mientras arrastra el marcador del fotograma final.

Para conseguir que la capa llegue al cuadro clave tarde o temprano, desplace el marcador del
cuadro clave hacia la derecha o la izquierda en la barra.

Para cambiar el momento de inicio de una animacin, seleccione una o varias de las barras
asociadas con la animacin (presione la tecla Mays para seleccionar ms de una barra a la vez) y arrstrelas a derecha o izquierda.

Para desplazar la posicin de una ruta de animacin completa, seleccione toda la barra y luego
arrastre el objeto por la pgina. Dreamweaver ajustar la posicin de todos los cuadros clave. Si se realiza cualquier tipo de cambio teniendo seleccionada toda la barra, el cambio se aplicar a todos los cuadros clave.

Para aadir o eliminar fotogramas de la lnea de tiempo, elija Modificar > Lnea de tiempo >
Aadir fotograma o Modificar > Lnea de tiempo > Eliminar fotograma.

Para hacer que la lnea de tiempo se reproduzca automticamente al abrirse la pgina en un

navegador, haga clic en Rep. autom. Rep. autom. adjunta un comportamiento a la pgina que ejecuta la accin Reproducir lnea de tiempo cuando se carga la pgina.

Para conseguir que la pgina se reproduzca continuamente en bucle, haga clic en Bucle. Bucle
inserta la accin Ir a fotograma en lnea de tiempo en el canal Behavior despus del ltimo fotograma de la animacin. Pueden editarse los parmetros de este comportamiento para definir el nmero deseado de repeticiones en bucle.

Animacin de capas 431

Cambio de propiedades de imagen y capa con lneas de tiempo Adems de mover capas con lneas de tiempo, se puede cambiar la visibilidad, el tamao y el orden de apilamiento de una capa. Tambin se puede cambiar el archivo de origen de una imagen.
Para cambiar las propiedades de imagen y capa con una lnea de tiempo:

En el panel Lneas de tiempo, lleve a cabo una de estas operaciones: fotogramas inicial y final siempre son cuadros clave.)

Seleccione un cuadro clave de la barra que controla el objeto que desea cambiar. (Los Cree un cuadro clave haciendo clic en un fotograma situado en medio de la barra de animacin
y eligiendo Modificar > Lnea de tiempo > Aadir cuadro clave. Tambin puede crear un cuadro clave haciendo clic en un fotograma de la barra de animacin mientras presiona la tecla Control (Windows) o Comando (Macintosh).
2

Defina nuevas propiedades para el objeto eligiendo una de las siguientes opciones: junto al cuadro de texto Origen del inspector de propiedades, busque y seleccione una nueva imagen.

Para cambiar el archivo de origen de una imagen, haga clic en el icono de carpeta que aparece Para cambiar la visibilidad de una capa, elija inherit, visible o hidden (heredada, visible u
oculta) en el cuadro de texto Vis del inspector de propiedades. Tambin puede utilizar los iconos de ojo del panel Capas. Consulte Cambio de la visibilidad de una capa en la pgina 424.

Para cambiar el tamao de una capa, arrastre la capa por los selectores de cambio de tamao o
introduzca nuevos valores en los cuadros Ancho y Alto del inspector de propiedades. No todos los navegadores pueden cambiar dinmicamente el tamao de una capa.

Para cambiar el orden de apilamiento de una capa, introduzca un nuevo valor en el cuadro de
texto ndice Z o use el panel Capas para cambiar el orden de apilamiento de la capa actual (consulte Cambio del orden de apilamiento de las capas en la pgina 424).
3

Mantenga presionado el botn Reproducir para ver la animacin.

Utilizacin de mltiples lneas de tiempo En lugar de intentar controlar la totalidad de la accin en una pgina con una lnea de tiempo, resulta ms fcil trabajar con lneas de tiempo independientes que controlen partes concretas de la pgina. Por ejemplo, una pgina puede incluir elementos interactivos, cada uno de los cuales puede desencadenar la reproduccin de diferentes lneas de tiempo.
Para administrar mltiples lneas de tiempo, lleve a cabo una de estas operaciones:

Para crear una nueva lnea de tiempo, elija Modificar > Lnea de tiempo > Aadir lnea de
tiempo.

Para eliminar la lnea de tiempo seleccionada, elija Modificar > Lnea de tiempo > Quitar lnea
de tiempo. De esta manera, se eliminan permanentemente todas las animaciones de la lnea de tiempo seleccionada.

Para cambiar el nombre de la lnea de tiempo seleccionada, elija Modificar > Lnea de tiempo >
Cambiar nombre de lnea de tiempo o introduzca un nuevo nombre en el men emergente Lnea de tiempo del panel Lneas de tiempo.

432 Captulo 25

 Para ver una lnea de tiempo diferente en el panel Lneas de tiempo, elija una nueva lnea de
tiempo en el men emergente Lnea de tiempo del panel Lneas de tiempo. Cmo copiar y pegar animaciones Cuando ya tenga la secuencia de animacin que desea, podr copiarla y pegarla en otra zona de la lnea de tiempo actual, en otra lnea de tiempo del mismo documento o en una lnea de tiempo de otro documento. Tambin podr copiar y pegar mltiples secuencias de una sola vez.
Para cortar o copiar y pegar secuencias de animacin:

Haga clic en una barra de animacin para seleccionar una secuencia. Para seleccionar mltiples secuencias, haga clic en mltiples barras de animacin mientras mantiene presionada la tecla Mays-. Para seleccionar todas las secuencias, presione Control+A (Windows) o Comando+A (Macintosh). Copie o corte la seleccin. Realice una de estas operaciones:

2 3

Desplace el cabezal de reproduccin a otro lugar de la lnea de tiempo actual. Seleccione otra lnea de tiempo en el men emergente Lnea de tiempo. Abra otro documento o cree uno nuevo y despus, haga clic en el panel Lneas de tiempo.
4

Pegue la seleccin en la lnea de tiempo. Las barras de animacin de un mismo objeto no pueden superponerse porque una capa no puede estar en dos lugares a la vez (tampoco una imagen puede tener dos orgenes diferentes al mismo tiempo). Si la barra de animacin en la que est pegando la seleccin llega a solaparse a otra barra de animacin del mismo objeto, Dreamweaver desplazar automticamente la seleccin al primer fotograma que no se solape.

A la hora de pegar secuencias de animacin en otro documento, hay que tener presentes estos dos principios:

Si se copia una secuencia de animacin para una capa y el nuevo documento contiene una capa
con el mismo nombre, Dreamweaver aplicar las propiedades de la animacin a la capa existente en el nuevo documento.

Si se copia una secuencia de animacin para una capa y el nuevo documento no contiene una
capa con el mismo nombre, Dreamweaver pegar la capa y su contenido desde el documento original junto con la secuencia de animacin. Para aplicar la secuencia de animacin pegada a otra capa del nuevo documento, elija Cambiar objeto en el men contextual y seleccione el nombre de la segunda capa en el men emergente. Si lo desea, puede eliminar la capa pegada. Aplicacin de una secuencia de animacin a un objeto diferente Para ahorrar tiempo, se puede crear una secuencia de animacin una sola vez y aplicarla a todas las dems capas del documento.
Para aplicar una secuencia de animacin existente a otros objetos:

1 2

En el panel Lneas de tiempo, seleccione la secuencia de animacin y cpiela. Haga clic en cualquier fotograma del panel Lneas de tiempo y pegue la secuencia en ese fotograma.

Animacin de capas 433

Haga clic con el botn derecho del ratn (Windows) o haga clic manteniendo presionada la tecla Control (Macintosh) en la secuencia de animacin pegada y elija Cambiar objeto en el men contextual. En el cuadro de dilogo que aparece a continuacin, elija otro objeto en el men desplegable y haga clic en Aceptar. Repita los pasos del 2 al 4 para todos los dems objetos a los que desee aplicar la misma secuencia de animacin.

4 5

Tambin puede cambiar de idea con respecto a la capa que desea animar, despus de haber creado la secuencia de animacin; en este caso, basta con que siga los pasos 3 y 4 anteriores (no es necesario copiar y pegar). Cambio de nombres de lneas de tiempo
Para cambiar el nombre de la lnea de tiempo que se est mostrando actualmente en el panel Lneas de tiempo:

1 2

Elija Modificar > Lnea de tiempo > Cambiar nombre de lnea de tiempo. En el cuadro de dilogo Cambiar nombre de lnea de tiempo, introduzca un nombre nuevo.

Si el documento contiene la accin de comportamiento Reproducir lnea de tiempo (por ejemplo, si contiene un botn en el que el usuario debe hacer clic para iniciar la lnea de tiempo), deber editar el comportamiento para reflejar el nuevo nombre de la lnea de tiempo. Sugerencias para la animacin de lneas de tiempo Las siguientes sugerencias pueden mejorar el resultado de sus animaciones y facilitar considerablemente su creacin:

Muestre y oculte capas en lugar de cambiar el archivo de origen en animaciones con mltiples
imgenes. Si cambia el archivo de origen de una imagen se puede ralentizar la animacin, pues tendr que cargarse la nueva imagen. Si todas las imgenes se cargan de una vez en capas ocultas antes de que se ejecute la animacin, se evitarn las pausas y la ausencia de imgenes.

Ample las barras de animacin para crear un movimiento ms suave. Si la animacin resulta
entrecortada y las imgenes saltan de una posicin a otra, arrastre el fotograma final de la barra de animacin de la capa para extender el movimiento sobre ms fotogramas. Al alargar la barra de animacin se crean ms puntos de datos entre los puntos de inicio y de final del movimiento; esto tambin hace que el movimiento sea ms lento. Intente incrementar el nmero de fotogramas por segundo (fps) para aumentar la velocidad, pero tenga en cuenta que la mayora de los navegadores que se ejecutan en sistemas de tipo medio no admiten animaciones a velocidades superiores a 15 fps. Pruebe la animacin en distintos sistemas con diferentes navegadores para encontrar la mejor configuracin posible.

No anime grandes mapas de bits. La animacin de imgenes grandes da lugar a animaciones

lentas. Como alternativa, cree imgenes compuestas y mueva partes pequeas de estas imgenes. Por ejemplo, muestre un automvil en movimiento animando solamente las ruedas.

Cree animaciones simples. No cree animaciones que requieran recursos distintos a los que
pueden ofrecer los navegadores actuales. Los navegadores siempre reproducen todos los fotogramas en una animacin de lnea de tiempo, incluso cuando las prestaciones del sistema o de Internet se reducen.

434 Captulo 25

Animacin de capas utilizando acciones de comportamiento

Adjunte las siguientes acciones de comportamiento a un vnculo, botn u otro objeto para controlar lneas de tiempo y capas. Para crear efectos atractivos, puede colocar comportamientos que contengan estas acciones en el canal Behaviors. Por ejemplo, puede hacer que una lnea de tiempo se detenga por s sola. Para obtener ms informacin, consulte Cmo adjuntar un comportamiento a una lnea de tiempo en la pgina 385 y Utilizacin de comportamientos JavaScript en la pgina 381.
Arrastrar capa Permite al visitante arrastrar una capa. Use esta accin para crear puzzles, controles deslizantes y otros elementos mviles de interfaz de usuario. Consulte Arrastrar capa en la pgina 391. Mostrar-Ocultar capas Muestra, oculta o restaura la visibilidad predeterminada de una o ms capas. Esta accin resulta til para mostrar informacin a medida que el visitante va interactuando con la pgina. Consulte Mostrar-Ocultar capas en la pgina 403. Reproducir lnea de tiempo y Detener lnea de tiempo Permiten a los visitantes iniciar y detener una lnea de tiempo haciendo clic en un vnculo o un botn. Estas acciones tambin permiten iniciar y detener una lnea de tiempo automticamente cuando el visitante seala un vnculo, una imagen u otro objeto. Consulte Reproducir lnea de tiempo y Detener lnea de tiempo en la pgina 411. Ir a fotograma en lnea de tiempo Hace que la lnea de tiempo salte a un fotograma determinado. La casilla de verificacin Bucle del panel Lneas de tiempo, aade la accin Ir a fotograma en lnea de tiempo despus del ltimo fotograma de la animacin; esto hace que vaya al fotograma 1 y vuelva a iniciarse la animacin. Consulte Ir a un fotograma en la lnea de tiempo en la pgina 410. Definir texto de capa Reemplaza el contenido y el formato de una capa existente en una pgina con el contenido que usted especifique. Dicho contenido puede incluir cualquier cdigo HTML. Consulte Definir texto de capa en la pgina 401.

Animacin de capas 435

436 Captulo 25

Parte VII Utilizacin de mltiples pginas

Establezca vnculos entre las pginas y reutilice los elementos de diseo y las disposiciones de una pgina en otra. Posteriormente, compruebe el sitio. Esta parte contiene los siguientes captulos:

Parte VII

Captulo 26, Creacin de vnculos y navegacin Captulo 27, Administracin de activos, bibliotecas y
plantillas del sitio

Captulo 28, Comprobacin de un sitio

CAPTULO 26 Creacin de vnculos y navegacin

Despus de crear pginas HTML y de configurar un sitio de Dreamweaver para almacenar los documentos, puede establecer conexiones entre sus documentos y otros documentos. Macromedia Dreamweaver MX ofrece varios mtodos para crear vnculos de hipertexto con documentos, imgenes, archivos multimedia o software transferible. Puede establecer vnculos con cualquier texto o imagen de cualquier lugar del documento, incluidos el texto y las imgenes situados en un encabezado, lista, tabla, capa o marco. Para obtener una representacin visual de la vinculacin de los archivos, utilice el mapa del sitio. En el mapa del sitio puede aadir nuevos documentos al sitio, crear y eliminar vnculos con documentos y comprobar los vnculos con archivos dependientes (consulte Utilizacin del mapa del sitio en la pgina 95). Los vnculos se pueden crear y administrar de varias formas distintas. Algunos diseadores Web prefieren crear vnculos con pginas o archivos inexistentes mientras trabajan, mientras que otros prefieren crear en primer lugar todos los archivos y las pginas para, a continuacin, aadir los vnculos. Otra forma de administrar vnculos consiste en crear pginas marcadoras de posicin que representan el archivo final y permiten aadir vnculos rpidamente y comprobarlos antes de terminar todas las pginas. Para obtener ms informacin sobre la comprobacin de vnculos, consulte Comprobacin de vnculos de una pgina o un sitio en la pgina 513. Este captulo contiene las secciones siguientes: Ubicacin y rutas de los documentos en la pgina 440 Creacin de vnculos en la pgina 443 Administracin de vnculos en la pgina 451 Creacin de mens de salto en la pgina 455 Creacin de barras de navegacin en la pgina 457 Creacin de mapas de imagen en la pgina 459 Cmo adjuntar comportamientos a vnculos en la pgina 461

439

Ubicacin y rutas de los documentos

A la hora de crear vnculos resulta fundamental conocer la ruta de archivo entre el documento desde el que establece el vnculo y el documento con el que lo establece. Cada pgina Web tiene una direccin exclusiva, denominada URL (Localizador Uniforme de Recursos). (Para obtener ms informacin sobre los URL, consulte la pgina del World Wide Web Consortium sobre asignacin de nombres y direcciones.) Sin embargo, cuando se crea un vnculo local (un vnculo de un documento con otro documento del mismo sitio), no suele ser necesario especificar el URL completo del documento de destino. En este caso se especifica una ruta relativa desde el documento actual o desde la carpeta raz del sitio. Hay tres tipos de rutas de vnculos:

Rutas absolutas (como http://www.macromedia.com/support/dreamweaver/contents.html).

Consulte Rutas absolutas en la pgina 440.

Rutas relativas al documento (como dreamweaver/contents.html). Consulte Rutas relativas al

documento en la pgina 440.

Rutas relativas a la raz del sitio (como /support/dreamweaver/contents.html). Consulte Rutas

relativas a la raz del sitio en la pgina 442. Con Dreamweaver puede seleccionar fcilmente el tipo de ruta de documento para crear los vnculos: Consulte Vinculacin de archivos y documentos en la pgina 444.
Nota: Utilice el tipo de vnculo que prefiera y le resulte ms cmodo ya sea relativo al sitio o al documento. En lugar de escribir las rutas, conviene acceder a los vnculos a travs del botn Examinar, mtodo que asegura la correcta introduccin de la ruta.

Rutas absolutas Las rutas absolutas proporcionan el URL completo del documento vinculado, incluido el protocolo que se debe usar (generalmente, http:// para pginas Web). Por ejemplo, http:// www.macromedia.com/support/dreamweaver/contents.html es una ruta absoluta. Para vincular un documento situado en otro servidor, es preciso emplear una ruta absoluta. Aunque tambin puede utilizar vnculos de rutas absolutas para vnculos locales (de documentos del mismo sitio), se desaconseja utilizar este sistema, ya que si mueve el sitio a otro dominio se rompern todos los vnculos de las rutas absolutas locales. El uso de rutas relativas para vnculos locales tambin ofrece una mayor flexibilidad si necesita mover archivos dentro del sitio.
Nota: Cuando inserta imgenes (no vnculos), si utiliza una ruta absoluta a una imagen que se encuentra en un servidor remoto y que no est disponible en la unidad de disco duro local, no podr ver la imagen en la ventana de documento. Deber obtener una vista previa del documento en un navegador para verla. Si es posible, utilice rutas relativas a la raz del sitio o del documento para las imgenes. Para obtener ms informacin, consulte Insercin de una imagen en la pgina 326.

Rutas relativas al documento Las rutas relativas al documento son las ms adecuadas para utilizar con vnculos locales en la mayora de los sitios Web. Resultan particularmente tiles cuando el documento actual y el documento con el que se establece el vnculo se encuentran en la misma carpeta y es probable que vayan a permanecer juntos. Tambin puede utilizar una ruta relativa al documento para establecer un vnculo con un documento de otra carpeta, pero especificando la ruta a travs de la jerarqua de carpetas desde el documento actual hasta el vinculado.

440 Captulo 26

En una ruta relativa al documento se omite la parte del URL absoluto que coincide en los documentos actual y vinculado y se indica nicamente la parte de la ruta que difiere.

Para establecer un vnculo desde el documento hasta un archivo de la misma carpeta, indique
simplemente el nombre del archivo.

Para establecer un vnculo con un archivo situado en una subcarpeta de la carpeta del
documento actual, indique el nombre de dicha subcarpeta, seguido de una barra diagonal (/) y del nombre del archivo.

Para establecer un vnculo con un archivo situado en la carpeta padre de la carpeta del
documento actual, introduzca ../ delante del nombre del archivo (donde .. representa un nivel por encima en la jerarqua de carpetas). Por ejemplo, supongamos que tiene un sitio con la siguiente estructura:
m y_site (root folder)

support

contents.html

hours.html

resources

tips.html

products

catalog.html

index.html (home page)

Para establecer un vnculo desde contents.html hasta otros archivos:

Para establecer un vnculo desde contents.html hasta hours.html (ambos archivos se

encuentran en la misma carpeta), el nombre de archivo ser la ruta relativa: hours.html.

Para establecer un vnculo con tips.html (en la subcarpeta llamada resources), utilice la ruta
relativa resources/tips.html. Cada barra diagonal (/) representa un nivel por debajo en la jerarqua de carpetas.

Creacin de vnculos y navegacin 441

 Para establecer un vnculo con index.html (en la carpeta padre, un nivel por encima de
contents.html), utilice la ruta relativa ../index.html. Cada ../ representa un nivel por encima en la jerarqua de carpetas.

Para establecer un vnculo con catalog.html (en una subcarpeta distinta de la carpeta padre),
utilice la ruta relativa ../products/catalog.html. ../ sube a la carpeta padre; products/ baja a la subcarpeta de productos.
Nota: Guarde siempre un archivo nuevo antes de crear una ruta relativa al documento, pues sta no es vlida sin un punto de partida preciso. Si crea una ruta relativa al documento antes de guardar el archivo, Dreamweaver utilizar temporalmente una ruta absoluta que comenzar por archivo:// hasta que guarde el archivo. Cuando guarde el archivo, Dreamweaver convertir la ruta archivo:// en una ruta relativa.

No es necesario actualizar las rutas relativas al documento entre archivos que se mueven como un grupo (por ejemplo, al mover una carpeta completa, de forma que todos los archivos de esa carpeta conserven las mismas rutas relativas entre s). Sin embargo, cuando se mueve un archivo individual que contiene vnculos relativos al documento o un archivo individual que est vinculado en relacin con el documento, no necesitar actualizar esos vnculos. (Si mueve o cambia el nombre de los archivos utilizando el panel Sitio, Dreamweaver actualizar automticamente todos los vnculos relevantes.) Rutas relativas a la raz del sitio Las rutas relativas a la raz del sitio indican la ruta desde la carpeta raz del sitio hasta un documento. Puede utilizar este tipo de rutas si trabaja con un sitio Web grande que usa varios servidores o un servidor que alberga varios sitios distintos. Sin embargo, si no est familiarizado con este tipo de ruta, le resultar ms cmodo mantener las rutas relativas al documento. Una ruta relativa a la raz del sitio comienza por una barra diagonal, que representa la carpeta raz del sitio. Por ejemplo, /support/tips.html es una ruta relativa a la raz del sitio de un archivo (tips.html) situado en la subcarpeta de soporte de la carpeta raz del sitio. A menudo, una ruta relativa a la raz del sitio es la mejor forma de especificar vnculos en un sitio Web en el que necesita mover con frecuencia archivos HTML de una carpeta a otra. Al mover un documento que contiene vnculos relativos a la raz, no es preciso cambiar los vnculos. Por ejemplo, si los archivos HTML utilizan vnculos relativos a la raz para archivos dependientes (como imgenes) y se mueve un archivo HTML, sus vnculos de archivos dependientes seguirn siendo vlidos. Sin embargo, al mover o cambiar el nombre de documentos con vnculos relativos a la raz, deber actualizar esos vnculos, incluso aunque las rutas de los documentos no hayan cambiado en su relacin mutua. Por ejemplo, si mueve una carpeta, deber actualizar todos los vnculos relativos a la raz de los archivos de esa carpeta. (Si mueve o cambia el nombre de los archivos utilizando el panel Sitio, Dreamweaver actualizar automticamente todos los vnculos relevantes.) Para utilizar rutas relativas a la raz del sitio, defina en primer lugar una carpeta local en Dreamweaver eligiendo una carpeta raz local que servir como el equivalente de la raz del documento en un servidor (consulte Configuracin de un sitio Dreamweaver en la pgina 74). Dreamweaver utiliza esta carpeta para determinar las rutas relativas a la raz del sitio de los archivos.

442 Captulo 26

Nota: Los vnculos relativos a la raz son interpretados por los servidores, no por los navegadores. Por tanto, si abre una pgina local que utiliza vnculos relativos a la raz en el navegador (sin utilizar Vista previa en el navegador desde Dreamweaver), los vnculos no funcionarn. Cuando se utiliza la funcin Vista previa en el navegador para ver un documento que utiliza vnculos relativos a la raz, Dreamweaver los convierte temporalmente (slo en el archivo que se visualiza) para que utilicen rutas relativas al documento. Sin embargo, slo se puede ver simultneamente una pgina que utilice vnculos relativos a la raz. Si sigue un vnculo de la pgina visualizada, los vnculos relativos a la raz de la pgina siguiente no se convertirn y el navegador no podr seguirlos. La vista previa de pginas en conjuntos de marcos que utilizan vnculos relativos a la raz ocasiona problemas similares.

Para obtener una vista previa de un conjunto de pginas que utilizan vnculos relativos a la raz, realice una de estas operaciones:

Coloque los archivos en un servidor remoto y bralos en l. (Slo Windows) Elija Edicin > Preferencias, seleccione Vista en Navegador en la lista de
categoras de la izquierda y, a continuacin, seleccione Vista previa usando el servidor local.
Nota: Para utilizar esta opcin deber ejecutar un servidor Web en el equipo local.

Creacin de vnculos
La etiqueta HTML para crear un vnculo de hipertexto se denomina etiqueta anchor o etiqueta a. Dreamweaver crea una etiqueta anchor para los objetos, el texto o las imgenes desde los que se establecen vnculos. Puede establecer vnculos con otros documentos y archivos, adems de con puntos especficos de un documento, utilizando la etiqueta a href. Por ejemplo, si selecciona el texto Home Page en la ventana de documento y, a continuacin, crea un vnculo con un archivo llamado home.htm, el cdigo HTML para el vnculo ser el siguiente:
<a href=home.htm>Home Page</a>

Si crea un vnculo con un punto especfico de un documento, cree en primer lugar un punto de fijacin con nombre (por ejemplo, a name="MainMenu"). A continuacin, cree dentro de la pgina un vnculo que haga referencia al punto de fijacin con nombre (por ejemplo, a href="#MainMenu"). Antes de crear vnculos, deber saber cmo funcionan las rutas relativas al documento, las rutas relativas a la raz del sitio y las rutas absolutas (consulte Ubicacin y rutas de los documentos en la pgina 440). Puede crear varios tipos de vnculos en un documento:

Un vnculo con otro documento o archivo, como un archivo grfico, de pelcula, PDF o de
sonido. Consulte Vinculacin de archivos y documentos en la pgina 444.

Un vnculo de punto de fijacin con nombre, que salta a un emplazamiento especfico dentro
de un documento. Consulte Establecimiento de vnculos con un punto especfico de un documento en la pgina 447.

Un vnculo de correo electrnico, que crea un mensaje de correo electrnico en blanco con la
direccin del destinatario ya cumplimentada. Consulte Creacin de un hipervnculo en la pgina 449.

Vnculos nulos y de script, que permiten adjuntar comportamientos a un objeto o crear un

vnculo que ejecuta cdigo JavaScript. Consulte Creacin de vnculos de script y nulos en la pgina 450.

Creacin de vnculos y navegacin 443

Dreamweaver ofrece varias formas de crear vnculos locales (vnculos entre documentos del mismo sitio):

Utilice el mapa del sitio para ver, crear, cambiar o eliminar vnculos. En la ventana de documento, seleccione texto o un elemento de pgina y, a continuacin,
utilice Modificar > Crear vnculo para seleccionar un archivo con el que establecer el vnculo.

Utilice el inspector de propiedades seleccionando texto o un elemento de pgina del

documento. A continuacin, utilice el icono de carpeta o el icono de sealizacin de archivos del inspector de propiedades para seleccionar un archivo con el que establecer el vnculo, o bien escriba la ruta del archivo.
Nota: La introduccin manual de URL o de rutas de archivo puede producir errores, lo que impedir el funcionamiento de los vnculos. Para asegurarse de que utiliza la ruta correcta, utilice el icono de carpeta para acceder al vnculo.

En la ventana de documento, seleccione texto o un elemento de pgina, elija Crear vnculo en

el men contextual y, a continuacin, seleccione un archivo para establecer el vnculo. Para crear un vnculo externo (con un documento de otro sitio), deber escribir la ruta absoluta (con el protocolo adecuado) en el inspector de propiedades. Asegrese de que introduce la ruta completa (incluido http://) al crear vnculos externos. Vinculacin de archivos y documentos Puede utilizar el inspector de propiedades y el icono de sealizacin de archivos para crear vnculos desde una imagen, un objeto o texto hasta otro documento o archivo. Para obtener informacin sobre el uso del mapa del sitio, consulte Creacin y modificacin de vnculos en el mapa del sitio en la pgina 453.
Para vincular documentos utilizando el icono de carpeta o el cuadro de texto Vnculo del inspector de propiedades:

1 2

Seleccione texto o una imagen en la vista Diseo de la ventana de documento. Abra el inspector de propiedades (Ventana > Propiedades) y lleve a cabo una de las siguientes operaciones:

Haga clic en el icono de carpeta situado a la derecha del cuadro de texto Vnculo para localizar
y seleccionar un archivo. La ruta del documento vinculado aparecer en el campo URL. Utilice el men emergente Relativa a del cuadro de dilogo Seleccionar archivo HTML para indicar si la ruta es relativa al documento o a la raz del sitio. A continuacin, haga clic en Seleccionar.
Nota: Al cambiar el tipo de ruta en el campo Relativa a, Dreamweaver utiliza este valor como tipo de ruta predeterminada para futuros vnculos hasta que vuelva a cambiar el tipo de ruta.

Escriba la ruta y el nombre de archivo del documento en el cuadro de texto Vnculo.

Para establecer un vnculo con un documento del sitio, introduzca una ruta relativa al documento o relativa a la raz del sitio. Para establecer un vnculo con un documento externo al sitio, introduzca una ruta absoluta que incluya el protocolo (por ejemplo, http://). Puede utilizar este mtodo para introducir un vnculo para un archivo que an no se ha creado.

444 Captulo 26

En el men emergente Dest, seleccione una ubicacin para abrir el documento. Para que el documento vinculado aparezca en un lugar distinto de la ventana o el marco actual, seleccione una opcin en el men emergente Destino del inspector de propiedades:

_blank

carga el documento vinculado en una nueva ventana sin nombre del navegador.

_parent

carga el documento vinculado en el marco padre o en la ventana padre del marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el documento vinculado se cargar en la ventana completa del navegador.

_self

carga el documento vinculado en el mismo marco o la misma ventana que el vnculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo.

_top carga el documento vinculado en la ventana completa del navegador, eliminando de esta forma todos los marcos.
Sugerencia: Si va a establecer todos los vnculos de la pgina al mismo objetivo, puede especificar este objetivo una vez eligiendo Insertar > Etiquetas Head > Base y seleccionando la informacin de destino. Para obtener informacin sobre el establecimiento de vnculos con marcos, consulte Control del contenido del marco con vnculos en la pgina 293.

Para establecer vnculos con documentos utilizando el icono de sealizacin de archivos:

1 2

Seleccione texto o una imagen en la vista Diseo de la ventana de documento. Arrastre el icono de sealizacin de archivos situado a la derecha del cuadro de texto Vnculo del inspector de propiedades y seale otro documento abierto, un punto de fijacin visible en un documento abierto o un documento del panel Sitio. El cuadro de texto Vnculo se actualizar para mostrar el vnculo.
Nota: Slo puede establecer un vnculo con un documento abierto si los documentos no estn maximizados en la ventana de documento. Cuando se seala a un documento abierto, ste pasa al primer plano de la pantalla mientras se realiza la seleccin.

Libere el botn del ratn.

Cmo arrastrar el icono de sealizacin de archivos desde el inspector de propiedades hasta un archivo del panel Sitio.
Para crear un vnculo desde una seleccin en un documento abierto:

1 2

Seleccione texto o una imagen en la ventana de documento. Presione la tecla Mays mientras arrastra la seleccin. Al arrastrar la seleccin, aparecer el icono de sealizacin de archivos.

Creacin de vnculos y navegacin 445

Seale otro documento abierto, un punto de fijacin visible en un documento abierto o un documento del panel Sitio.
Nota: Slo puede establecer un vnculo con un documento abierto si los documentos no estn maximizados en la ventana de documento. Cuando se seala a un documento abierto, ste pasa al primer plano de la pantalla mientras se realiza la seleccin.

Libere el botn del ratn.

Cmo arrastrar el icono de sealizacin de archivos mientras presiona la tecla Mays desde el texto de la ventana de documento hasta un archivo del panel Sitio.
Para establecer vnculos con documentos utilizando el mapa del sitio y el icono de sealizacin de archivos:

1 2

Ample el panel Sitio y, a continuacin, muestre las vistas Archivos del sitio y Mapa del sitio manteniendo presionado el icono Mapa del sitio y eligiendo Mapa y archivos. Seleccione un archivo HTML en el mapa del sitio. Aparecer el icono de sealizacin de archivos junto al archivo. Arrastre el icono de sealizacin de archivos y seale a otro archivo del mapa del sitio o a un archivo local en la vista Archivos del sitio.

446 Captulo 26

Libere el botn del ratn. En la parte inferior del archivo HTML seleccionado se colocar un vnculo de hipertexto con el nombre del archivo vinculado. Este mtodo ofrece buenos resultados cuando crea el sitio y desea crear vnculos rpidamente en el sitio.

Establecimiento de vnculos con un punto especfico de un documento Puede utilizar el inspector de propiedades para establecer un vnculo con una determinada seccin de un documento creando en primer lugar puntos de fijacin con nombre. Los puntos de fijacin con nombre permiten establecer marcadores en un documento, que a menudo se colocan en un tema especfico o en la parte superior del documento. Posteriormente podr crear vnculos con esos puntos de fijacin con nombre que llevarn rpidamente al visitante a la posicin especificada. Para crear un vnculo con un punto de fijacin con nombre siga este procedimiento de dos pasos. En primer lugar, cree un punto de fijacin con nombre. A continuacin, cree un vnculo con dicho punto.
Para crear un punto de fijacin con nombre:

1 2

En la vista Diseo de la ventana de documento, site el punto de insercin en el lugar donde desea insertar el punto de fijacin con nombre. Realice una de estas operaciones:

Elija Insertar > Punto de fijacin con nombre. Presione Control+Alt+A (Windows) o Comando+Opcin+A (Macintosh). Seleccione la ficha Comn de la barra Insertar y haga clic en el botn Punto de fijacin con
nombre. Aparecer el cuadro de dilogo Punto de fijacin con nombre.

Creacin de vnculos y navegacin 447

En el campo Nombre del punto de fijacin, introduzca un nombre para el punto de fijacin. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. El marcador del punto de fijacin aparecer en el punto de insercin.
Nota: Si no aparece el marcador del punto de fijacin, elija Ver > Ayudas visuales > Elementos invisibles.

Para establecer un vnculo con un punto de fijacin con nombre:

1 2

En la vista Diseo de la ventana de documento, seleccione texto o una imagen para crear un vnculo a partir de ellos. En el cuadro de texto Vnculo del inspector de propiedades, introduzca un signo de nmero (#) y el nombre del punto de fijacin. Por ejemplo: actual, escriba #superior.

Para establecer un vnculo con un punto de fijacin denominado superior en el archivo Para establecer un vnculo con un punto de fijacin denominado superior en un archivo
distinto de la misma carpeta, escriba nombrearchivo.html#superior.
Nota: Los puntos de fijacin con nombre tienen en cuenta el uso de maysculas y minsculas.

Para establecer un vnculo con un punto de fijacin con nombre mediante el mtodo de sealizacin de archivo:

Abra el documento que contiene el punto de fijacin con nombre deseado.

Nota: Elija Ver > Ayudas visuales > Elementos invisibles para mostrar el punto de fijacin si est oculto.

2 3

En la vista Diseo de la ventana de documento, seleccione texto o una imagen para crear un vnculo a partir de ellos. (Si es otro documento abierto, deber cambiar a l.) Realice una de estas operaciones: Vnculo del inspector de propiedades y arrstrelo hasta el punto de fijacin con el que desea establecer el vnculo: un punto de fijacin en el mismo documento o un punto de fijacin en otro documento abierto.

Haga clic en el icono de sealizacin de archivos situado a la derecha del cuadro de texto

En la ventana de documento, presione la tecla Mays mientras arrastra el texto o la imagen

seleccionada hasta el punto de fijacin con el que desea establecer el vnculo: un punto de fijacin en el mismo documento o un punto de fijacin en otro documento abierto.

448 Captulo 26

Creacin de un hipervnculo Puede aadir texto de hipervnculo para establecer un vnculo con otro archivo.
Para aadir un hipervnculo utilizando el comando Hipervnculo:

1 2

Site el punto de insercin en el documento donde desea que aparezca el hipervnculo. Realice una de estas operaciones para mostrar el cuadro de dilogo Insertar hipervnculo:

Elija Insertar> Hipervnculo. Seleccione la ficha Comn de la barra Insertar y, a continuacin, haga clic en el botn
Hipervnculo. Aparecer el cuadro de dilogo Hipervnculo.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Creacin de un vnculo de correo electrnico Cuando el usuario hace clic en un vnculo de correo electrnico se abre una nueva ventana de mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario). En la ventana de mensaje de correo electrnico, el campo Para se rellena automticamente con la direccin especificada en el vnculo.
Para crear un vnculo de correo electrnico utilizando el comando Insertar vnculo de correo electrnico:

En la vista Diseo de la ventana de documento, site el punto de insercin donde desea que aparezca el vnculo de correo electrnico o seleccione el texto o la imagen que desea que aparezca como vnculo de correo electrnico. Realice una de estas operaciones para insertar el vnculo:

Elija Insertar > Vnculo de correo electrnico.

Creacin de vnculos y navegacin 449

 Seleccione la ficha Comn de la barra Insertar y, a continuacin, haga clic en el botn Insertar
vnculo de correo electrnico. Aparecer el cuadro de dilogo Insertar vnculo de correo electrnico.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Para crear un vnculo de correo electrnico mediante el inspector de propiedades:

1 2

Seleccione texto o una imagen en la vista Diseo de la ventana de documento. En el cuadro de texto Vnculo del inspector de propiedades, escriba mailto: seguido de una direccin de correo electrnico. No escriba espacios entre los dos puntos y la direccin de correo electrnico. Por ejemplo, escriba mailto:jdoe@macromedia2.com.

Creacin de vnculos de script y nulos Los vnculos ms utilizados son los que se establecen con documentos y puntos de fijacin con nombre (consulte Vinculacin de archivos y documentos en la pgina 444 y Establecimiento de vnculos con un punto especfico de un documento en la pgina 447, respectivamente), aunque tambin hay otros tipos.
Un vnculo nulo es un vnculo no designado. Los vnculos nulos se utilizan para adjuntar comportamientos a objetos o texto de una pgina. Una vez creado el vnculo nulo, puede adjuntarle un comportamiento para cambiar una imagen o para mostrar una capa cuando el puntero se desplaza sobre el vnculo. Para obtener ms informacin sobre los sitios remotos, consulte Aplicacin de un comportamiento en la pgina 383. Los vnculos de script

ejecutan cdigo JavaScript o llaman a una funcin JavaScript. Sirven para proporcionar a los usuarios informacin adicional sobre un elemento sin salir de la pgina actual. Los vnculos de script tambin pueden emplearse para realizar clculos, validar formularios y otras tareas de procesamiento cuando el usuario hace clic en un elemento especfico.

Para crear un vnculo nulo:

1 2

Seleccione texto, una imagen o un objeto en la vista Diseo de la ventana de documento. En el inspector de propiedades, escriba javascript:; (la palabra javascript, seguida de coma y de punto y coma) en el cuadro de texto Vnculo.

450 Captulo 26

Para crear un vnculo de script:

1 2

Seleccione texto, una imagen o un objeto en la vista Diseo de la ventana de documento. En el cuadro de texto Vnculo del inspector de propiedades, escriba javascript: y, a continuacin, cdigo JavaScript o una llamada de funcin. Por ejemplo, si introduce javascript:alert('This link leads to the index') en el cuadro de texto Vnculo se crear un vnculo que al activarse mostrar un cuadro de advertencia JavaScript con el mensaje This link leads to the index.
Nota: Dado que el cdigo JavaScript aparece en el cdigo HTML entre comillas dobles (como el valor del atributo href), deber utilizar comillas simples en el cdigo de script o anular el valor de las comillas dobles introduciendo barras invertidas delante de ellas (por ejemplo, \"This link leads to the index\").

Administracin de vnculos
Dreamweaver puede actualizar los vnculos con origen y destino en un documento cada vez que ste se mueva o cambie de nombre en un sitio local. Esta funcin funciona mejor cuando se almacena todo el sitio (o una seccin completa e independiente de ste) en el disco local. Dreamweaver no cambia los archivos de la carpeta remota hasta que se colocan o desprotegen los archivos locales en el servidor remoto.
Para activar la administracin de vnculos en Dreamweaver:

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X). Aparecer el cuadro de dilogo Preferencias. Seleccione General en la lista de categoras de la izquierda. Aparecern las opciones de preferencias generales.

Creacin de vnculos y navegacin 451

En la seccin Opciones de documento, seleccione Siempre o Mensaje en el men emergente Actualizar vnculos al mover archivos. Si elige Siempre, Dreamweaver actualizar automticamente todos los vnculos con origen y destino en un documento seleccionado cada vez que ste se mueva o cambie de nombre. Para obtener instrucciones especficas sobre cmo proceder en caso de eliminar un archivo, consulte Modificacin de un vnculo en todo el sitio en la pgina 454. Si elige Mensaje, Dreamweaver mostrar primero un cuadro de dilogo con todos los archivos afectados por el cambio. Haga clic en Actualizar si desea actualizar los vnculos de estos archivos o en No actualizar si desea dejar los archivos como estaban.

Haga clic en Aceptar.

Para acelerar el proceso de actualizacin, Dreamweaver puede crear un archivo de cach en el que almacenar informacin sobre todos los vnculos de la carpeta local. Este archivo de cach se crea al seleccionar la opcin Cach en el cuadro de dilogo Definicin de sitio y se actualiza de manera invisible cuando se usa Dreamweaver para aadir, cambiar o eliminar vnculos a archivos del sitio local.
Para crear un archivo de cach para el sitio:

Elija Sitio> Editar sitios. Aparecer el cuadro de dilogo Editar sitios. Seleccione un sitio y, a continuacin, haga clic en Editar. Seleccione Datos locales en la lista de categoras de la izquierda. El cuadro de dilogo Definicin del sitio muestra las opciones de Datos locales. En la categora Datos locales, seleccione la casilla de verificacin Activar cach.

2 3

La primera vez que cambie o quite vnculos a archivos de la carpeta local despus de iniciar Dreamweaver, el programa le pedir que cargue la cach. Si hace clic en S, se cargar la cach y Dreamweaver actualizar todos los vnculos al archivo que acaba de modificar. Si hace clic en No, el cambio se anotar en la cach, pero sta no se cargar y Dreamweaver no actualizar los vnculos. La cach puede tardar unos minutos en cargarse en sitios grandes. La mayor parte de este tiempo se dedicar a comparar las marcas de hora de los archivos del sitio local con las marcas grabadas en la cach, con el fin de comprobar si sta est desfasada. Si no ha cambiado ningn archivo fuera de Dreamweaver, puede hacer clic en el botn Detener cuando aparezca.
Para volver a crear la cach del sitio:

En el panel Sitio, elija Sitio > Volver a crear cach de sitio.

452 Captulo 26

Creacin y modificacin de vnculos en el mapa del sitio Puede modificar la estructura del sitio en el mapa del sitio aadiendo, cambiando o eliminando vnculos. Dreamweaver actualiza automticamente el mapa del sitio para mostrar los cambios realizados en el sitio.
Para aadir un vnculo, realice una de estas operaciones:

Arrastre una pgina desde el Explorador de Windows o el Finder de Macintosh y colquela

sobre una pgina del mapa del sitio.
Nota: Compruebe que el panel Sitio est acoplado y, a continuacin, haga clic en la flecha de ampliacin. Mantenga presionado el botn Mapa del sitio y seleccione Mapa y archivos.

Seleccione una pgina HTML en el mapa del sitio y elija Sitio > Vincular a archivo existente
(Windows) o Sitio > Ver mapa del sitio > Vincular a archivo existente (Macintosh), o bien seleccione Vincular a archivo existente en el men contextual.

Seleccione una pgina HTML en el mapa del sitio y elija Sitio > Vincular a nuevo archivo
(Windows) o Sitio > Ver mapa del sitio > Vincular a nuevo archivo (Macintosh), o bien seleccione Vincular a nuevo archivo en el men contextual.

Seleccione una pgina HTML en el mapa del sitio. Aparecer el icono de sealizacin de
archivos. Arrastre el icono hasta el objeto con el que desea vincularlo: un archivo en la vista Archivos del sitio, un documento abierto de Dreamweaver o un punto de fijacin con nombre en un documento abierto en el escritorio.
Nota: Para obtener ms informacin, consulte Vinculacin de archivos y documentos en la pgina 444.

Para cambiar un vnculo:

En el mapa del sitio, seleccione la pgina de destino del vnculo que desea cambiar (de modo que el documento que est vinculado a esa pgina seale a otra pgina) y, a continuacin, realice una de estas operaciones: (Macintosh).
Nota: Utilice el men Sitio del panel Sitio.

Elija Sitio > Cambiar vnculo (Windows) o Sitio > Ver mapa del sitio > Cambiar vnculo

Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla
Control (Macintosh) y elija Cambiar vnculo en el men contextual.
2 3

Acceda al archivo al que desea que seale el vnculo o introduzca un URL. Haga clic en Aceptar.

Para eliminar un vnculo, realice una de estas operaciones:

Seleccione la pgina en el mapa del sitio y, a continuacin, elija Sitio > Quitar vnculo
(Windows) o Sitio > Ver mapa del sitio > Quitar vnculo (Macintosh).
Nota: Utilice el men Sitio del panel Sitio.

Seleccione la pgina en el mapa del sitio y haga clic con el botn derecho (Windows) o haga
clic mientras presiona la tecla Control (Macintosh) y elija Quitar vnculo en el men contextual. Al quitar un vnculo no se elimina el archivo, slo desaparece el vnculo del cdigo HTML de la pgina que seala al vnculo.

Creacin de vnculos y navegacin 453

Para abrir el origen de un vnculo:

Seleccione un archivo en el mapa del sitio y realice una de estas operaciones:

Elija Sitio > Abrir origen del vnculo (Windows) o Sitio > Ver mapa del sitio > Abrir origen del
vnculo (Macintosh).

Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla
Control (Macintosh) y elija Abrir origen del vnculo en el men contextual. Se abrirn el inspector de propiedades y el archivo de origen que contiene el vnculo en la ventana de documento, con el vnculo resaltado. Modificacin de un vnculo en todo el sitio Adems de configurar Dreamweaver para que actualice los vnculos automticamente cada vez que mueva o cambie de nombre un archivo, puede cambiar manualmente todos los vnculos (incluidos los vnculos nulos, de correo electrnico, FTP y script) para que sealen a otro lugar. Puede utilizar esta opcin en cualquier momento. Por ejemplo, puede vincular las palabras pelculas del mes a /pelculas/julio.html en todo el sitio y el 1 de agosto deber cambiar esos vnculos para que sealen a /pelculas/agosto.html. Sin embargo, esta funcin resulta particularmente til para eliminar un archivo con el que estn vinculados otros archivos.
Para cambiar un vnculo en todo el sitio:

Seleccione un archivo en la vista Local del panel Sitio.

Nota: Si cambia un vnculo nulo, de correo electrnico, FTP o script, no necesita seleccionar un archivo.

Elija Sitio > Cambiar vnculo en todo el sitio. Aparecer el cuadro de dilogo Cambiar vnculo en todo el sitio.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Dreamweaver actualizar todos los documentos vinculados al archivo seleccionado, haciendo que sealen al nuevo archivo y usando el formato de ruta empleado por el documento (por ejemplo, si la ruta antigua era relativa al documento, la nueva tambin deber serlo). No importa si el tipo de vnculo es relativo al documento o a la raz. Dreamweaver actualizar el vnculo automticamente.

Despus de cambiar un vnculo en todo el sitio, el archivo seleccionado quedar hurfano (es decir, ningn archivo del disco local estar vinculado a l). Entonces podr eliminarlo sin romper ningn vnculo del sitio local de Dreamweaver.

454 Captulo 26

Nota: Dado que estos cambios se realizan localmente, deber eliminar manualmente el archivo hurfano correspondiente en la carpeta remota y colocar o desproteger los archivos cuyos vnculos haya modificado para que los visitantes del sitio puedan ver los cambios efectuados.

Creacin de mens de salto

Un men de salto es un men emergente de un documento que pueden ver los visitantes del sitio y que ofrece opciones vinculadas a documentos o archivos. Puede crear vnculos con documentos del sitio Web, documentos de otros sitios, correo electrnico, grficos o cualquier tipo de archivo se pueda abrir en un navegador. Un men de salto puede contener tres componentes bsicos:

Un mensaje de seleccin de men, como una categora de descripcin para los elementos del
men, o instrucciones, como Elija una opcin (opcional).

Una lista de elementos de men vinculados: el usuario elige una opcin y se abre un
documento o un archivo vinculado (obligatorio).

Un botn Ir (opcional).
Insercin de un men de salto Para insertar un men de salto en el documento, utilice el objeto de formulario Men de salto.
Para crear un men de salto:

1 2

Abra un documento y, a continuacin, site el punto de insercin en la ventana de documento. Realice una de estas operaciones:

Elija Insertar > Objeto de formulario > Men de salto. Seleccione la ficha Formulario de la barra Insertar y, a continuacin, haga clic en el botn
Men de salto. Aparecer el cuadro de dilogo Insertar men de salto.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. El men de salto aparecer en el documento.

Creacin de vnculos y navegacin 455

Edicin de los elementos del men de salto Para realizar cambios en los elementos del men de salto, utilice el inspector de propiedades o el panel Comportamientos. Puede cambiar el orden de la lista o el archivo con el que est vinculado un elemento. Tambin puede aadir, eliminar o cambiar el nombre de un elemento. Para cambiar la ubicacin en la que se abre un archivo vinculado o para aadir o cambiar un mensaje de seleccin de men deber utilizar el panel Comportamientos (consulte Men de salto en la pgina 395).
Para editar un elemento del men de salto mediante el inspector de propiedades:

1 2

Elija Ventana > Propiedades para abrir el inspector de propiedades si no est abierto. En la vista Diseo de la ventana de documento, haga clic en el objeto Men de salto para seleccionarlo. El icono Lista/men aparecer en el inspector de propiedades. En el inspector de propiedades, haga clic en el botn Valores de lista. Aparecer el cuadro de dilogo Listar valores.

Realice cambios necesarios en los elementos del men y, a continuacin, haga clic en Aceptar.

Solucin de problemas relacionados con los mens de salto Si el usuario selecciona un elemento del men de salto no podr volver a seleccionarlo si regresa a esa pgina o si el campo Abrir URL en especifica un marco. Hay dos formas de solucionar este problema:

Utilice un mensaje de seleccin de men, como una categora, o instrucciones para el usuario,
como Elija una opcin. Un mensaje de seleccin de men vuelve a seleccionarse automticamente despus de cada seleccin del men.

Utilice un botn Ir, que permite al usuario volver a visitar el vnculo seleccionado actualmente.
Nota: Seleccione slo una de estas opciones por men de salto en el cuadro de dilogo Insertar men de salto, ya que se aplican a todo el men de salto.

456 Captulo 26

Creacin de barras de navegacin

Una barra de navegacin se compone de una imagen o un conjunto de imgenes cuya visualizacin cambia segn las acciones que realice el usuario. Las barras de navegacin proporcionan a menudo una forma fcil de desplazarse por las pginas y los archivos de un sitio.

Antes de usar el comando Insertar barra de navegacin, cree un conjunto de imgenes para los estados de visualizacin de cada elemento de navegacin. (Considere el elemento de la barra de navegacin como si fuera un botn, ya que cuando el usuario hace clic en l, le lleva a otra pgina.) Un elemento de la barra de navegacin puede tener cuatro estados:

Arriba: la imagen que aparece cuando el usuario an no ha hecho clic o interactuado con el
elemento. Por ejemplo, este estado ofrece la impresin de que an no se ha hecho clic en el elemento.

Sobre: la imagen que aparece cuando el puntero pasa sobre la imagen Arriba. La apariencia del
elemento cambia (por ejemplo, puede ponerse ms clara) para que los usuarios sepan que pueden interactuar con l.

Abajo: la imagen que aparece despus de hacer clic en el elemento.

Por ejemplo, cuando un usuario hace clic en un elemento, se carga una pgina nueva y la barra de navegacin sigue mostrndose, pero el elemento se oscurece para indicar que est seleccionado.

Sobre mientras abajo: la imagen que aparece cuando el puntero pasa sobre la imagen Abajo
despus de hacer clic en el elemento. Por ejemplo, el elemento aparece atenuado o gris. Puede utilizar este estado como indicador visual para que los usuarios sepan que no pueden volver a hacer clic en este elemento mientras se encuentren en esa parte del sitio. No es necesario que incluya imgenes de barra de navegacin para los cuatro estados. Quiz slo necesite, por ejemplo, los estados Arriba y Abajo. Puede crear una barra de navegacin, copiarla en otras pginas del sitio, utilizarla con marcos y editar los comportamientos de la pgina para mostrar distintos estados a medida que se accede a las pginas.

Creacin de vnculos y navegacin 457

Insercin de una barra de navegacin Cuando inserte una barra de navegacin, asigne nombres a los elementos de la barra y seleccione imgenes para ellas.
Para crear una barra de navegacin:

Realice una de estas operaciones:

Elija Insertar > Imgenes interactivas > Barra de navegacin. Seleccione la ficha Comn de la barra Insertar y, a continuacin, haga clic en el botn Insertar
barra de navegacin. Aparecer el cuadro de dilogo Insertar barra de navegacin.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Modificacin de una barra de navegacin Una vez creada una barra de navegacin para un documento, puede aadir o quitar imgenes de la barra utilizando el comando Modificar barra de navegacin. Puede emplear este comando para cambiar una imagen o un conjunto de imgenes, para determinar qu archivo se abre cuando se hace clic en un elemento, para seleccionar otra ventana o marco para abrir un archivo o para reordenar las imgenes.

458 Captulo 26

Para modificar una barra de navegacin:

Elija Modificar > Barra de navegacin. Aparecer el cuadro de dilogo Modificar barra de navegacin.

2 3

En la lista Elementos de barra de navegacin, seleccione el elemento que desea editar. Realice los cambios necesarios. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Creacin de mapas de imagen

Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza una accin, por ejemplo, se abre un archivo nuevo. Utilice el inspector de propiedades de imagen para crear y editar grficamente mapas de imagen del lado del cliente. Los mapas de imagen del lado del cliente almacenan la informacin del vnculo de hipervnculo en el documento HTML, no en un archivo de mapa aparte como ocurre con los mapas de imagen del lado del servidor. Cuando el usuario hace clic en una zona interactiva de la imagen, el URL asociado se enva directamente al servidor. Esto hace que los mapas de imagen del lado del cliente sean ms rpidos que los mapas del lado del servidor, pues el servidor no necesita interpretar dnde ha hecho clic el usuario. Los mapas de imagen del lado del cliente son compatibles con Navigator 2.0 y versiones posteriores, NCSA Mosaic 2.1 y 3.0 y todas las versiones de Internet Explorer. Dreamweaver no modifica las referencias a mapas de imagen del lado del servidor en documentos existentes. Puede utilizar mapas de imagen del lado del cliente y del servidor en el mismo documento. Sin embargo, los navegadores que admiten ambos tipos de mapas de imagen dan prioridad a los mapas de imagen del lado del cliente. Para incluir un mapa de imagen del lado del servidor en un documento, deber escribir el cdigo HTML correspondiente.

Creacin de vnculos y navegacin 459

Insercin de mapas de imagen del lado del cliente Cuando inserte un mapa de imagen del lado del cliente, cree una zona interactiva y, a continuacin, defina un vnculo que se abra cuando el usuario haga clic en la zona interactiva.
Nota: Puede crear mltiples zonas interactivas, pero formarn parte del mismo mapa de imagen.

Para crear un mapa de imagen del lado del cliente:

1 2 3

En la ventana de documento, seleccione la imagen. En el inspector de propiedades, haga clic en la flecha de ampliacin, situada en la esquina inferior derecha, para ver todas las propiedades. En el campo Mapa, introduzca un nombre exclusivo para el mapa de imagen.
Nota: Si utiliza mltiples mapas de imagen en el mismo documento, asigne un nombre exclusivo a cada uno.

Para definir las reas de mapas de imagen, realice una de estas operaciones: interactiva circular.

Seleccione la herramienta circular y arrastre el puntero sobre la imagen para crear una zona Seleccione la herramienta de rectngulo y arrastre el puntero sobre la imagen para crear una
zona interactiva rectangular.

Seleccione la herramienta poligonal y defina una zona interactiva con forma irregular haciendo
clic una vez en cada esquina. Haga clic en la herramienta de flecha para cerrar la forma. Despus de crear la zona interactiva, aparecer el inspector de propiedades de zonas interactivas.
5

Seleccione las opciones deseadas del inspector de propiedades de zonas interactivas. Para obtener ms informacin, haga clic en el botn Ayuda del inspector de propiedades. Cuando termine de definir el mapa de imagen, haga clic en un rea en blanco del documento para cambiar el inspector de propiedades.

Modificacin de un mapa de imagen Puede editar fcilmente las zonas interactivas creadas en un mapa de imagen. Puede mover un rea de zonas interactivas, cambiar el tamao de las zonas interactivas o adelantar o retrasar una zona interactiva en una capa. Tambin puede copiar una imagen con zonas interactivas de un documento a otro o copiar una o ms zonas interactivas de una imagen y pegarlas en otra imagen. Las zonas interactivas asociadas a la imagen tambin se copiarn en el nuevo documento.
Para seleccionar mltiples zonas interactivas en un mapa de imagen:

1 2

Utilice la herramienta de puntero para seleccionar una zona interactiva. Realice una de estas operaciones: seleccionar.

Mantenga presionada la tecla Mays mientras hace clic en las otras zonas interactivas que desea Presione Control+A (Windows) o Comando+A (Macintosh) para seleccionar todas las
zonas interactivas.

460 Captulo 26

Para mover una zona interactiva:

1 2

Utilice la herramienta de puntero para seleccionar la zona interactiva que desea mover. Realice una de estas operaciones:

Arrastre la zona interactiva a una nueva rea. Utilice Mays y las teclas de flecha para mover una zona interactiva 10 pxeles en la direccin
seleccionada.

Utilice las teclas de flecha para mover una zona interactiva un pxel en la direccin
seleccionada.
Para cambiar el tamao de una zona interactiva:

1 2

Utilice la herramienta de puntero para seleccionar la zona interactiva cuyo tamao desea cambiar. Arrastre el manejador de zona interactiva para cambiar el tamao o la forma de la zona interactiva.

Cmo adjuntar comportamientos a vnculos

Puede adjuntar un comportamiento a cualquier vnculo de un documento (consulte Aplicacin de un comportamiento en la pgina 383). Puede emplear los comportamientos siguientes a la hora de insertar elementos vinculados a los documentos:
Definir texto de barra de estado Determina el texto de un mensaje y lo muestra en la barra de estado, que se encuentra en la parte inferior izquierda de la ventana del navegador. Por ejemplo, puede usar esta accin para describir el destino de un vnculo en la barra de estado en lugar de mostrar el URL al que est asociado. (Consulte Definir texto de barra de estado en la pgina 402.) Abrir ventana del navegador Abre un URL en una nueva ventana. Se pueden especificar las propiedades de la nueva ventana, incluidos su tamao, sus atributos (si se puede cambiar su tamao, si tiene barra de mens, etc.) y su nombre. (Consulte Abrir ventana del navegador en la pgina 396.) Men de salto Edita un men de salto. Puede cambiar la lista del men, especificar otro archivo vinculado o cambiar la ubicacin del navegador en el que se abre el documento vinculado. (Consulte Men de salto en la pgina 395.) Definir Imagen de barra de navegacin Cambia el comportamiento de una barra de navegacin. Utilcelo para personalizar la visualizacin de las imgenes en una barra de navegacin. Por ejemplo, cuando el puntero se encuentra sobre parte de la barra de navegacin, cambia la visualizacin de las otras imgenes de la barra de navegacin o del documento. (Consulte Definir Imagen de barra de navegacin en la pgina 399.)

Creacin de vnculos y navegacin 461

462 Captulo 26

CAPTULO 27 Administracin de activos, bibliotecas y plantillas del sitio

Conforme desarrolle sitios Web acumular un nmero cada vez mayor de activos. En algunos casos quiz use los mismos activos en varios sitios y tambin es posible que disponga de un conjunto de activos seleccionados que utilice en todos los sitios. El panel Activos de Macromedia Dreamweaver MX le permite administrar los activos del sitio. A travs de este panel puede realizar un fcil seguimiento y obtener vistas previas de diversos tipos de activos almacenados en el sitio, como imgenes, pelculas, colores, scripts y vnculos. Puede arrastrar fcilmente un activo desde el panel Activos y colocarlo directamente en el documento actual para insertarlo en una pgina. El panel Activos tambin proporciona acceso a dos tipos de activos especiales: las bibliotecas y las plantillas. Los elementos de biblioteca y las plantillas son activos vinculados: al editar un elemento de biblioteca o una plantilla se actualizan todos los documentos a los que se han aplicado esos activos. Use elementos de biblioteca y plantillas cuando quiera reutilizar contenido especfico o elementos de diseo en todo el sitio o en mltiples sitios. Los elementos de biblioteca estn concebidos para elementos de diseo individuales, como la informacin de copyright de un sitio o un logotipo. Las plantillas permiten controlar un rea de diseo ms amplia. El autor de la plantilla disea una pgina y define qu reas de la pgina pueden aceptar ediciones de diseo o de contenido. Este captulo trata los temas siguientes:

Utilizacin del panel Activos en la pgina 464 Administracin del panel Activos en la pgina 473 Utilizacin de los elementos de biblioteca en la pgina 475 Creacin, administracin y edicin de elementos de biblioteca en la pgina 476 Plantillas de Dreamweaver en la pgina 481 Creacin de una plantilla de Dreamweaver en la pgina 486 Definicin de regiones de plantilla en la pgina 482 Creacin de un documento basado en plantilla en la pgina 496 Creacin de una plantilla anidada en la pgina 502 Edicin y actualizacin de plantillas en la pgina 504 Exportacin e importacin de contenido XML de plantillas en la pgina 505

463

Utilizacin del panel Activos

Los activos pueden ser diversos elementos que se almacenan en un sitio, como archivos de imagen o de pelcula. Puede obtener activos de distintas fuentes. Por ejemplo, puede crear activos en una aplicacin como Macromedia Fireworks o Macromedia Flash, se los puede proporcionar un compaero o un cliente, los puede copiar de un CD de ilustraciones u obtenerlos en un sitio Web de grficos. Para obtener ms informacin sobre cmo planificar y reunir activos, consulte Planificacin y diseo del sitio en la pgina 69. Puede utilizar el panel Activos de dos formas distintas: como una lista fcilmente accesible de los activos del sitio (la lista Sitio) o como una forma de organizar los activos que utiliza con ms frecuencia (la lista Favoritos). El panel Activos sita automticamente los activos del sitio en la lista Sitio. Puede aadir los activos que desee a la lista Favoritos. La mayor parte de las operaciones del panel Activos tienen el mismo funcionamiento en la lista Sitio que en la lista Favoritos. Sin embargo, algunas tareas slo se pueden realizar en la lista Favoritos (consulte Configuracin de una lista de activos favoritos en la pgina 473). Apertura del panel Activos Utilice el panel Activos para ver activos del sitio actual o activos que ha guardado en una lista Favoritos. Deber definir un sitio local antes de ver los activos en el panel Activos.
Para abrir el panel Activos:

Elija Ventana > Activos. Aparecer el panel Activos. La categora Imgenes aparece seleccionada de forma predeterminada.

464 Captulo 27

Seleccin de una categora de activos El panel Activos ayuda a administrar y organizar los activos del sitio de forma ms sencilla que el panel Sitio. Los activos se categorizan y muestran en una lista. Para ver activos de una determinada categora, haga clic en el icono correspondiente. Dreamweaver muestra las siguientes categoras de activos:
Imgenes Son archivos de imagen en formato GIF, JPEG o PNG. Para obtener informacin sobre las imgenes, consulte Insercin de imgenes en la pgina 325. Colores

Son los colores utilizados en los documentos y las hojas de estilos del sitio, incluidos los colores del texto, el fondo y los vnculos.

URL Son los vnculos externos de los documentos del sitio actual. Esta categora incluye los siguientes tipos de vnculos: FTP, gopher, HTTP, HTTPS, JavaScript, correo electrnico (mailto) y archivo local (file://). Pelculas Flash

Son archivos de cualquier versin del formato Flash de Macromedia. El panel Activos muestra archivos SWF (archivos Flash comprimidos), pero no FLA (Flash de origen). Consulte Contenido de Flash en la pgina 354. Son archivos de cualquier versin del formato Shockwave de Macromedia. Consulte Insercin de pelculas Shockwave en la pgina 359.

Pelculas Shockwave

Son archivos en formato QuickTime o MPEG. Consulte Insercin de medios en la pgina 351.
Pelculas Scripts

Son archivos JavaScript o VBScript. Los scripts de archivos HTML no aparecen en el panel Activos, a diferencia de los incluidos en archivos JavaScript o VBScript independientes. Para obtener informacin sobre el uso de JavaScript en Macromedia Dreamweaver, consulte Utilizacin del depurador JavaScript en la pgina 229.

Plantillas Ofrecen una forma sencilla de reutilizar la disposicin de la pgina en mltiples pginas y de modificar la disposicin de todas las pginas adjuntas a una plantilla cuando sta se modifica. Consulte Plantillas de Dreamweaver en la pgina 481. Elementos de biblioteca Son elementos que se utilizan en mltiples pginas. Cuando se modifica un elemento de biblioteca, se actualizan todas las pginas que contienen ese elemento. Consulte Utilizacin de los elementos de biblioteca en la pgina 475
Nota: En el panel Activos slo se muestran los archivos que corresponden a estas categoras. Hay otros tipos de archivos que a veces se denominan activos, pero que no se muestran en este panel.

Visualizacin de activos en el panel Activos El panel Activos ofrece dos formas de ver los activos: la lista Sitio, que muestra todos los activos del sitio, y la lista Favoritos, que slo muestra los activos seleccionados de manera explcita. Los activos se dividen en categoras en ambas listas. Seleccione la categora de activos que desee incluir en las listas haciendo clic en uno de los botones de categora de la parte izquierda del panel. Tanto la lista Sitio como la lista Favoritos estn disponibles para todas las categoras de activos, salvo las plantillas y los elementos de biblioteca. La lista Sitio muestra todos los activos que se encuentran presentes en el sitio como archivos, as como todos los colores y URL empleados en cualquier documento del sitio. La mayora de los procedimientos siguientes se pueden llevar a cabo en la lista Sitio o en la lista Favoritos.

Administracin de activos, bibliotecas y plantillas del sitio 465

Para ver la lista Sitio:

Haga clic en Sitio en la parte superior del panel Activos.

Nota: En las categoras Plantillas y Biblioteca, las opciones Sitio y Favoritos no estn disponibles.

Para ver la lista Favoritos:

Haga clic en Favoritos en la parte superior del panel Activos. La lista Favoritos permanece vaca hasta que expresamente le aada activos.
Para mostrar activos de una determinada categora:

Haga clic en el icono de la categora correspondiente y en Sitio o Favoritos. Por ejemplo, para mostrar todas las imgenes del sitio, haga clic en el icono Imgenes y, a continuacin, en Sitio.
Para obtener una vista previa de un activo:

Seleccione el activo en el panel Activos. En el rea de la parte superior del panel se mostrar una vista previa del activo. Por ejemplo, cuando se selecciona un activo de pelcula, el rea de vista previa muestra un icono. Para ver la pelcula, haga clic en el botn Reproducir (el tringulo verde), en la esquina superior derecha del rea de vista previa.
Para cambiar el tamao del rea de vista previa:

Arrastre la barra de separacin (entre el rea de vista previa y la lista de activos) hacia arriba o hacia abajo. Actualizacin del panel Activos El panel Activos puede tardar unos segundos en crear la lista Sitio, pues tiene que leer la cach del sitio. Algunos cambios no aparecen inmediatamente en el panel Activos.

Al aadir o eliminar un activo del sitio, los cambios no se reflejan en el panel Activos hasta que
se actualiza la lista Sitio haciendo clic en el botn Actualizar lista del sitio. Si aade o elimina un activo fuera de Dreamweaver, utilizando el Explorador de Windows o el Finder, por ejemplo, deber volver a generar la cach del sitio para actualizar el panel Activos.

Si elimina la nica instancia de un determinado color o URL en el sitio o si guarda un archivo

nuevo que contiene un color o URL que an no se usa en el sitio, los cambios no se reflejarn en el panel Activos hasta que actualice la lista Sitio.
Para actualizar manualmente la lista Sitio:

1 2

En el panel Activos, haga clic en Sitio para ver la lista del mismo nombre. Haga clic en el botn Actualizar lista del sitio en la parte inferior del panel Activos. Si es necesario, la cach del sitio se crea o actualiza y el panel Activos se actualiza para mostrar los activos del sitio.

Para volver a generar manualmente la cach del sitio y actualizar la lista Sitio:

Presione la tecla Control (Windows) o Comando (Macintosh) mientras hace clic en la lista del panel Activos y, a continuacin, seleccione Actualizar lista del sitio.

466 Captulo 27

Adicin de un activo a una pgina Puede insertar la mayora de los tipos de activos en un documento arrastrndolos a la ventana de documento en la vista Cdigo o Diseo o utilizando el botn Insertar. Puede insertar colores y URL o aplicarlos al texto seleccionado en la vista Diseo. Los URL tambin se pueden aplicar a otros elementos, como las imgenes, en la vista Diseo. Las plantillas se aplican a todo el documento.
Para insertar un activo en un documento:

1 2 3

Site el punto de insercin en la vista Diseo donde desea que aparezca el activo. Elija Ventana > Activos para abrir el panel Activos si no est abierto. Seleccione la categora correspondiente al tipo de activo que desea insertar. Seleccione cualquier categora salvo Plantillas. Las plantillas slo se pueden aplicar al documento completo, no se pueden insertar en el documento.

Seleccione Sitio o Favoritos y localice el activo deseado. No hay listas Sitio o Favoritos para elementos de biblioteca. Omita este paso si desea insertar un elemento de biblioteca.

Realice una de estas operaciones: contenido de encabezado de la ventana de documento. Si el rea est oculta, elija Ver > Contenido de Head.

Arrastre el activo desde el panel hasta el documento. Puede arrastrar scripts al rea de Seleccione el activo en el panel y haga clic en Insertar.
El activo se insertar en el documento. Si el activo es un color, se aplicar a partir del punto de insercin. Es decir, lo prximo que escriba aparecer con ese color. Utilizacin del panel Activos para aplicar un color Los colores del panel Activos representan colores que se han aplicado a diversos elementos del sitio, como texto, borde de tabla, fondo, etc. Puede utilizar las muestras de color de la categora Color para aplicar constantemente las opciones de color a objetos de una pgina. Para obtener informacin sobre cmo aadir un color a la categora Color, consulte Creacin de un color o URL para aadir a la lista Favoritos en la pgina 474.
Para cambiar el color del texto seleccionado en un documento:

1 2 3 4

Seleccione texto en el documento. Seleccione la categora Colores en el panel Activos. Seleccione el color deseado. Haga clic en Aplicar.

Administracin de activos, bibliotecas y plantillas del sitio 467

Utilizacin del panel Activos para aadir un vnculo de URL a un documento Puede utilizar el panel Activos para insertar un vnculo de URL a un documento o para aplicar un vnculo de URL a texto seleccionado.
Para aadir un vnculo a la seleccin actual en un documento:

1 2 3

Seleccione el texto o la imagen donde desee aplicar el URL. Seleccione la categora URL en el panel Activos y localice el URL deseado. Realice una de estas operaciones:

Arrastre el URL desde el panel hasta la seleccin en la vista Diseo. Seleccione el URL y haga clic en el botn Insertar.
Para aadir un vnculo a un documento:

1 2 3

Site el punto de insercin en el documento donde desea aadir el URL. Seleccione la categora URL en el panel Activos y localice el URL deseado. Realice una de estas operaciones:

Arrastre el URL desde el panel hasta la seleccin en la vista Diseo. Seleccione el URL y haga clic en el botn Insertar.
Seleccin y edicin de activos El panel Activos permite seleccionar mltiples activos simultneamente. Asimismo, constituye un mtodo rpido para comenzar a editar activos.
Para seleccionar mltiples activos:

Seleccione uno de los activos haciendo clic en l. A continuacin, seleccione los otros activos de una de estas formas:

Presione la tecla Mays mientras hace clic para seleccionar una serie de activos consecutivos. Presione Control (Windows) o Comando (Macintosh) mientras hace clic para aadir un activo
individual a la seleccin (aunque no sea adyacente a la seleccin existente). Presione la tecla Control o Comando mientras hace clic en un activo seleccionado para dejar de seleccionarlo.

468 Captulo 27

Para editar un activo:

Realice una de estas operaciones:

Haga doble clic en el activo. Seleccione el activo y, a continuacin, haga clic en Editar.
La edicin de algunos tipos de activos, como las imgenes, inicia una aplicacin de edicin externa. La edicin de activos de colores y URL slo permite cambiar su valor en la lista Favoritos. No se pueden editar colores y URL en la lista Sitio. La edicin de activos de plantillas y elementos de biblioteca permite realizar cambios en el activo dentro de Dreamweaver. Si no se abre el editor externo correspondiente a un activo, elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X), seleccione la categora Tipos de archivo/editores y compruebe que dispone de un editor externo definido para el tipo de archivo del activo. Consulte Inicio de un editor externo de archivos multimedia en la pgina 352.
2 3

Realice los cambios deseados en el activo. Cuando termine de editar el activo, lleve a cabo uno de estos procedimientos: (utilizando el editor que emple para editarlo) y cirrelo.

Si el activo est basado en archivos (cualquier activo salvo un color o un URL), gurdelo Si el activo es un URL, haga clic en Aceptar cuando termine de editarlo en el cuadro de dilogo
Editar URL. Si el activo es un color, el selector de color de Dreamweaver se ocultar automticamente cuando elija un color. (Para ocultar el selector de color sin elegir un color, presione la tecla Esc.) Utilizacin de la categora Biblioteca del panel Activos La categora Biblioteca del panel de Activos muestra todos los elementos de la biblioteca del sitio actual. Para obtener informacin sobre cmo cambiar o actualizar un elemento de biblioteca, consulte Edicin de un elemento de biblioteca en la pgina 477.
Para crear un nuevo elemento de biblioteca vaco en el panel Activos:

Compruebe que no hay nada seleccionado en la ventana de documento. Si hay algo seleccionado, se colocar en el nuevo elemento de biblioteca. Haga clic en el botn Nuevo elemento de biblioteca que se encuentra en la parte inferior del panel Activos. Se aadir un elemento de biblioteca nuevo y sin ttulo a la lista del panel. Con el elemento an seleccionado, introduzca el nombre que desea asignarle.

Para aadir un elemento de biblioteca a un documento:

1 2

En la ventana de documento, coloque el puntero donde desea insertar el elemento de biblioteca. Seleccione la categora Biblioteca en el panel Activos y localice el elemento de biblioteca deseado.

Administracin de activos, bibliotecas y plantillas del sitio 469

Realice una de estas operaciones:

Arrastre el elemento de biblioteca desde el panel hasta la seleccin en la vista Diseo. Seleccione el elemento de biblioteca y haga clic en el botn Insertar.
Para editar un elemento de biblioteca:

Seleccione un elemento de biblioteca de la lista y haga clic en el botn Editar, o haga doble clic en el nombre del elemento en la lista.
Para eliminar un elemento de biblioteca:

1 2

Seleccione el elemento de biblioteca en el panel Activos. Haga clic en el botn Eliminar o presione la tecla Supr y confirme que desea eliminar el elemento de biblioteca. El elemento de biblioteca quedar eliminado del sitio.

Tema relacionado

Utilizacin del panel Activos en la pgina 464 Utilizacin del panel Activos para trabajar con plantillas Puede utilizar la categora Plantillas del panel Activos para crear nuevas plantillas y administrar las ya existentes. Para obtener ms informacin sobre cmo crear y editar plantillas, consulte Creacin de una plantilla de Dreamweaver en la pgina 486. Para obtener ms informacin sobre cmo usar el panel Activos para administrar los activos, consulte Utilizacin del panel Activos en la pgina 464.
Para utilizar el panel Activos para crear una plantilla en blanco:

Elija Ventana > Plantillas. Aparecer el panel Activos, con la categora Plantillas seleccionada. En el panel Activos, haga clic en el botn Plantilla nueva situado en la parte inferior del panel Activos. Se aadir una plantilla nueva sin ttulo a la lista de plantillas del panel. Con la plantilla an seleccionada, introduzca un nombre para ella. De este modo se crear una plantilla en blanco en el panel Activos y en la carpeta Plantillas, pero no se crear un archivo .dwt. Para comenzar a definir regiones editables, haga clic en el botn Editar que se encuentra en la parte inferior del panel Activos. Para obtener informacin sobre cmo definir regiones de plantilla editables, consulte Insercin de una regin editable en la pgina 488.

3 4

Para editar un archivo de plantilla:

Elija Ventana > Activos y, a continuacin, haga clic en el icono Plantillas para ver las plantillas. En el panel inferior del panel Activos se muestran todas las plantillas disponibles para el sitio. El rea superior muestra una vista previa de la plantilla seleccionada.

470 Captulo 27

En el caso de elementos vinculados como imgenes, la biblioteca solamente almacena una referencia al elemento. El archivo original debe permanecer en la ubicacin especificada para que el elemento de biblioteca funcione correctamente. Sin embargo, puede resultar til almacenar una imagen en un elemento de biblioteca; por ejemplo, puede almacenar una etiqueta img completa en un elemento de biblioteca, lo que le permitir cambiar fcilmente el texto alt de la imagen, o incluso su atributo src, en todo el sitio. (No utilice esta tcnica para cambiar los atributos width y height de la imagen, a no ser que utilice adems un editor de imgenes para cambiar el tamao real de la imagen.)
Para crear un elemento de biblioteca:

1 2

Seleccione una parte de un documento para guardarla como elemento de biblioteca. Realice una de estas operaciones:

Elija Ventana > Biblioteca y arrastre la seleccin hasta la categora Biblioteca del panel Activos. Haga clic en el botn Nuevo elemento de biblioteca que se encuentra al final del panel Activos
(en la categora Biblioteca).

Elija Modificar > Biblioteca > Agregar objeto a Biblioteca.

3

Introduzca un nombre para el nuevo elemento de biblioteca. Cada elemento de biblioteca se guarda como un archivo independiente (con la extensin de archivo .lbi) en la carpeta Library de la carpeta raz local del sitio.

Insercin de un elemento de biblioteca en un documento Cuando aada un elemento de biblioteca a una pgina, se insertar el contenido en el documento junto con una referencia al elemento de biblioteca.
Para insertar un elemento de biblioteca en un documento:

1 2

Site el punto de insercin en la ventana de documento. Elija Ventana > Biblioteca. Aparecer el panel Activos con la categora Biblioteca seleccionada. Arrastre un elemento de biblioteca desde el panel Activos a la ventana de documento o seleccione un elemento y haga clic en el botn Insertar. Para insertar el contenido de un elemento de biblioteca sin incluir una referencia al elemento en el documento, presione Control (Windows) u Opcin (Macintosh) mientras arrastra el elemento fuera de la categora Biblioteca del panel Activos. Si inserta un elemento de esta forma, puede editarlo en el documento, pero el documento no se actualizar cuando usted actualice las pginas que utilizan ese elemento de biblioteca.

Edicin de un elemento de biblioteca Al modificar un elemento de biblioteca se pueden actualizar todos los documentos que lo utilizan. Si elige no actualizar, los documentos permanecern asociados al elemento de biblioteca y podr actualizarlos posteriormente eligiendo Modificar > Biblioteca > Actualizar pginas. Otros tipos de modificaciones de los elementos de biblioteca incluyen el cambio de nombre de los elementos para romper su conexin con documentos o plantillas, la eliminacin de elementos de la biblioteca del sitio y la creacin de nuevo de un elemento de biblioteca perdido.

Administracin de activos, bibliotecas y plantillas del sitio 477

Nota: Los paneles Estilos CSS y Lneas de tiempo no se encuentran disponibles al editar elementos de biblioteca, ya que stos ltimos slo pueden contener elementos de la seccin body, y el cdigo de las hojas de estilos CSS y las lneas de tiempo se inserta en la seccin head de un documento. El cuadro de dilogo Propiedades de pgina tampoco se encuentra disponible, pues un elemento de biblioteca no puede incluir una etiqueta body ni sus atributos.

Para editar un elemento de biblioteca:

Elija Ventana > Biblioteca. Aparecer la categora Biblioteca del panel Activos. Seleccione un elemento de biblioteca. En la parte superior del panel Activos aparecer una vista previa del elemento de biblioteca. (No se puede editar nada en la vista previa.)

Haga clic en el botn Editar, que se encuentra en la parte inferior del panel Activos. Tambin puede hacer doble clic en el elemento de biblioteca. Dreamweaver abrir una nueva ventana para que edite el elemento de biblioteca. La ventana se parece mucho a la ventana de documento, pero su vista Diseo tiene un fondo gris que indica que se est editando un elemento de biblioteca en lugar de un documento.

4 5

Edite el elemento de biblioteca y guarde los cambios. En el cuadro de dilogo que aparece a continuacin, elija si desea actualizar los documentos del sitio local que utilizan el elemento de biblioteca editado. biblioteca editado.

Elija Actualizar para actualizar todos los documentos del sitio local con el elemento de Elija No actualizar para impedir que se modifiquen los documentos hasta que utilice
Modificar > Biblioteca > Actualizar pgina actual o Actualizar pginas.
Para actualizar el documento actual para que utilice la versin actual de todos los elementos de biblioteca:

Elija Modificar > Biblioteca > Actualizar pgina actual.

Para actualizar el sitio completo o todos los documentos que usen un elemento de biblioteca concreto:

Elija Modificar > Biblioteca > Actualizar pginas. Aparecer el cuadro de dilogo Actualizar pginas. En el men emergente Buscar en, realice una de estas operaciones: lado. De esta manera se actualizarn todas las pginas del sitio seleccionado para que utilicen la versin actual de todos los elementos de biblioteca.

Elija Todo el sitio y luego seleccione el nombre del sitio en el men emergente que aparece al Elija Archivos que usan y luego seleccione el nombre del elemento de biblioteca en el men
emergente que aparece al lado. Se actualizarn todas las pginas del sitio actual que usen el elemento de biblioteca seleccionado.
3

Asegrese de que Elementos de biblioteca est seleccionado en la opcin Actualizar. (Para actualizar plantillas al mismo tiempo, asegrese de que tambin est seleccionada la opcin Plantillas. Para obtener ms informacin, consulte Actualizacin de documentos basados en plantilla en la pgina 504.)

478 Captulo 27

Haga clic en Iniciar. Dreamweaver actualizar los archivos como se ha indicado. Si selecciona la opcin Mostrar registro, Dreamweaver proporcionar informacin sobre los archivos que intenta actualizar, indicando si se han actualizado satisfactoriamente.

Para cambiar el nombre de un elemento de biblioteca en el panel Activos:

1 2 3

Haga clic en el nombre del elemento de biblioteca para seleccionarlo. Tras una breve pausa, vuelva a hacer clic. Cuando se pueda editar el nombre, introduzca el que desee.
Nota: Este mtodo para cambiar el nombre funciona igual que en el Explorador de Windows (Windows) o el Finder (Macintosh). Al igual que en el Explorador de Windows y el Finder, no olvide hacer una breve pausa entre los dos clics del ratn. No haga doble clic en el nombre, ya que se abrira el elemento de biblioteca para su edicin.

4 5

Haga clic en cualquier lugar o presione la tecla Intro (Windows) o Retorno (Macintosh). Dreamweaver le preguntar si desea actualizar los documentos que usan el elemento.

Para actualizar todos los documentos del sitio que usan el elemento, haga clic en Actualizar. Para que no se actualice ninguno de los documentos que usan el elemento, haga clic en No
actualizar.
Para eliminar un elemento de una biblioteca:

1 2

Seleccione el elemento en la categora Biblioteca del panel Activos. Haga clic en el botn Eliminar y confirme que desea eliminar el elemento. Tenga presente que cuando se elimina un elemento de biblioteca, no se puede emplear el comando Deshacer para recuperarlo. Sin embargo, puede volver a crearlo, como se describe en el procedimiento siguiente. La eliminacin de un elemento de biblioteca borra el elemento de la biblioteca, pero no cambia el contenido de ningn documento que lo utilice.

Para volver a crear un elemento de biblioteca que falta o se ha eliminado:

1 2

Seleccione una instancia del elemento en uno de los documentos. Haga clic en el botn Volver a crear en el inspector de propiedades.

Conversin de elementos de biblioteca en editables en un documento Si ha aadido un elemento de biblioteca al documento y desea editar el elemento concretamente para dicha pgina, deber romper el vnculo existente entre el elemento del documento y la biblioteca. Una vez convertida una instancia del elemento de biblioteca en editable, dicha instancia no podr ser actualizada cuando se modifica el elemento de biblioteca.
Para convertir un elemento de biblioteca en editable:

1 2

Seleccione un elemento de biblioteca en el documento actual. Haga clic en Separar del original en el inspector de propiedades. La instancia seleccionada del elemento de biblioteca perder su resaltado (si estaba visible) y dejar de poder actualizarse cuando se modifique el elemento de biblioteca original.

Administracin de activos, bibliotecas y plantillas del sitio 479

Edicin de un comportamiento en un elemento de biblioteca Cuando se crea un elemento de biblioteca con un comportamiento de Dreamweaver adjunto, Dreamweaver copia el elemento y su manejador de eventos (el atributo que especifica el evento que desencadena la accin, como onClick, onLoad u onMouseOver, y la accin que se debe llamar cuando se produce el evento) en el archivo de elemento de biblioteca. Dreamweaver no copia en el elemento de biblioteca las funciones JavaScript asociadas. Cuando se inserta un elemento de biblioteca en un documento, Dreamweaver inserta automticamente las funciones JavaScript correspondientes en la seccin head de ese documento (si no se encontraban all).
Nota: Si crea cdigo JavaScript manualmente (es decir, si lo crea sin usar los comportamientos de Dreamweaver), puede incluirlo en un elemento de biblioteca utilizando el comportamiento Llamar JavaScript para ejecutar el cdigo. Si no utiliza un comportamiento de Dreamweaver para ejecutar el cdigo, el cdigo no se conserva como parte del elemento de biblioteca.

Para editar un comportamiento en un elemento de biblioteca, el elemento debe insertarse previamente en un documento, y luego convertir el elemento en editable en ese documento. Una vez realizados los cambios deseados, se puede volver a crear el elemento de biblioteca, sustituyendo el elemento de la biblioteca con el elemento editado desde el documento. Para obtener ms informacin sobre comportamientos, consulte Utilizacin de comportamientos JavaScript en la pgina 381.
Para editar un comportamiento en un elemento de biblioteca:

Abra un documento que contenga el elemento de biblioteca. Anote el nombre del elemento de biblioteca, as como las etiquetas exactas que contiene. Necesitar esta informacin en los pasos 8 y 9.

2 3 4 5 6 7

Seleccione el elemento de biblioteca y haga clic en Separar del original en el inspector de propiedades. Seleccione el elemento que tiene el comportamiento adjunto. Elija Ventana > Comportamientos para abrir el panel de comportamientos. En el panel de comportamientos, haga doble clic en la accin que desea cambiar. En el cuadro de dilogo que aparece, realice los cambios necesarios y haga clic en Aceptar. Elija Ventana > Biblioteca para abrir la categora Biblioteca del panel Activos. Asegrese de haber registrado el nombre exacto del elemento de biblioteca original, luego seleccione el elemento de biblioteca original y elimnelo haciendo clic en el botn Eliminar del panel Activos. En la ventana de documento, seleccione todos los elementos que representan al elemento de biblioteca. Tenga cuidado de seleccionar exactamente los mismos elementos que haba en el elemento de biblioteca original.

En el panel Activos, haga clic en el botn Nuevo elemento de biblioteca y asigne al nuevo elemento el nombre que tena el elemento eliminado en el paso 7. Asegrese de que utiliza exactamente el mismo texto (incluidas maysculas y minsculas). Para actualizar el elemento de biblioteca en los dems documentos del sitio, elija Modificar > Biblioteca > Actualizar pginas.

10

480 Captulo 27

11 12 13 14

En el men emergente Buscar en del cuadro de dilogo Actualizar pginas, seleccione Arch. que usan. En el men emergente que aparece al lado, elija el nombre del elemento de biblioteca que acaba de crear. En la opcin Actualizar, compruebe que est seleccionado Elementos de biblioteca y luego haga clic en Iniciar. Cuando haya completado todas las actualizaciones, haga clic en Cerrar para salir del cuadro de dilogo Actualizar pginas.

Plantillas de Dreamweaver
Una plantilla de Dreamweaver es un tipo especial de documento que se utiliza para designar una disposicin de pgina bloqueada. El autor de una plantilla disea la disposicin de la pgina y crea regiones en la plantilla que son editables en los documentos basados en la plantilla. El diseador controla qu elementos puede editar el usuario de la plantilla (por ejemplo, los redactores, artistas grficos y otros desarrolladores Web). Para obtener informacin sobre cmo crear plantillas, consulte Creacin de una plantilla de Dreamweaver en la pgina 486. Para obtener informacin sobre cmo crear pginas basadas en plantilla, consulte Creacin de un documento basado en plantilla en la pgina 496. Uno de los aspectos ms interesantes de las plantillas radica en la posibilidad de actualizar mltiples pginas de una vez. Un documento que se crea a partir de una plantilla permanece conectado a ella (a menos que separe el documento posteriormente). Puede modificar una plantilla e inmediatamente actualizar el diseo en todos los documentos basados en ella. Una plantilla controla las regiones editables y fijas de un documento basado en plantilla. Puede incluir varios tipos de regiones de plantilla en un documento. Para obtener informacin sobre estos tipos de regiones de plantilla, consulte Definicin de regiones de plantilla en la pgina 482. Puede aadir una hoja de estilos en cascada (CSS), una lnea de tiempo o un comportamiento a un documento basado en plantilla, ya que Dreamweaver inserta automticamente una regin editable en la seccin head del documento. Las operaciones relacionadas con plantillas (por ejemplo, aadir regiones editables) pueden realizarse en las vistas Cdigo y Diseo. Algunas opciones de personalizacin de plantillas slo estn disponibles en la vista Cdigo. Para obtener informacin sobre cmo aadir expresiones de plantilla, consulte Escritura de una expresin de plantilla.. Si desea almacenar informacin adicional sobre una plantilla (como el nombre de su autor, la fecha en que se modific por ltima vez o la explicacin de algunas decisiones sobre su diseo), puede crear un archivo de Design Notes para la plantilla. Los documentos basados en plantilla no heredan las Design Notes de la plantilla. (Para obtener ms informacin, consulte Almacenamiento de informacin sobre archivos en Design Notes en la pgina 114.)

Administracin de activos, bibliotecas y plantillas del sitio 481

Definicin de regiones de plantilla Una plantilla determina la estructura bsica del documento y contiene elementos como texto, imgenes, disposicin de pgina, estilos y regiones editables. Dreamweaver bloquea automticamente la mayora de las regiones de documento cuando ste se guarda como plantilla. Como autor de la plantilla, usted define qu regiones del documento basado en plantilla sern editables insertando regiones editables o parmetros editables en la plantilla. A medida que cree la plantilla, podr realizar cambios tanto en las regiones editables como en las bloqueadas. Sin embargo, en un documento basado en plantilla, el usuario de la plantilla slo podr realizar cambios en las regiones editables, no en las regiones bloqueadas. Una plantilla contiene cuatro tipos de regiones: regiones editables, regiones repetidas, regiones opcionales y atributos de etiqueta editables.
Una regin editable es una regin no bloqueada de un documento basado en plantilla, es decir, una seccin que el usuario de la plantilla puede editar. El autor de una plantilla puede definir cualquier rea de la plantilla como editable. Para que una plantilla sea efectiva, deber contener al menos una regin editable. En caso contrario, las pginas basadas en la plantilla no se podrn editar. Para obtener informacin sobre cmo insertar una regin editable, consulte Insercin de una regin editable en la pgina 488. Una regin repetida es una seccin del documento que se define para que se repita. Por ejemplo, puede repetir una fila de una tabla. Al repetir la fila de la tabla, permite que el usuario de la plantilla cree una lista ampliable al tiempo que mantiene el diseo bajo el control del autor de la plantilla. En un documento basado en plantilla, las opciones de control de regiones repetidas permiten aadir o eliminar copias de la regin repetida. Puede insertar dos tipos de regiones repetidas en una plantilla: una regin repetida y una tabla de repeticin. Para obtener informacin sobre cmo insertar una regin repetida en una plantilla, consulte Creacin de una regin repetida en una plantilla en la pgina 490. Para obtener informacin sobre cmo crear una tabla de repeticin, consulte Insercin de una tabla de repeticin en la pgina 491. Para obtener informacin sobre cmo utilizar una regin repetida en una pgina basada en plantilla, consulte Adicin, eliminacin y cambio del orden de una entrada de regin repetida en la pgina 499. Una regin opcional es

una seccin de la plantilla que el diseador define como opcional para contenido como texto opcional o una imagen que puede aparecer o no en un documento basado en la plantilla. En la pgina basada en plantilla, el editor de contenido suele controlar si el contenido se muestra o no. Para obtener informacin sobre cmo definir regiones opcionales en una plantilla, consulte Insercin de una regin opcional en la pgina 494. Para obtener informacin sobre cmo editar regiones opcionales en una pgina basada en plantilla, consulte Modificacin de los parmetros de plantilla de una regin opcional en la pgina 498.

Un atributo de etiqueta editable permite desbloquear un atributo de etiqueta de una plantilla de modo que ste se pueda editar en una pgina basada en plantilla. Por ejemplo, puede bloquear qu imagen aparece en el documento, pero dejar que el autor de la pgina establezca alineacin izquierda, derecha o central. Para obtener informacin sobre cmo configurar atributos de etiqueta editables, consulte Definicin de atributos de etiqueta editables en una plantilla en la pgina 492. Para obtener informacin sobre cmo editar las etiquetas de una pgina basada en plantilla, consulte Modificacin de propiedades de plantilla en la pgina 497.

482 Captulo 27

Parmetros de plantilla Puede utilizar los parmetros de plantilla para definir regiones opcionales y atributos de etiqueta editables o para establecer valores que desea transferir a un documento adjunto. La creacin de un parmetro de plantilla permite definir valores para controlar el contenido de los documentos basados en plantilla. Defina un nombre, un tipo de datos y un valor predeterminado para cada parmetro. Cada parmetro debe tener un nombre exclusivo y distingue el uso de maysculas y minsculas. Los parmetros de plantilla se transfieren al documento como parmetros de instancia y se puede acceder a ellos a travs de Modificar > Propiedades de plantilla. En la mayora de los casos el usuario de la plantilla puede editar el valor predeterminado del parmetro para personalizar lo que aparece en un documento basado en plantilla. En otros casos, el autor de la plantilla puede utilizar una expresin de texto calculada para determinar lo que aparece en el documento basndose en el valor de la expresin. Para obtener informacin, consulte Escritura de una expresin de plantilla en la Ayuda de Dreamweaver. Edicin de cdigo fuera de las etiquetas HTML
<html>

Algunos scripts de servidor se insertan al principio o al final del documento (antes de la etiqueta o despus de la etiqueta </html>). Estos scripts requieren un tratamiento especial en plantillas y documentos basados en plantilla. Normalmente, si realiza cambios en el cdigo del script antes de la etiqueta <html> o despus de la etiqueta </html> de una plantilla, los cambios no se copiarn en documentos basados en esa plantilla. Esto puede ocasionar errores en el servidor si otros scripts de servidor que se encuentran en el cuerpo principal de la plantilla dependen de los scripts que no se han copiado. Como consecuencia, Dreamweaver le advertir si realiza un cambio en los scripts antes de la etiqueta <html> o despus de la etiqueta </html> en una plantilla.

Para evitar este problema puede insertar el cdigo siguiente en la seccin head de la plantilla.
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

Cuando este cdigo est presente en una plantilla, los cambios realizados en los script antes de la etiqueta <html> o despus de la etiqueta </html> se copiarn en documentos basados en esa plantilla. Sin embargo, no podr volver a editar esos scripts en documentos basados en la plantilla. De este modo, debe elegir entre editar estos scripts en la plantilla o en los documentos basados en la plantilla, pero no en ambos. Vnculos en plantillas Para crear un vnculo en un archivo de plantilla, utilice el icono de la carpeta o el icono de sealizacin de archivo en el inspector de propiedades; no escriba el nombre del archivo con el que desea establecer el vnculo. Si lo escribe, es posible que el vnculo no funcione. En esta seccin se explica cmo gestiona Dreamweaver los vnculos de las plantillas. Cuando se crea una archivo de plantilla a partir de una pgina existente y luego se guarda esa pgina como plantilla, Dreamweaver actualiza los vnculos de modo que sealen a los mismos archivos que anteriormente. Dado que las plantillas se guardan en la carpeta Templates, la ruta de un vnculo relativo al documento cambia cuando la pgina se guarda como plantilla. Cuando en Dreamweaver se crea un documento basado en esa plantilla y luego se guarda, se actualizan todos los vnculos relativos al documento para que continen sealando a los archivos correctos.

Administracin de activos, bibliotecas y plantillas del sitio 483

Sin embargo, si se aade un nuevo vnculo relativo al documento a un archivo de plantilla y se escribe la ruta en el cuadro de texto del vnculo en el inspector de propiedades, es fcil introducir una ruta equivocada. La ruta correcta es la ruta desde la carpeta Templates hasta el documento vinculado, no la ruta desde la carpeta del documento del documento basado en plantilla hasta el documento vinculado. Para obtener ms informacin sobre cmo vincular utilizando el icono de sealizacin de archivos, consulte Vinculacin de archivos y documentos en la pgina 444.
Nota: En algunos casos (como las rutas de archivo de los manejadores de eventos en plantillas) no es posible usar el icono de carpeta ni el icono de sealizacin de archivos; en estos casos, introduzca la ruta correcta.

Visualizacin de plantillas en la vista Diseo En los archivos de plantilla y los documentos basados en plantilla, las regiones editables aparecen en la vista Diseo de la ventana de documento rodeadas por contornos rectangulares del color de resaltado predefinido. (Para obtener informacin sobre cmo definir las preferencias de color de resaltado, consulte Configuracin de las preferencias de resaltado en la Ayuda de Dreamweaver.) En la parte superior izquierda de cada regin aparece una pequea ficha, en la que se muestra el nombre de las regiones definidas. Las regiones de la plantilla tambin puede incluir un contorno resaltado. Puede cambiar tanto el contenido editable como el bloqueado. Los archivos de plantilla se pueden identificar por el ttulo <<Plantilla>> y la extensin de archivo .dwt en la ventana de documento.

484 Captulo 27

Visualizacin de plantillas en la vista Cdigo En la vista Cdigo puede cambiar tanto el cdigo HTML editable como el bloqueado de una plantilla. El contenido editable se marca en HTML con los comentarios <!-TemplateBeginEditable> y <!-- TemplateEndEditable -->. Todo lo que se encuentra entre estos comentarios es editable en documentos basados en la plantilla. El cdigo HTML para la regin editable del ejemplo anterior tendra el siguiente aspecto:
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr> <!-- TemplateBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- TemplateEndEditable --> </table>

Visualizacin de documentos basados en plantilla en la vista Diseo En un documento basado en plantilla, adems de los contornos de las regiones editables, toda la pgina aparece rodeada por un contorno de otro color, con una ficha en la parte superior derecha en la que figura el nombre de la plantilla en la que se basa el documento. Este rectngulo resaltado le recuerda que el documento est basado en una plantilla y que no se puede cambiar nada que est fuera de las regiones editables.

Nota: Si se intenta editar una regin bloqueada en un documento basado en una plantilla cuando se desactiva el resaltado, el puntero del ratn cambiar para indicar que no se puede hacer clic en una regin bloqueada.

Administracin de activos, bibliotecas y plantillas del sitio 485

Visualizacin de documentos basados en plantilla en la vista Cdigo En la vista Cdigo, las regiones editables de un documento basado en plantilla se muestran en un color distinto del cdigo de las regiones no editables. Slo podr realizar cambios en el cdigo de las regiones editables o los parmetros editables. El contenido editable se marca en HTML mediante los comentarios de Dreamweaver y <!-- InstanceEndEditable -->. Todo lo que se encuentre entre estos comentarios ser editable.
<!-- InstanceBeginEditable>

El cdigo HTML para una regin editable tendra el siguiente aspecto:

<!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable --> </head> <body bgcolor="#FFFFFF" leftmargin="0"> <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr> <!-- InstanceBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- InstanceEndEditable --> </table> </body> <!-- InstanceEnd -->

La configuracin predeterminada para texto no editable es gris. Puede definir un color distinto para las regiones editables y no editables en el cuadro de dilogo Preferencias. Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Colores de cdigo. Para obtener ms informacin, consulte Configuracin de las preferencias de color del cdigo para un documento de plantilla en la Ayuda de Dreamweaver.
Nota: Dreamweaver impide escribir en las regiones bloqueadas en la vista Cdigo de la ventana de documento.

Creacin de una plantilla de Dreamweaver

Puede crear una plantilla a partir de un documento existente (por ejemplo, un documento HTML, Macromedia ColdFusion o Microsoft Active Server Pages) o a partir de un documento nuevo y en blanco. El cuadro de dilogo Nuevo documento (Archivo >Nuevo) proporciona varias opciones para crear plantillas y pginas basadas en plantilla. Para obtener informacin, consulte Manipulacin del cuadro de dilogo Nuevo documento en la pgina 124. Dreamweaver guarda las plantillas con la extensin .dwt en una carpeta especial llamada Templates, dentro de la carpeta raz local del sitio. Si no existe la carpeta Templates en el sitio, Dreamweaver la crear automticamente cuando guarde una plantilla nueva.
Nota: No saque las plantillas de la carpeta Templates ni guarde en ella archivos que no sean plantillas. Tampoco debe sacar la carpeta Templates de su carpeta raz local. Si lo hace se producirn errores en las rutas de las plantillas.

486 Captulo 27

Temas relacionados

Almacenamiento de un documento como plantilla en la pgina 487 Insercin de una regin editable en la pgina 488 Creacin de una plantilla anidada en la pgina 502 Almacenamiento de un documento como plantilla Puede crear una plantilla a partir de un documento nuevo o de uno existente. Si inserta una regin de plantilla en un documento que no se ha guardado como plantilla, Dreamweaver le advertir que el documento se guardar automticamente como plantilla.
Para crear una plantilla:

Abra el documento que desea guardar como plantilla en la ventana de documento realizando una de estas operaciones:

Para abrir un documento existente, elija Archivo > Abrir y seleccione el documento. Para abrir un documento nuevo en blanco, elija Archivo > Nuevo. En el cuadro de dilogo que
se abre, elija Pgina bsica o Pgina dinmica. En la lista de documentos, seleccione el tipo de pgina que desea utilizar y, a continuacin, haga clic en Crear.
2

Cuando se abra el documento, elija Archivo > Guardar como plantilla.

Nota: A menos que haya seleccionado No volver a mostrar este mensaje, recibir una advertencia que indica que el documento que est guardando no contiene regiones editables. Haga clic en Aceptar para guardar el documento como plantilla o en Cancelar para cerrar el cuadro de dilogo si crear una plantilla.

En el cuadro de dilogo que aparece, seleccione un sitio para guardar la plantilla en el men emergente Sitio e introduzca un nombre exclusivo para la plantilla en el cuadro de texto Guardar como.

Haga clic en Guardar. El archivo de plantilla se guardar en la carpeta Templates del sitio con la extensin .dwt.

Para crear una plantilla utilizando el panel Activos:

1 2

Abra el panel Activos (Ventana > Activos o F11) si no est abierto. Seleccione la categora Plantillas.

Administracin de activos, bibliotecas y plantillas del sitio 487

Haga clic en el botn Nueva plantilla del panel Activos. Se aadir un documento nuevo a la lista Nombre. El nombre del documento aparecer resaltado.

4 5

Escriba un nombre para el documento. Haga clic en el botn Editar del panel Activos. Se abrir un documento de plantilla en la ventana de documento. Para obtener informacin sobre cmo crear regiones editables en la plantilla, consulte Insercin de una regin editable en la pgina 488.

Creacin de regiones editables

Las regiones de plantilla editables controlan qu reas de una pgina basada en plantilla se pueden editar. Puede marcar una tabla entera o una celda individual de una tabla como editable, pero no podr marcar varias celdas de una tabla como una sola regin editable. Si est seleccionado <td>, la regin editable incluir la regin alrededor de la celda. Si no, la regin editable afectar al contenido que se encuentra dentro de la celda. Las capas y el contenido de las capas son elementos distintos. Al hacer editable un capa es posible cambiar la posicin de la capa y su contenido, mientras que al hacer editable el contenido de una capa slo puede cambiarse el contenido de la capa, no su posicin. Para seleccionar el contenido de la capa, haga clic en ella y elija Editar > Seleccionar todo. Para seleccionar la capa, compruebe que se muestran los elementos invisibles y haga clic en el icono que representa la ubicacin de la capa. Para obtener ms informacin sobre capas, consulte Animacin de capas en la pgina 415. Insercin de una regin editable Antes de insertar una regin editable deber guardar como plantilla el documento en el que est trabajando. Si inserta una regin editable en un documento en lugar de hacerlo en un archivo de plantilla, Dreamweaver le advertir que el documento se guardar automticamente como plantilla.
Para definir una regin de plantilla editable:

En la ventana de documento, realice una de estas operaciones para seleccionar la regin:

Seleccione el texto o el contenido que desea definir como regin editable. Site el punto de insercin en la posicin en la que desea insertar una regin editable.
2

Realice una de estas operaciones para insertar una regin editable:

Elija Insertar > Objetos de plantilla > Nueva regin editable. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh)
haga clic en el texto o el objeto seleccionado y elija Nueva regin editable en el men contextual.

En la barra Insertar, seleccione Plantillas y luego haga clic en el botn Regin editable.
Aparecer el cuadro de dilogo Regin editable.
3

En el cuadro de texto Nombre, introduzca un nombre exclusivo para la regin. (No se puede usar el mismo nombre para ms de una regin editable en una plantilla determinada.)

488 Captulo 27

Nota: No utilice caracteres especiales en el campo Nombre.

Haga clic en Aceptar. La regin editable aparece limitada por un contorno rectangular resaltado en la plantilla con el color de resaltado definido en las preferencias. Para obtener informacin sobre cmo definir las opciones de resaltado, consulte Configuracin de las preferencias de resaltado de plantillas en la Ayuda de Dreamweaver. En la parte superior izquierda de la regin aparece una ficha con el nombre de la regin. Si ha insertado una regin editable vaca en el documento, el nombre de la regin tambin aparecer dentro de la regin.

Eliminacin de una regin editable Si ha marcado una regin del archivo de plantilla como editable y despus desea bloquearla de nuevo (convertirla en no editable), utilice el comando Quitar formato de plantilla.
Nota: No se puede bloquear una regin en un archivo basado en una plantilla; solamente puede bloquearse una regin en una plantilla.

Para eliminar una regin editable:

1 2

En el documento o el selector de etiquetas, seleccione la regin editable que desea cambiar. Elija Modificar > Plantillas > Quitar formato de plantilla. La regin dejar de ser editable.

Creacin de regiones repetidas

Una regin repetida aade mltiples copias de la regin seleccionada en un documento basado en plantilla. Puede utilizar regiones repetidas para controlar la disposicin de regiones que desea repetir en una pgina, como un elemento de catlogo y una disposicin de descripcin, o para repetir una fila de datos, como una lista de elementos. Puede utilizar dos objetos de plantilla de regin repetida:
Regin repetida

Permite repetir una regin, pero no incluye una regin editable. Sin embargo, puede insertar una regin editable en una regin repetida para convertirla en editable. El ejemplo siguiente muestra una regin repetida en una plantilla. En un documento basado en esta plantilla, el usuario podr repetir la fila resaltada para ampliar la tabla.

Tabla de repeticin Permite definir una tabla y definir dnde hay regiones repetidas en cada celda de la regin repetida. Defina opciones para controlar qu filas se incluyen la regin repetida.

Administracin de activos, bibliotecas y plantillas del sitio 489

Temas relacionados

Creacin de una regin repetida en una plantilla en la pgina 490 Insercin de una tabla de repeticin en la pgina 491 Adicin, eliminacin y cambio del orden de una entrada de regin repetida en la pgina 499 Creacin de una regin repetida en una plantilla Una regin repetida es una seleccin de una plantilla que se puede duplicar con la frecuencia deseada en una pgina basada en plantilla. Las regiones repetidas suelen utilizarse con tablas. Sin embargo, tambin es posible definir una regin repetida para otros elementos de la pgina. Una regin repetida no es una regin editable. Para convertir en editable el contenido de una regin repetida (por ejemplo, para que un usuario pueda introducir texto en una celda de la tabla), deber insertar una regin editable en la regin repetida. Para obtener informacin sobre cmo crear regiones editables, consulte Insercin de una regin editable en la pgina 488. Para obtener informacin sobre cmo crear una tabla de repeticin editable, consulte Insercin de una tabla de repeticin en la pgina 491.
Para insertar una regin repetida en una plantilla:

En la ventana de documento, realice una de estas operaciones:

Seleccione el texto o el contenido que desea definir como regin repetida. Site el punto de insercin en el documento en el que desea insertar la regin repetida.
2

Realice una de estas operaciones para crear una regin repetida:

Elija Insertar > Objetos de plantilla > Regin repetida. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh)
haga clic en el contenido seleccionado y elija Nueva regin repetida en el men contextual.

En la categora Plantillas de la barra Insertar, haga clic en el botn Regin repetida.

Aparecer el cuadro de dilogo Regin repetida.
3

En el cuadro de texto Nombre, introduzca un nombre exclusivo para la regin de plantilla. (No se puede usar el mismo nombre para ms de una regin repetida en una plantilla.)
Nota: No utilice caracteres especiales al asignar un nombre a una regin.

Haga clic en Aceptar. La regin repetida se insertar en el documento.

Nota: Una regin repetida no es editable en el documento basado en plantilla a menos que contenga una regin editable. Para obtener informacin sobre cmo insertar una regin editable, consulte Insercin de una regin editable en la pgina 488.

490 Captulo 27

Insercin de una tabla de repeticin Utilice una tabla de repeticin para definir una regin repetida que incluya regiones editables en un formato de tabla. Puede definir atributos de tabla y establecer qu celdas son editables.
Para insertar una tabla de repeticin:

1 2

En la ventana de documento, site el punto de insercin en el documento donde desea insertar la tabla de repeticin. Realice una de estas operaciones:

Elija Insertar > Objetos de plantilla > Nueva tabla de repeticin. Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh)
haga clic en el contenido seleccionado y elija Nueva tabla de repeticin en el men contextual.

En la categora Plantillas de la barra Insertar, haga clic en el botn Tabla de repeticin.

Se mostrar el cuadro de dilogo Tabla de repeticin.

Introduzca los nuevos valores que desee. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Configuracin de colores de fondo alternativos en una regin repetida Puede personalizar una tabla repetida alternando el color de fondo de las filas de la tabla.
Para definir colores de fondo alternativos para filas de una tabla:

1 2 3

En la ventana de documento, seleccione la fila de la tabla de regin repetida. Haga clic en el botn Mostrar vista de cdigo o el botn Mostrar vistas de cdigo y diseo de la barra de herramientas Documento para acceder al cdigo de la fila de la tabla seleccionada. En la vista Cdigo, edite la etiqueta <tr> para incluir el cdigo siguiente:
<tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC'@@">

Puede sustituir los valores hexadecimales #FFFFFF y #CCCCCC por otras opciones de color.

Administracin de activos, bibliotecas y plantillas del sitio 491

Este ejemplo de cdigo de tabla incluye colores de fondo alternativos para las filas de una tabla:
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr> <!-- TemplateBeginRepeat name="contacts" --> <tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC'@@"> <td> <!-- TemplateBeginEditable name="name" --> name <!-TemplateEndEditable --> </td> <td> <!-- TemplateBeginEditable name="phone" --> phone <!-TemplateEndEditable --> </td> <td> <!-- TemplateBeginEditable name="email" --> email <!-TemplateEndEditable --> </td> </tr> <!-- TemplateEndRepeat --> </table>

Definicin de atributos de etiqueta editables

Utilice el comando Hacer editable el atributo para permitir que el usuario de la plantilla modifique los atributos de etiqueta especificados en un documento creado a partir de una plantilla. Por ejemplo, puede definir un color de fondo en el documento de plantilla y, sin embargo, permitir que los usuarios de la plantilla definan colores de fondo distintos para las pginas que ellos creen. El usuario slo podr actualizar los atributos que usted defina como editables. Al crear un atributo de etiqueta editable se inserta una parmetro de plantilla en el cdigo. Se establece un valor inicial para el atributo en el documento de plantilla. Cuando se crea el documento basado en la plantilla, hereda el parmetro. Entonces el usuario de la plantilla podr editar el parmetro en el documento. Se admiten los siguientes tipos de datos: texto, booleano (true/false), color y URL. Para obtener informacin sobre cmo configurar atributos de etiqueta editables, consulte Definicin de atributos de etiqueta editables en una plantilla en la pgina 492. Para obtener informacin sobre cmo editar la etiqueta de documento basado en plantilla, consulte Modificacin de propiedades de plantilla en la pgina 497. Definicin de atributos de etiqueta editables en una plantilla Puede definir mltiples atributos editables para un elemento de pgina. En el men emergente Atributo slo aparecern inicialmente los atributos de etiqueta definidos para el elemento. Por ejemplo, es posible que con una etiqueta de imagen slo aparezcan en el men los atributos de ancho y alto. Si el atributo que desea convertir en editable no figura en el men emergente Atributo, haga clic en Aadir para aadirlo a la lista.
Para definir un atributo de etiqueta editable:

1 2

En la ventana de documento, seleccione un elemento para el que desee definir un atributo de etiqueta editable. Elija Modificar > Plantillas > Hacer editable el atributo.

492 Captulo 27

En el cuadro de dilogo que aparece, lleve a cabo una de las siguientes operaciones: seleccinelo.

Si el atributo que desea convertir en editable figura en el men emergente Atributo, Si el atributo que desea convertir en editable no figura en el men emergente Atributo, haga
clic en Aadir. En el cuadro de dilogo que aparece, introduzca el nombre del atributo que desea aadir y haga clic en Aceptar.
4

Asegrese de que est activada la opcin Hacer editable el atributo. En el cuadro de dilogo, seleccione los campos para establecer los valores deseados. En el cuadro de texto Etiqueta, introduzca un nombre exclusivo para el atributo.
Sugerencia: Para facilitar la identificacin posterior de un atributo de etiqueta editable, utilice una etiqueta que identifique el elemento y el atributo. Por ejemplo, puede etiquetar una imagen cuyo origen sea logoSrc editable o etiquetar el color de fondo editable de una etiqueta body bodyBgcolor.

En el men emergente Tipo, seleccione el tipo de valor permitido para este atributo estableciendo una de las opciones siguientes: ejemplo, puede utilizar texto con el atributo align. El usuario podr posteriormente establecer el valor del atributo como left, right o center. imagen, elija URL. El uso de URL permite a Dreamweaver actualizar automticamente la ruta empleada en un vnculo. Si el usuario mueve la imagen a una carpeta nueva, aparecer el cuadro de dilogo Actualizar vnculos.

Para permitir que un usuario introduzca un valor de texto para el atributo, elija Texto. Por Para establecer un vnculo con un elemento como, por ejemplo, la ruta de un archivo de

Para hacer que el selector de color est disponible para elegir un valor, seleccione Color. Para permitir que el usuario de la plantilla escriba un valor numrico para actualizar un
atributo (por ejemplo, para cambiar los valores de alto o ancho de una imagen), elija Nmero.
7

El campo Valor predeterminado muestra el valor del atributo de etiqueta seleccionado en la plantilla. Introduzca un valor nuevo en este campo para establecer un valor inicial distinto para el parmetro en el documento basado en plantilla. Si desea realizar cambios en otro atributo de la etiqueta seleccionada, repita los pasos 3 a 7. Haga clic en Aceptar.

8 9

Conversin de un atributo de etiqueta editable en no editable Una etiqueta marcada anteriormente como editable se puede marcar como no editable. Realice el cambio en la plantilla y actualice las pginas basadas en la plantilla.
Para restablecer el atributo de etiqueta editable:

1 2 3 4 5

En el documento de plantilla, haga clic en elemento asociado con el atributo editable o utilice el selector de etiqueta para seleccionar la etiqueta. Elija Modificar > Plantillas > Hacer editable el atributo. En el men emergente Atributos, seleccione el atributo que desea modificar. Desactive la casilla de verificacin Hacer editable el atributo. Haga clic en Aceptar.

Administracin de activos, bibliotecas y plantillas del sitio 493

Regiones opcionales
Una regin opcional es una regin de una plantilla que se puede definir como visible u oculta en un documento basado en plantilla. Utilice una regin opcional cuando desee establecer condiciones para mostrar contenido en un documento. Puede establecer valores especficos para un parmetro de plantilla o definir declaraciones condicionales en una plantilla. Segn las condiciones que defina, los usuarios de la plantilla podrn editar los parmetros en los documentos que creen o controlar si se muestra la regin opcional. Puede crear parmetros y expresiones de plantilla en el cuadro de dilogo Regin opcional o directamente en la vista Cdigo. Cuando utilice el objeto de plantilla Regin opcional, Dreamweaver insertar comentarios de plantilla en el cdigo. Un parmetro de plantilla se define en la seccin head:
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->

En la ubicacin donde se inserta la regin opcional aparece cdigo similar al siguiente:

<!-- TemplateBeginIf cond="departmentImage" --> <p><img src="/images/airfare_on.gif" width="85" height="22"> </p> <!-- TemplateEndIf -->

Los parmetros de plantilla que usted cree para regiones opcionales se pueden ver y editar en el documento basado en plantilla utilizando el cuadro de dilogo Propiedades de plantilla (Modificar > Propiedades de plantilla). Hay dos objetos de regin opcional: uno permite al autor de la plantilla controlar qu regiones se muestran y ocultan sin permitir que el usuario edite el contenido, mientras que el otro permite al usuario editar contenido y establecer si la regin se muestra u oculta.
Temas relacionados

Insercin de una regin opcional en la pgina 494 Modificacin de propiedades de plantilla en la pgina 497 Insercin de una regin opcional Utilice una regin opcional para controlar contenido que puede mostrarse o no en un documento basado en plantilla. Una regin opcional se controla mediante una declaracin condicional. La ficha de plantilla de una regin opcional va precedida de la palabra if. Segn la condicin establecida en la plantilla, el usuario de la plantilla puede definir si la regin se puede ver en las pginas que cree. Una regin opcional editable permite al usuario de la plantilla editar el contenido de una regin opcional. Por ejemplo, si la regin opcional incluye una imagen o texto, el usuario de la plantilla podr establecer si el contenido se muestra, as como editarlo si lo desea. Las regiones editables se controlan mediante una declaracin condicional. Los parmetros y las expresiones de plantilla se crean en el cuadro de dilogo Regin opcional o escribiendo parmetros y declaraciones condicionales en la vista Cdigo.
Para insertar una regin opcional:

1 2

En la ventana de documento, seleccione el elemento que desea definir como regin opcional. Realice una de estas operaciones: Regin opcional.

En la barra Insertar, seleccione la categora Plantillas y, a continuacin, seleccione el botn

494 Captulo 27

 Elija Insertar > Objetos de plantilla > Regin opcional. Haga clic con el botn derecho en el contenido seleccionado y seleccione Nueva regin
opcional en el men contextual.
3

Defina opciones para la regin opcional. Para obtener informacin cmo definir la regin opcional, haga clic en el botn Ayuda del cuadro de dilogo.

Haga clic en Aceptar.

Para insertar una regin opcional editable:

En la ventana de documento, site el puntero donde desea insertar la regin opcional.

Sugerencia: No es posible realizar una seleccin para crear una regin opcional editable. Inserte la regin y, a continuacin, inserte el contenido en la regin.

Realice una de estas operaciones para abrir el cuadro de dilogo Regin opcional: Regin opcional editable.

En la barra Insertar, seleccione la categora Plantillas y, a continuacin, seleccione el botn Elija Insertar > Objetos de plantilla > Regin opcional editable. Haga clic con el botn derecho en el contenido seleccionado y elija Regin opcional editable
en el men contextual. Aparecer el cuadro de dilogo Regin opcional.
3

Defina opciones para la regin opcional. Para obtener informacin cmo definir la regin opcional, haga clic en el botn Ayuda del cuadro de dilogo.

Haga clic en Aceptar.

Modificacin de una regin opcional Cuando inserte la regin opcional en una plantilla podr definir su configuracin. Por ejemplo, podr cambiar si el contenido se muestra u oculta de forma predeterminada, vincular un parmetro a una regin opcional existente o modificar una expresin de plantilla.
Para volver a abrir el cuadro de dilogo Regin opcional:

1 2

Abra el inspector de propiedades si no est abierto. En la ventana de documento, realice una de estas operaciones:

En la vista Diseo, haga clic en la ficha de plantilla de la regin editable que desea modificar. En la vista Diseo, haga clic en el contenido de la regin de plantilla y, a continuacin, en el
selector de etiquetas, haga clic en la etiqueta de plantilla, <mmtemplate:if>.

En la vista Cdigo, haga clic en la etiqueta de comentario de la regin de plantilla que desea
modificar.
3

En el inspector de propiedades, haga clic en Editar. Aparecer el cuadro de dilogo Regin opcional. Realice los cambios deseados y luego haga clic en Aceptar.

Administracin de activos, bibliotecas y plantillas del sitio 495

Creacin de un documento basado en plantilla

Una vez definido el diseo de la plantilla, puede aplicarla a un documento en blanco o a un documento con contenido. Para crear un documento basado en plantilla, puede utilizar el panel Activos o el cuadro de dilogo Nuevo documento. El panel Activos muestra las plantillas del sitio actual de Dreamweaver. Puede hacer clic con el botn derecho en la categora Plantillas del panel Activos para crear una plantilla o para crear documentos a partir de una plantilla. En el cuadro de dilogo Nuevo documento, puede seleccionar una plantilla de cualquiera de los sitios de Dreamweaver definidos actualmente para crear un documento a partir de ella. Al crear un documento basado en plantilla, puede elegir si desea que el documento permanezca adjunto a la plantilla. De forma predeterminada, cuando se cambia una plantilla todos los documentos adjuntos se actualizan para reflejar esos cambios. Si desactiva la opcin Actualizar pgina cuando cambie la plantilla al crear un documento, ste se crear como diseo de fondo, es decir, como un archivo HTML independiente sin regiones de plantilla. Las actualizaciones de la plantilla no cambian el documento.
Para crear un documento basado en plantilla en el cuadro de dilogo Nuevo documento:

1 2 3

Elija Archivo > Nuevo para abrir el cuadro de dilogo Nuevo documento. En el cuadro de dilogo Nuevo documento, seleccione la ficha Plantillas. En la lista Plantillas para, seleccione el sitio que contiene la plantilla que desea utilizar. La lista de plantillas del sitio se actualizar para mostrar las plantillas del sitio seleccionado. Seleccione en la lista la plantilla que desea utilizar. Haga clic en Crear para crear una pgina basada en plantilla. El documento se abrir en la ventana de documento.

4 5

Para crear un documento a partir de una plantilla en el panel Activos:

1 2

Abra el panel Activos (F11) si no est abierto. En el panel Activos, haga clic en el icono Plantillas para ver las plantillas del sitio.
Sugerencia: Si acaba de crear la plantilla que desea aplicar, quiz necesite hacer clic e el botn Actualizar para verla.

Haga clic con el botn derecho en la plantilla que desea aplicar y, a continuacin, seleccione Nuevo desde plantilla. El documento se abrir en la ventana de documento.

Edicin de contenido de una pgina basada en plantilla

Puede identificar y seleccionar fcilmente regiones de plantilla en el documento de plantilla y en los documentos basados en la plantilla. Las regiones de plantilla editables figuran en la parte inferior del submen Modificar > Plantillas. Las regiones editables que se encuentran dentro de una regin repetida no aparecen en el men. Deber localizar estas regiones buscando los bordes con fichas de la ventana de documento. Para obtener informacin sobre cmo localizar y modificar etiquetas editables en un documento basado en plantilla, consulte Modificacin de propiedades de plantilla en la pgina 497.

496 Captulo 27

Para buscar una regin editable y seleccionarla en el documento:

Elija Modificar > Plantillas y seleccione el nombre de la regin en la lista que aparece al final de ese submen. Las regiones editables estn seleccionadas en el documento. Modificacin de propiedades de plantilla Cuando se crean parmetros en una plantilla, los documentos basados en la plantilla heredan automticamente esos parmetros y sus valores iniciales. El usuario de una plantilla puede actualizar atributos de etiqueta editables y otros parmetros de plantilla (como la configuracin de una regin opcional) en el cuadro de dilogo Propiedades de plantilla. Para obtener informacin sobre cmo crear una etiqueta editable en una plantilla, consulte Definicin de atributos de etiqueta editables en una plantilla en la pgina 492. Para obtener informacin sobre cmo crear regiones opcionales, consulte Insercin de una regin opcional en la pgina 494.
Para modificar un atributo de etiqueta editable:

Abra el documento basado en plantilla y, a continuacin, elija Modificar > Propiedades de plantilla. Se abrir el cuadro de dilogo Propiedades de plantilla. El ejemplo siguiente muestra dos propiedades de plantilla. Una es una regin opcional y la otra es un atributo de etiqueta editable para el color de fondo de la plantilla.

Administracin de activos, bibliotecas y plantillas del sitio 497

En la lista Nombre, seleccione la propiedad. El rea inferior del cuadro de dilogo se actualizar para mostrar la etiqueta de la propiedad seleccionada y su valor asignado.

En el campo situado a la derecha de la etiqueta de propiedad, edite el valor para modificar la propiedad en el documento.
Nota: En la plantilla se definen el nombre del campo y los valores actualizables. Los atributos que no aparecen en la lista Nombre no son actualizables en el documento.

Si define un atributo de etiqueta editable en una plantilla anidada, realice una de las operaciones siguientes para establecer si el parmetro se transfiere a los documentos basados en la plantilla anidada. la propiedad editable a los documentos basados en la plantilla anidada. El parmetro aparecer en el cuadro de dilogo Propiedades de plantilla para documentos basados en esa plantilla anidada.

Active la casilla de verificacin Permitir que las plantillas anidadas controlen esto para transferir

No active esta opcin para evitar que el parmetro se transfiera.

Modificacin de los parmetros de plantilla de una regin opcional
1

Abra el documento basado en plantilla y, a continuacin, elija Modificar > Propiedades de plantilla. Se abrir el cuadro de dilogo Propiedades de plantilla.

498 Captulo 27

En la lista Nombre, seleccione una propiedad. El cuadro de dilogo se actualizar para mostrar la etiqueta de la propiedad seleccionada y su valor asignado.

Active la casilla de verificacin Mostrar para hacer visible la regin opcional del documento o desactvela para ocultarla.
Nota: En la plantilla se definen el nombre del campo y los valores predeterminados.

Active la casilla de verificacin Permitir que las plantillas anidadas controlen esto para transferir la propiedad editable a documentos basados en la plantilla anidada.

Adicin, eliminacin y cambio del orden de una entrada de regin repetida Utilice los controles de regin repetida para aadir, eliminar o cambiar el orden de la entradas. Cuando aade una entrada de regin repetida, se aade una copia de toda la regin repetida. Para actualizar el contenido de las regiones repetidas, la plantilla original deber incluir una regin editable en la regin repetida.

Las opciones para editar regiones repetidas tambin estn disponibles en el men Modificar > Plantillas y el men Edicin > Entradas de repeticin.

Administracin de activos, bibliotecas y plantillas del sitio 499

Para aadir, eliminar o cambiar el orden de una regin repetida:

Site el punto de insercin en la regin repetida para seleccionarla y, a continuacin, realice una de estas operaciones:

Haga clic en el botn de signo ms (+) para aadir una entrada de regin repetida debajo de la
entrada seleccionada actualmente.

Haga clic en el botn de signo menos (-) para eliminar la entrada de regin repetida
seleccionada.

Haga clic en el botn Flecha abajo para bajar una posicin la entrada seleccionada. Haga clic en el botn Flecha arriba para subir una posicin la entrada seleccionada. Elija Modificar > Plantilla > Entradas de repeticin y seleccione una de las opciones del men.
Puede utilizar este men para insertar una nueva entrada de repeticin o mover la posicin de la entrada de repeticin.
Para cortar, copiar y eliminar entradas:

Site el punto de insercin en la regin repetida para seleccionarla y, a continuacin, realice una de estas operaciones:

Elija Edicin > Entradas de repeticin > Cortar entradas de repeticin para cortar una entrada
de repeticin.

Elija Edicin > Entradas de repeticin > Copiar entradas de repeticin para copiar una entrada
de repeticin.

Elija Edicin > Entradas de repeticin > Eliminar entradas de repeticin para eliminar una
entrada de repeticin.

Elija Edicin > Pegar para pegar una entrada de repeticin.

Al pegar se insertar una nueva entrada, no se sustituir una existente.

Plantillas anidadas
Una plantilla anidada es una plantilla cuyo diseo y cuyas regiones editables se basan en otra plantilla. Para crear una plantilla anidada, deber guardar en primer lugar la plantilla original o base, crear un documento nuevo basado en la plantilla y, por ltimo, guardar ese documento como plantilla. En la nueva plantilla puede definir regiones editables en reas definidas originalmente como editables en la plantilla base. Las plantillas anidadas resultan tiles para controlar el contenido de las pginas de un sitio que comparten muchos elementos de diseo, pero que tienen algunas variaciones entre las pginas. Por ejemplo, una plantilla base puede contener reas de diseo ms amplias y ser utilizada por muchos proveedores de contenido para un sitio, mientras que una plantilla anidada puede definir las regiones editables en pginas de una seccin especfica del sitio. Las regiones editables de una plantilla base se transfieren a la plantilla anidada y siguen siendo editables en las pginas creadas a partir de la plantilla anidada a menos que se inserten nuevas regiones de plantilla en estas regiones. Los cambios realizados en la plantilla base se actualizan automticamente en las plantillas basadas en ella y en todos los documentos basados en la plantillas principal y anidada.

500 Captulo 27

Ejemplo: La plantilla base del sitio Global Car Rental contiene dos regiones editables, llamadas body y footer:

Para crear una plantilla anidada, hemos creados un documento nuevo basado en la plantilla y, a continuacin, hemos guardado el documento como plantilla y lo hemos llamado globalNested. En la plantilla anidada, hemos realizado cambios en la regin editable llamada body. Hemos insertado un grfico en la columna izquierda y una nueva regin editable en la columna derecha.

Administracin de activos, bibliotecas y plantillas del sitio 501

Cuando se aade una nueva regin editable a una regin editable transferida a la plantilla anidada, el color de resaltado de la regin editable cambia a naranja. El contenido aadido a una regin editable, como el grfico de la columna izquierda, deja de ser editable en los documentos basados en la plantilla anidada. Las reas editables resaltadas en azul, tanto si se han aadido a la plantilla anidada como si se han transferido desde la plantilla base, siguen siendo editables en los documentos basados en la plantilla anidada. Las regiones de plantilla donde no inserte una regin editable se transferirn a los documentos basados en plantilla como regiones editables.

Creacin de una plantilla anidada

Puede crear una plantilla anidada guardando un documento basado en plantilla y, a continuacin, creando una plantilla a partir de ese documento. Las plantillas anidadas permiten crear variaciones de una plantilla base. Puede anidar mltiples plantillas para definir una disposicin cada vez ms especfica.
Para crear una plantilla anidada:

Cree un documento a partir de la plantilla en la que desea basar la plantilla anidada realizando una de estas operaciones: partir de la cual desea crear un documento y, a continuacin, seleccione Nuevo desde plantilla.

En la categora Plantillas del panel Activos, haga clic con el botn derecho en la plantilla a Seleccione Archivo> Nuevo. En el cuadro de dilogo Nuevo documento, haga clic en la ficha
Plantillas y seleccione el sitio que contiene la plantilla que desea utilizar. Seguidamente, en la lista de documentos, haga doble clic en la plantilla para crear un documento. Aparecer un documento nuevo en la ventana de documento.
2 3 4

Elija Archivo > Guardar como plantilla o haga clic en el botn Crear plantilla anidada en la barra Insertar para guardar el nuevo documento como plantilla. En la nueva plantilla, aada contenido adicional y regiones editables. Guarde la plantilla. En los documentos basados en la plantilla anidada puede aadir o cambiar el contenido de las regiones editables transferidas desde la plantilla base, adems del de las regiones editables creadas en la nueva plantilla.

502 Captulo 27

Aplicacin de una plantilla a un documento existente

Cuando se aplica una plantilla a un documento con contenido, Dreamweaver intenta ajustar el contenido existente a una regin de la plantilla. Si se aplica una versin revisada de una de las plantillas existentes, es posible que los nombres coincidan. Dreamweaver compara los nombres de las regiones editables del documento con los nombres de las regiones editables de la plantilla nueva. Cuando el nombre de la regin coincide, Dreamweaver coloca el contenido de la regin antigua en la nueva que tiene el mismo nombre. Si aplica una plantilla a un documento al que todava no se ha aplicado ninguna plantilla, no habr regiones editables para comparar y se producir una discordancia. Dreamweaver realiza un seguimiento de esas discordancias y las muestra en el cuadro de dilogo Nombres de regiones no coincidentes. A continuacin puede seleccionar a qu regin o regiones desea mover el contenido de la pgina actual, o bien puede eliminar el contenido discordante. Si desea mantener el contenido, seleccione el nombre de una regin editable en el men emergente del cuadro de dilogo. En caso contrario, elija Ningn lugar para descartar el contenido no resuelto.
Para aplicar una plantilla a un documento existente:

1 2

Elija Archivo > Abrir para abrir el documento al que desea aplicar la plantilla. Realice una de estas operaciones: pgina. Elija una plantilla de la lista y haga clic en Seleccionar.

Haga clic en la ventana de documento, luego elija Modificar > Plantillas > Aplicar plantilla a Seleccione la plantilla en la categora Plantillas del panel Activos y haga clic en el botn Aplicar. Arrastre la plantilla desde la categora Plantillas del panel Activos hasta la vista Diseo de la
ventana de documento.
3

Si hay contenido en el documento que no se puede asignar automticamente a una regin de plantilla, aparecer el cuadro de dilogo Nombres de regiones no coincidentes. Este cuadro muestra todas las regiones editables de la plantilla que se est aplicando. Utilcelo para elegir un destino para el contenido. Para obtener informacin sobre cmo mover contenido existente a regiones editables del documento, consulte Resolucin de nombres de regiones no coincidentes en la Ayuda de Dreamweaver.

Separacin de un documento de una plantilla Para realizar cambios en las regiones bloqueadas de un documento basado en plantilla, deber separar el documento de la plantilla. Al separarlo, todo el documento ser editable.
Para separar un documento de una plantilla:

1 2

Abra el documento basado en plantilla que desea separar. Elija Modificar > Plantillas > Separar de plantilla. El documento se separar de la plantilla y se eliminar todo el cdigo de plantilla.

Administracin de activos, bibliotecas y plantillas del sitio 503

Edicin y actualizacin de plantillas

Cuando guarda una plantilla, Dreamweaver le pregunta si desea actualizar todos los documentos asignados a ella. Puede utilizar el comando Modificar > Plantillas > Actualizar pginas. Dreamweaver actualizar los documentos basados en plantilla correspondientes al sitio de la plantilla. Dreamweaver actualizar automticamente los documentos basados en la plantilla, incluidas las plantillas anidadas que se basan en una plantilla que se est actualizando. Actualizacin de las plantillas de Dreamweaver 4 Esta versin de Dreamweaver le permite seguir trabajando con las plantillas que cre en Dreamweaver 4. Dreamweaver no cambiar automticamente la sintaxis de plantilla de los archivos de plantilla de Dreamweaver 4, por lo que podr usarlos con Dreamweaver 4 y Dreamweaver MX. Sin embargo, si inserta una nueva regin de plantilla en una plantilla de Dreamweaver 4 utilizando Dreamweaver MX, se utilizar la nueva sintaxis de plantilla de Dreamweaver MX y no podr seguir utilizando esa plantilla en Dreamweaver 4. Actualizacin de documentos basados en plantilla Al realizar un cambio en una plantilla, Dreamweaver le pedir que actualice los documentos basados en esa plantilla. Tambin puede usar los comandos de actualizacin para actualizar manualmente el documento actual o el sitio completo. Ejecutar los comandos de actualizacin equivale a volver a aplicar la plantilla.
Para abrir y modificar una plantilla adjunta:

1 2

Con el documento basado en plantilla situado en la ventana de documento, seleccione Modificar > Plantillas > Abrir plantilla adjunta. Modifique el contenido de la plantilla que desee. Para modificar las propiedades de pgina de la plantilla, elija Modificar > Propiedades de la pgina. (Los documentos basados en una plantilla heredan las propiedades de pgina de la plantilla.) Guarde el documento. Dreamweaver le pedir que actualice las pginas basadas en la plantilla.

Para aplicar al documento los cambios realizados en la plantilla:

Seleccione Modificar > Plantillas > Actualizar pgina actual.

Para actualizar el sitio completo o todos los documentos que usen una plantilla adjunta:

Seleccione Modificar > Plantillas > Actualizar pginas. Aparecer el cuadro de dilogo Actualizar pginas. En el men emergente Buscar en, realice una de estas operaciones: aparece al lado. Se actualizarn todas las pginas del sitio seleccionado con los cambios de sus correspondientes plantillas.

Seleccione Todo el sitio y luego seleccione el nombre del sitio en el men emergente que Seleccione Archivos que usan y luego seleccione el nombre de la plantilla en el men
emergente que aparece al lado. Se actualizarn todas las pginas del sitio actual que usen la plantilla seleccionada.
3

Asegrese de que Plantillas est seleccionado en la opcin Actualizar.

504 Captulo 27

Haga clic en Iniciar. Dreamweaver actualizar los archivos como se ha indicado. Si selecciona la opcin Mostrar registro, Dreamweaver proporcionar informacin sobre los archivos que intenta actualizar, indicando si se han actualizado satisfactoriamente.

Comprobacin de la sintaxis de la plantilla Dreamweaver comprueba automticamente la sintaxis cuando guarda la plantilla. Si la sintaxis es incorrecta, muestra un mensaje de error. El mensaje describe el error e indica la lnea de cdigo donde se encuentra. Puede utilizar el comando Comprobar sintaxis de plantilla para comprobar la sintaxis de la plantilla antes de guardarla. Por ejemplo, si aade manualmente un parmetro o expresin de plantilla en vista Cdigo, utilice el comando para comprobar que ha utilizado la sintaxis correcta.
Para comprobar si la sintaxis de la plantilla es vlida, siga este procedimiento:

Elija Modificar > Plantillas > Comprobar sintaxis de plantilla.

XML
XML (Lenguaje de formato ampliable) es un lenguaje de formato para documentos estructurados. Es como una generalizacin de HTML que le permite definir sus propias etiquetas. XML se basa en el lenguaje SGML (Lenguaje de formato generalizado estndar). Al igual que SGML, XML es un lenguaje que define conjuntos de etiquetas y las relaciones establecidas entre ellas. Las etiquetas XML son similares a las etiquetas HTML: constan de un nombre de etiqueta y de atributos opcionales entre corchetes angulares. Al igual que ocurre con HTML, el contenido se encuentra entre una etiqueta inicial y una etiqueta de cierre (el nombre de la etiqueta va precedido de una barra diagonal). Una de las diferencias sintcticas estriba en que en XML, una etiqueta vaca (que usa slo una etiqueta, como <img>, en lugar de una etiqueta inicial y una etiqueta final que contienen texto u otro material) debe terminar con una barra inclinada inmediatamente antes del corchete angular de cierre. Por ejemplo, una etiqueta <img> en XML podra parecerse al ejemplo siguiente:
<img src="test.png" />

La sintaxis de XML es mucho ms estricta que la de HTML. Los archivos que no cumplen estrictamente las normas sintcticas de XML son rechazados por los analizadores XML. XML proporciona una forma de marcar cadenas literales, que pueden incluir etiquetas que no se deben analizar. En este mtodo interviene un elemento denominado seccin CDATA, que incluye una cadena literal entre corchetes. El analizador XML omitir todo lo que se encuentre dentro de los corchetes. El cdigo XML exportado por Dreamweaver utiliza ampliamente secciones CDATA. Exportacin e importacin de contenido XML de plantillas Un documento basado en plantilla contiene un conjunto de datos representados por pares de nombre/valor. Cada par consta del nombre de una regin editable y del contenido de sta. Supongamos que la plantilla contiene tres regiones editables: item_number, item_price e item_color. Podra describir completamente un documento basado en esa plantilla facilitando el nombre de la plantilla y los pares de nombre/valor.

Administracin de activos, bibliotecas y plantillas del sitio 505

Dreamweaver le permite exportar los pares de nombre/valor a un archivo XML para que pueda trabajar con los datos fuera de Dreamweaver (por ejemplo, en un editor de XML, un editor de textos o una aplicacin de bases de datos). Y a la inversa, si tenemos un documento XML que est estructurado adecuadamente, se pueden importar los datos que contiene a un documento basado en una plantilla de Dreamweaver. Para obtener ms informacin, consulte XML en la pgina 505.
Para exportar las regiones editables de un documento como XML:

1 2 3

Elija Archivo > Abrir y abra un documento basado en plantilla que contenga regiones editables. Elija Archivo > Exportar > Datos de plantilla como XML. En el cuadro de dilogo Exportar datos de plantilla como XML, seleccione una de las siguientes opciones bajo Notacin: XML estndar Dreamweaver.

Si el documento contiene regiones repetidas o parmetros de plantilla, seleccione Etiquetas Para plantillas que no contienen regiones repetidas o parmetros de plantilla, seleccione
Nombres reg. editables como etiq. XML.
4 5

Haga clic en Aceptar. En el cuadro de dilogo que aparece, asigne un nombre al archivo XML y haga clic en Guardar. Dreamweaver genera un archivo XML que contiene el material de los parmetros del documento y regiones editables, incluidas las que estn dentro de regiones repetidas u opcionales. El archivo XML incluye el nombre de la plantilla original, as como el nombre y el contenido de cada regin de plantilla.
Nota: El contenido de las regiones no editables no se exporta al archivo XML.

Para importar contenido XML:

1 2

Elija Archivo > Importar > Importar XML a plantilla. En el cuadro de dilogo Importar XML, seleccione el archivo XML y haga clic en Abrir.

Dreamweaver crea un nuevo documento basado en la plantilla especificada en el archivo XML. Despus rellena el contenido de cada regin editable de ese documento con los datos del archivo XML. El documento resultante aparece en una nueva ventana de documento. Tenga en cuenta que, si el archivo XML no est configurado exactamente de la forma adecuada para Dreamweaver, es posible que no se puedan importar los datos. Una posible solucin a este problema consiste en exportar un archivo XML ficticio desde Dreamweaver, para tener as un archivo XML exactamente con la estructura correcta. Luego, bastar con copiar los datos desde el archivo original XML al archivo exportado XML. El resultado es un archivo XML con la estructura correcta que contiene los datos adecuados, listo para importar. Utilizacin de notaciones de etiquetas XML Dreamweaver permite exportar el contenido XML utilizando etiquetas XML de Dreamweaver. La manera ms fcil de ver las notaciones de etiquetas si se conoce la sintaxis XML consiste en observar un ejemplo. El siguiente cdigo XML se export desde un documento basado en una plantilla denominada newstemplate. El documento contiene una regin editable definida, denominada News_Story (y una regin editable predeterminada, doctitle, que contiene la etiqueta title del documento).

506 Captulo 27

La opcin Etiquetas XML estndar Dreamweaver usa la etiqueta item. La etiqueta item tiene un atributo name que da nombre a la regin editable; la etiqueta contiene una seccin CDATA que a su vez contiene el material de la regin editable. En este ejemplo, la etiqueta item con name="doctitle" identifica el ttulo del documento, y la etiqueta itemcon name="News_Story" identifica la regin editable.
<?xml version="1.0"?> <templateItems template="/Templates/newstemplate.dwt"> <item name="doctitle"> <![CDATA[<title>Todays Headline Story</title>]]> </item> <item name="News_Story"> <![CDATA[<p>Aqu es donde va el artculo.</p>]]> </item> </templateItems>

Administracin de activos, bibliotecas y plantillas del sitio 507

508 Captulo 27

CAPTULO 28 Comprobacin de un sitio

Antes de cargar el sitio en un servidor y dejarlo listo para visitas, conviene comprobarlo localmente. De hecho, es conveniente comprobar frecuentemente el sitio a medida que se construye para detectar y solucionar los problemas lo antes posible y evitar que se repitan. Deber asegurarse de que las pginas tienen la apariencia y el funcionamiento esperado en los navegadores de destino, que no hay vnculos rotos y que las pginas no tardan demasiado en cargarse. Tambin puede comprobar todo el sitio y solucionar los problemas ejecutando un informe del sitio. Las directrices siguientes le ayudarn a hacer ms sencilla la visita al sitio:

Compruebe que las pginas funcionan de la forma deseada en los navegadores de destino y que
funcionan correctamente o experimentan fallos mnimos en otros navegadores. Las pginas debern ser legibles y funcionales en los navegadores que no admiten estilos, capas, plug-ins o JavaScript (consulte Comprobacin de la compatibilidad con los navegadores en la pgina 510). Si las pginas muestran un funcionamiento muy deficiente en navegadores antiguos, puede utilizar el comportamiento Comprobar navegador para remitir automticamente a los visitantes a otra pgina (consulte Comprobar navegador en la pgina 388).

Obtenga una vista previa de las pginas en todos los navegadores y plataformas posibles.
De este modo podr observar las diferencias en diseo, color, tamao de fuentes y tamao predeterminado de la ventana del navegador, diferencias que no podr detectar en una revisin con un navegador de destino (consulte Vista previa de pginas en navegadores en la pgina 512).

Compruebe si hay vnculos rotos en el sitio y reprelos.

Otros sitios tambin experimentan cambios de diseo y organizacin, por lo que es posible que se hayan movido o borrado las pginas con las que se han establecido vnculos. Puede ejecutar un informe de comprobacin para verificar los vnculos (consulte Comprobacin de vnculos de una pgina o un sitio en la pgina 513, Reparacin de vnculos rotos en la pgina 515, Apertura de documentos vinculados en Dreamweaver en la pgina 516 o Utilizacin de informes para comprobar un sitio en la pgina 517).

509

 Vigile el tamao de archivo de las pginas y el tiempo que tardan en descargarse (consulte
Definicin del tiempo de descarga y el tamao en la pgina 516). Si la pgina consiste nicamente en una tabla grande, el visitante no ver nada hasta que termine de cargarse toda la tabla. Puede resultar conveniente dividir las tablas grandes. Si no es posible, puede colocar algo de contenido, como un mensaje de bienvenida o un rtulo publicitario, fuera de la tabla, en la parte superior de la pgina, de modo que los usuarios puedan verlo mientras se descarga la tabla.

Genere varios informes del sitio para comprobar su funcionamiento y solucionar los
problemas. Puede comprobar todo el sitio para detectar problemas como documentos sin ttulo, etiquetas vacas y etiquetas anidadas repetidas (consulte Utilizacin de informes para comprobar un sitio en la pgina 517).

Una vez publicado el grueso del sitio, no deje de actualizarlo y mantenerlo.

La publicacin del sitio (es decir, su puesta a disposicin del pblico y activacin) puede llevarse a cabo de distintas formas y es un proceso permanente. Una parte importante del proceso consiste en definir e implementar un sistema de control de versiones, ya sea con las herramientas de Macromedia Dreamweaver MX o mediante otra aplicacin de control de versiones.

Utilice los foros de debate sobre Dreamweaver del sitio Web de Macromedia. Para obtener
informacin sobre cmo acceder a los grupos de debate, consulte http:// www.macromedia.com/go/dreamweaver_newsgroup. Los foros son una importante fuente de recursos en la que, por ejemplo, podr obtener informacin sobre los distintos navegadores y plataformas. Tambin podr intercambiar ideas sobre aspectos tcnicos y compartir consejos con otros usuarios de Dreamweaver. Este captulo contiene las secciones siguientes:

Comprobacin de la compatibilidad con los navegadores en la pgina 510 Utilizacin de comportamientos para detectar navegadores y plug-ins en la pgina 511 Vista previa de pginas en navegadores en la pgina 512 Comprobacin de vnculos de una pgina o un sitio en la pgina 513 Reparacin de vnculos rotos en la pgina 515 Apertura de documentos vinculados en Dreamweaver en la pgina 516 Definicin del tiempo de descarga y el tamao en la pgina 516 Utilizacin de informes para comprobar un sitio en la pgina 517

Comprobacin de la compatibilidad con los navegadores

Dreamweaver permite crear pginas Web con elementos que admiten todos los navegadores (por ejemplo, imgenes y texto de prrafo), as como con elementos que slo admiten los navegadores ms recientes (por ejemplo, estilos y capas). La funcin Comprobar navegadores de destino analiza el HTML de los documentos para ver si hay etiquetas o atributos incompatibles con los navegadores de destino. La comprobacin no altera el documento.

510 Captulo 28

La funcin Comprobar navegadores de destino utiliza archivos de texto denominados perfiles de navegador para determinar qu etiquetas son compatibles con navegadores especficos. Dreamweaver incluye perfiles predefinidos para Netscape Navigator versiones 2.0 y posteriores, Microsoft Internet Explorer versiones 2.0 y posteriores y Opera versiones 2.1 y posteriores. Para modificar los perfiles existentes o crear otros nuevos, consulte la seccin Personalizacin de Dreamweaver en http://www.macromedia.com/es/support/. Puede ejecutar la revisin de un documento, un directorio o todo el sitio con el navegador de destino.
Nota: Al ejecutar una revisin con el navegador de destino no se verifican los scripts del sitio.

Para ejecutar una revisin con el navegador de destino:

Dispone de las opciones siguientes: ltima versin guardada del archivo y no incluir los cambios que no haya guardado.

Para ejecutar la revisin del documento actual, guarde el archivo. Dreamweaver comprobar la Para ejecutar la revisin de un directorio o un sitio, seleccione un sitio en el men emergente
Sitios actuales del panel Sitio. Dreamweaver comprobar con el navegador de destino todos los archivos HTML de esa carpeta y las subcarpetas que contenga. La revisin del navegador de destino slo se puede realizar con archivos locales.
2

Elija Archivo > Comprobar pgina > Comprobar navegadores de destino. Si an no ha seleccionado un navegador principal, Dreamweaver le pedir que lo haga. En la lista de navegadores, seleccione el navegador de destino que desea utilizar para comprobar el sitio. Haga clic en Comprobar. El informe aparecer en el panel Revisin del navegador de destino (en el grupo de paneles Resultados).

3 4

Para guardar el informe, haga clic en el botn Guardar informe del panel Revisin del navegador de destino.
Nota: El informe del navegador de destino es un archivo temporal que se perder si no lo guarda.

Utilizacin de comportamientos para detectar navegadores y plug-ins

Puede utilizar comportamientos para determinar qu navegador utilizan los visitantes y si tienen un determinado plug-in instalado. Para obtener ms informacin sobre comportamientos, consulte Utilizacin de comportamientos JavaScript en la pgina 381.
Comprobar navegador

Enva a los visitantes a distintas pginas, segn la marca y versin de su navegador (consulte Comprobar navegador en la pgina 388). Por ejemplo, puede resultar conveniente que los visitantes vayan a una pgina si su navegador es Netscape Navigator 4.0 o una versin posterior, que vayan a otra pgina si utilizan Microsoft Internet Explorer 4.0 o una versin posterior o que permanezcan en la pgina actual si su navegador es de algn otro tipo.

Comprobar plug-in Remite a los visitantes a distintas pginas, dependiendo de si tienen instalado el plug-in especificado (consulte Comprobar plug-in en la pgina 390). Por ejemplo, puede resultar conveniente que los visitantes vayan a una pgina si tienen Macromedia Shockwave y a otra distinta si no lo tienen.

Comprobacin de un sitio

511

Vista previa de pginas en navegadores

Durante el proceso de diseo y creacin del sitio Web conviene comprobar frecuentemente las pginas obteniendo una vista previa en navegadores. Esta prctica permite detectar los errores rpidamente y evita copiarlos o repetirlos. Puede obtener la vista previa de un documento en los navegadores de destino en cualquier momento. Para ello, no es necesario guardar previamente el documento. Podr activar todas las funciones relacionadas con el navegador, como los comportamientos JavaScript, los vnculos absolutos y relativos al documento, los controles ActiveX y los plug-ins de Netscape Navigator, siempre que haya instalado los plug-ins o los controles ActiveX necesarios en los navegadores. El contenido vinculado a rutas relativas a la raz no aparece cuando se realiza una vista previa de documentos en un navegador local (a menos que seleccione la opcin Vista previa utilizando el archivo temporal en Preferencias; consulte Vista previa de pginas en navegadores en la pgina 512). Esto se debe a que los navegadores, a diferencia de los servidores, no reconocen la raz de los sitios. Para obtener una vista previa de contenido vinculado a rutas relativas a la raz, site el archivo en un servidor remoto y, a continuacin, elija Archivo > Vista previa en el navegador (consulte Rutas relativas a la raz del sitio en la pgina 442). Puede definir hasta 20 navegadores para realizar vistas previas. Todos los navegadores que defina aparecern en el men Vista previa en el navegador. Es recomendable obtener una vista previa en los siguientes navegadores: Internet Explorer 4.0, Netscape Navigator 4.0 y al menos un navegador de slo texto, como Lynx.
Para obtener la vista previa del documento en un navegador, realice una de estas operaciones:

Elija Archivo > Vista previa en el navegador y seleccione uno de los navegadores que aparecen
en la lista. Si an no ha seleccionado un navegador, elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y, a continuacin, seleccione la categora Vista en Navegador a la izquierda para seleccionar un navegador.

Presione F12 para mostrar el documento actual en el navegador principal. Presione Control+F12 (Windows) o Comando+F12 (Macintosh) para mostrar el documento
actual en el navegador secundario.
Para comprobar vnculos en un navegador:

1 2

Elija Archivo > Vista previa en el navegador o presione F12. Haga clic en los vnculos activos para comprobar su correcto funcionamiento.

512 Captulo 28

Para definir o cambiar las preferencias de los navegadores principal y secundario:

Realice una de estas operaciones para abrir las opciones de Vista previa en el navegador: seleccione Vista en Navegador en la lista de categoras de la izquierda.

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y, a continuacin, Elija Archivo > Vista previa en el navegador > Editar lista de navegadores.
Aparecer el cuadro de dilogo Preferencias con las opciones de Vista previa en el navegador.

Realice los cambios necesarios. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Comprobacin de vnculos de una pgina o un sitio

La reparacin de los vnculos rotos (vnculos que no siguen una ruta vlida o que sealan a un archivo inexistente) de un sitio grande puede resultar tediosa y laboriosa. Esto se debe a que los sitios grandes pueden llegar a contener cientos de vnculos con documentos internos y a que los vnculos pueden cambiar con el tiempo. Los archivos hurfanos (archivos que siguen existiendo en el sitio pero que ya no estn vinculados a ningn otro archivo) tambin pueden ser problemticos, pues ocupan espacio en el disco duro y pueden confundir a otros miembros del equipo encargado del sitio.

Comprobacin de un sitio 513

Utilice la funcin Comprobar vnculos para buscar vnculos rotos y archivos sin referencia en archivos abiertos, partes de un sitio local o sitios locales completos. Los nicos vnculos que Dreamweaver verifica son los establecidos con documentos del sitio. Asimismo, Dreamweaver recopila una lista de vnculos externos que aparecen en el documento o documentos seleccionados, pero no los verifica. Cuando Dreamweaver termina de comprobar los vnculos en los archivos especificados, abre el panel Verificador de vnculos (en el grupo de paneles Resultados). Este cuadro de dilogo muestra una lista de los vnculos rotos, los vnculos externos (vnculos que Dreamweaver no puede comprobar) y los archivos hurfanos. Para ms informacin, consulte Apertura de documentos vinculados en Dreamweaver en la pgina 516.
Para comprobar los vnculos del documento actual:

1 2

Guarde el archivo en una ubicacin dentro del sitio local de Dreamweaver. Elija Archivo > Comprobar pgina > Comprobar vnculos. El informe aparecer en el panel Verificador de vnculos (en el grupo de paneles Resultados). Para guardar el informe, haga clic en el botn Guardar informe del panel Verificador de vnculos.
Nota: El informe del navegador de destino es un archivo temporal que se perder si no lo guarda.

Para comprobar los vnculos de una parte de un sitio local:

1 2 3

En el panel Sitio, elija un sitio en el men emergente Sitios actuales. En la vista Local, seleccione los archivos o las carpetas que desea comprobar. Inicie la comprobacin realizando una de estas operaciones: (Macintosh) haga clic en uno de los archivos seleccionados y elija Comprobar vnculos > Archivos/carpetas seleccionados en el men contextual.

Haga clic con el botn derecho del ratn (Windows) o mientras presiona la tecla Control Elija Archivo > Comprobar pgina > Comprobar vnculos.
El informe aparecer en el panel Verificador de vnculos (en el grupo de paneles Resultados).
4

En el panel Verificador de vnculos, seleccione un informe de vnculos especfico en el men emergente Ver para ver otro informe. Las opciones de informe son: Vnculos rotos y Vnculos externos. Slo podr comprobar los archivos hurfanos si comprueba los vnculos de todo el sitio (consulte el siguiente procedimiento).

Para guardar el informe, haga clic en el botn Guardar informe del panel Verificador de vnculos.

Para comprobar los vnculos de todo el sitio:

1 2

En el panel Sitio, elija un sitio en el men emergente Sitios actuales. Elija Sitio > Comprobar vnculos en todo el sitio. El informe aparecer en el panel Verificador de vnculos (en el grupo de paneles Resultados).

514 Captulo 28

En el panel Verificador de vnculos, seleccione un informe de vnculos especfico en el men emergente Ver para ver otro informe. Las opciones de informe son: Vnculos rotos, Vnculos externos y Archivos hurfanos. La lista de archivos correspondientes al tipo de informe seleccionado aparecer en el cuadro de dilogo Verificador de vnculos.
Nota: Si selecciona el tipo de informe Archivos hurfanos, podr eliminar directamente los archivos hurfanos desde el panel Verificador de vnculos. Para ello, seleccione un archivo de la lista y presione la tecla Supr.

La lista de archivos correspondientes al tipo de informe seleccionado aparecer en el panel Verificador de vnculos.
5

Para guardar el informe, haga clic en el botn Guardar informe del panel Verificador de vnculos.

Reparacin de vnculos rotos

Al comprobar vnculos en Dreamweaver, el panel Verificador de vnculos muestra un informe de vnculos rotos, vnculos externos y si ha comprobado todo el sitio archivos hurfanos (consulte Comprobacin de vnculos de una pgina o un sitio en la pgina 513). Puede reparar las referencias de imagen y los vnculos rotos directamente en el panel Verificador de vnculos, o abrir los archivos desde la lista y reparar los vnculos en el inspector de propiedades.
Para reparar los vnculos en el panel Verificador de vnculos:

1 2

Ejecute un informe de comprobacin de vnculos (consulte Comprobacin de vnculos de una pgina o un sitio en la pgina 513). En la columna Vnculos rotos (no en la columna Archivos) del panel Verificador de vnculos (en el grupo de paneles Resultados), seleccione el vnculo roto. Aparecer un icono de carpeta junto al vnculo roto. Haga clic en el icono de carpeta para localizar el archivo con el que desea establecer el vnculo o escriba su ruta y nombre. Presione la tecla Tab o Intro (Windows) o Retorno (Macintosh). Si hay otras referencias rotas a ese mismo archivo, aparecer un cuadro de dilogo pidindole que repare las referencias en los otros archivos. Haga clic en S para actualizar todos los documentos de la lista que hacen referencia al archivo. Haga clic en No si desea actualizar nicamente la referencia actual.

3 4

Nota: Si est activada la funcin Permitir desproteger y proteger archivo para este sitio, Dreamweaver intentar proteger los archivos que requieren cambios. Si no puede proteger un archivo, Dreamweaver mostrar un cuadro de dilogo de advertencia y no cambiar las referencias rotas. Consulte Utilizacin de desproteger/proteger en la pgina 102.

Comprobacin de un sitio 515

Para reparar vnculos en el inspector de propiedades:

1 2

Ejecute un informe de comprobacin de vnculos (consulte Comprobacin de vnculos de una pgina o un sitio en la pgina 513). En el panel Verificador de vnculos (en el grupo de paneles Resultados), haga doble clic en una entrada de la columna Archivo. Dreamweaver abrir el documento, seleccionar la imagen o el vnculo problemticos y resaltar la ruta y el nombre de archivo en el inspector de propiedades. (Si el inspector de propiedades no est visible, elija Ventana > Propiedades para abrirlo).

Si desea establecer una ruta y un nombre de archivo nuevos en el inspector de propiedades, haga clic en el icono de carpeta para localizar el archivo correspondiente o sobrescriba el texto resaltado. Si est actualizando una referencia de imagen y la nueva imagen aparece con un tamao incorrecto, haga clic en la etiquetas An y Al del inspector de propiedades o en el botn Actualizar para restablecer los valores de altura y anchura. Las etiquetas An y Al cambiarn de negrita a tipo normal.

Guarde el archivo.

A medida que los vnculos se van reparando, sus entradas desaparecen de la lista Verificador de vnculos. Si sigue apareciendo una entrada en la lista despus de introducir una ruta o un nombre de archivo nuevo en el Verificador de vnculos (o despus de guardar los cambios realizados en el inspector de propiedades), significa que Dreamweaver no encuentra el archivo nuevo y sigue considerando roto el vnculo.

Apertura de documentos vinculados en Dreamweaver

Los vnculos no estn activos en Dreamweaver, es decir, no se puede abrir un documento vinculado haciendo doble clic en el vnculo en la ventana de documento.
Para abrir documentos vinculados en Dreamweaver, realice una de estas operaciones:

Seleccione el vnculo y elija Modificar > Abrir pgina vinculada. Presione Control (Windows) o Comando (Macintosh) y haga doble clic en el vnculo.
Nota: El documento vinculado debe encontrarse en el disco local.

Definicin del tiempo de descarga y el tamao

Dreamweaver calcula el tamao basndose en todo el contenido de la pgina, incluidos los objetos vinculados, como las imgenes y los plug-ins. Dreamweaver realiza una estimacin del tiempo de descarga en base a la velocidad de conexin introducida en las preferencias de barra de estado. El tiempo de descarga real depender de las condiciones generales de Internet. La regla de los ocho segundos es una buena norma para controlar el tiempo de descarga de una pgina Web concreta: la mayora de los usuarios no esperarn ms de ocho segundos a que la pgina se cargue.

516 Captulo 28

Para establecer las preferencias de tiempo y tamao de descarga:

Elija Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X). Aparecer el cuadro de dilogo Preferencias. Seleccione Barra de estado en la lista Categora de la izquierda. Aparecern las opciones de preferencias de Barra de estado.

Elija una velocidad de conexin para calcular el tiempo de descarga. La velocidad media de conexin en Estados Unidos es 28,8. Si el diseo se realiza para una intranet, puede seleccionar 1.500 (velocidad T1). Para obtener ms informacin sobre las preferencias de la barra de estado, consulte Configuracin de las preferencias de la barra de estado en la pgina 51.

Haga clic en Aceptar.

Utilizacin de informes para comprobar un sitio

Cuando pruebe el sitio, puede compilar y generar informes para varios atributos HTML por medio del comando Informes. Este comando permite comprobar los vnculos externos, las etiquetas de fuentes anidadas combinables, el texto alternativo que falta, las etiquetas anidadas repetidas, las etiquetas vacas que pueden borrarse y los documentos sin ttulo. Puede comprobar este tipo de problemas HTML en los documentos seleccionados o en todo el sitio antes de publicarlo.

Comprobacin de un sitio 517

Despus de ejecutar un informe, puede guardarlo como archivo XML y, posteriormente, importarlo a una instancia de plantilla, una base de datos o un hoja de clculo e imprimirlo o mostrarlo en un sitio Web. Tambin puede aadir distintos tipos de informes a Dreamweaver a travs del sitio Web de Macromedia Dreamweaver Exchange (consulte Adicin de extensiones a Dreamweaver en la pgina 67). Para utilizar el comando Informes con el sistema de desproteccin y proteccin y con Design Notes, consulte Utilizacin de informes para mejorar el flujo de trabajo en la pgina 117.
Para ejecutar informes de comprobacin del sitio:

Elija Sitio > Informes. Aparecer el cuadro de dilogo Informes.

Elija una categora para elaborar el informe y el tipo de informe que desea ejecutar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Ejecutar para crear el informe. Dependiendo del tipo de informe elegido, puede que el sistema le pida que guarde el archivo, defina el sitio o seleccione una carpeta (si an no lo ha hecho). Aparecer una lista de resultados en el panel Informes de sitios (en el grupo de paneles Resultados).

Para utilizar y guardar un informe:

Para ordenar los resultados, haga clic en el encabezado de columna por el que desee ordenar la informacin. Puede ordenar por nombre de archivo, nmero de lnea o descripcin. Seleccione un elemento del informe y, a continuacin, haga doble clic en l para abrir el archivo en la ventana de documento.

518 Captulo 28

Haga clic en Guardar informe parea guardar el informe. Despus de guardar el informe podr importarlo a una instancia de plantilla, una base de datos o un hoja de clculo e imprimirlo o mostrarlo en un sitio Web.

Sugerencia: Despus de ejecutar los informes HTML, utilice el comando Limpiar HTML para corregir los errores notificados.

Comprobacin de un sitio 519

520 Captulo 28

Parte VIII Creacin de pginas dinmicas

Utilice las herramientas de desarrollo de aplicaciones de Dreamweaver para aadir contenido dinmico a las pginas. Esta parte contiene los siguientes captulos:

Parte VIII

Captulo 29, Optimizacin del espacio de trabajo para

desarrollo visual

Captulo 30, Flujo de trabajo de Dreamweaver para el

diseo de pginas dinmicas

Captulo 31, Almacenamiento y recuperacin de datos

para la pgina

Captulo 32, Definicin de fuentes de contenido

dinmico

Captulo 33, Adicin de contenido dinmico a pginas

Web

Captulo 34, Visualizacin de registros de base de datos Captulo 35, Utilizacin de componentes de
ColdFusion

Captulo 36, Utilizacin de los servicios Web Captulo 37, Adicin de comportamientos de servidor
personalizados

Captulo 38, Creacin de formularios interactivos

CAPTULO 29 Optimizacin del espacio de trabajo para desarrollo visual

Puede optimizar el espacio de trabajo de Macromedia Dreamweaver MX para desarrollar visualmente aplicaciones Web. Por ejemplo, puede utilizar paneles para crear rpidamente pginas dinmicas y puede ver live data en las pginas mientras trabaja. Este captulo contiene las secciones siguientes:

Visualizacin de los paneles aplicables en la pgina 523 Visualizacin de la estructura de base de datos en Dreamweaver en la pgina 525 Visualizacin de live data en la vista Diseo en la pgina 526 Utilizacin de la vista Diseo sin live data en la pgina 529 Vista previa de pginas dinmicas en un navegador en la pgina 530 Restriccin de la informacin de base de datos que se muestra en Dreamweaver en la pgina 530

Visualizacin de los paneles aplicables

Haga clic en la ficha Aplicacin de la barra Insertar para mostrar una serie de botones que permiten aadir contenido dinmico y comportamientos de servidor a la pgina.

El nmero y el tipo de iconos que aparecen dependen del tipo de documento abierto en la ventana de documento. La barra Insertar contiene botones para aadir los siguientes elementos a la pgina:

Juegos de registros Texto o tablas dinmicas Formularios para insertar o actualizar registros en una base de datos Barras de navegacin por registros

523

Si cambia a la vista Cdigo (Ver > Cdigo), pueden aparecer paneles adicionales que le permitan insertar cdigo en la pgina. Por ejemplo, si ve una pgina JSP en la vista Cdigo, aparecer el siguiente panel JSP en la barra Insertar:

Para averiguar cul es la funcin de cada icono de la barra Insertar, mueva el ratn sobre el icono. Aparecer una descripcin de herramienta de este modo:

Si desea definir orgenes de contenido dinmico para la pgina y aadir el contenido a la pgina, seleccione Ventana > Vinculaciones de datos. Aparecer el siguiente panel Vinculaciones:

Para obtener ms informacin, seleccione Ayuda en el men emergente del grupo del panel. Si desea aadir lgica del lado del cliente a las pginas dinmicas, seleccione Ventana > Comportamientos del servidor. Aparecer el siguiente panel Comportamientos del servidor:

Un comportamiento de servidor es un conjunto de instrucciones insertadas en una pgina dinmica durante el perodo de diseo y que se ejecutan en el servidor en tiempo de ejecucin. Para obtener ms informacin, seleccione Ayuda en el men emergente del grupo del panel.

524 Captulo 29

Si desea explorar bases de datos o crear conexiones de base de datos, seleccione Ventana > Bases de datos. Aparecer el siguiente panel Bases de datos:

Para obtener ms informacin, seleccione Ayuda en el men emergente del grupo del panel. Si desea inspeccionar, aadir o modificar cdigo para componentes JavaBeans, Macromedia ColdFusion o servicios Web, seleccione Ventana > Componentes. Aparecer el siguiente panel Componentes:

Nota: El panel Componentes slo se activa si abre una pgina ColdFusion, JSP o ASP.NET. Es posible que el documento no admita determinados componentes. Por ejemplo, los documentos ColdFusion no admiten JavaBeans.

Para obtener ms informacin, seleccione Ayuda en el men emergente del grupo del panel.

Visualizacin de la estructura de base de datos en Dreamweaver

Despus de conectarse a la base de datos, podr ver su estructura en Dreamweaver. Por ejemplo, podr ver los nombres de las tablas, columnas, vistas y procedimientos almacenados en la base de datos. Dreamweaver tambin identifica la clave principal de cada tabla y los tipos de datos de cada columna. Incluso podr ver los datos almacenados en las tablas de la base de datos.
Para ver la estructura de una base de datos:

Abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra en el panel Bases de datos todas las bases de datos para las que se han creado conexiones. Si est desarrollando un sitio ColdFusion, Dreamweaver mostrar en el panel todas las bases de datos para las que se han definido orgenes de datos en ColdFusion Administrator.

Optimizacin del espacio de trabajo para desarrollo visual 525

Nota: Dreamweaver examina el servidor ColdFusion que se ha definido para el sitio actual. Consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152.

Si no aparece ninguna base de datos en el panel, deber crear una conexin de base de datos. Para obtener ms informacin, consulte Conexin con una base de datos en la pgina 154.
2 3

Para mostrar las tablas, procedimientos almacenados y vistas de la base de datos, haga clic en el icono de signo ms (+) situado junto a una conexin de la lista. Para mostrar las columnas de la tabla, haga clic en nombre de tabla. Los iconos de columnas reflejan el tipo de datos y tambin indican la clave principal. Para ver los datos en una tabla, haga clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) en el nombre de tabla de la lista y elija Ver datos en el men emergente.

Visualizacin de live data en la vista Diseo

De forma predeterminada, la vista Diseo (Ver > Diseo) ofrece una representacin visual de la pgina sin contenido dinmico. La vista predeterminada no es la ideal si est diseando una pgina dinmica, ya que el contenido dinmico puede cambiar radicalmente el diseo de la pgina. Para ver cmo puede afectar el contenido dinmico al diseo de una pgina, elija Ver > Live Data. Dreamweaver muestra la pgina en la vista Diseo con el contenido dinmico. La ilustracin siguiente muestra una pgina dinmica con Live Data desactivado:

La ilustracin siguiente muestra la misma pgina con Live Data activado:

526 Captulo 29

Cuando Live Data est activado en la vista Diseo, puede llevar a cabo las siguientes operaciones:

Ajuste el diseo de la pgina utilizando las herramientas de diseo de pginas. Aada, edite o borre el contenido dinmico. Aada, edite o borre comportamientos de servidor.
Nota: Los vnculos no funcionan en la vista Diseo. Para comprobar los vnculos, utilice la funcin Vista previa en el navegador. (Consulte Vista previa de pginas dinmicas en un navegador en la pgina 530.)

Si realiza un cambio en la pgina que afecta al contenido dinmico, puede actualizar la pgina haciendo clic en el botn Actualizar (el icono de flecha circular). Dreamweaver tambin puede actualizar la pgina automticamente. Para obtener ms informacin, consulte Actualizacin de la pgina en la pgina 529. Requisitos para mostrar live data Para ver live data en la vista Diseo, deber proceder de este modo:

Defina una carpeta para procesar pginas dinmicas. Para obtener instrucciones, consulte
Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152. Cuando active Live Data, se enviar a la carpeta una copia temporal del documento abierto para su procesamiento. La pgina resultante se devolver y mostrar en la vista Diseo, mientras que la copia temporal existente en el servidor se borrar. Si la pgina muestra un mensaje de error cuando activa Live Data, asegrese de que el prefijo de URL del cuadro de dilogo Definicin del sitio es correcto. Para obtener ms informacin, consulte Prefijos de URL en la pgina 153.

Copie los archivos relacionados, si los hay, en la carpeta. Para obtener ms informacin,
consulte Copiado de archivos dependientes en la pgina 527.

Suministre a la pgina los parmetros que suministrara normalmente un usuario. Para obtener
instrucciones, consulte Suministro de parmetros esperados a la pgina en la pgina 528. Si experimenta dificultades para conseguir que funcione la vista Live Data, consulte Solucin de problemas de la vista Live Data en la pgina 529. Copiado de archivos dependientes Algunas pginas dinmicas utilizan otros archivos para funcionar correctamente. Debe cargar todos los archivos relacionados, incluidas las server-side includes y los archivos dependientes, como los de imgenes y de clase JSP, en la carpeta que ha definido para procesar pginas dinmicas (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152). Dreamweaver no copia automticamente los archivos dependientes en la carpeta al activar Live Data en la vista Diseo.
Nota: Live Data admite cdigo de server-side includes y archivos de aplicaciones como global.asa (ASP) y application.cfm (ColdFusion). Asegrese de que carga estos archivos en el servidor antes de activar Live Data.

Para copiar archivos dependientes en el servidor de aplicaciones:

Abra el panel Sitio (Ventana > Archivos del sitio) y, a continuacin, haga clic en el botn de ampliacin (el ltimo icono de la barra de herramientas del panel). El panel Sitio se ampliar hasta su tamao completo.

Optimizacin del espacio de trabajo para desarrollo visual 527

Haga clic en el icono Servidor de aplicaciones en la barra de herramientas del panel Sitio ampliado (el segundo icono comenzando por la izquierda). Aparecer la carpeta raz del servidor de aplicaciones bajo Sitio remoto. Bajo Carpeta local, seleccione los archivos dependientes. Haga clic en la flecha arriba de color azul para copiar los archivos en el servidor de aplicaciones o arrastre los archivos hasta la carpeta correspondiente bajo Sitio remoto.

3 4

Slo tendr que realizar esta operacin una vez, a no ser que aada ms archivos dependientes, en cuyo caso deber copiarlos tambin en la carpeta. Suministro de parmetros esperados a la pgina Para generar contenido dinmico, algunas pginas necesitan parmetros del usuario, por ejemplo, una pgina necesita el nmero de ID de un registro para buscar y mostrar el registro. Sin esos datos, Dreamweaver no puede generar contenido dinmico para mostrar en la vista Diseo. Si una pgina espera recibir parmetros del usuario, usted deber proporcionar los parmetros del modo que se indica a continuacin.
Para proporcionar a la pgina los datos que espera recibir de los usuarios:

En la ventana de documento, elija Configuracin de Live Data en el men Ver. Aparecer el cuadro de dilogo Configuracin de Live Data.

Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Si ha especificado el mtodo GET en el cuadro de dilogo Configuracin de Live Data, aparecer un cuadro de texto en la barra de herramientas de la vista Diseo. Utilice este cuadro de texto para introducir distintos parmetros de URL y, a continuacin, haga clic en el botn Actualizar (el icono de flecha circular) para ver cmo afectan los parmetros a la pgina.

528 Captulo 29

Introduzca cada parmetro de URL con el siguiente formato:

name=value;

En este formato, name es el nombre del parmetro de URL que espera recibir la pgina y value es el valor contenido en dicho parmetro. Para obtener ms informacin, consulte Aspectos bsicos de los parmetros URL en la pgina 544. Actualizacin de la pgina Con Live Data activado, haga clic en el botn Actualizar (el icono de flecha circular) de la barra de herramientas del documento si desea actualizar la pgina despus de realizar un cambio que afecte al contenido dinmico. Tambin puede seleccionar la opcin Actualizar automticamente en la barra de herramientas. Cuando esta opcin est activada, la pgina se actualizar cada vez que realice un cambio que afecte al contenido dinmico. Si dispone de una conexin de base de datos lenta, es recomendable dejar desactivada esta opcin cuando trabaje en la ventana Live Data. Solucin de problemas de la vista Live Data Muchos problemas que surgen con la vista Live Data pueden deberse a valores incorrectos o que faltan en el cuadro de dilogo Definicin del sitio (Sitio > Editar sitios). Active la categora Servidor de prueba del cuadro de dilogo Definicin del sitio. El cuadro Carpeta remota deber especificar una carpeta capaz de procesar pginas dinmicas (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152). A continuacin se ofrece un ejemplo de carpeta remota adecuada si se ejecuta IIS o PWS en el disco duro: C:\Inetpub\wwwroot\myapp\ Compruebe que el cuadro Prefijo de URL especifica un URL que corresponde (o se asigna) a la carpeta remota. Por ejemplo, si se est ejecutando PWS o IIS en el sistema local, las siguientes carpetas remotas tienen los siguientes prefijos URL:
Carpeta remota C:\Inetpub\wwwroot\ C:\Inetpub\wwwroot\myapp\ C:\Inetpub\wwwroot\fs\planes Prefijo de URL: http://localhost/ http://localhost/myapp/ http://localhost/fs/planes

Para obtener ms informacin, consulte Prefijos de URL en la pgina 153.

Utilizacin de la vista Diseo sin live data

Si est desactivado Live Data o se ha desconectado temporalmente del servidor de aplicaciones, puede seguir trabajando en las pginas dinmicas en la vista Diseo. Dreamweaver utiliza marcadores de posicin para representar visualmente el contenido dinmico en la pgina. Por ejemplo, el marcador de posicin para texto dinmico extrado de una base de datos utiliza la sintaxis {RecordsetName.ColumnName}, donde Recordset es el nombre del juego de registros y ColumnName, el nombre de la columna elegida en el juego de registros. En ocasiones, la longitud de los marcadores de posicin de texto dinmico distorsiona la disposicin de la pgina en la vista Diseo. Para resolver este problema, utilice llaves vacas a modo de marcadores de posicin.

Optimizacin del espacio de trabajo para desarrollo visual 529

Para utilizar llaves vacas como marcadores de posicin de texto dinmico:

1 2 3

Elija Edicin > Preferencias > Elementos invisibles o Dreamweaver > Preferencias > Elementos invisibles (Mac OS X). En el men emergente Mostrar texto dinmico como, elija {}. Haga clic en Aceptar.

Vista previa de pginas dinmicas en un navegador

Los desarrolladores de aplicaciones Web suelen depurar sus pginas comprobndolas rpida y frecuentemente en un navegador Web. Dreamweaver tiene en cuenta este estilo de trabajo con el comando Vista previa en el navegador (F12). Este comando permite ver pginas dinmicas rpidamente en una navegador sin cargarlas previamente en el servidor.
Sugerencia: Tambin puede utilizar la vista Diseo para comprobar rpidamente las pginas mientras trabaja con ellas. La vista Diseo ofrece una representacin visual completamente editable de la pgina, incluso con live data. Para obtener ms informacin, consulte Visualizacin de live data en la vista Diseo en la pgina 526.

Cuando se usa este comando, Dreamweaver ejecuta una copia temporal de la pgina en un servidor Web antes de mostrarla en el navegador. (Dreamweaver borrar a continuacin el archivo temporal del servidor.) Para obtener una vista previa de pginas dinmicas, deber rellenar la categora Servidor de prueba del cuadro de dilogo Definicin del sitio. Para obtener ms informacin, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152. La opcin Vista previa en el navegador no carga pginas relacionadas, como una pgina de resultados o de detalle, archivos dependientes, como los archivos de imagen, ni server-side includes. Para cargar un archivo que falta, elija Ventana > Sitio para abrir el panel Sitio, seleccione el archivo bajo Carpeta local y haga clic en la flecha arriba de color azul de la barra de herramientas para cargar el archivo en la carpeta del servidor Web.

Restriccin de la informacin de base de datos que se muestra en Dreamweaver

Los usuarios avanzados de sistemas de bases de datos grandes, como Oracle, deben restringir el nmero de elementos de base de datos que recupera y muestra Dreamweaver en tiempo de diseo. Una base de datos Oracle puede contener elementos que Dreamweaver no puede procesar en tiempo de diseo. Puede crear un esquema en Oracle y utilizarlo despus en Dreamweaver para filtrar los elementos innecesarios en tiempo de diseo.
Nota: No puede crear un esquema o catlogo en Microsoft Access.

Otros usuarios pueden beneficiarse de la restriccin de la cantidad de informacin que recupera Dreamweaver en tiempo de diseo. Algunas bases de datos contienen decenas o incluso centenares de tablas, por lo que quiz no convenga que Dreamweaver las muestre todas mientras est trabajando. En el cuadro de dilogo Juego de registros de Dreamweaver, por ejemplo, al hacer clic en el men emergente Tablas se muestra una lista con todas las tablas de la base de datos especificada. Si la base de datos contiene decenas de tablas, la lista ser larga y difcil de manejar. Si contiene centenares de tablas, Dreamweaver puede tardar bastante tiempo en recuperarlas todas en determinados sistemas. Un esquema o catlogo puede restringir el nmero de elementos de base de datos que Dreamweaver obtiene en tiempo de diseo.

530 Captulo 29

Deber crear un esquema o catlogo en el sistema de base de datos antes de poder aplicarlo en Dreamweaver. Consulte la documentacin del sistema de base de datos o pregunte al administrador del sistema. No puede aplicar un esquema o catlogo en Dreamweaver si est desarrollando una aplicacin ColdFusion.
Para aplicar un esquema o catlogo en Dreamweaver si est desarrollando una aplicacin distinta de ColdFusion:

Abra una pgina dinmica en Dreamweaver y, a continuacin, abra el panel Base de datos (Ventana > Bases de datos). Si ya existe la conexin de base de datos, aparecer una lista de conexiones en el panel. Haga clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) en la conexin. Elija Editar conexin en el men emergente. Aparecer el cuadro de dilogo correspondiente a su conexin. Si la conexin no existe, haga clic en el botn de signo ms (+) para crearla. Para obtener ms informacin, consulte Conexin con una base de datos en la pgina 154.

En el cuadro de dilogo correspondiente a la conexin, haga clic en Avanzado. Aparecer el cuadro de dilogo Restringir. Especifique el esquema o catlogo y, a continuacin, haga clic en Aceptar.

Optimizacin del espacio de trabajo para desarrollo visual 531

532 Captulo 29

CAPTULO 30 Flujo de trabajo de Dreamweaver para el diseo de pginas dinmicas

Una ventaja importante que ofrece Macromedia Dreamweaver MX consiste en la posibilidad de crear sitios Web dinmicos sin tener experiencia en los lenguajes de programacin. Las herramientas visuales de Dreamweaver permiten desarrollar sitios Web dinmicos sin necesidad de introducir manualmente complejos cdigos de programacin para crear un sitio que admita la visualizacin de contenido dinmico almacenado en una base de datos. Dreamweaver permite crear sitios Web dinmicos utilizando los lenguajes de programacin Web y las tecnologas de servidor ms conocidos, como Macromedia ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP) y PHP. En este captulo se indican los pasos principales que debe seguir para disear y crear un sitio Web dinmico. Al final de cada seccin encontrar referencias a los procedimientos especficos necesarios para desarrollar una pgina dinmica. Los cinco pasos principales para desarrollar una pgina Web dinmica son:

Diseo de la pgina Creacin de un origen de contenido dinmico Adicin de contenido dinmico a una pgina Web Mejora de la funcionalidad de una pgina dinmica Comprobacin y depuracin de la pgina

Diseo de la pgina
El diseo visual de la pgina constituye un paso importante a la hora de crear cualquier sitio Web tanto si es esttico como si es dinmico. Al aadir elementos dinmicos a una pgina Web, el diseo de la pgina se convierte en un elemento fundamental para facilitar su uso. Piense detenidamente cmo interactuarn los usuarios con las pginas individuales y con el sitio Web en su conjunto. Un mtodo comn para incorporar contenido dinmico a una pgina Web consiste en crear una tabla para presentar contenido y contenido dinmico importante en una o varias celdas de la tabla. Con este mtodo puede presentar informacin de distintos tipos en un formato estructurado.

533

Para obtener informacin sobre el diseo de pginas, consulte los captulos siguientes:

Captulo 17, Establecimiento de la disposicin de pginas en la vista Disposicin, en la

pgina 265

Captulo 16, Presentacin de contenido en tablas, en la pgina 249 Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297 Captulo 20, Insercin de imgenes, en la pgina 325 Creacin de un origen de contenido dinmico
Los sitios Web dinmicos requieren un origen de contenido del que extraer datos antes de mostrarlos en una pgina Web. En Dreamweaver, estos orgenes de datos pueden ser bases de datos, variables de peticin, variables de servidor, variables de formulario o procedimientos almacenados. Antes de utilizar estos orgenes de contenido en una pgina Web, deber:

Crear una conexin con el origen del contenido dinmico (como una base de datos) y el
servidor de aplicaciones que procesa la pgina.

Especificar qu informacin de la base de datos desea mostrar o qu variables desea incluir en la

pgina.

Utilizar la interfaz de apuntar y sealar para seleccionar e insertar elementos de contenido

dinmico en la pgina seleccionada. Dreamweaver permite conectar fcilmente una base de datos y crear un juego de registros del que extraer contenido dinmico. Un juego de registros es el resultado de una consulta de base de datos. Extrae la informacin especifica solicitada y permite mostrarla en una pgina especificada. Defina el juego de registros basndose en la informacin contenida en la base de datos y el contenido que desea mostrar. Distintos proveedores de tecnologa pueden emplear trminos distintos para referirse a un juego de registros. En ASP y ColdFusion un juego de registros se define como una consulta. En JSP se denomina conjunto de resultados (resultset) y en ASP.NET, conjunto de datos (DataSet). Si utiliza otros orgenes de datos, como la entrada de usuario o variables de servidor, el nombre del origen de datos que se define en Dreamweaver ser el mismo que el nombre del origen de datos propiamente dicho.

534 Captulo 30

Para utilizar un origen de datos en Dreamweaver, abra el panel Vinculaciones para crear el origen de datos. El panel Vinculaciones, que se muestra a continuacin, permite crear orgenes de datos para bases de datos y distintos tipos de variables. Al crear un origen de datos se almacena en el panel Vinculaciones, donde se puede seleccionar e insertar en la pgina actual.

Para crear un juego de registros en Dreamweaver, utilice el cuadro de dilogo Juego de registros. Puede iniciar el cuadro de dilogo Juego de registros desde el panel Servidor de la barra Insertar o desde el panel Vinculaciones. El cuadro de dilogo Juego de registros sencillo permite seleccionar una conexin de base de datos existente y crear una consulta de base de datos seleccionando la tabla o tablas cuyos datos desea incluir en el juego de registros. Puede incluso utilizar la seccin Filtro del cuadro de dilogo para crear sencillos criterios de bsqueda y devolucin para la consulta. Puede comprobar la consulta desde el cuadro de dilogo Juego de registros y realizar los ajustes necesarios antes de aadirla al panel Vinculaciones. Una vez establecida la conexin con la base de datos y definido el juego de registros, ste aparecer en el panel Vinculaciones. Desde aqu podr importarlo a cualquier pgina Web del sitio definido. La ilustracin siguiente muestra el panel Vinculaciones con el juego de registros de una base de datos de empleados abierto. Puede insertar cualquiera de los valores mostrados en una pgina Web seleccionando el elemento y haciendo clic en el botn Insertar, situado en la parte inferior del panel. El elemento seleccionado se insertar en el marcador de posicin especificado dentro de la pgina.

Flujo de trabajo de Dreamweaver para el diseo de pginas dinmicas 535

Para obtener informacin sobre bases de datos y los procedimientos necesarios para crear una conexin de base de datos, consulte los captulos siguientes:

Captulo 32, Definicin de fuentes de contenido dinmico, en la pgina 553 Apndice A, Gua de bases de datos para principiantes, en la pgina 737 Apndice C, Configuracin de un DSN en Windows, en la pgina 759 Adicin de contenido dinmico a una pgina Web
Despus de definir un juego de registros u otro origen de datos y aadirlos al panel Vinculaciones, puede insertar en la pgina el contenido dinmico que representa el juego de registros. La interfaz de mens de Dreamweaver permite aadir elementos de contenido dinmico con la misma facilidad que se selecciona un origen de datos de contenido dinmico en el panel Vinculados, e insertarlos en el texto, una imagen o un objeto de formulario de la pgina actual. Al insertar un elemento de contenido dinmico u otro comportamiento de servidor en una pgina, Dreamweaver inserta un script del lado del servidor en el cdigo de origen de la pgina. El script indica al servidor que recupere datos del origen de datos definido y los muestre en la pgina Web. Para colocar contenido dinmico en una pgina Web puede realizar lo siguiente:

Colocarlo en el punto de insercin especificado por el cursor en la vista Cdigo o Diseo. Sustituir una cadena de texto u otro marcador de posicin. Insertarlo en un atributo HTML. Por ejemplo, el contenido dinmico puede definir el atributo
src

de una imagen o el atributo value de un campo de formulario.

Para obtener procedimientos detallados sobre la incorporacin de contenido dinmico a una pgina, consulte:

Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571 Captulo 38, Creacin de formularios interactivos, en la pgina 629 Mejora de la funcionalidad de una pgina dinmica
Adems de aadir contenido dinmico, Dreamweaver permite incorporar fcilmente lgica de aplicacin compleja a las pginas Web. Para ello, utilice los comportamientos de servidor. Los comportamientos de servidor son cdigos predefinidos del lado del servidor que aaden la lgica de aplicacin a las pginas Web, suministrando una mayor interaccin y funcionalidad. Los comportamientos de servidor de Dreamweaver permiten aadir lgica de aplicacin a un sitio Web sin necesidad de escribir el cdigo manualmente. Los comportamientos de servidor suministrados con Dreamweaver MX admiten tipos de documento ColdFusion, ASP, ASP.NET, JSP y PHP. Los comportamientos de servidor se escriben y comprueban para que sean rpidos, seguros y robustos. Los comportamientos de servidor incorporados de Dreamweaver se han diseado para ofrecer compatibilidad con pginas Web multiplataforma para todos los navegadores.

536 Captulo 30

Adicin de comportamientos de servidor a una pgina Para aadir comportamientos de servidor a una pgina, seleccinelos en la barra Insertar o el panel Comportamientos del servidor. Para utilizar la barra Insertar, haga clic en la ficha Aplicacin y haga clic en un botn de comportamiento de servidor. Para utilizar el panel Comportamientos del servidor, elija Ventana > Comportamientos del servidor, haga clic en el botn de signo ms (+) del panel y seleccione un comportamiento de servidor en el men emergente. La ilustracin siguiente muestra los botones Comportamientos del servidor disponibles en la barra Insertar.

Dreamweaver suministra una interfaz de apuntar y hacer clic que permite que aplicar contenido dinmico y comportamientos complejos a una pgina resulte tan fcil como insertar elementos textuales y de diseo. Estos son los comportamientos de servidor disponibles:

Defina un juego de registros a partir de base de datos existente. El juego de registros que defina
se almacenar en el panel Vinculaciones.

Muestre varios registros en una pgina. Seleccione toda la tabla o celdas o filas individuales con
contenido dinmico, y especifique el nmero de registros para mostrar en cada vista de pgina.

Cree e inserte una tabla dinmica en una pgina y asocie la tabla a un juego de registros.
Posteriormente podr modificar tanto el aspecto de las tablas como la regin repetida utilizando el inspector de propiedades y el comportamiento de servidor Regin repetida, respectivamente.

Inserte un objeto de texto dinmico en una pgina. El objeto de texto que inserte ser un
elemento de un juego de registros predefinido al que puede aplicar alguno de los formatos de datos de Dreamweaver MX.

Cree controles de estado y navegacin para los registros, pginas maestro/detalle y formularios
para actualizar la informacin de una base de datos.

Visualizacin de ms de un registro a partir de un registro de la base de datos. Creacin de vnculos de navegacin para el juego de registros que permitan a los usuarios ver
los registros anterior o siguientes de un registro de base de datos.

Adicin de un contador de registros para ayudar a los usuarios a conocer cuntos registros se
han devuelto y dnde se encuentran en los resultados devueltos. Tambin puede ampliar los comportamientos de servidor de Dreamweaver escribiendo los suyos propios o instalando comportamientos de servidor escritos por otros proveedores. Para obtener ms informacin sobre la mejora de la funcionalidad de las pginas Web utilizando comportamientos de servidor, consulte los captulos siguientes:

Captulo 34, Visualizacin de registros de base de datos, en la pgina 579 Captulo 40, Creacin de pginas que realicen bsquedas en bases de datos, en la pgina 665 Captulo 41, Creacin de pginas que modifiquen bases de datos, en la pgina 679 Captulo 42, Creacin de pginas que restrinjan el acceso al sitio, en la pgina 701 Captulo 37, Adicin de comportamientos de servidor personalizados, en la pgina 611

Flujo de trabajo de Dreamweaver para el diseo de pginas dinmicas 537

Comprobacin y depuracin de la pgina

Antes de colocar una pgina dinmica o un sitio Web completo en la Web, conviene comprobar su funcionalidad. Captulo 28, Comprobacin de un sitio, en la pgina 509 proporciona directrices que le ayudarn a comprobar la facilidad de uso de un sitio Web y la compatibilidad en mltiples plataformas. Para obtener ms informacin sobre el diseo de sitios Web para personas con discapacidad auditiva, visual o de otro tipo, consulte Captulo 23, Funciones de accesibilidad de Dreamweaver, en la pgina 365. Deber familiarizarse con los problemas que se describen en este captulo y pensar en cmo puede afectar la funcionalidad de su aplicacin a personas con esas discapacidades. Comprobacin del contenido dinmico Dreamweaver permite obtener una vista previa y editar contenido dinmico utilizando la ventana Live Data.
Nota: Los vnculos no funcionan en la ventana Live Data. Para comprobar los vnculos, utilice la funcin Vista previa en el navegador. (Consulte Vista previa de pginas en navegadores en la pgina 512.)

Mientras se muestra el contenido dinmico, puede realizar las siguientes operaciones:

Ajuste el diseo de la pgina utilizando las herramientas de diseo de pginas de Dreamweaver. Aada, edite o borre el contenido dinmico. Aada, edite o borre comportamientos de servidor.
Para lograr este efecto, Dreamweaver ejecuta la pgina dinmica en el servidor antes de mostrarla en la ventana Live Data. Cuando cambie a la ventana Live Data, se enviar al servidor de aplicaciones una copia temporal del documento abierto para su procesamiento. La pgina resultante se devuelve y se muestra en la ventana Live Data, mientras que la copia temporal existente en el servidor se borra. Puede alternar entre la ventana de documento y la ventana Live Data eligiendo Live Data en el men Ver. Si una pgina espera recibir datos del usuario, por ejemplo, el nmero de ID de un registro seleccionado en una pgina maestra, puede facilitar a la pgina dicho dato usted mismo a travs del cuadro de dilogo Configuracin de Live Data.
Para introducir parmetros de live data:

1 2

Realice los cambios necesarios en la pgina. Si la pgina espera recibir parmetros de URL de un formulario HTML empleando el mtodo GET, introduzca los pares nombre/valor en el cuadro de texto de la barra de herramientas y haga clic en el botn Actualizar (el icono de flecha circular). Introduzca los datos de prueba en el siguiente formato:
name=value;

En este formato, name es el nombre del parmetro de URL que espera recibir la pgina y value es el valor contenido en dicho parmetro. Tambin puede definir pares de nombre/valor en el cuadro de dilogo Configuracin de Live Data (Ver > Configuracin de Live Data) y guardarlos con la pgina.
3

Haga clic en el botn Actualizar si la pgina requiere actualizacin.

538 Captulo 30

Edicin de contenido dinmico en una pgina Puede modificar o eliminar contenido dinmico de una pgina cambiando el comportamiento de servidor que proporciona el contenido o eliminando el comportamiento por completo. Por ejemplo, puede editar un comportamiento de servidor de un juego de registros para que devuelva ms registros a la pgina. El contenido dinmico de una pgina aparece en el panel Comportamientos del servidor. Por ejemplo, si aade un juego de registros a la pgina, ste se incorporar a la lista del panel Comportamientos del servidor de la siguiente forma:
Recordset(myRecordset)

Si aade otro juego de registros a la pgina, el panel Comportamientos del servidor mostrar ambos conjuntos de registros de la siguiente forma:
Recordset(mySecondRecordset) Recordset(myRecordset)
Para editar un comportamiento de servidor que proporciona contenido dinmico:

1 2

Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). Haga clic en el botn de signo ms (+) para mostrar los comportamientos de servidor y haga doble clic en el comportamiento de servidor en el panel Comportamientos del servidor. Aparecer el cuadro de dilogo que emple para definir la fuente de datos original. Realice los cambios deseados en el cuadro de dilogo y haga clic en Aceptar.

Tambin puede utilizar el inspector de propiedades para editar conjuntos de registros en la pgina. Abra el inspector de propiedades (Ventana > Propiedades) y luego seleccione el juego de registros en el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). A continuacin se muestra el inspector de propiedades para un juego de registros:

Eliminacin de contenido dinmico Despus de aadir contenido dinmico a una pgina, puede eliminarlo seleccionando el contenido dinmico en la pgina y presionando Suprimir. Tambin puede eliminarlo seleccionando el contenido dinmico en el panel Comportamientos del servidor y haciendo clic en el botn de signo menos (-).
Nota: Esta operacin elimina de la pgina el script del lado del servidor que recupera el contenido dinmico de la base de datos. No borra los datos de la base de datos.

Flujo de trabajo de Dreamweaver para el diseo de pginas dinmicas 539

540 Captulo 30

CAPTULO 31 Almacenamiento y recuperacin de datos para la pgina

Las aplicaciones Web y los sitios con contenido dinmico requieren un origen de contenido desde el que se recuperarn los datos. Tanto los datos como sus orgenes pueden adoptar muchas formas. Los datos suelen constar de informacin numrica o textual que se devuelve a una pgina Web y se muestra de algn modo al usuario. Este captulo contiene las secciones siguientes:

Utilizacin de una base de datos para almacenar contenido en la pgina 541 Recogida de los datos enviados por los usuarios en la pgina 542 Acceso a datos almacenados en variables de sesin en la pgina 546 Utilizacin de una base de datos para almacenar contenido
El uso de una base de datos para almacenar contenido permite separar el diseo del sitio Web del contenido que se desea mostrar a los usuarios del sitio. En lugar de escribir archivos HTML individuales para cada pgina, slo se necesita escribir una pgina o plantilla para los distintos tipos de informacin que se desea presentar. Utilizando una base de datos se puede proporcionar contenido nuevo a un sitio Web cargando simplemente los contenidos en la base de datos y, a continuacin, recuperando esos contenidos dinmicamente en respuesta a la solicitud del usuario. Una ventaja importante del almacenamiento de contenido en una base de datos reside en la posibilidad de actualizar la informacin en un nico origen y, a continuacin, implantar ese cambio en todo el sitio Web sin necesidad de buscar en las pginas que puedan contener la informacin y editar manualmente cada pgina. Las bases de datos pueden tener muchos formatos distintos segn la cantidad y la complejidad de los datos que almacenan. Microsoft Access es una base de datos que suele estar instalada en sistemas con Windows. Si no tiene experiencia con bases de datos, Access proporciona una interfaz sencilla que permite trabajar con tablas de bases de datos. Si bien puede utilizar Access como origen de datos para la mayor parte de las aplicaciones de sitios Web, hay que destacar que Access tiene un lmite de tamao de archivo de 2 GB y de 255 usuarios simultneos. Por esta razn, Access es una opcin razonable para el desarrollo de sitios Web y grupos de trabajo de empresa. Sin embargo, si prev que va a acceder al sitio una gran comunidad de usuarios, considere la posibilidad de usar una base de datos diseada para el nmero de visitantes previsto.

541

Aquellos sitios que requieran un mayor grado de flexibilidad en el modelado de los datos y capacidad para dar soporte a grandes comunidades de usuarios simultneos suelen emplear bases de datos relacionales basadas en servidor (denominadas generalmente RDBMS). Las bases de datos relacionales ms comunes que se utilizan para almacenar contenido para aplicaciones basadas en la Web y sitios dinmicos son: MySQL, Microsoft SQL Server y Oracle. Independientemente de la base de datos que elija para su sitio Web, puede utilizar Dreamweaver en el diseo de formularios Web para insertar, actualizar o eliminar datos de la base de datos. Para obtener ms informacin sobre las bases de datos, consulte Apndice A, Gua de bases de datos para principiantes, en la pgina 737. Acceso a los datos almacenados en una base de datos Las pginas Web no pueden acceder directamente a los datos almacenados en una base de datos. Lo que hacen es interactuar con un juego de registros. Un juego de registros es un subconjunto de la informacin, o registros, extrados de la base de datos. Este subconjunto de informacin se extrae utilizando una consulta de base de datos. Una consulta es una instruccin de bsqueda diseada para buscar y extraer informacin especfica de una base de datos. Macromedia Dreamweaver MX utiliza el lenguaje SQL (Structured Query Language) para crear consultas. Si bien no es necesario conocer SQL para crear consultas sencillas utilizando Dreamweaver, un conocimiento bsico de este sencillo lenguaje permite crear consultas ms avanzadas y, por tanto, proporciona una mayor flexibilidad a la hora de disear pginas dinmicas. Para conocer los aspectos bsicos de SQL, consulte Apndice B, Nociones bsicas de SQL, en la pgina 751. Una consulta SQL produce un juego de registros que incluye slo determinadas columnas, slo determinados registros o una combinacin de ambos. Un juego de registros tambin puede incluir todos los registros y columnas de una tabla de la base de datos. No obstante, dado que las aplicaciones pocas veces requieren la utilizacin de todos los datos de una base de datos, procure hacer los conjuntos de registros tan pequeos como sea posible. Dado que el servidor Web guarda temporalmente el juego de registros en la memoria, el uso de un juego ms pequeo consumir menos memoria, lo que puede redundar en un mayor rendimiento del servidor.

Recogida de los datos enviados por los usuarios

Puede utilizar pginas Web para recoger informacin de los usuarios, almacenar esa informacin en la memoria del servidor y, a continuacin, utilizar la informacin para crear una respuesta dinmica basada en los datos introducidos por el usuario. Las herramientas ms comunes para recoger informacin son los formularios HTML y las selecciones de vnculos de hipertexto.
Formularios HTML

Permiten recoger informacin de los usuarios y almacenarla en la memoria del servidor. Un formulario HTML puede enviar la informacin como parmetros de formulario o como parmetros de URL. Si define el atributo de mtodo del formulario como POST, el navegador incluir los valores del formulario en el cuerpo del mensaje enviado al servidor. Si define el atributo de mtodo del formulario como GET, el navegador aadir los valores del formulario al URL especificado en el atributo de accin y enviar la informacin al servidor. Tambin permiten recoger informacin de los usuarios y almacenarla en la memoria del servidor. Especifique un valor (o valores) que se enviarn cuando un usuario haga clic en un vnculo una preferencia, por ejemplo aadiendo el valor al URL especificado en la etiqueta anchor. Cuando un usuario hace clic en el vnculo, el navegador enva el URL y el valor aadido al servidor.

Vnculos de hipertexto

542 Captulo 31

En esta seccin se explica cmo crear parmetros de formulario y de URL para uso en aplicaciones Web. En esta seccin se analizan los temas siguientes:

Aspectos bsicos de los parmetros de formulario en la pgina 543 Aspectos bsicos de los parmetros URL en la pgina 544 Creacin de parmetros de URL utilizando vnculos HTML en la pgina 545 Recuperacin de parmetros de formulario y URL en la pgina 546

Aspectos bsicos de los parmetros de formulario Los parmetros de formulario se envan al servidor utilizando un formulario HTML mediante el mtodo POST o GET. Cuando se utiliza el mtodo POST, los parmetros se envan en el cuerpo del mensaje. Por el contrario, el mtodo GET aade los parmetros al URL solicitado. Puede utilizar Dreamweaver para disear rpidamente formularios HTML que enven parmetros de formulario al servidor. Para obtener instrucciones, consulte Captulo 38, Creacin de formularios interactivos, en la pgina 629. Observe cul es el mtodo que elige para transmitir informacin desde el navegador hasta el servidor. El ejemplo siguiente ilustra el inspector de propiedades de un formulario con el mtodo de formulario definido como POST:

Los parmetros de formulario adoptan los nombres de sus objetos de formulario correspondientes. Por ejemplo, si el formulario contiene un campo de texto llamado txtLastName, se enviarn los siguientes parmetros de formulario al servidor cuando el usuario haga clic en el botn Enviar:
txtLastName=enteredvalue

En aquellos casos en que una aplicacin Web espere un valor parmetro preciso (por ejemplo, cuando realiza una accin basada en una opcin de varias posibles), utilice un objeto de formulario de botones de opcin, casillas de verificacin o listas/mens para controlar los posibles valores que puede enviar el usuario. De este modo evitar que los usuarios introduzcan informacin incorrecta y se produzca un error de la aplicacin. El ejemplo siguiente muestra un formulario de men emergente que ofrece tres opciones:

Almacenamiento y recuperacin de datos para la pgina 543

Cada opcin del men corresponde a un valor incorporado en el cdigo que se enva como parmetro de formulario al servidor. El cuadro de dilogo Listar valores mostrado a continuacin relaciona cada elemento de la lista con un valor (Add, Update o Delete: aadir, actualizar o eliminar respectivamente):

Aspectos bsicos de los parmetros URL Un parmetro de URL es un par nombre/valor aadido a un URL. El parmetro comienza con un signo de interrogacin (?) y adopta la forma de name=value. Si existen varios parmetros de URL, cada parmetro se separa con un signo &. El ejemplo siguiente muestra un parmetro de URL con dos pares de nombre/valor:
http://server/path/document?name1=value1&name2=value2

Utilice parmetros de URL para transmitir informacin suministrada por el usuario desde el navegador hasta el servidor. Cuando un servidor recibe una solicitud y se aaden parmetros al URL de la solicitud, el servidor pone los parmetros a disposicin de la pgina solicitada antes de servir esa pgina al navegador. En este ejemplo, imagine que la aplicacin es un escaparate basado en la Web. Puesto que los diseadores del sitio quieren llegar al mayor nmero de usuarios posible, han diseado el sitio para que admita monedas extranjeras. Cuando los usuarios se conectan al sitio, pueden seleccionar en qu moneda desean ver los precios de los artculos disponibles.
1

El navegador solicita la pgina report.cfm al servidor. La solicitud incluye el parmetro de URL Currency=euro. La variable Currency=euro especifica que todos los importes monetarios recuperados se mostrarn en euros. El servidor almacena temporalmente el parmetro de URL en la memoria. La pgina report.cfm recupera y utiliza el parmetro para recuperar el coste de los artculos en euros. Estos importes monetarios se pueden almacenar en una tabla de base de datos de distintas monedas o se puede convertir cada moneda que admita la aplicacin a partir de una moneda nica asociada a cada artculo.

2 3

544 Captulo 31

El servidor enva la pgina report.cfm al navegador y muestra el valor de los artculos en la moneda solicitada. Cuando este usuario termina la sesin, el servidor destruye el valor del parmetro de URL, liberando la memoria del servidor para que guarde las solicitudes de los nuevos usuarios que accedan al sitio.

SERVIDOR WEB http:/www.mysite.com/ report.cfm?Currency=" " Currency=" "

Navegador Web
<HTML> </HTML>

report.cfm

Los parmetros de URL se crean cuando se emplea el mtodo GET de HTTP juntamente con un formulario HTML. El mtodo GET especifica que el valor del parmetro se aadir a la solicitud de URL cuando se enve el formulario. Los parmetros de URL suelen utilizarse para personalizar los sitios Web de acuerdo con las preferencias del usuario. Por ejemplo, se puede emplear un parmetro de URL compuesto por un nombre de usuario y una contrasea para autentificar al usuario, mostrando nicamente la informacin a la que se ha suscrito dicho usuario. Los sitios Web financieros ofrecen algunos ejemplos de este tipo, ya que muestran precios de acciones individuales basndose en los smbolos de los mercados burstiles que el usuario ha elegido previamente. Los desarrolladores de aplicaciones Web suelen utilizar parmetros de URL para transferir valores a variables dentro de las aplicaciones. Por ejemplo, se pueden transferir trminos de bsqueda a variables SQL en una aplicacin Web para generar resultados de bsqueda. Creacin de parmetros de URL utilizando vnculos HTML Crear parmetros de URL en un vnculo HTML consiste en utilizar el atributo href de la etiqueta anchor HTML. Puede introducir los parmetros de URL directamente en el atributo cambiando a la vista Cdigo (Ver > Cdigo). En el ejemplo siguiente, tres vnculos crean un nico parmetro de URL (action) con tres valores posibles (Add, Update y Delete). Segn el vnculo en el que haga clic el usuario, se enviar un valor de parmetro distinto al servidor y se realizar la accin solicitada.
<a href=http://www.mysite.com/myfiles/ index.asp?action=Add>Add a record</a> <a href=http://www.mysite.com/myfiles/ index.asp?action=Update>Update a record</a> <a href=http://www.mysite.com/myfiles/ index.asp?action=Delete>Delete a record</a>

Almacenamiento y recuperacin de datos para la pgina 545

Puede utilizar el inspector de propiedades de Dreamweaver para crear los mismos parmetros de URL seleccionando el vnculo y eligiendo Ventana > Propiedades. En el ejemplo siguiente, el parmetro de URL se ha introducido en el inspector de propiedades:

Recuperacin de parmetros de formulario y URL Despus de crear un parmetro de formulario o URL, Dreamweaver puede recuperar el valor y utilizarlo en una aplicacin Web. Para obtener ms informacin, consulte Definicin de parmetros de URL en la pgina 559. Despus de definir el parmetro de formulario o de URL en Dreamweaver, puede insertar su valor en una pgina. Para obtener ms informacin, consulte Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571.

Acceso a datos almacenados en variables de sesin

Las variables de sesin proporcionan un mecanismo mediante el cual las aplicaciones Web pueden almacenar y recuperar la informacin del usuario. Las variables de sesin suelen almacenar informacin (generalmente parmetros de formulario o de URL enviados por los usuarios) y poner esa informacin a disposicin de todas las pginas de las aplicaciones mientras dure la visita del usuario. Por ejemplo, cuando los usuarios visitan un portal Web que proporciona acceso a correo electrnico, cotizaciones burstiles, informes meteorolgicos y noticias, la aplicacin Web almacena la informacin de registro en una variable de sesin que identifica al usuario en todas las pginas del sitio. Esto permite al usuario ver nicamente los tipos de contenidos que ha seleccionado mientras navegaba por el sitio. Las variables de sesin tambin pueden proporcionar un mecanismo de seguridad en forma de intervalo de espera que pone fin a la sesin del usuario si la cuenta permanece inactiva durante demasiado tiempo. De este modo tambin se libera memoria del servidor y recursos de procesamiento si los usuarios se olvidan de terminar la sesin de un sitio Web. Las variables de sesin se utilizan frecuentemente para almacenar preferencias de visualizacin del usuario, respuestas a cuestionarios de varias partes, elementos elegidos para comprar en las denominadas aplicaciones de carro de la compra y puntuaciones obtenidas en juegos en lnea. En esta seccin se describen los siguientes temas de variables de sesin:

Aspectos bsicos de las variables de sesin en la pgina 547 Recogida de informacin para almacenarla en variables de sesin en la pgina 548 Almacenamiento de informacin en variables de sesin en la pgina 549 Ejemplo de informacin almacenada en variables de sesin en la pgina 550 Recuperacin de datos de variables de sesin en la pgina 551

546 Captulo 31

Aspectos bsicos de las variables de sesin Los servidores Web (o ms correctamente, el protocolo HTTP) no guardan el estado, es decir, no realizan un seguimiento de los navegadores que se conectan a ellos ni de las solicitudes de pginas individuales que realizan los usuarios. Cada vez que un servidor Web recibe una solicitud de una pgina Web y responde enviando la pgina correspondiente al navegador del usuario, el servidor Web olvida qu navegador ha efectuado la solicitud y qu pgina ha enviado. Cuando ese mismo usuario solicita una pgina relacionada posteriormente, el servidor Web enva la pgina sin saber cul es la ltima pgina que ha enviado a ese usuario. Si bien esta caracterstica de HTTP contribuye a que sea un protocolo sencillo y fcil de implementar, hace que las aplicaciones Web avanzadas, como la generacin de contenido personalizado, sean ms difciles. Por ejemplo, para personalizar el contenido de un sitio para un usuario individual, el usuario debe identificarse previamente. La mayora de los sitios Web emplean algn tipo de inicio de sesin mediante nombre de usuario/contrasea para lograrlo. Si se van a mostrar mltiples pginas personalizadas se necesita un mecanismo que realice un seguimiento de los usuarios conectados, pues a la mayora de los usuarios les resultara inaceptable tener que suministrar su nombre de usuario y contrasea para cada pgina del sitio. Para permitir la creacin de aplicaciones Web complejas y el almacenamiento de los datos suministrados por el usuario en todas las pginas de un sitio, la mayor parte de las tecnologas de servidores de aplicaciones incluyen soporte para la administracin de sesiones. La administracin de sesiones permite que las aplicaciones Web mantengan el estado entre varias solicitudes HTTP, lo permite al usuario realizar solicitudes de pginas Web durante un perodo determinado dentro de la misma sesin interactiva. Las variables de sesin almacenan informacin mientras dura la sesin del usuario. La sesin del usuario comienza cuando abre por primera vez una pgina en la aplicacin. La sesin termina si el usuario no abre otra pgina de la aplicacin durante un determinado perodo de tiempo o si pone fin de manera explcita a la sesin (generalmente haciendo clic en un vnculo de desconexin). Mientras dura, la sesin es especfica de un usuario individual y cada usuario tiene una sesin independiente. Utilice variables de sesin para almacenar informacin a la que pueda acceder cada pgina de una aplicacin Web. La informacin puede ser tan distinta como el nombre del usuario, el tamao de fuente preferida o un indicador que establezca si el usuario ha iniciado correctamente la sesin. Otro uso frecuente de las variables de sesin es el mantenimiento de una puntuacin, como el nmero de preguntas contestadas correctamente hasta el momento en un concurso en lnea, o los productos que el usuario ha seleccionado en un catlogo en lnea. Observe que las variables de sesin slo pueden funcionar si el navegador del usuario est configurado para aceptar cookies. El servidor crea un nmero de ID de sesin que identifica el usuario cuando se inicia la sesin y, a continuacin, enva una cookie que contiene el nmero de ID al navegador del usuario. Cuando el usuario solicita otra pgina al servidor, ste lee la cookie en el navegador para identificar al usuario y recuperar las variables de sesin del usuario almacenadas en la memoria del servidor.

Almacenamiento y recuperacin de datos para la pgina 547

Recogida de informacin para almacenarla en variables de sesin Antes de crear una variable de sesin, deber obtener en primer lugar la informacin que desea almacenar y, a continuacin, enviarla al servidor para su almacenamiento. En esta seccin se explica cmo recoger y enviar informacin al servidor utilizando formularios HTML o vnculos de hipertexto que contienen parmetros de URL. Tambin puede obtener informacin a partir de cookies almacenadas en el equipo del usuario, en los encabezados HTTP enviados por el navegador del usuario con una solicitud de pgina o en una base de datos. Almacenamiento de parmetros de URL en variables de sesin En el ejemplo siguiente, un catlogo de productos utiliza parmetros de URL incorporados en el cdigo que se han creado utilizando un vnculo de hipertexto para enviar al servidor informacin sobre el producto que se almacenar en una variable de sesin. Cuando el usuario hace clic en el vnculo Add to shopping cart, el ID de producto (3202 en este ejemplo) se almacena en una variable de sesin mientras el usuario sigue comprando. Cuando el usuario pasa a la pgina de caja, se recupera el nmero de producto almacenado en la variable de sesin.

548 Captulo 31

Almacenamiento de parmetros de formulario en variables de sesin En este ejemplo, una pgina de concurso basada en formulario enva la informacin seleccionada al servidor, donde la pgina marks.cfm punta los resultados y almacena el nmero de respuestas correctas en una variable de sesin.

Almacenamiento de informacin en variables de sesin Cuando la informacin se enva al servidor, se almacena en variables de sesin aadiendo el cdigo correspondiente al modelo de servidor en la pgina especificada por el parmetro de URL o de formulario. Esta pgina, denominada pgina de destino, se especifica en el atributo action del formulario HTML o el atributo href del vnculo de hipertexto en la pgina inicial. La sintaxis HTML de cada uno ser la siguiente:
<form action="destination.html" method="get" name="myform"> </form> <param name="href"value="destination.html">

El cdigo empleado para almacenar la informacin en una variable de sesin viene determinado por la tecnologa del servidor y por el mtodo utilizado para obtener la informacin. La sintaxis bsica de cada tecnologa del servidor ser la siguiente:
ColdFusion

<CFSET session.nombre_variable = value>

ASP y ASP.NET

<% Session("nombre_variable") = value %>

La expresin value suele ser una expresin de servidor como Request.Form(lastname). Por ejemplo, si utiliza un parmetro URL llamado product (o un formulario HTML con el mtodo get y un campo de texto llamado product) para recoger informacin, las instrucciones siguientes almacenarn la informacin en una variable de sesin llamada prodID:
ColdFusion

<CFSET session.prodID = url.product>

Almacenamiento y recuperacin de datos para la pgina 549

ASP y ASP.NET

<% Session("prodID") = Request.QueryString("producto") %>

Si utiliza un formulario HTML con el mtodo post y un campo de texto llamado txtProduct para recoger la informacin, las instrucciones siguientes almacenarn la informacin en la variable de sesin:
ColdFusion

<CFSET session.prodID = form.txtProduct>

ASP y ASP.NET

<% Session("prodID") = Request.Form("txtProduct") %>

Ejemplo de informacin almacenada en variables de sesin Usted est trabajando en un sitio con gran nmero de personas mayores. En Dreamweaver, aada dos vnculos a la pgina inicial para que los usuarios personalicen el tamao del texto del sitio. Para ver texto ms grande y fcil de leer, el usuario hace clic en un vnculo y para ver texto de tamao normal, hace clic en otro.

Cada vnculo tiene un parmetro URL llamado fontsize que enva la preferencia de texto del usuario al servidor, como muestra el siguiente ejemplo de Macromedia ColdFusion:
<a href="resort.cfm?fontsize=large">Larger Text</a><br> <a href="resort.cfm?fontsize=small">Normal Text</a>

Usted decide almacenar la preferencia de texto del usuario en una variable de sesin y utilizarla para establecer el tamao de fuente de cada pgina que solicite el usuario. Cerca de la parte superior de la pgina de destino, introduzca el cdigo siguiente para crear una sesin llamadafont_pref que almacene la preferencia de tamao de fuente del usuario.
ColdFusion

<CFSET session.font_pref = url.fontsize>

ASP y ASP.NET

<% Session("font_pref") = Request.QueryString("fontsize") %>

Cuando el usuario hace clic en el vnculo de hipertexto, la pgina enva la preferencia de texto del usuario en un parmetro URL a la pgina de destino. El cdigo de la pgina de destino almacena en el parmetro URL en la variable de sesin font_pref. Mientras dure la sesin del usuario, todas las pginas de la aplicacin recuperarn este valor y mostrarn el tamao de fuente seleccionado.

550 Captulo 31

Recuperacin de datos de variables de sesin Una vez almacenado un valor en una variable de sesin, puede utilizar Dreamweaver para recuperar el valor de las variables de sesin y utilizarlo en una aplicacin Web. Para obtener ms informacin, consulte Definicin de variables de sesin en la pgina 561. Despus de definir la variable de sesin en Dreamweaver, puede insertar su valor en una pgina. Para obtener ms informacin, consulte Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571.

Almacenamiento y recuperacin de datos para la pgina 551

552 Captulo 31

CAPTULO 32 Definicin de fuentes de contenido dinmico

Los sitios Web dinmicos necesitan una fuente de datos para recuperar y mostrar contenido dinmico. Macromedia Dreamweaver MX permite utilizar bases de datos, variables de peticin, variables de URL, variables de servidor, variables de formulario, procedimientos almacenados y otras fuentes de contenido dinmico. Segn cul sea la fuente de datos, podr recuperar contenido nuevo para satisfacer una peticin o modificar la pgina a fin de atender las necesidades de los usuarios. En este captulo se describen los procedimientos para definir bases de datos y variables como fuentes de contenido dinmico. Para obtener ms informacin sobre las tecnologas tratadas en este captulo, consulte Recursos tecnolgicos HTML y Web en la pgina 41. Este captulo contiene las secciones siguientes:

Aspectos bsicos de las fuentes de contenido dinmico en la pgina 553 Definicin de un juego de registros en la pgina 554 Definicin de parmetros de URL en la pgina 559 Definicin de variables de sesin en la pgina 561 Definicin de variables de aplicacin en la pgina 563 Definicin de variables de servidor en la pgina 563 Creacin de un cach de las fuentes de contenido en la pgina 568 Cambio o eliminacin de fuentes de contenido en la pgina 568 Copiado de un juego de registros de una pgina a otra en la pgina 569

Aspectos bsicos de las fuentes de contenido dinmico

Una fuente de contenido dinmico es un almacn de informacin desde el que se puede recuperar y mostrar contenido dinmico para utilizar en una pgina Web. Las fuentes de contenido dinmico no slo incluyen informacin almacenada en una base de datos, sino tambin valores enviados por formularios HTML, valores contenidos en objetos de servidor, valores de propiedades JavaBeans y otras fuentes de contenido.

553

Las fuentes de contenido que defina en Dreamweaver se aadirn a la lista de fuentes en el panel Vinculaciones. Despus de crear una fuente de datos e incluirla en el panel Vinculaciones, podr insertarla fcilmente en la pgina seleccionada actualmente.

Definicin de un juego de registros

Si utiliza una base de datos como fuente de contenido para una pgina Web dinmica, deber crear en primer lugar un juego de registros para almacenar los datos recuperados. Los juegos de registros actan como intermediarios entre la base de datos que almacena el contenido y el servidor de aplicaciones que genera la pgina. Los juegos de registros se componen de datos devueltos por una consulta de base de datos y se almacenan temporalmente en la memoria del servidor de aplicaciones para una recuperacin ms rpida. El servidor descarta el juego de registros cuando ya no es necesario. El juego de registros es una conjunto de datos recuperados de una base de datos especfica. Puede incluir una tabla de base de datos completa o un subconjunto de las filas y columnas de la tabla. Estas filas y columnas se recuperan por medio de una consulta de base de datos que se define en el juego de registros. Las consultas de base de datos se escriben en SQL (Lenguaje de consulta estructurado), un sencillo lenguaje que permite recuperar, aadir y eliminar datos de una base de datos. El generador de SQL que incluye Dreamweaver permite crear consultas sencillas sin necesidad de conocer este lenguaje. Sin embargo, si desea crear consultas SQL complejas, deber conocer el lenguaje y escribir manualmente declaraciones SQL para introducirlas en Dreamweaver.
Nota: Microsoft ASP.NET denomina conjunto de registros (DataSet) al juego de registros. Si trabaja con documentos de tipo ASP.NET, los cuadros de dilogo y las opciones de men especficos de ASP.NET utilizan la etiqueta Conjunto de datos. La documentacin de Dreamweaver se refiere genricamente a ambos tipos como juegos de registros, aunque utiliza conjunto de datos cuando describe especficamente funciones de ASP.NET.

Para obtener ms informacin sobre cmo utilizar bases de datos y SQL, consulte los captulos siguientes: Apndice A, Gua de bases de datos para principiantes, en la pgina 737 y Apndice B, Nociones bsicas de SQL, en la pgina 751. Antes de definir un juego de registros para utilizarlo con Dreamweaver, deber crear una conexin con una base de datos y, si sta est vaca, introducir datos en ella. Si an no ha definido una conexin de base de datos para el sitio, consulte la seccin correspondiente a la tecnologa de servidor con la que est trabajando en el captulo que trata este tema y siga las instrucciones para crear una conexin de base de datos.

554 Captulo 32

En los captulos siguientes se describen las conexiones de base de datos de todas las tecnologas de servidor que admite Dreamweaver:

Captulo 7, Conexiones de base de datos para desarrolladores de ColdFusion, en la

pgina 157

Captulo 9, Conexiones de base de datos para desarrolladores de ASP, en la pgina 169 Captulo 8, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 163 Captulo 10, Conexiones de base de datos para desarrolladores de JSP, en la pgina 181 Captulo 11, Conexiones de base de datos para desarrolladores de PHP, en la pgina 189

Esta seccin contiene los siguientes temas:

Creacin de un juego de registros sin escribir SQL en la pgina 555 Creacin de un juego de registros avanzado escribiendo SQL en la pgina 556 Creacin de consultas SQL utilizando el rbol Elementos de base de datos en la pgina 558
Creacin de un juego de registros sin escribir SQL En esta seccin se explica cmo definir un juego de registros utilizando el cuadro de dilogo Juego de registros de Dreamweaver, que permite crear un juego de registros sin necesidad de introducir manualmente declaraciones SQL. Definir un juego de registros mediante este mtodo consiste en realidad en seleccionar una conexin de base de datos y una tabla en los mens emergentes del cuadro de dilogo Juego de registros. Si desea trabajar con sus propias declaraciones SQL, utilice la versin avanzada del cuadro de dilogo Juego de registros. (Consulte Creacin de un juego de registros avanzado escribiendo SQL en la pgina 556.)
Para definir un juego de registros sin escribir SQL:

1 2

En la ventana de documento, abra la pgina que utilizar el juego de registros. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones.

Definicin de fuentes de contenido dinmico 555

En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Juego de registros (consulta) en el men emergente. Aparecer el cuadro de dilogo Juego de registros sencillo. Si est desarrollando un sitio Macromedia ColdFusion MX o ASP.NET, el cuadro de dilogo Juego de registros ser ligeramente distinto del ejemplo que se muestra a continuacin. Si aparece la versin avanzada del cuadro de dilogo Juego de registros, cambie a la versin sencilla haciendo clic en el botn Simple.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo Juego de registros.

Haga clic en el botn Prueba para ejecutar la consulta y comprobar que recupera la informacin deseada. Si ha definido un filtro que utiliza parmetros introducidos por los usuarios, el botn Prueba mostrar el cuadro de dilogo Valor de prueba. Introduzca un valor en el cuadro de texto Valor de prueba y haga clic en Aceptar. Si se crea una instancia del juego de registros, aparecer una tabla mostrando los datos extrados del juego de registros.

Haga clic en Aceptar para aadir el juego de registros a la lista de fuentes de contenido disponibles en el panel Vinculaciones.

Creacin de un juego de registros avanzado escribiendo SQL El cuadro de dilogo Juego de registros avanzado le permite escribir sus propias declaraciones SQL o utilizar el rbol grfico Elementos de base de datos para crear una declaracin SQL.
Nota: Si escribe declaraciones SQL para documentos de tipo ASP.NET, consulte en Escritura de SQL para ASP.NET en la pgina 557 las reglas especficas de ASP.NET.

Para definir un juego de registros escribiendo SQL:

1 2

En la ventana de documento, abra la pgina que utilizar el juego de registros. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones.

556 Captulo 32

En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Juego de registros (consulta) en el men emergente. Aparecer el cuadro de dilogo Juego de registros avanzado. Si est desarrollando un sitio ColdFusion MX o ASP.NET, el cuadro de dilogo Juego de registros ser ligeramente distinto del ejemplo que se muestra a continuacin. Si aparece la versin sencilla del cuadro de dilogo Juego de registros, cambie a la versin avanzada haciendo clic en el botn Avanzada.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones sobre cmo seleccionar las opciones del cuadro de dilogo Juego de registros, haga clic en el botn Ayuda del cuadro de dilogo.

Haga clic en el botn Prueba para ejecutar la consulta y comprobar que recupera la informacin deseada. Si ha definido un filtro que utiliza parmetros introducidos por los usuarios, el botn Prueba mostrar el cuadro de dilogo Valor de prueba. Introduzca un valor en el campo de texto Valor de prueba y haga clic en Aceptar. Si se crea una instancia del juego de registros, aparecer una tabla mostrando los datos procedentes del juego de registros.

Haga clic en Aceptar para aadir el juego de registros a la lista de fuentes de contenido disponibles en el panel Vinculaciones.

Escritura de SQL para ASP.NET Cuando escriba declaraciones SQL en el cuadro de dilogo Conjunto de datos avanzado deber tener en cuenta algunas condiciones especficas de ASP.NET:

Definicin de fuentes de contenido dinmico 557

Parameters La sintaxis que utiliza para hacer referencia a los parmetros vara segn la conexin de base de datos utilizada. Los tipos de conexin son los siguientes:
OLE DB

Al conectar una base de datos que utiliza OLE DB se debe hacer referencia a los parmetros utilizando un signo de interrogacin (?). Por ejemplo:
SELECT * FROM Employees WHERE HireDate > ?
Microsoft SQL Server

Al conectar con Microsoft SQL Server utilizando el Managed Data Provider para SQL Server que se suministra con .NET Framework, todos los parmetros deben tener nombre. Por ejemplo:
SELECT * FROM Employees WHERE HireDate > @hireDate

Insercin de cdigo en declaraciones SQL Al insertar cdigo en declaraciones SQL escritas para ASP.NET, deber introducir todas las cadenas entre comillas ( ) y el cdigo entre parntesis ( ):
SELECT * FROM Employees WHERE HireDate > + (Request.queryString(hireDate))

Conexiones de base de datos en ASP.NET Para obtener ms informacin sobre conexiones de base de datos en ASP.NET, consulte Captulo 8, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 163. Creacin de consultas SQL utilizando el rbol Elementos de base de datos En lugar de escribir manualmente las declaraciones SQL en el cuadro de texto SQL, puede utilizar la interfaz de apuntar y sealar de Elementos de base de datos para crear consultas SQL complejas. El rbol Elementos de base de datos permite seleccionar objetos de base de datos y vincularlos utilizando las clusulas SQL SELECT, WHERE y ORDER BY. Despus de crear una consulta SQL, puede definir las variables utilizando la seccin Variables del cuadro de dilogo. Los ejemplos siguientes describen dos declaraciones SQL y los pasos que debe seguir para crearlas en el rbol Elementos de base de datos del cuadro de dilogo Juego de registros avanzado. Seleccin de una tabla Este ejemplo selecciona todo el contenido de la tabla Empleados. La declaracin SQL que define la consulta aparece como:
SELECT * FROM Employees
Para crear esta consulta:

1 2 3 4

Ample la rama Tablas para ver todas las tablas de la base de datos seleccionada. Seleccione la tabla Employees. Haga clic en el botn Seleccionar. Haga clic en Aceptar para aadir el juego de registros al panel Vinculaciones.

558 Captulo 32

Seleccin de filas especficas de una tabla y ordenacin de los resultados El ejemplo siguiente selecciona dos filas de la tabla Employees y selecciona el tipo de trabajo utilizando una variable que usted debe definir. A continuacin, los resultados se ordenan por nombre de empleado.
SELECT emplNo, emplName FROM Employees WHERE emplJob = 'varJob' ORDER BY emplName
Para crear esta consulta:

1 2

Ample la rama Tablas para ver todas las tablas de la base de datos seleccionada y, a continuacin, ample la tabla Employees para ver las filas individuales de la tabla. Cree la declaracin SQL de la siguiente forma: Seleccione emplNo y haga clic en el botn Seleccionar. Seleccione emplName y haga clic en el botn Seleccionar. Seleccione emplJob y haga clic en el botn Dnde. Seleccione emplName y haga clic en el botn Ordenar por. Site el punto de insercin despus de WHERE emplJob en el rea de texto SQL y escriba ='varJob' (incluido el signo igual). Defina la variable 'varJob' haciendo clic en el botn de signo ms (+) en el rea Variables e introduciendo los siguientes valores en las columnas Nombre, Valor predeterminado y Valor al tiempo de ejecucin: varJob, CLERK, Request("job"). Haga clic en Aceptar para aadir el juego de registros al panel Vinculaciones.

3 4

Definicin de parmetros de URL

Los parmetros de URL almacenan la informacin recuperada que han introducido los usuarios. Para definir un parmetro de URL, cree un vnculo de hipertexto o formulario que utilice el mtodo GET para enviar datos. La informacin se aadir al URL de la pgina solicitada y se comunicar al servidor. Cuando se utilizan variables de URL, la cadena de consulta contiene uno o ms pares de nombre/valor asociados con campos de formulario. Estos pares de nombre/valor se aaden al URL. Antes de comenzar deber transferir un parmetro de URL o formulario al servidor. Para obtener instrucciones, consulte Aspectos bsicos de los parmetros de formulario en la pgina 543.
Para definir un parmetro de URL:

1 2

En la ventana de documento, abra la pgina que utilizar la variable. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones.

Definicin de fuentes de contenido dinmico 559

En el panel Vinculaciones, haga clic en el botn de signo ms (+) y elija una de las siguientes opciones en el men emergente.
Tipos de documento Elemento del men en panel Vinculaciones para variable de URL ASP ColdFusion JSP PHP Variable de peticin > Request.QueryString Variable de URL Variable de peticin Variable de URL

Se mostrar el cuadro de dilogo Variable de URL.

Introduzca el nombre de la variable de URL en el campo de texto y haga clic en Aceptar. El nombre de la variable de URL suele ser el nombre del campo de formulario HTML o del objeto empleado para obtener su valor.

La variable de URL aparecer en el panel Vinculaciones.

Despus de definir la variable de URL puede usar su valor en la pgina seleccionada actualmente. Para obtener ms informacin, consulte Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571.

Definicin de parmetros de formulario

Los parmetros de formulario almacenan informacin recuperada que se incluye en la peticin HTTP de una pgina Web. Si crea un formulario que utiliza el mtodo POST, los datos enviados por el formulario se transferirn al servidor. Antes de comenzar deber transferir un parmetro de formulario al servidor. Para obtener instrucciones, consulte Captulo 31, Almacenamiento y recuperacin de datos para la pgina, en la pgina 541.

560 Captulo 32

Para definir un parmetro de formulario:

1 2 3

En la ventana de documento, abra la pgina que utilizar la variable. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. En el panel Vinculaciones, haga clic en el botn de signo ms (+) y elija una de las siguientes opciones en el men emergente.
Tipos de documento Elemento del men en panel Vinculaciones para variable de formulario ASP ColdFusion JSP PHP Variable de peticin > Request.Form Variable de formulario Variable de peticin Variable de formulario

Se mostrar el cuadro de dilogo Variable de formulario.

Introduzca el nombre de la variable de formulario en el cuadro de dilogo y haga clic en Aceptar. El nombre de la variable de formulario suele ser el nombre del campo de formulario HTML o del objeto empleado para obtener su valor.

El parmetro de formulario aparecer en el panel Vinculaciones.

Despus de definir el parmetro de formulario como una fuente de contenido, puede utilizar su valor en la pgina. Para obtener ms informacin, consulte Captulo 31, Almacenamiento y recuperacin de datos para la pgina, en la pgina 541.

Definicin de variables de sesin

Puede utilizar variables de sesin para almacenar y mostrar informacin mantenida durante la visita (o sesin) de un usuario. El servidor crea un objeto de sesin diferente para cada usuario y lo mantiene durante un perodo de tiempo establecido o hasta que se pone fin al objeto explcitamente. Para obtener ms informacin, consulte Acceso a datos almacenados en variables de sesin en la pgina 546.

Definicin de fuentes de contenido dinmico 561

Dado que las variables de sesin duran toda la sesin y se conservan cuando el usuario se desplaza de una pgina a otra dentro del sitio Web, resultan idneas para almacenar las preferencias del usuario. Las variables de sesin se pueden utilizar para insertar un valor en el cdigo HTML de la pgina, asignar un valor a una variable local o suministrar un valor para evaluar una expresin condicional. Antes de definir las variables de sesin de una pgina deber crearlas en el cdigo fuente. Para obtener instrucciones, consulte las siguientes secciones:

Recogida de los datos enviados por los usuarios en la pgina 542 Acceso a datos almacenados en variables de sesin en la pgina 546
Despus de crear una variable de sesin en el cdigo fuente de la aplicacin Web, puede utilizar Dreamweaver para recuperar su valor y utilizarlo en una pgina Web.
Para definir una variable de sesin predefinida:

Cree una variable de sesin en el cdigo fuente y asgnele un valor. Este ejemplo ASP crea una instancia de una sesin llamada username y le asigna el valor Cornelius:
<% Session(username) = "Cornelius" %>

2 3 4

Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de signo ms (+) y elija Variable de sesin en el men emergente. Introduzca el nombre de la variable definida en el cdigo fuente. En este ejemplo, es username. Haga clic en Aceptar. La variable de sesin aparecer en el panel Vinculaciones.

Despus de definir la variable de sesin puede usar su valor en la pgina. Para obtener ms informacin, consulte Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571.

562 Captulo 32

Definicin de variables de aplicacin

En ASP y ColdFusion, puede utilizar variables de aplicacin para almacenar y mostrar informacin que se mantiene mientras dure la aplicacin y que se conserva de un usuario a otro. La aplicacin dura desde el momento en que el primer usuario solicita un pgina en la aplicacin hasta el momento en que el servidor Web se detiene. (Se denomina aplicacin a todos los archivos de un directorio virtual y sus subdirectorios.) Dado que las variables de aplicacin se mantienen mientras dure la aplicacin y se conservan de un usuario a otro, resultan idneas para almacenar informacin que debe existir para todos los usuarios, como, por ejemplo, la hora y la fecha actuales. El valor de la variable de aplicacin se define en el cdigo de la aplicacin.
Nota: No hay objetos de aplicacin en JSP o PHP.

Para definir una variable de aplicacin para una pgina:

1 2 3 4 5

Abra un documento de tipo dinmico en la ventana de documento. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de signo ms (+) y elija Variable de aplicacin en el men emergente. Introduzca el nombre de la variable definida en el cdigo fuente de la aplicacin. Haga clic en Aceptar. La variable de aplicacin aparecer en el panel Vinculaciones. Despus de definir la variable de aplicacin puede usar su valor en la pgina. Para obtener ms informacin, consulte Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571.

Definicin de variables de servidor

Puede definir variables de servidor como fuentes de contenido dinmico para utilizarlas en una aplicacin Web. Las variables de servidor varan segn el tipo de documento e incluyen variables de formulario, variables de URL, variables de sesin y variables de aplicacin. Para obtener ms informacin sobre estos tipos de variables, consulte las siguientes secciones:

Definicin de parmetros de URL en la pgina 559 Definicin de parmetros de formulario en la pgina 560 Definicin de variables de sesin en la pgina 561 Definicin de variables de aplicacin en la pgina 563

En esta seccin se explica cules son las variables de servidor que puede definir como fuente de contenido para distintos tipos de documentos. Los tipos de documentos y sus secciones correspondientes son:

Definicin de variables de servidor ASP en la pgina 564 Definicin de variables de servidor ColdFusion en la pgina 565 Definicin de variables de servidor JSP en la pgina 566 Definicin de JavaBeans (slo JSP) en la pgina 566

Definicin de fuentes de contenido dinmico 563

Definicin de variables de servidor ASP

Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables Request.ClientCertificates.
Para definir una variable de servidor para una pgina ASP:

Puede definir las siguientes variables de servidor ASP como fuentes de contenido dinmico: y

1 2

Abra el panel Vinculaciones (Ventana > Vinculaciones). Haga clic en el botn de signo ms (+) y elija Variable de peticin en el men emergente. Aparecer el cuadro de dilogo Variable de peticin.

Elija una de las colecciones de peticin en el men emergente Tipo. Por ejemplo, si desea acceder a la informacin de la coleccin Request.ServerVariables, elija ServerVariables. Si desea acceder a la informacin de la coleccin Request.Form, elija Form. Para obtener ms informacin sobre las variables de servidor ASP, haga clic en el botn Ayuda.

Especifique la variable de la coleccin a la que desea obtener acceso. Por ejemplo, si desea obtener acceso a la informacin de la variable Request.ServerVariables("HTTP_USER_AGENT"), introduzca el argumento HTTP_USER_AGENT. Si desea obtener acceso a la informacin de la variable Request.Form("lastname"), introduzca el argumento lastname.

Haga clic en Aceptar. La variable de servidor aparecer en el panel Vinculaciones.

564 Captulo 32

Definicin de variables de servidor ColdFusion Puede definir las siguientes variables de servidor ColdFusion como fuentes de contenido dinmico: cliente, cookie, CGI, servidor y variables locales.
Las variables de cliente asocian

datos a un cliente especfico. Las variables de cliente mantienen el estado de la aplicacin mientras el usuario se desplaza de una pgina a otra de la aplicacin, as como de una sesin a otra. Mantener el estado significa conservar la informacin de una pgina (o sesin) en la siguiente para que la aplicacin recuerde al usuario y las opciones y preferencias anteriores del usuario. acceden a cookies transferidas al servidor por el navegador.

Las variables de cookie

Las variables CGI proporcionan informacin sobre el servidor que ejecuta ColdFusion, el navegador que solicita una pgina y otro tipo de informacin sobre el entorno de procesamiento. A las variables de servidor

pueden acceder todos los clientes y las aplicaciones del servidor. Se mantienen hasta que se detiene el servidor. se crean con la etiqueta CFSET o CFPARAM en una pgina ColdFusion.

Las variables locales

Para definir una variable de servidor para una pgina ColdFusion:

1 2 3

Abra el panel Vinculaciones (Ventana > Vinculaciones). Haga clic en el botn de signo ms (+) y elija la variable de servidor en el men emergente. Introduzca el nombre de la variable. Para obtener ms informacin sobre las entradas de nombre posibles, haga clic en el botn Ayuda.

Haga clic en Aceptar. La variable de servidor ColdFusion aparecer en el panel Vinculaciones.

Para obtener ms informacin, consulte:

Definicin de parmetros de URL en la pgina 559 Definicin de variables de sesin en la pgina 561 Definicin de variables de aplicacin en la pgina 563 Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571

Definicin de variables de servidor PHP

Para definir una variable de servidor para una pgina PHP:

1 2 3 4

Abra el panel Vinculaciones (Ventana > Vinculaciones). Haga clic en el botn de signo ms (+) y elija la variable en el men emergente. Introduzca el nombre de la variable. Haga clic en Aceptar. La variable de servidor PHP aparecer en el panel Vinculaciones. Para obtener ms informacin, consulte Captulo 32, Definicin de parmetros de URL, en la pgina 559, Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571.

Definicin de fuentes de contenido dinmico 565

Definicin de variables de servidor JSP Puede definir una variable de peticin como fuente de contenido dinmico para pginas JSP.
Para definir una variable de peticin para una pgina JSP:

1 2 3 4

Abra el panel Vinculaciones (Ventana > Vinculaciones). Haga clic en el botn de signo ms (+) y elija Variable de peticin en el men emergente. Introduzca el nombre de la variable. Haga clic en Aceptar. La variable de servidor JSP aparecer en el panel Vinculaciones. Para obtener ms informacin, consulte Definicin de parmetros de URL en la pgina 559 y Captulo 33, Adicin de contenido dinmico a pginas Web, en la pgina 571.

Definicin de JavaBeans (slo JSP) Las JavaBeans son elementos de la arquitectura de las aplicaciones JSP multinivel. Las JavaBeans suelen emplearse como parte de un nivel intermedio de lgica empresarial que tiene como misin separar la lgica de presentacin de la lgica de acceso a los datos. En estas aplicaciones, son las JavaBeans (tambin denominadas beans), y no las pginas JSP, las que contienen la lgica que accede directamente a la base de datos. En Dreamweaver, las JavaBeans reciben el tratamiento de fuentes de contenido dinmico para pginas JSP y aparecen en el panel Vinculaciones. En el panel Vinculaciones puede hacer doble clic en JavaBeans para ver sus propiedades y, a continuacin, arrastrar las propiedades a la pgina para crear referencias de datos dinmicos. Tambin puede definir una coleccin JavaBeans (un conjunto de JavaBeans) como fuente de contenido dinmico. Sin embargo, Dreamweaver slo admite regiones repetidas y vinculaciones dinmicas cuando se utilizan colecciones JavaBeans. Las copias de la clase de bean (o el archivo .zip o .jar que contiene la clase de bean) deben residir en las siguientes ubicaciones:

En el sistema que ejecuta Dreamweaver debe residir una copia de la clase de bean en la carpeta
Configuration/classes de Dreamweaver o en la ruta de clases del sistema. (Dreamweaver utiliza esta copia de la clase en tiempo de diseo.)

En el sistema que ejecuta el servidor de aplicaciones JSP, la clase de bean debe residir en la ruta
de clases del servidor de aplicaciones. (El servidor de aplicaciones utiliza esta copia de la clase en tiempo de ejecucin.) La ruta de clases del servidor de aplicaciones vara de un servidor de aplicaciones a otro, pero generalmente se encuentra en una carpeta WEB-INF con una subcarpeta classes/bean. Si Dreamweaver y el servidor de aplicaciones se ejecutan en el mismo sistema y el servidor de aplicaciones utiliza la ruta de clases del sistema (no una ruta de clases interna), puede haber una sola copia de la clase de JavaBeans en la ruta de clases del sistema. Tanto el servidor de aplicaciones como Dreamweaver utilizarn esta copia de la clase. En caso contrario, deber haber copias de la clase de JavaBeans en dos rutas del equipo (como se ha explicado anteriormente). La estructura de carpetas debe coincidir con el paquete de JavaBeans. Por ejemplo, si el paquete de JavaBeans se denomina com.ardvark.myBean, deber estar almacenado en /com/ardvark/ dentro de la ruta de clases o en la carpeta Configuration/classes de Dreamweaver.

566 Captulo 32

Para definir una JavaBean para una pgina JSP:

1 2

Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de signo ms (+) y elija JavaBean en el men emergente. Aparecer el cuadro de dilogo JavaBean.

Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones sobre cmo seleccionar las opciones del cuadro de dilogo JavaBean, haga clic en el botn Ayuda del cuadro de dilogo.

La bean que acaba de definir aparecer en el panel Vinculaciones.

Para definir una coleccin JavaBean para una pgina JSP:

1 2

Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de signo ms (+) y elija Coleccin JavaBean en el men emergente. Aparecer el cuadro de dilogo Coleccin JavaBean.

Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones sobre cmo seleccionar las opciones del cuadro de dilogo JavaBean, haga clic en el botn Ayuda del cuadro de dilogo.

La coleccin JavaBean que acaba de definir aparecer en el panel Vinculaciones.

Definicin de fuentes de contenido dinmico 567

Creacin de un cach de las fuentes de contenido

Puede crear un cach (o almacenar) fuentes de contenido dinmico en una Design Note. De este modo podr trabajar en un sitio aunque no tenga acceso al servidor de bases de datos o aplicaciones que almacena las fuentes de contenido dinmico. La creacin del cach tambin puede acelerar el desarrollo al eliminar el acceso repetido a travs de la red al servidor de bases de datos y aplicaciones. Para crear un cach de las fuentes de contenido, haga clic en el botn de flecha situado en la esquina superior derecha del panel Vinculaciones y seleccione la opcin Cach en el men emergente.

Si realiza cambios en alguna de las fuentes de contenido, deber actualizar el cach haciendo clic en el botn Actualizar (el icono de flecha circular) situado en la esquina superior derecha del panel Vinculaciones. (Ample el panel si no ve el botn.)

Cambio o eliminacin de fuentes de contenido

Puede cambiar o eliminar cualquier fuente de contenido dinmico, es decir, cualquier fuente de contenido que figure en el panel Vinculaciones. Al cambiar o borrar una fuente de contenido del panel Vinculaciones, no se cambia ni se borra ninguna instancia de ese contenido en la pgina. Tan slo se cambia o se borra como posible fuente de contenido para la pgina. Para editar o borrar una instancia del contenido en la pgina, consulte Cambio de contenido dinmico en la pgina 578 y Eliminacin de contenido dinmico en la pgina 578.
Para cambiar una fuente de contenido en el panel Vinculaciones:

1 2 3

En el panel Vinculaciones, haga doble clic en el nombre de la fuente de contenido que desea editar. Realice los cambios en el cuadro de dilogo que aparece. Cuando est satisfecho con los cambios realizados, haga clic en Aceptar.

Para eliminar una fuente de contenido en el panel Vinculaciones:

1 2

En el panel Vinculaciones, seleccione la fuente de contenido de la lista. Haga clic en el botn de signo menos (-).

568 Captulo 32

Copiado de un juego de registros de una pgina a otra

Puede copiar un juego de registros de una pgina a otra dentro de un sitio definido.
Para copiar un juego de registros en otra pgina:

1 2 3 4

Seleccione el juego de registros en el panel Vinculaciones o el panel Comportamientos del servidor. Haga clic con el botn derecho en el juego de registros y elija Copiar en el men emergente. Abra la pgina en la que desea copiar el juego de registros. Haga clic con el botn derecho en el panel Vinculaciones o la barra de herramientas Comportamientos del servidor y elija Pegar en el men emergente.

Definicin de fuentes de contenido dinmico 569

570 Captulo 32

CAPTULO 33 Adicin de contenido dinmico a pginas Web

Despus de definir una o varias fuentes de contenido dinmico, podr utilizarlas para aadir contenido dinmico a la pgina. Las fuentes de contenido pueden incluir una columna de un juego de registros, un valor enviado por un formulario HTML o el valor contenido en un objeto de servidor, entre otros datos. Para obtener ms informacin, consulte Captulo 32, Definicin de fuentes de contenido dinmico, en la pgina 553. En Macromedia Dreamweaver MX, puede colocar contenido dinmico prcticamente en cualquier lugar de la pgina Web o de su cdigo HTML:

Puede colocar contenido dinmico en el punto de insercin. Puede reemplazar una cadena de texto por contenido dinmico. Puede insertarlo en un atributo HTML.
Por ejemplo, el contenido dinmico puede definir el atributo src de una imagen o el atributo value de un campo de formulario. Este captulo contiene las secciones siguientes:

Conversin de texto en contenido dinmico en la pgina 572 Conversin de imgenes en contenido dinmico en la pgina 573 Conversin de atributos HTML en contenido dinmico en la pgina 575 Conversin de parmetros de ActiveX, Flash y de otros objetos en contenido dinmico en la pgina 577

Cambio de contenido dinmico en la pgina 578 Adicin de contenido dinmico

Puede aadir contenido dinmico a una pgina eligiendo una de las fuentes de contenido en el panel Vinculaciones. Dreamweaver insertar un script del lado del servidor en el cdigo fuente de la pgina para indicar al servidor que transfiera los datos desde la fuente de datos hasta el cdigo HTML de la pgina cuando un navegador solicite la pgina. Normalmente existen varias formas de convertir en dinmico un elemento determinado de una pgina. Por ejemplo, para hacer que una imagen sea dinmica, puede utilizar el panel Vinculaciones, el inspector de propiedades o el comando Imagen del men Insertar. En este captulo se describen las formas ms eficaces de hacer que los diversos elementos de pgina sean dinmicos.

571

De forma predeterminada, una pgina HTML slo puede mostrar registros de uno en uno. Para ver los dems registros del juego de registros, puede aadir un vnculo para desplazarse por los registros de uno en uno (consulte Creacin de vnculos de navegacin por conjuntos de registros en la pgina 582) o crear una regin repetida para mostrar ms de un registro en una sola pgina (consulte Visualizacin de mltiples comportamientos en la pgina 586).

Conversin de texto en contenido dinmico

Puede reemplazar el texto existente por texto dinmico o colocar texto dinmico en un determinado punto de insercin en la pgina. El texto dinmico adopta el formato de texto aplicado al texto ya existente o al punto de insercin. Por ejemplo, si un estilo CSS (Hoja de estilos en cascada) afecta al texto seleccionado, el contenido dinmico que lo reemplace tambin se ver afectado por dicho estilo. Tambin puede aadir o cambiar el formato de texto del contenido dinmico mediante cualquiera de las herramientas de formato de texto de Dreamweaver.Aplicacin de elementos tipogrficos y de disposicin de pgina a los datos dinmicos en la pgina 580. Tambin puede aplicar formato de datos al texto dinmico. Por ejemplo, si los datos son fechas, puede especificar un formato de fecha determinado, como, por ejemplo, 04/17/00 para los visitantes de los Estados Unidos, o 17/04/00 para los visitantes europeos. Aplicacin de formatos a los datos en la pgina 580. Puede reemplazar texto normal de la pgina por texto dinmico o aadir texto dinmico en un determinado punto de insercin en la pgina.
Para aadir texto dinmico:

1 2

Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones. Asegrese de que en el panel Vinculaciones est la fuente de contenido que desea utilizar. La fuente de contenido debe contener texto normal (texto ASCII). El texto normal tambin incluye HTML. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen sus necesidades, haga clic en el botn de signo ms (+) para definir una nueva fuente de contenido. Consulte Captulo 32, Definicin de fuentes de contenido dinmico, en la pgina 553.

En la vista Diseo, seleccione texto en la pgina o haga clic en el lugar en el que desea aadir texto dinmico.

572 Captulo 33

En el panel Vinculaciones, seleccione la fuente de contenido de la lista. Si selecciona un juego de registros, especifique la columna que desea incluir en el juego de registros.

Haga clic en Insertar o arrastre la fuente de contenido hasta la pgina.

El contenido dinmico aparecer en la pgina si est trabajando en vista Diseo con Live Data activado (Ver > Live Data). Si Live Data est desactivado, aparecer un marcador de posicin. (Si ha seleccionado texto en la pgina, el marcador de posicin reemplazar al texto seleccionado.) El marcador de posicin de contenido de un juego de registros utiliza la sintaxis {RecordsetName.ColumnName}, donde Recordset es el nombre del juego de registros y ColumnName, el nombre de la columna elegida del juego de registros. En ocasiones, la longitud de los marcadores de posicin de texto dinmico distorsiona la disposicin de la pgina en la ventana de documento. Para resolver este problema, utilice llaves vacas a modo de marcadores de posicin.
Para crear marcadores de posicin de texto dinmico:

1 2 3

Elija Edicin > Preferencias > Elementos invisibles o Dreamweaver > Preferencias > Elementos invisibles (Mac OS X). En el men emergente Mostrar texto dinmico como, elija { }. Haga clic en Aceptar.

Conversin de imgenes en contenido dinmico

Puede convertir las imgenes de la pgina en contenido dinmico. Por ejemplo, supongamos que disea una pgina que muestra artculos a la venta en una subasta benfica. Cada pgina incluira un texto descriptivo y una fotografa del artculo en cuestin. El diseo general de la pgina sera el mismo para todos los artculos, mientras que lo nico que cambiara sera la fotografa (y el texto descriptivo).

Adicin de contenido dinmico a pginas Web 573

Para hacer que una imagen sea dinmica:

Con la pgina abierta en la vista Diseo (Ver > Diseo), site el punto de insercin en el lugar de la pgina en el que desea que aparezca la imagen y luego seleccione Insertar > Imagen. Aparecer el cuadro de dilogo Seleccionar origen de imagen.

En Macintosh, el cuadro de dilogo es distinto:

Haga clic en la opcin Fuentes de datos (Windows) o en el botn Fuente de datos (Macintosh). Aparecer una lista de fuentes de contenido.

574 Captulo 33

Seleccione una fuente de contenido de la lista. La fuente de contenido debe ser un juego de registros que contenga las rutas de acceso a los archivos de imagen. En funcin de la estructura de archivos del sitio, las rutas pueden ser absolutas, relativas al documento o relativas a la raz.
Nota: Dreamweaver MX no admite actualmente imgenes binarias almacenadas en una base de datos.

Si no aparece ningn juego de registros en la lista, o si los conjuntos de registros disponibles no satisfacen sus necesidades, defina un nuevo juego de registros. Para obtener instrucciones, consulte Definicin de un juego de registros en la pgina 554.
4

Haga clic en Aceptar.

Conversin de atributos HTML en contenido dinmico

Puede cambiar dinmicamente la apariencia de una pgina vinculando atributos HTML a los datos. Por ejemplo, puede cambiar la imagen de fondo de una tabla vinculando el atributo background de la tabla a un juego de registros. Puede vincular atributos HTML con el panel Vinculaciones o con el inspector de propiedades. A continuacin se describen los dos mtodos.
Para hacer que los atributos HTML sean dinmicos con el panel Vinculaciones:

1 2

Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones. Asegrese de que en el panel Vinculaciones est el contenido de datos que desea utilizar. La fuente de contenido debe contener datos adecuados para el atributo HTML que desea vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen sus necesidades, haga clic en el botn de signo ms (+) para definir una nueva fuente de datos. Para obtener instrucciones, consulte Captulo 32, Definicin de fuentes de contenido dinmico, en la pgina 553.

En la vista Diseo, seleccione un objeto HTML. Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la etiqueta <table> en el selector de etiquetas situado en la parte inferior izquierda de la ventana de documento.

4 5 6

En el panel Vinculaciones, seleccione una fuente de contenido de la lista. En el cuadro Vincular con, seleccione un atributo HTML del men emergente. Haga clic en Vincular.

La prxima vez que se ejecute la pgina en el servidor de aplicaciones, el valor de la fuente de datos se asignar al atributo HTML.
Para hacer que los atributos HTML sean dinmicos con el inspector de propiedades:

En la vista Diseo, seleccione un objeto HTML y abra el inspector de propiedades (Ventana > Propiedades). Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la etiqueta <table> en el selector de etiquetas situado en la parte inferior izquierda de la ventana de documento.

Adicin de contenido dinmico a pginas Web 575

Si el atributo que desea vincular tiene un icono de carpeta a su lado en la vista Estndar del inspector de propiedades, haga clic en el icono de carpeta para abrir un cuadro de dilogo de seleccin de archivo y luego haga clic en la opcin Fuentes de datos para ver una lista de fuentes de datos. Contine con el paso 6. Si el atributo que desea vincular no tiene un icono de carpeta a su lado en la vista Estndar, haga clic en la ficha Lista (la ficha situada ms abajo de las dos) en la parte izquierda del inspector. Aparecer la vista Lista del inspector de propiedades.

Si el atributo que desea vincular no aparece en la vista Lista, haga clic en el botn de signo ms (+) y luego introduzca el nombre del atributo o haga clic en el pequeo botn de flecha y seleccione el atributo del men emergente. Para hacer que el valor del atributo sea dinmico, haga clic en el atributo y luego en el icono de rayo o icono de carpeta situado al final de la fila del atributo. Si ha hecho clic en el icono de rayo, aparecer una lista de fuentes de datos. He aqu un ejemplo:

Si ha hecho clic en el icono de carpeta, aparecer un cuadro de dilogo de seleccin de archivo. Haga clic en la opcin Fuentes de datos para ver una lista de fuentes de contenido.

576 Captulo 33

Seleccione una fuente de contenido en la lista de fuentes de contenido. La fuente de contenido debe tener datos adecuados para el atributo HTML que desea vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen sus necesidades, defina una nueva fuente de contenido. Para obtener instrucciones, consulte Captulo 31, Almacenamiento y recuperacin de datos para la pgina, en la pgina 541.

Haga clic en Aceptar.

La prxima vez que se ejecute la pgina en el servidor de aplicaciones, el valor de la fuente de datos se asignar al atributo HTML.

Conversin de parmetros de ActiveX, Flash y de otros objetos en contenido dinmico

Puede convertir en dinmicos los parmetros de applets Java y plug-ins, as como los parmetros de objetos ActiveX, Flash, Shockwave, Director y Generator. Antes de comenzar, asegrese de que los campos del juego de registros contienen datos adecuados para los parmetros del objeto que desea vincular.
Para hacer que los parmetros de un objeto sean dinmicos:

En la vista Diseo, seleccione un objeto en la pgina y abra el inspector de propiedades (Ventana > Propiedades). A continuacin se muestra el inspector de propiedades de un objeto Flash:

Haga clic en el botn Parmetros. Aparecer el cuadro de dilogo Parmetros.

3 4

Si el parmetro deseado no aparece en la lista, haga clic en el botn de signo ms (+) e introduzca un nombre de parmetro en la columna Parmetro. Haga clic en la columna Valor correspondiente al parmetro y luego haga clic en el icono de rayo para especificar un valor dinmico. Aparecer una lista de fuentes de datos.

Adicin de contenido dinmico a pginas Web 577

Seleccione una fuente de datos de la lista. La fuente de datos debe contener datos adecuados para el parmetro de objeto que desea vincular. Si no aparecen fuentes de datos en la lista, o si las fuentes de datos disponibles no satisfacen sus necesidades, defina una nueva fuente de datos. Para obtener instrucciones, consulte Captulo 32, Definicin de fuentes de contenido dinmico, en la pgina 553.

Haga clic en Aceptar.

Cambio de contenido dinmico

Puede cambiar el contenido dinmico de la pgina mediante la edicin del comportamiento de servidor que proporciona dicho contenido. Por ejemplo, puede editar un comportamiento de servidor de un juego de registros para que proporcione ms registros a la pgina. El contenido dinmico de una pgina aparece en el panel Comportamientos del servidor. Por ejemplo, si aade un juego de registros a la pgina, ste se incorporar a la lista del panel Comportamientos del servidor de la siguiente forma:
Recordset(myRecordset)

Si aade otro juego de registros a la pgina, el panel Comportamientos del servidor mostrar ambos conjuntos de registros de la siguiente forma:
Recordset(mySecondRecordset) Recordset(myRecordset)

Para editar un comportamiento de servidor que proporciona contenido dinmico, haga doble clic en el comportamiento de servidor en el panel Comportamientos del servidor. Aparecer el mismo cuadro de dilogo que emple para definir la fuente de datos original. Realice los cambios deseados en el cuadro de dilogo y haga clic en Aceptar. Tambin puede utilizar el inspector de propiedades para editar conjuntos de registros en la pgina. Abra el inspector de propiedades (Ventana > Propiedades) y luego seleccione el juego de registros en el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). A continuacin se muestra el inspector de propiedades para un juego de registros:

Si edita un juego de registros en la ventana Live Data con la opcin Actualizar automticamente no seleccionada, deber actualizar la pgina para ver los cambios. Para actualizar la pgina, haga clic en el botn Actualizar o elija Ver > Actualizar Live Data.

Eliminacin de contenido dinmico

Despus de aadir contenido dinmico a una pgina, puede eliminarlo seleccionando el contenido dinmico en la pgina y presionando Suprimir. Tambin puede eliminarlo seleccionando el contenido dinmico en el panel Comportamientos del servidor y haciendo clic en el botn de signo menos (-).
Nota: Esta operacin elimina de la pgina el script del lado del servidor que recupera el contenido dinmico de la base de datos. No borra los datos de la base de datos.

578 Captulo 33

CAPTULO 34 Visualizacin de registros de base de datos

Cuando se muestran registros de la base de datos se recupera la informacin almacenada en una base de datos o en otra fuente de contenido y se presenta esa informacin en una pgina Web. Macromedia Dreamweaver MX ofrece numerosos mtodos para mostrar contenido dinmico y proporciona varios comportamientos de servidor incorporados que permiten mejorar la presentacin del contenido dinmico y facilitan a los usuarios la bsqueda y la navegacin por la informacin que devuelve la base de datos. Dreamweaver proporciona los siguientes comportamientos de servidor y elementos de formato que mejoran la visualizacin de los datos dinmicos:
Formatos Permiten aplicar distintos tipos de valores numricos, monetarios y de porcentaje al texto dinmico. Regin repetida

Estos comportamientos de servidor permiten mostrar mltiples elementos devueltos por una consulta de base de datos, as como especificar el nmero de registros que se muestran por pgina. Estos comportamientos de servidor permiten insertar elementos de navegacin para que los usuarios puedan pasar al juego de registros siguiente o anterior. Por ejemplo, si elige mostrar 10 registros por pgina utilizando el objeto de servidor Regin repetida y el juego de registros devuelve 40 registros, podr navegar por los registros de diez en diez.

Navegacin por juego de registros

Barra de navegacin por juego de registros

Estos comportamientos de servidor permiten incluir un contador que muestra a los usuarios dnde se encuentran dentro un juego de registros en relacin con el nmero total de registros devueltos.

Mostrar regin Estos comportamientos de servidor permiten mostrar u ocultar los elementos de la pgina segn la relevancia de los registros mostrados actualmente. Por ejemplo, si un usuario ha accedido al ltimo registro de un juego de registros, puede ocultar el vnculo siguiente y mostrar nicamente el vnculo anterior.

Este captulo contiene las secciones siguientes:

Aplicacin de elementos tipogrficos y de disposicin de pgina a los datos dinmicos en la

pgina 580

Aplicacin de formatos a los datos en la pgina 580 Creacin de vnculos de navegacin por conjuntos de registros en la pgina 582 Visualizacin y ocultacin de registros segn los resultados del juego de registros en la
pgina 585

Visualizacin de mltiples comportamientos en la pgina 586

579

 Creacin de un control Web Cuadrcula de datos o Lista de datos de ASP.NET en la

pgina 591

Creacin de un contador de registros en la pgina 588 Aplicacin de elementos tipogrficos y de disposicin de pgina a los datos dinmicos
Dreamweaver ofrece amplias posibilidades para presentar datos dinmicos en una pgina estructurada y aplicar formato tipogrfico utilizando HTML y CSS. Para aplicar formatos a los datos dinmicos de Dreamweaver, formatee tablas y marcadores de posicin para los datos dinmicos utilizando las herramientas de formato de Dreamweaver. Cuando se inserten los datos procedentes de su fuente, adoptarn automticamente el formato de fuente, prrafo y tabla que haya especificado. Para obtener informacin sobre las funciones de formato de Dreamweaver y cmo aplicarlas a los elementos de datos dinmicos, consulte Captulo 16, Presentacin de contenido en tablas, en la pgina 249 y Captulo 19, Insercin y aplicacin de formato al texto, en la pgina 297.

Aplicacin de formatos a los datos

Dreamweaver incorpora varios formatos de datos predefinidos que puede aplicar a elementos de datos dinmicos. Los estilos de formato de datos incluyen formatos de fecha y hora, moneda, nmero y porcentaje. Por ejemplo, si el precio de un artculo de un juego de registros es 10,989, puede mostrarlo en la pgina como $10,99 seleccionando el formato Divisa: 2 decimales de Dreamweaver. Este formato toma un nmero y lo muestra con dos decimales. Si el nmero tiene ms de dos cifras decimales, el formato de datos se redondea con el decimal ms cercano. Si no tiene decimales, el formato de datos aade el separador decimal y dos ceros.
Para aplicar formatos de datos al contenido dinmico:

1 2 3

Seleccione el contenido dinmico en la ventana Live Data o en su marcador de posicin en la ventana de documento. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de flecha abajo en la columna Formato. Si la flecha abajo no es visible, ample el panel. En el men emergente Formato, seleccione la categora de formato de datos que desee. Asegrese de que el formato de datos es adecuado para el tipo de datos que est formateando. Por ejemplo, los formatos de divisa slo funcionan con datos dinmicos compuestos por nmeros. Asimismo, no podr aplicar ms de un formato a los mismos datos.

Compruebe que el formato se ha aplicado correctamente obteniendo una vista previa de la pgina en la ventana Live Data o en un navegador.

580 Captulo 34

Personalizacin de los formatos de datos existentes

Puede personalizar los formatos de datos existentes en Dreamweaver o crear los suyos propios.
Para personalizar un formato de datos:

1 2 3

Abra una pgina que contenga datos dinmicos en la vista Diseo. Seleccione los datos dinmicos cuyo formato desea personalizar. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Se resaltar el elemento de datos vinculados cuyo texto dinmico ha seleccionado. Haga clic en la flecha abajo en la columna Formato para ampliar el men emergente de formatos de datos disponibles. Si la flecha abajo no es visible, ample el panel. Seleccione Editar lista de formatos en el men emergente. Aparecer el cuadro de dilogo Editar lista de formatos. Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Creacin de formatos de datos Puede crear formatos de datos que se ajusten a cualquier tipo de datos dinmicos que desee mostrar.
Para crear un nuevo formato de datos:

1 2 3

Abra una pgina que contenga datos dinmicos en la vista Diseo. Seleccione los datos dinmicos para los que desea crear un formato personalizado. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones y haga clic en la flecha abajo en la columna Formato. Si la flecha abajo no es visible, ample el panel. Seleccione Editar lista de formatos en el men emergente. Aparecer el cuadro de dilogo Editar lista de formatos. Haga clic en el botn de signo ms (+) y seleccione un tipo de formato. Defina el formato y haga clic en Aceptar. Introduzca un nombre para el nuevo formato en la columna Nombre. Haga clic en Aceptar para cerrar el cuadro de dilogo.

5 6 7 8

Visualizacin de registros de base de datos 581

Creacin de vnculos de navegacin por conjuntos de registros

Los vnculos de navegacin por conjuntos de registros permiten al usuario desplazarse de un registro al siguiente o de un juego de registros al siguiente. Por ejemplo, despus de disear una pgina para que muestre cinco registros a la vez, puede aadir vnculos tales como Siguiente o Anterior para permitir que los usuarios vean los cinco registros anteriores o siguientes. Dreamweaver permite crear cuatro tipos de vnculos de navegacin para desplazarse por un juego de registros: Primero, Anterior, Siguiente y ltimo. Una pgina puede contener un nmero cualquiera de estos vnculos, siempre y cuando todos se refieran a un nico juego de registros. No puede aadir vnculos para desplazarse por un segundo juego de registros en la misma pgina.
Nota: Microsoft ASP.NET denomina conjunto de registros (DataSet) al juego de registros. Si trabaja con documentos de tipo ASP.NET, los cuadros de dilogo y las opciones de men especficos de ASP.NET utilizan la etiqueta Conjunto de datos. La documentacin de Dreamweaver se refiere genricamente a ambos tipos como juegos de registros, aunque utiliza conjunto de datos cuando describe especficamente funciones de ASP.NET.

Los vnculos de navegacin por conjuntos de registros requieren los siguientes elementos dinmicos:

Un juego de registros por donde navegar. Contenido dinmico en la pgina para mostrar el registro o registros. Texto o imgenes en la pgina que sirvan como barra de navegacin en la que hacer clic. Un conjunto de comportamientos de servidor "Mover a registro" para desplazarse por el juego de registros.

Puede aadir los dos ltimos elementos empleando el objeto de servidor Barra de navegacin por registros o aadirlos por separado utilizando las herramientas de diseo de Dreamweaver y el panel Comportamientos del servidor. Creacin de una barra de navegacin utilizando el comportamiento de servidor Barra de navegacin por juego de registros Puede crear una barra de navegacin por el juego de registros en una sola operacin utilizando el comportamiento de servidor Barra de navegacin por juego de registros. El objeto de servidor aade los siguientes elementos a la pgina:

Una tabla HTML con vnculos de texto o imgenes. Un conjunto de comportamientos de servidor "Mover a". Un conjunto de comportamientos de servidor "Mostrar regin".
La versin de texto de Barra de navegacin por juego de registros tiene este aspecto:

La versin de imagen de Barra de navegacin por juego de registros tiene este aspecto:

Antes de colocar la barra de navegacin en la pgina, asegrese de que sta contiene un juego de registros por donde navegar y una disposicin de pgina para mostrar los registros.

582 Captulo 34

Tras colocar la barra de navegacin en la pgina, puede utilizar las herramientas de diseo de Dreamweaver para personalizar la barra como estime oportuno. Tambin puede editar los comportamientos de servidor Mover a y Mostrar regin haciendo doble clic en ellos en el panel Comportamientos del servidor. Si desea crear la barra de navegacin elemento por elemento utilizando las herramientas de diseo de Dreamweaver y el panel Comportamientos del servidor, consulte Creacin de una barra de navegacin por el juego de registros personalizada en la pgina 583.
Para crear la barra de navegacin por el juego de registros con el objeto de servidor:

1 2

En la vista Diseo, site el punto de insercin en el lugar de la pgina donde desea que aparezca la barra de navegacin. Abra el cuadro de dilogo Barra de navegacin por juego de registros (Insertar > Objetos de aplicacin > Barra de navegacin por juego de registros). Aparecer el cuadro de dilogo Insertar barra de navegacin por juego de registros.

3 4

Seleccione el juego de registros por el que desea navegar en el men emergente Juego de registros. En la seccin Mostrar utilizando, seleccione el formato para mostrar los vnculos de navegacin en la pgina. La opcin Texto coloca vnculos de texto en la pgina, mientras que Imgenes permite utilizar imgenes grficas como vnculos. En la versin de imagen de la barra de navegacin, Dreamweaver utiliza sus propios archivos de imagen. Puede reemplazar estas imgenes por sus propios archivos de imagen despus de colocar la barra en la pgina.

Haga clic en Aceptar. Dreamweaver crea una tabla que contiene los vnculos de texto o imgenes que permiten al usuario desplazarse por el juego de registros seleccionado al hacer clic en ellos. Cuando aparece el primer registro del juego de registros, quedarn ocultos los vnculos o imgenes "Primero" y "Anterior". Cuando aparece el ltimo registro del juego de registros, quedarn ocultos los vnculos o imgenes "Siguiente" y "ltimo". Puede personalizar la disposicin de la barra de navegacin utilizando las herramientas de diseo de Dreamweaver.

Creacin de una barra de navegacin por el juego de registros personalizada Si lo desea, puede crear una barra de navegacin por el juego de registros que utilice estilos de disposicin y formato ms complejos que los que ofrece la sencilla tabla del objeto de servidor Barra de navegacin por juego de registros. Para ello, cree en primer lugar los vnculos de navegacin necesarios en texto o imgenes, sitelos en la pgina en vista Diseo y asigne comportamientos individuales de servidor a cada vnculo de navegacin.

Visualizacin de registros de base de datos 583

Los comportamientos individuales de servidor que puede asignar a los vnculos de navegacin son:

Mover a la primera pgina Mover a la ltima pgina Mover a la siguiente pgina Mover a la pgina anterior

Si prefiere utilizar el objeto de servidor Barra de navegacin por juego de registros de Dreamweaver para crear una barra de navegacin, consulte Creacin de una barra de navegacin utilizando el comportamiento de servidor Barra de navegacin por juego de registros en la pgina 582. Tareas de diseo de la barra de navegacin Para crear una barra de navegacin personalizada, comience creando su representacin visual con las herramientas de diseo de pginas de Dreamweaver. No es preciso que cree un vnculo para la cadena de texto o la imagen. Dreamweaver se encargar de eso. La pgina para la que crea la barra de navegacin debe contener un juego de registros por donde navegar. Consulte Definicin de un juego de registros en la pgina 554 para obtener ms informacin. Una barra de navegacin por el juego de registros podra tener este aspecto, con los botones de vnculos creados con imgenes u otros elementos de contenido.

Despus de aadir un juego de registros a la pgina y de crear una barra de navegacin, deber aplicar comportamientos individuales de servidor a cada elemento de navegacin. Por ejemplo, una barra de navegacin por el juego de registros contiene representaciones de los siguientes vnculos enlazados con el comportamiento adecuado:
Vnculo de navegacin Ir a la primera pgina Ir a la pgina anterior Ir a la siguiente pgina Ir a la ltima pgina Comportamiento de servidor Mover a la primera pgina Mover a la pgina anterior Mover a la siguiente pgina Mover a la ltima pgina

Para asignar comportamientos de servidor a vnculos de navegacin por registros:

1 2

En la vista Diseo, seleccione la cadena de texto o imagen de la pgina que desea utilizar como vnculo de navegacin por el juego de registros. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+).

584 Captulo 34

Elija Recorrer juego de registros en el men emergente y, a continuacin, seleccione entre los comportamientos de servidor mostrados uno que sea adecuado para ese vnculo. Si el juego de registros contiene un gran nmero de registros, el comportamiento de servidor Mover al ltimo registro puede tardar bastante tiempo en ejecutarse cuando el usuario haga clic en el vnculo.

4 5

En el men emergente Juego de registros, seleccione el juego de registros que contiene los registros. Haga clic en Aceptar.

Visualizacin y ocultacin de registros segn los resultados del juego de registros

Dreamweaver incluye una serie de comportamientos de servidor que permiten mostrar u ocultar una regin segn los resultados que devuelva el juego de registros. Por ejemplo, en una pgina que utilice los vnculos de registros Anterior y Siguiente para desplazarse por una pgina de resultados, puede especificar que el vnculo de registros Anterior aparezca en todas las pginas de resultados salvo la primera (que no tiene resultados anteriores), y que el vnculo de registros Siguiente aparezca en todas las pginas salvo en la ltima (que no tiene resultados siguientes). Tambin puede especificar que una regin se muestre u oculte en funcin de si el juego de registros est vaco o no. Si un juego de registros est vaco (por ejemplo, no se han encontrado registros que coincidan con la consulta), puede mostrar un mensaje que informe al usuario sobre esta circunstancia. Este mensaje puede resultar especialmente til si crea pginas de bsqueda que se basen en los trminos de bsqueda introducidos por el usuario para volver a ejecutar consultas. Del mismo modo, puede mostrar un mensaje de error si se produce un problema al conectar con una base de datos o si el nombre y la contrasea de un usuario no coinciden con los que reconoce el servidor. Los comportamientos de servidor Mostrar regin son:

1 2 3 4

Mostrar si el juego de registros est vaco Mostrar si el juego de registros no est vaco Mostrar si es la primera pgina Mostrar si no es la primera pgina Mostrar si es la ltima pgina Mostrar si no es la ltima pgina

Para mostrar una regin slo cuando sea necesaria:

En la vista Diseo, seleccione en la pgina la regin que se debe mostrar u ocultar. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+). Elija Mostrar regin del men emergente y luego seleccione uno de los comportamientos de servidor incluidos en la lista. Haga clic en Aceptar.

Visualizacin de registros de base de datos 585

Visualizacin de mltiples comportamientos

El comportamiento de servidor Repetir regin permite mostrar mltiples registros de un juego en una pgina. Cualquier seleccin de datos dinmicos puede convertirse en una regin repetida. Sin embargo, las regiones ms habituales son una tabla, una fila o una serie de filas de tabla. El ejemplo siguiente ilustra cmo se aplica el comportamiento de servidor Repetir regin a la fila de una tabla y especifica que se muestren nueve registros por pgina. La fila muestra cuatro registros distintos: ciudad, estado, direccin y cdigo postal.

Para crear una tabla como la mostrada deber crear una tabla con contenido dinmico y aplicar el comportamiento de servidor Repetir regin a la fila de la tabla con contenido dinmico. Cuando el servidor de aplicaciones procesa la pgina, la fila se repite el nmero de veces especificado en el objeto de servidor Repetir regin con un registro distinto insertado en cada nueva fila. La pgina para la que crea la barra de navegacin debe contener un juego de registros por donde navegar. Para obtener ms informacin, consulte Definicin de un juego de registros en la pgina 554.
Para crear una regin repetida:

En la vista Diseo, seleccione una regin que incluya contenido dinmico. La seleccin puede ser una tabla, una fila de una tabla o incluso un prrafo de texto. Para seleccionar de forma precisa una regin de la pgina, puede utilizar el selector de etiquetas que se encuentra en la esquina izquierda de la ventana de documento. Por ejemplo, si la regin es una fila de una tabla, haga clic dentro de la fila en la pgina y luego haga clic en la etiqueta <tr> situada en el extremo derecho del selector de etiquetas para seleccionar la fila de la tabla.

Elija Ventana > Comportamientos del servidor para mostrar el panel Comportamientos del servidor.

586 Captulo 34

Haga clic en el botn de signo ms (+) y seleccione Repetir regin. Aparecer el cuadro de dilogo Repetir regin.

4 5 6

Seleccione el nombre del juego de registros que desea utilizar en el men emergente. Seleccione el nmero de registros que desea mostrar por pgina. Haga clic en Aceptar. En la ventana de documento aparecer un contorno delgado de tabuladores de color gris alrededor de la regin repetida. En la ventana Live Data (Ver > Live Data), el contorno gris desaparecer y la seleccin se ampliar para mostrar el nmero de registros que haya especificado.

Creacin de una tabla con un comportamiento de servidor Repetir regin

El objeto de servidor Tabla dinmica permite crear una tabla con contenido dinmico y aplicar el comportamiento Repetir regin desde un solo cuadro de dilogo. Este objeto de servidor resulta especialmente til si simultneamente rellena una tabla de contenido dinmica a partir del juego de registros y aplica el comportamiento de servidor Repetir regin.
Nota: El objeto de servidor Tabla dinmica no est disponible cuando se utilizan documentos de tipo ASP.NET. Para crear una tabla con contenido dinmico y regiones repetidas deber insertar manualmente la tabla, insertar contenido dinmico desde el panel Vinculacin de datos y, si es necesario, aplicar un comportamiento de servidor de regin repetida. Para obtener ms informacin, consulte Visualizacin de mltiples comportamientos en la pgina 586.

Para crear una tabla dinmica:

Elija Insertar > Objetos de aplicacin > Tabla dinmica para mostrar el cuadro de dilogo Tabla dinmica. Aparecer el cuadro de dilogo Tabla dinmica.

2 3

Seleccione el juego de registros que desea utilizar en el men emergente Juego de registros. Seleccione el nmero de registros que desea mostrar por pgina.

Visualizacin de registros de base de datos 587

En este momento puede introducir valores para el borde de la tabla y el relleno y el espaciado de las celdas. El cuadro de dilogo Tabla dinmica conserva los valores introducidos para los bordes de la tabla y el relleno y el espaciado de las celdas. Si trabaja en un proyecto que requerir varias tablas dinmica con el mismo aspecto, puede introducir los valores de disposicin de la tabla, lo que permitir simplificar el desarrollo de las pginas. Puede ajustar estos valores despus de insertar la tabla utilizando el inspector de propiedades de tablas.

Haga clic en Aceptar. Se insertarn en la pgina una tabla y los marcadores de posicin del contenido dinmico definido en su juego de registros asociado.

En este ejemplo, el juego de registros contiene cuatro registros: FIRSTNAME, LASTNAME, TITLE y DEPARTMENT. La fila de encabezado de la tabla se llena con los nombres de cada elemento de registro. Puede editar los encabezados utilizando el texto descriptivo que desee o reemplazarlos por imgenes representativas.

Creacin de un contador de registros

Los contadores de registros dan a los usuarios un punto de referencia cuando navegan por una serie de registros. Los contadores de registros suelen mostrar el nmero total de registros devuelto y los registros actuales que se estn viendo. Por ejemplo, si un juego de registros devuelve 40 registros individuales y se muestran ocho registros por pgina, el contador de registros de la primera pgina indicar Mostrando registros 1-8 de 40. Para crear un contador de registros para una pgina deber crear primero un juego de registros para la pgina, una disposicin de pgina adecuada para el contenido dinmico y una barra de navegacin por el juego de registros. Para obtener ms informacin sobre cmo crear estos elementos y aadirlos a una pgina, consulte las secciones siguientes:

Definicin de un juego de registros en la pgina 554 Creacin de vnculos de navegacin por conjuntos de registros en la pgina 582 Visualizacin de mltiples comportamientos en la pgina 586 Creacin de una tabla con un comportamiento de servidor Repetir regin en la pgina 587

Cuando tenga los elementos anteriores en la pgina podr crear un contador de registros.

588 Captulo 34

Creacin de un contador de registros utilizando el objeto Estado de navegacin por juego de registros El objeto Estado de navegacin por juego de registros crea una entrada de texto en la pgina para mostrar el estado del registro actual.
Para utilizar el objeto de servidor Estado de navegacin por juego de registros:

1 2

Coloque el cursor donde desee insertar el contador de registros. Elija Insertar > Objetos de aplicacin > Estado de navegacin por juego de registros. Aparecer el cuadro de dilogo Insertar estado de navegacin por juego de registros.

Seleccione el juego de registros que desea utilizar en el men emergente Juego de registros.
3

Haga clic en Aceptar. El objeto de servidor Insertar estado de navegacin por juego de registros inserta un contador de registros de texto similar al siguiente:

Puede utilizar las herramientas de diseo de pginas de Dreamweaver para personalizar el contador de registros. Cuando el contador se ve en la ventana Live Data o en un navegador, tiene un aspecto similar al que se muestra a continuacin:

Creacin de contadores de registros personalizados Puede utilizar los comportamientos individuales de contadores de registros para crear contadores de registros personalizados. Estos contadores de registros ofrecen posibilidades ms avanzadas que la sencilla tabla de una fila que inserta el objeto de servidor Estado de navegacin por juego de registros. Puede organizar los elementos de diseo de varias formas creativas y aplicar un comportamiento de servidor adecuado a cada elemento. Puede crear un contador de registros sencillo utilizando el objeto Estado de navegacin por juego de registros. Este objeto de servidor inserta un contador de registros completo al que puede aplicar formato de texto utilizando las herramientas de diseo de pginas de Dreamweaver. Los comportamientos de servidor Recuento de registros son:

Mostrar el nmero de registro inicial Mostrar el nmero de registro final Mostrar el total de registros
Visualizacin de registros de base de datos 589

Para crear un contador de registros personalizado para una pgina deber crear primero un juego de registros para la pgina, una disposicin de pgina adecuada para el contenido dinmico y una barra de navegacin por el juego de registros. Para obtener ms informacin sobre cmo crear estos elementos y aadirlos a una pgina, consulte las secciones siguientes:

Definicin de un juego de registros en la pgina 554 Creacin de vnculos de navegacin por conjuntos de registros en la pgina 582 Visualizacin de mltiples comportamientos en la pgina 586 Creacin de una tabla con un comportamiento de servidor Repetir regin en la pgina 587

Cuando tenga los elementos anteriores en la pgina podr crear un contador de registros personalizado. Este ejemplo crea un contador de registros similar al creado en la seccin anterior Creacin de un contador de registros utilizando el objeto Estado de navegacin por juego de registros en la pgina 589. El contador de registros de este ejemplo aparecer como: Displaying records StartRow thru EndRow of RecordSet.RecordCount. En este ejemplo, el texto en fuente san-serif representa los marcadores de posicin del contador de registros que se insertarn en la pgina.
Para crear un contador de registros personalizado:

En la vista Diseo, escriba el texto del contador en la pgina. Puede introducir el texto que desee.
Displaying records thru of .

2 3 4

Site el punto de insercin al final de la cadena de texto. Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). Haga clic en el botn de signo ms (+) de la esquina superior izquierda y haga clic en Mostrar contador de registros. En este submen, seleccione Mostrar el total de registros. El comportamiento Mostrar el total de registros se inserta en la pgina y un marcador de posicin se inserta donde estaba el punto de insercin. La cadena de texto deber aparecer ahora como:
Displaying records thru of {Recordset1.RecordCount}.

Site el punto de insercin detrs de la palabrarecords y seleccione Mostrar nmero de contador de registros inicial en Comportamientos del servidor > botn de signo ms (+) > panel Contador de registros. La cadena de texto deber aparecer ahora como:
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.

Site ahora el punto de insercin entre las palabrasthru of, y seleccione Mostrar nmero de contador de registros inicial en Comportamientos del servidor > botn de signo ms (+) > panel Contador de registros. La cadena de texto deber aparecer ahora como:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of {Recordset1.RecordCount}.

590 Captulo 34

Compruebe que el contador funciona correctamente viendo la pgina en la ventana Live Data (Ver > Live Data). El contador deber tener un aspecto similar al ejemplo siguiente:
Displaying records 1 thru 8 of 40.

Si la pgina de resultados tiene un vnculo de navegacin para desplazarse al siguiente juego de registros, haga clic en el vnculo para actualizar el contador de registros, que ofrecer la siguiente lectura:
Showing records 9 thru 16 of 40.

Los vnculos no funcionan en la ventana Live Data. Para comprobarlos, utilice la funcin Vista previa en el navegador de Dreamweaver. Asegrese de que est activada la opcin Vista previa con servidor Live Data en Preferencias (Edicin > Preferencias > Vista previa en el navegador o Dreamweaver > Preferencias > Vista previa en el navegador (Mac OS X)) y, a continuacin, seleccione Archivo > Vista previa en el navegador.

Creacin de un control Web Cuadrcula de datos o Lista de datos de ASP.NET

Los controles Cuadrcula de datos y Lista de datos de ASP.NET proporcionan numerosas opciones para mostrar distintos tipos de datos (especialmente, contenido dinmico de una base de datos) y simplifican el proceso de vincular las fuentes de datos con los controles. Dreamweaver admite los controles Cuadrcula de datos y Lista de datos como comportamientos de servidor. Los controles proporcionan las funciones siguientes:
Cuadrcula de datos Crea una cuadrcula de mltiples columnas vinculada a datos. Este control permite definir varios tipos de columnas, tanto para disponer el contenido de la cuadrcula como para aadir funcionalidad especfica (editar columnas de botones, columnas de hipervnculos, etc.). Lista de datos Muestra elementos de una fuente de datos utilizando plantillas. Puede personalizar el aspecto del control manipulando las plantillas que constituyen sus distintos componentes.

Visualizacin de registros de base de datos 591

Adicin de una cuadrcula de datos a una pgina La Cuadrcula de datos de Dreamweaver permite insertar un control Web Cuadrcula de datos de ASP.NET. El control Cuadrcula de datos presenta las tablas como cuadrculas de mltiples columnas y puede incluir distintos tipos de columnas (heterogneas) para definir la disposicin del contenido de las celdas. Las columnas pueden ser vinculadas, de botones y de plantillas, entre otras. Asimismo, la Cuadrcula de datos admite funcionalidad interactiva como orden de columnas, edicin y comandos. Los tipos de columna disponibles en la Cuadrcula de datos son:
Tipo de columna Cuadrcula de datos Campo de datos sencillo Descripcin Denominada columna vinculada en ASP.NET, la columna Campo de datos sencillo permite especificar qu campo de fuente de datos se mostrar y qu formato de datos utilizar el campo con una expresin de formato .NET. Denominada columna de plantilla en ASP.NET, la columna Formato libre permite crear combinaciones de texto HTML y controles de servidor para disear una disposicin personalizada para una columna. Los controles de una columna de formato libre pueden estar vinculados a datos. Las columnas de formato libre ofrecen una mayor flexibilidad a la hora de definir la disposicin y la funcionalidad del contenido de la cuadrcula, pues usted tiene control completo sobre cmo se muestran los datos y qu ocurre cuando los usuarios interactan con las filas de la cuadrcula. La columna Hipervnculo muestra la informacin como vnculos de hipertexto. Suele utilizarse para mostrar datos (como el nmero de cliente o el nombre del producto) como hipervnculo de modo que los usuarios puedan hacer clic para acceder a otra pgina con detalles sobre ese elemento. Denominada columna Comando de edicin en ASP.NET, la columna Botn Editar, Actualizar, Cancelar permite a los usuarios editar la informacin de las filas Cuadrcula de datos. Para ello, cree una columna Editar, Actualizar, Cancelar. Durante la ejecucin, este columna muestra un botn con la etiqueta "Editar". Cuando el usuario hace clic en el botn Editar, los datos de la fila se muestran en controles editables tales como cuadros de texto, y el botn Editar es sustituido por los botones Actualizar y Cancelar. El botn Eliminar permite al usuario eliminar una determinada fila haciendo clic en un botn.

Formato libre

Hipervnculo

Botones Editar, Actualizar, Cancelar

Botones Eliminar

Para obtener ms informacin sobre el control Cuadrcula de datos y cmo utilizarlo para formatear datos dinmicos, visite los siguientes sitios Web:

Microsoft MSDN en: http://msdn.microsoft.com Microsoft ASP.NET en: http://asp.net

Antes de insertar el comportamiento de servidor Cuadrcula de datos, deber definir un conjunto de datos (denominado juego de datos por otros tipos de documentos) para la Cuadrcula de datos. Para obtener ms informacin, consulte Definicin de un juego de registros en la pgina 554.

592 Captulo 34

Para aadir un objeto Cuadrcula de datos a una pgina:

Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Cuadrcula de datos. Aparecer el cuadro de dilogo Cuadrcula de datos.

Seleccione las opciones del cuadro de dilogo Cuadrcula de datos y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

En la ventana de documento se mostrar la Cuadrcula de datos con un contorno gris de tabuladores. En la ventana Live Data (Ver > Live Data), el contorno gris desaparecer y el marcador de posicin del objeto quedar sustituido por la Cuadrcula de datos especificada. Adicin de una lista de datos a la pgina El comportamiento Lista de dato de Dreamweaver permite insertar un control Lista de datos de ASP.NET a una pgina. El control Lista de datos se utiliza para implementar un procesador frontal basado en formularios para fuentes de datos y permite presentar los datos en una cuadrcula donde cada registro se muestra en una fila distinta y se pueden ver muchas filas a la vez. Para obtener ms informacin sobre el control Lista de datos y cmo utilizarlo para formatear datos dinmicos, visite los siguientes sitios Web:

Microsoft MSDN en: http://msdn.microsoft.com Microsoft ASP.NET en: http://asp.net

Antes de insertar el comportamiento de servidor Lista de datos, deber definir un conjunto de datos (denominado juego de datos por otros tipos de documentos) para la Lista de datos. Para obtener ms informacin, consulte Definicin de un juego de registros en la pgina 554.

Visualizacin de registros de base de datos 593

Para aadir un objeto Lista de datos a una pgina:

Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Lista de datos. Aparecer el cuadro de dilogo Lista de datos.

Seleccione las opciones del cuadro de dilogo Lista de datos y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

En la ventana de documento se mostrar el objeto Lista de datos con un contorno gris de tabuladores. En la ventana Live Data (Ver > Live Data), el contorno gris desaparecer y el marcador de posicin del objeto quedar sustituido por la Lista de datos especificada. Modificacin de un objeto Cuadrcula de datos o Lista de datos Existen cuatro modos de modificar los objetos Cuadrcula de datos y Lista de datos:

En la vista Diseo, haga clic en el icono de la esquina superior izquierda de la Cuadrcula de

datos o la Lista de datos para cambiar al modo de edicin y, a continuacin, aada o modifique el contenido de cualquiera de las regiones de tabuladores que aparecen.
Nota: Tambin puede arrastrar fuentes de contenido dinmico desde el panel Vinculaciones hasta una regin de tabuladores.

En la vista Diseo, seleccione el objeto y utilice el inspector de propiedades para cambiar sus
atributos.

Haga doble clic en el objeto en el panel Comportamientos del servidor y cambie sus
propiedades en el cuadro de dilogo que se abre.

En la vista Cdigo, seleccione la Cuadrcula de datos o la Lista de datos en la pgina y utilice su

cuadro de dilogo de etiquetas para cambiar sus atributos.

594 Captulo 34

CAPTULO 35 Utilizacin de componentes de ColdFusion

Los componentes de ColdFusion (CFC) permiten encapsular la lgica de aplicaciones y empresarial en unidades reutilizables y autnomas. Los CFC tambin proporcionan una forma rpida y sencilla de crear servicios Web. Puede utilizar Macromedia Dreamweaver MX para crear y modificar CFC. Tambin puede utilizar Dreamweaver para crear pginas Web que utilicen CFC.
Nota: Los CFC slo se pueden utilizar con Macromedia ColdFusion MX. ColdFusion 5 no admite CFC.

Este captulo contiene las secciones siguientes:

Aspectos bsicos de los componentes de ColdFusion en la pgina 595 Creacin visual de un componente en Dreamweaver en la pgina 596 Visualizacin de componentes de ColdFusion en Dreamweaver en la pgina 597 Edicin de componentes de ColdFusion en Dreamweaver en la pgina 598 Creacin de pginas Web que utilicen componentes de ColdFusion en la pgina 599

Aspectos bsicos de los componentes de ColdFusion

Un componente de ColdFusion es una unidad de software reutilizable escrita en el lenguaje de formato ColdFusion (CFML). Los CFC permiten que el cdigo sea reutilizable y fcil de mantener. En esta seccin se describen las ventajas de los CFC. En las secciones siguientes se explica cmo ayuda Dreamweaver a trabajar con los CFC. Para obtener informacin sobre las etiquetas y la sintaxis de los CFC, consulte la ayuda de ColdFusion en Dreamweaver (Ayuda > Utilizacin de ColdFusion). Los componentes de ColdFusion proporcionan a los desarrolladores una forma sencilla y eficaz de encapsular elementos de sus sitios Web. En general deber utilizar componentes para la lgica de aplicaciones o empresarial. Utilice etiquetas personalizadas para elementos de presentacin como saludos personalizados, mens dinmicos, etc. Como ocurre con otros muchos tipos de construccin, los sitios dinmicos pueden a menudo beneficiarse de los componentes intercambiables. Por ejemplo, un sitio dinmico puede ejecutar la misma consulta repetidamente o calcular el precio total de las pginas de carro de la compra y recalcularlo cada vez que se aada un artculo. Los componentes pueden realizar estas tareas. Puede solucionar, mejorar, ampliar e incluso sustituir un componente con un mnimo impacto sobre el resto de la aplicacin.

595

Supongamos que una tienda en lnea calcula los gastos de envo basndose en el precio de los pedidos. Para pedidos de menos de 20 $, los gastos de envo son de 4 $; para los pedidos entre 20 y 40 $, los gastos ascienden a 6 $, y as sucesivamente. Puede insertar la lgica para calcular los gastos de envo en la pgina de carro de la compra y la pgina de caja, pero esto supondra mezclar el cdigo de presentacin HMTL y el cdigo de lgica CFML y, en trminos generales, dificultara el mantenimiento y la reutilizacin del cdigo. Usted decide crear un componente de ColdFusion llamado Pricing que tiene, entre otras cosas, una funcin llamada ShippingCharge. La funcin toma un precio como argumento y devuelve gastos de envo. Por ejemplo, si el valor del argumento es 32,80, la funcin devuelve 6. En la pgina de carro de la compra y la pgina de caja, inserte una etiqueta especial para activar la funcin ShippingCharge. Cuando se solicita la pgina, se activa la funcin y se devuelven gastos de envo a la pgina. Posteriormente, la tienda anuncia una promocin especial: envo gratuito para todos los pedidos que superen los 100 $. Realice el cambio en las tarifas de envo en un lugar la funcin ShippingCharge del componente Pricing y todas las pginas que utilizan la funcin obtendrn automticamente gastos de envo precisos.

Creacin visual de un componente en Dreamweaver

Puede utilizar Dreamweaver para definir visualmente un componente de ColdFusion y sus funciones. Dreamweaver crea un archivo .cfc e inserta las etiquetas CFML necesarias automticamente.
Nota: Segn el componente es posible que deba completar el cdigo manualmente.

Para crear visualmente un componente de ColdFusion:

1 2 3

Abra una pgina de ColdFusion en Dreamweaver. En el panel Componentes (Ventana > Componentes), seleccione Componentes CF en el men emergente. En el panel Componentes, haga clic en el botn de signo ms (+). Se abrir el cuadro de dilogo Crear componente. Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Dreamweaver escribe un archivo .cfc y lo guarda en la carpeta especificada. El nuevo componente tambin aparecer en el panel Componentes (despus de hacer clic en Actualizar). Para eliminar un componente deber borrar manualmente el archivo .cfc del servidor.

596 Captulo 35

Visualizacin de componentes de ColdFusion en Dreamweaver

Dreamweaver proporciona un modo de examinar visualmente los componentes de ColdFusion definidos para el sitio. Dreamweaver lee los archivos .cfc situados en el servidor y muestra informacin sobre ellos en una vista de rbol de fcil navegacin en el panel Componentes.
Nota: Dreamweaver busca los componentes en el servidor de prueba (consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 152). Si desea ver los componentes situados en otro servidor, cambie la configuracin del servidor de prueba.

En concreto, puede realizar cualquiera de las acciones siguientes en Dreamweaver:

Mostrar todos los componentes de ColdFusion definidos para el sitio Explorar las funciones y los argumentos de cada componente Consultar las propiedades de las funciones que actan como servicios Web
Para ver los componentes de ColdFusion en Dreamweaver:

1 2 3

Abra una pgina de ColdFusion en Dreamweaver. En el panel Componentes (Ventana > Componentes), seleccione Componentes CF en el men emergente. Haga clic en el botn Actualizar del panel para recuperar los componentes. Dreamweaver mostrar los paquetes de componentes del servidor. Un paquete de componentes es una carpeta que contiene archivos CFC. Si no aparecen los paquetes de componentes existentes, haga clic en el botn Actualizar, en la barra de herramientas del panel.

4 5 6

Haga clic en el icono de signo ms (+) situado junto al nombre del paquete para ver los componentes almacenados en el paquete. Para ver las funciones de un componente, haga clic en el icono de signo ms (+) situado junto al nombre del componente. Para ver los argumentos que toma una funcin, as como el tipo de argumentos y si son obligatorios u opcionales, abra la rama de la funcin en la vista de rbol. Las funciones que no toman argumentos muestran el icono de signo ms (+) a su lado. Para ver rpidamente los detalles de un argumento, una funcin, un componente o un paquete, seleccione el elemento en la vista de rbol y, a continuacin, haga clic en el icono Obtener datos de la barra de herramientas del panel. Tambin puede hacer clic con el botn derecho (Windows) o, mientras mantiene presionada la tecla Control, hacer clic en el elemento (Macintosh) y seleccionar Obtener datos en el men emergente. Dreamweaver mostrar los detalles del elemento en un cuadro de mensaje.

Utilizacin de componentes de ColdFusion 597

Edicin de componentes de ColdFusion en Dreamweaver

Dreamweaver proporciona un modo optimizado de editar el cdigo de los componentes de ColdFusion definidos para el sitio. Por ejemplo, puede aadir, cambiar o eliminar cualquier funcin de componente sin salir de Dreamweaver. Para utilizar esta funcin, el entorno de desarrollo deber estar configurado de este modo:

ColdFusion MX debe ejecutarse localmente. En el cuadro de dilogo Definicin del sitio avanzado de Dreamweaver, el tipo de acceso
especificado en la categora Servidor de prueba debe ser Local/red.

En el cuadro de dilogo Definicin del sitio avanzado, la ruta de la carpeta raz local debe ser la
misma que la de la carpeta del servidor de prueba (por ejemplo, c:\Inetpub\wwwroot\cf_projects\myNewApp\). Puede examinar y cambiar estas rutas eligiendo Sitio > Editar sitios.

El componente debe estar almacenado en la carpeta del sitio local o en cualquiera de sus
subcarpetas del disco duro. Antes de editar un CFC, abra cualquier pgina de ColdFusion en Dreamweaver y muestre los componentes en el panel Componentes. Para mostrar los componentes, abra el panel Componentes (Ventana > Componentes), seleccione Componentes CFC en el men emergente del panel y haga clic en el botn Actualizar del panel. Dado que ColdFusion MX se ejecuta localmente, Dreamweaver muestra los paquetes de componentes en el disco duro. Para obtener ms informacin, consulte Visualizacin de componentes de ColdFusion en Dreamweaver en la pgina 597.
Para editar un componente:

Para editar un archivo de componente en general, abra el paquete y haga doble clic en el nombre del componente en la vista de rbol. Dreamweaver abrir el archivo de componente en la vista Cdigo. Para editar una funcin, argumento o propiedad especfica, haga doble clic en el elemento en la vista de rbol. Realice los cambios deseados manualmente en la vista Cdigo. Guarde el archivo (Archivo > Guardar).

2 3 4

Para ver una funcin nueva en el panel Componentes, actualice la vista haciendo clic en el botn Actualizar de la barra de herramientas del panel.

598 Captulo 35

Creacin de pginas Web que utilicen componentes de ColdFusion

Una forma de utilizar una funcin de componente en las pginas Web consiste en escribir cdigo en la pgina que activa la funcin cuando se solicita la pgina. Puede utilizar Dreamweaver como ayuda para escribir este cdigo.
Nota: Para conocer otras formas de utilizar los componentes, consulte la ayuda de ColdFusion en Dreamweaver (Ayuda > Utilizacin de ColdFusion).

Para utilizar un componente de ColdFusion en una pgina Web:

1 2 3 4

En Dreamweaver, abra la pgina de ColdFusion que utilizar la funcin de componente. Cambie a la vista Cdigo (Ver > Cdigo). Abra el panel Componentes (Ventana > Componentes) y seleccione Componentes CF en el men emergente del panel. Busque el componente deseado e insrtelo utilizando una de las tcnicas siguientes: en la pgina para activar la funcin.

Arrastre una funcin desde la vista de rbol hasta la pgina. Dreamweaver insertar el cdigo Seleccione la funcin en el panel y haga clic en el icono Insertar de la barra de herramientas del
panel (el segundo icono a la derecha). Dreamweaver insertar el cdigo en la pgina en el punto de insercin.
5

Si inserta una funcin que tiene argumentos, complete el cdigo del argumento manualmente. Para obtener ms informacin, consulte la ayuda de ColdFusion en Dreamweaver (Ayuda > Utilizacin de ColdFusion).

Guarde el archivo (Archivo > Guardar).

Utilizacin de componentes de ColdFusion 599

600 Captulo 35

CAPTULO 36 Utilizacin de los servicios Web

Los servicios Web constituyen una tecnologa nueva que permite a las pginas Web acceder a aplicaciones distribuidas. Estos servicios ofrecen acceso a la informacin y a funciones de aplicacin, por lo que se pueden suministrar y facturar en forma de flujos que permiten el acceso desde cualquier plataforma y lugar. La pgina Web que conecta con el servicio Web suele denominarse consumidor y el servicio propiamente dicho, proveedor. Macromedia Dreamweaver MX permite crear pginas y sitios que son consumidores de servicios Web. Dreamweaver admite actualmente la creacin de consumidores de servicios Web utilizando documentos de tipo ColdFusion, ASP.NET y Java Server Pages (JSP). En concreto, Dreamweaver permite realizar las siguientes tareas de desarrollo de servicios Web:

Seleccionar servicios Web disponibles en Internet Generar un proxy de servicios Web que permita a la pgina comunicarse con el proveedor de
servicios El proxy (tambin denominado clase de abstraccin) contiene los campos, mtodos y propiedades de un servicio Web y los pone a disposicin de la pgina almacenada localmente. Cuando genere un proxy para la pgina, Dreamweaver le permitir verlo en el panel Componentes.

Arrastrar mtodos y tipos de datos al cdigo de la pgina

Antes de crear una pgina Web que utilice un servicio Web deber conocer la tecnologa de servidor subyacente de la aplicacin que desea utilizar y los constructos de programacin que requiere la aplicacin. Dreamweaver permite crear pginas Web que pueden acceder a servicios Web y utilizar la funcionalidad que suministran los servicios. Tambin es posible crear y publicar servicios Web para su despliegue utilizando Macromedia ColdFusion MX. Este captulo trata los siguientes temas:

Aspectos bsicos de los servicios Web en la pgina 602 Instalacin y configuracin de generadores proxy en la pgina 604 Adicin de un proxy de servicios Web utilizando la descripcin WSDL en la pgina 607 Adicin de un servicio Web a una pgina en la pgina 608 Edicin de la lista de sitios de servicios Web UDDI en la pgina 610

601

Aspectos bsicos de los servicios Web

Los servicios Web permiten a las aplicaciones comunicarse y compartir informacin a travs de Internet independientemente del sistema operativo o el lenguaje de programacin. A continuacin se ofrecen algunos ejemplos de servicios Web y la informacin y funcionalidad que proporcionan:

Autenticacin y autorizacin de usuarios Validacin de tarjetas de crdito. Servicios de mercados financieros que devuelven precios de acciones asociados a smbolos de
comprobacin especificados.

Servicios de compra que permiten a los usuarios solicitar y comprar productos en lnea. Servicios de informacin que proporcionan noticias u otros datos basndose en los intereses, la
ubicacin u otro tipo de informacin personal seleccionada. Dado que los servicios Web proporcionan funcionalidad como un servicio al que una pgina Web se conecta y utiliza segn sus necesidades, brindan a los desarrolladores y proveedores de servicio una mayor flexibilidad a la hora de disear y desplegar aplicaciones potentes y distribuidas. Partes de un servicio Web Los servicios Web constan de los siguientes componentes bsicos:

Los proveedores de servicios suministran aplicaciones almacenadas y las ponen a disposicin del pblico. Los servicios Web se pueden suministrar con carcter gratuito o como servicio de pago. Los intermediarios de servicios mantienen un registro de los proveedores de servicio con descripciones de las ofertas de servicio y vnculos a sus aplicaciones. Los consumidores de servicios

son las pginas Web que acceden y utilizan el servicio Web

remoto. Bsqueda de proveedores de servicios Web Los proveedores de servicios se encargan de facilitar el acceso a los servicios Web. Generalmente, el proveedor ofrece acceso a su servicio a travs de un registro basado en la Web que mantiene un directorio de servicios disponibles. Existen varios sitios Web que proporcionan un directorio de este tipo, como:

X Methods en http://www.xmethods.net Registro de IBM Business en http://www-3.ibm.com/services/uddi/protect/registry.html Registro de Microsoft UDDI en http://uddi.microsoft.com/default.aspx
Estos registros utilizan el servicio UDDI (Descripcin, descubrimiento e integracin universales), un registro de servicios de comercio electrnico que acta como foro donde las empresas ofrecen una descripcin de su actividad y de los productos o servicios que proporcionan a otras empresas. Un grupo de empresas, llamadas operadores, mantienen el registro. Los operadores se comprometen a compartir toda la informacin pblica sobre los integrantes del registro entre s y con los usuarios del servicio, y a mantener su interoperabilidad entre los mltiples nodos del mismo nivel de la red de servicios UDDI. Adems de los servicios Web pblicos, hay registros privados UDDI disponibles para abonados.

602 Captulo 36

La especificacin UDDI se basa en normas existentes de Internet que garantizan su neutralidad respecto a plataformas e implementaciones. Componentes del software de los servicios Web Para que una pgina Web pueda acceder y utilizar un servicio Web deber comunicarse con el servicio y tener una descripcin de la funcionalidad que proporciona el servicio, los mtodos disponibles que puede activar y los parmetros que devuelve el servicio. El Lenguaje de descripcin de servicios Web (WSDL) ofrece una descripcin del servicio basada en XML. Cada servicio Web proporciona un WSDL que describe cmo conectarse al servicio, los mtodos disponibles que la pgina Web puede activar y las entradas y salidas de datos. El WSDL puede encontrarse en un archivo o puede ser generado por el servicio Web en tiempo de ejecucin. La comunicacin entre la pgina Web que solicita el servicio y el servicio Web propiamente dicho se realiza a travs del Protocolo sencillo de acceso a objetos (SOAP). SOAP es un protocolo basado en XML que permite a un cliente Web acceder y activar los mtodos y parmetros del servicio Web. Especificaciones e informacin sobre los servicios Web Para obtener ms informacin sobre los servicios Web y las tecnologas subyacentes que los hacen posible, visite los siguientes sitios Web:

Especificacin WSDL en http://www.w3.org/TR/wsdl Especificacin UDDI en http://www.uddi.org/specification.html Especificacin XML en http://www.w3.org/TR/REC-xml Especificacin SOAP en http://www.w3.org/TR/SOAP/

Flujo de trabajo de los servicios Web en Dreamweaver Para crear una pgina o un sitio que consuma un servicio Web utilizando Dreamweaver deber realizar las tareas siguientes:
1

Instale y configure un generador proxy. Los generadores proxy crean un proxy de servicios Web, es decir, un componente que una pgina Web utiliza para comunicarse con el proveedor de servicios Web. El proxy de servicios Web se genera a partir del WSDL que describe el servicio Web. Es posible que deba instalar y configurar un generador proxy que admita la tecnologa de servidor para la que quiera desarrollar consumidores de servicios Web. Dreamweaver est preconfigurado con AXIS, el generador proxy de Apache SOAP que admite el desarrollo de servicios Web JSP. Si est desarrollando pginas ColdFusion 6, el generador proxy de servicios Web se incluye en el servidor ColdFusion. El establecimiento de una conexin con el servidor ColdFusion proporciona acceso al generador proxy. Si est desarrollando pginas de servicios Web para utilizarlas con ASP.NET, deber instalar el ASP.NET SDK, disponible en Microsoft. Para obtener informacin sobre cmo instalar y configurar un generador proxy no incluido en Dreamweaver, consulte Instalacin y configuracin de generadores proxy en la pgina 604.

Utilizacin de los servicios Web 603

Utilizando un navegador, consulte el registro de servicios basado en la Web. Existen varias fuentes de servicios Web, que van desde los sitios de registro de servicios hasta simples listas. Los registros utilizan UDDI, una norma que permite el establecimiento de contactos y la realizacin de transacciones entre proveedores y solicitantes de servicios. UDDI permite a las empresas localizar en la Web servicios que satisfacen sus necesidades. Por ejemplo, utilizando UDDI puede especificar algunos criterios, como el precio ms bajo de un determinado servicio, o buscar informacin especfica.

3 4

Despus de localizar y seleccionar un servicio Web que proporcione la funcionalidad deseada, introduzca el URL del WSDL en el cuadro de dilogo Aadir un servicio Web. Genere un proxy para el servicio Web a partir de la descripcin WSDL del proveedor del servicio. Para incorporar un servicio Web a una pgina Web deber crear un proxy. El proxy proporciona a la pgina Web la informacin necesaria para comunicar con el servicio Web y acceso a los mtodos que proporciona el servicio Web. Para crear un proxy a partir del archivo WSDL, utilice un generador proxy. Despus de crear el proxy, puede instalarlo:

En el sistema local donde est desarrollando el consumidor de servicios Web. En el sistema de servidor que ejecute el servidor de aplicaciones. Para desplegar la pgina Web
y establecer comunicacin entre ella y el proveedor de servicios Web deber instalar el proxy en el servidor.
5

Utilizando Dreamweaver, aada el servicio Web a una pgina y edite los parmetros y mtodos necesarios para hacer uso de la funcionalidad del servicio. Para obtener ms informacin, consulte Adicin de un servicio Web a una pgina en la pgina 608.

Instalacin y configuracin de generadores proxy

Dreamweaver instala el generador proxy AXIS, que admite servicios Web JSP. AXIS es un generador proxy de cdigo abierto que se distribuye a travs del proyecto Apache SOAP. Adems, puede aadir generadores proxy que admitan las implementaciones de servicios Web del proveedor o nuevas tecnologas de servicios Web. En esta seccin se explica cmo obtener generadores proxy y configurarlos para que funcionen con Dreamweaver. Para obtener ms informacin sobre AXIS, visite el sitio Web de Apache AXIS en: http://xml.apache.org/axis/index.html.

604 Captulo 36

Obtencin de generadores proxy adicionales Si desea instalar un generador proxy no incluido con Dreamweaver deber solicitar al proveedor el proxy y los componentes de software relacionados. Deber descargar todos los archivos necesarios desde el sitio Web del proveedor. Algunos generadores proxy crean proxies que dependen de otras bibliotecas de software y que deber instalar correctamente para que el generador pueda acceder a ellas. Por ejemplo, el generador proxy AXIS crea proxies que dependen de la biblioteca Apache SOAP que, a su vez, depende de otras bibliotecas de software (observe que todo el software necesario para utilizar AXIS se instala de forma predeterminada con Dreamweaver). Al seleccionar un generador proxy, consulte la documentacin suministrada y asegrese de que dispone de todos los componentes de software y las bibliotecas que necesita para realizar una instalacin y una configuracin correctas. Despus de instalar y configurar correctamente el generador proxy deber configurarlo para que funcione con Dreamweaver.
Nota: Actualmente el desarrollo de servicios Web con Dreamweaver se limita al entorno Windows. Para desarrollar pginas que accedan a servicios Web en Macintosh deber utilizar un servidor de aplicaciones aparte con Windows NT/2000/XP o UNIX donde ejecutar el proxy de servicios Web y su entorno de aplicaciones.

Para configurar un generador proxy para que funcione con Dreamweaver:

Elija Ventana > Componentes de servidor para abrir el panel del mismo nombre.

En el panel Componentes de servidor, elija Servicios Web en el men emergente de la parte superior izquierda del panel y, a continuacin, haga clic en el botn de signo ms (+) y seleccione Aadir utilizando WSDL. Aparecer el cuadro de dilogo Aadir utilizando WSDL.

Utilizacin de los servicios Web 605

En el cuadro de dilogo Aadir utilizando WSDL, elija Editar lista de generadores proxy en el men emergente Generador proxy. Aparecer el cuadro de dilogo Generador proxy.

Haga clic en Nuevo, seleccione el generador proxy en el men emergente y haga clic en Listo. Si el generador proxy que desea utilizar no aparece en la lista, elija Generador proxy predeterminado para mostrar el cuadro de dilogo del mismo nombre.

El cuadro de dilogo Generador proxy predeterminado permite configurar el generador proxy seleccionado, aunque tambin puede configurar un generador proxy nuevo. Los cuadros de texto del cuadro de dilogo varan segn el generador proxy elegido. Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar.

Para obtener informacin sobre cmo seleccionar las opciones del cuadro de dilogo, haga clic en el botn Ayuda del cuadro de dilogo.

606 Captulo 36

Cuando termine de configurar el generador proxy predeterminado, haga clic en Aceptar. Cuando Dreamweaver lee una descripcin WSDL de un servicio Web, realiza las siguientes acciones relativas a los campos del generador proxy predeterminado:

Lee el WSDL como entrada para buscar el servicio Web. Genera el proxy de servicios Web con el entorno de tiempo de ejecucin especificado. Compila el proxy con el compilador especificado. Enva el cdigo fuente del proxy el proxy compilado a la carpeta de destino especificada.

Adicin de un proxy de servicios Web utilizando la descripcin WSDL

Despus de especificar un generador proxy y configurar los modelos de servidor de servicios Web que desea admitir, deber buscar un servicio Web que proporcione la funcionalidad deseada y generar un proxy para ese servicio.
Para seleccionar un servicio Web y generar un proxy a partir de su archivo WSDL:

1 2 3

Abra la pgina a la que desea aadir el servicio Web. Elija Ventana > Componentes de servidor para abrir el panel del mismo nombre. En el panel Componentes de servidor, elija Servicios Web en el men emergente de la parte superior izquierda del panel y, a continuacin, haga clic en el botn de signo ms (+) y seleccione Aadir utilizando WSDL. Aparecer el cuadro de dilogo Aadir utilizando WSDL.

Especifique el URL del archivo WSDL que desea utilizar. Si conoce el URL del archivo WSDL, introdzcalo en el URL del cuadro de texto WSDL. Si no conoce el URL del archivo WSDL puede buscarlo en un directorio de servicios Web. Cuando encuentre el servicio Web deseado, copie y pegue el URL del servicio Web en el cuadro de edicin WSDL. Para iniciar un navegador Web, haga clic en el botn de bsqueda de UDDI y seleccione uno de los registros de servicios Web que figuran en la lista. Dreamweaver iniciar el navegador y abrir el registro seleccionado. Localice el servicio Web que desea utilizar y copie el URL de su archivo WSDL en el Portapapeles (Control+C en Windows o Comando+C en Macintosh). Vuelva al Selector de servicios Web y pegue el URL en el cuadro de dilogo. Puede editar la lista de registros de servicios Web para que incluya directorios adicionales o proveedores especficos. Para obtener ms informacin, consulte Edicin de la lista de sitios de servicios Web UDDI en la pgina 610.

Utilizacin de los servicios Web 607

Seleccione un generador proxy que admita el modelo de servidor de servicios Web deseado en el men emergente Generador proxy. Compruebe que el generador proxy est instalado y configurado en el sistema. Para obtener ms informacin, consulte Instalacin y configuracin de generadores proxy en la pgina 604.

Haga clic en Aceptar. El generador proxy crear un proxy para el servicio Web y lo introspeccionar. La introspeccin es el proceso en el cual el generador proxy consulta la estructura interna del proxy de servicios Web y da acceso a sus interfaces, mtodos y propiedades a travs de Dreamweaver.

El servicio Web estar ahora disponible para utilizar en el sitio y aparecer en el panel Componentes de servidor.

Adicin de un servicio Web a una pgina

Despus de seleccionar un servicio Web, generar su proxy y aadirlo al panel Componentes de servidor, puede insertarlo en una pgina. La ilustracin siguiente muestra el panel Componentes de servidor con el proxy de servicios Web Helloworld aadido. El proxy Helloworld proporciona un mtodo, sayHello, que imprime Hello World!.

Los ejemplos siguientes crean una instancia del servicio Web HelloWorld utilizando ColdFusion. Para obtener ms informacin sobre cmo crear un servicio Web y para ver ejemplos adicionales utilizando .NET y JSP, visite el Centro de servicio tcnico de Macromedia en: http://www.macromedia.com/go/creating_web_services.
Para aadir un servicio Web a una pgina:

En la vista Cdigo de la ventana de documento, arrastre el mtodo sayHello al cdigo HTML de la pgina. Dreamweaver aadir el mtodo y los parmetros ficticios a la pgina.

608 Captulo 36

Edite el cdigo insertado con los nombres de instancia, tipos de datos y valores de parmetros del servicio que requiera el servicio Web. El servicio Web debe proporcionar descripciones de los tipos de datos y los valores de parmetros. En el ejemplo de ColdFusion mostrado a continuacin, el servicio Web se encuentra entre etiquetas <cfinvoke>. Para desarrollar un servicio Web en ColdFusion, utilice <cfinvoke> para crear una instancia del servicio y activar sus mtodos.
<html> <head> <title>Web Service</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <cfinvoke webservice="http://velcro-qa-7:8100/helloworld/HelloWorld.cfc?wsdl" method="sayHello" returnvariable="aString"> </cfinvoke> </body> </html>

Si desea vincular un valor devuelto a un elemento visual, cambie a la vista Diseo y site un elemento visual en la pgina que pueda aceptar vinculacin de datos. A continuacin, vuelva a la vista Cdigo e introduzca el cdigo correspondiente para vincular el valor devuelto al elemento visual. A la hora de crear servicios Web, consulte en la documentacin del proveedor de la tecnologa la sintaxis correcta para crear una instancia del servicio y mostrar los valores devueltos a la pgina. En este ejemplo, el valor devuelto para la variable aString se enva utilizando la etiqueta <cfoutput> de ColdFusion. De este modo se mostrar la frase The web service says: Hello world! en la pgina.
<html> <head> <title>Web Service</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <cfinvoke webservice="http://velcro-qa-7:8100/helloworld/HelloWorld.cfc?wsdl" method="sayHello" returnvariable="aString"> </cfinvoke> The web service says: <cfoutput>#aString#</cfoutput> </body> </html>

Cuando se despliegan pginas Web en un servidor de produccin, Dreamweaver copia automticamente las pginas, el proxy y las bibliotecas necesarias en el servidor Web.
Nota: Si desarrolla la aplicacin con un proxy que est instalado en un equipo distinto del que ha utilizado para desarrollar las pginas o si utiliza una herramienta de administracin de sitios que no copia todos los archivos relacionados en el servidor, deber asegurarse de desplegar el proxy y los archivos de biblioteca dependientes. En caso contrario, las pginas no podrn comunicarse con la aplicacin de servicios Web.

Utilizacin de los servicios Web 609

Edicin de la lista de sitios de servicios Web UDDI

El Selector de servicios Web proporciona una lista de directorios de servicios Web basados en UDDI que puede seleccionar. Puede editar esta lista para aadir o eliminar directorios de servicios Web.
Para editar la lista de sitios de servicios Web:

1 2

En Dreamweaver, seleccione Ventana > Componentes para abrir el panel del mismo nombre. En el panel Componentes, elija Servicios Web en el men emergente de la parte superior izquierda del panel y, a continuacin, haga clic en el botn de signo ms (+) para aadir un servicio Web. Aparecer el cuadro de dilogo Aadir utilizando WSDL. En el Selector de servicios Web, haga clic en el icono de globo y elija Editar lista de sitios UDDI en el men emergente. Aparecer el cuadro de dilogo Sitios UDDI.

En el cuadro de dilogo Sitios UDDI puede aadir nuevos sitios de servicios Web, editar el nombre y el URL de sitios existentes y eliminar los sitios no deseados. Para eliminar un sitio existente, seleccinelo en la lista y haga clic en el botn Quitar. Para aadir un sitio nuevo o modificar uno existente, haga clic en el botn Nuevo o Editar y seleccione las opciones del cuadro de dilogo que se muestra a continuacin.

610 Captulo 36

CAPTULO 37 Adicin de comportamientos de servidor personalizados

Macromedia Dreamweaver MX se suministra con un conjunto de comportamientos de servidor que le permiten aadir fcilmente prestaciones dinmicas a un sitio. Si desea ampliar la funcionalidad de Dreamweaver, puede crear nuevos comportamientos de servidor de acuerdo con sus necesidades de desarrollo u obtener comportamientos de servidor en el sitio Web de Macromedia Exchange. Este captulo contiene las secciones siguientes:

Instalacin de comportamientos de servidor adicionales en la pgina 611 Creacin de nuevos comportamientos en la pgina 612 Edicin y modificacin de cdigo de comportamientos de servidor en la pgina 627 Instalacin de comportamientos de servidor adicionales
Muchos colaboradores de Macromedia y desarrolladores independientes crean comportamientos de servidor para satisfacer necesidades de desarrollo Web concretas. Puede obtener acceso a estos comportamientos de servidor y descargarlos del sitio Web Macromedia Exchange para Dreamweaver. Los comportamientos de servidor y otras extensiones disponibles a travs del sitio Web Macromedia Exchange le permiten aadir fcilmente nuevas funciones a Dreamweaver. Cada comportamiento de servidor incluye una descripcin breve, comentarios de usuarios y un grupo de discusin en el que puede publicar preguntas y obtener asistencia relacionada con los comportamientos de servidor que descargue.
Para obtener acceso a Macromedia Exchange:

En Dreamweaver MX, seleccione Ayuda > Dreamweaver Exchange. Su navegador abrir la pgina Web de Macromedia Exchange para Dreamweaver. Conecte con Exchange utilizando su ID de Macromedia o, si an no ha creado su ID de Macromedia Exchange, siga las instrucciones para abrir una cuenta en Macromedia.

Nota: Tambin puede acceder a Macromedia Exchange desde el panel Comportamientos del servidor (Ventana > Comportamientos), haciendo clic en el botn de signo ms (+) y eligiendo Obtener ms comportamientos de servidor.

611

Para instalar un comportamiento de servidor u otra extensin en Dreamweaver:

1 2

Inicie Extension Manager seleccionando Ayuda > Administrar extensiones. Seleccione Archivo > Instalar extensin en Extension Manager. Para ms informacin, consulte la ayuda en lnea de Extension Manager.

Creacin de nuevos comportamientos

Si cuenta con amplia experiencia en ColdFusion, ASP.NET, JavaScript, VBScript, PHP o Java, podr escribir sus propios comportamientos de servidor. La creacin de un comportamiento de servidor incluye las siguientes tareas:

Escritura de uno o varios bloques de cdigo que realicen la accin deseada.

Para obtener informacin sobre cmo crear comportamientos de servidor con el Creador de comportamientos de servidor de Dreamweaver, consulte Utilizacin del Creador de comportamientos de servidor en la pgina 613. Para obtener informacin sobre la sintaxis que admiten los comportamientos de servidor de Dreamweaver, consulte Escritura de bloques de cdigo en la pgina 616.

Especificacin del lugar en el que debe insertarse el bloque de cdigo en el cdigo HTML de la
pgina. Para obtener informacin sobre la colocacin de bloques de cdigo en una pgina, consulte Colocacin de bloques de cdigo en la pgina 622.

Si el comportamiento de servidor requiere que se especifique un valor para un parmetro,

deber crear un cuadro de dilogo que solicite al desarrollador Web que aplica el comportamiento que suministre un valor adecuado. Para obtener informacin sobre cmo proporcionar valores de parmetros a un comportamiento de servidor mediante un cuadro de dilogo, consulte Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado en la pgina 624.

Comprobacin del comportamiento de servidor antes de ponerlo a disposicin de otras

personas. Para conocer las directrices que debe seguir para comprobar comportamientos de servidor, consulte Comprobacin de comportamientos de servidor en la pgina 626.

612 Captulo 37

Utilizacin del Creador de comportamientos de servidor Utilice el Creador de comportamientos de servidor para aadir el bloque o bloques de cdigo que el comportamiento insertar en la pgina.
Para escribir bloques de cdigo de comportamiento de servidor:

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Nuevo comportamiento de servidor en el men emergente. Aparecer el cuadro de dilogo Nuevo comportamiento de servidor.

3 4 5

En el men emergente Tipo de documento, seleccione el tipo de documento para el que est desarrollando el comportamiento de servidor. En el cuadro de texto Nombre, introduzca un nombre para el comportamiento de servidor. Si desea copiar un comportamiento de servidor existente para aadirlo al comportamiento que est creando, seleccione la casilla de verificacin Copiar comportamiento de servidor existente. Cuando esta casilla de verificacin est seleccionada, aparece una lista de comportamientos de servidor disponibles en el men emergente Comportamiento a copiar.

Haga clic en Aceptar. Aparecer el cuadro de dilogo Creador de comportamientos de servidor.

Adicin de comportamientos de servidor personalizados 613

Para aadir un nuevo bloque de cdigo, haga clic en el botn de signo ms (+). Aparecer el cuadro de dilogo Crear un nuevo bloque de cdigo.

8 9

Introduzca un nombre para el bloque de cdigo que desea crear. En el cuadro de texto Bloque de cdigo, introduzca el cdigo necesario para implementar el comportamiento de servidor. Al introducir cdigo en este cuadro de texto, podr insertar solamente una etiqueta o un bloque de cdigo. Si tiene que introducir mltiples etiquetas o bloques de cdigo, deber crearlos en el cuadro de dilogo Creador de comportamientos de servidor. Si el comportamiento de servidor requiere parmetros de tiempo de ejecucin, puede incluirlos en el cdigo haciendo clic en el botn Insertar parmetro en bloque de cdigo. Aparecer el cuadro de dilogo Insertar parmetro en bloque de cdigo. Introduzca un nombre para los parmetros en el men emergente Nombre y haga clic en Aceptar. El parmetro se insertar en el bloque de cdigo en el punto de insercin creado por el cursor antes de definir el parmetro.

10

11

12

Seleccione una opcin del men emergente Insertar cdigo especificando la ubicacin en la que deben incrustarse los bloques de cdigo. Para obtener ms informacin, consulte Colocacin de bloques de cdigo en la pgina 622.

614 Captulo 37

13

Puede especificar informacin adicional sobre el comportamiento de servidor que est creando mediante el panel Opciones avanzadas. Haga clic en el botn Avanzado para ver las opciones avanzadas.

Identificador

especifica si el bloque de cdigo debe ser tratado como un identificador.

Como opcin predeterminada, cada bloque de cdigo es un identificador. Si Dreamweaver encuentra un bloque de cdigo identificador en un documento, incluye el comportamiento en la lista del panel Comportamientos del servidor. Utilice la casilla de verificacin Identificador para especificar si el bloque de cdigo debe ser tratado como identificador. Por lo menos uno de los bloques de cdigo del comportamiento de servidor tiene que ser un identificador. Un bloque de cdigo no debe ser un identificador si el mismo bloque de cdigo se emplea en otro comportamiento de servidor o si el bloque de cdigo proporciona una funcionalidad que tiene lugar de manera natural dentro de una pgina.
Ttulo de comportamiento de servidor

especifica el ttulo del comportamiento tal y como aparece en el panel Comportamientos del servidor. Si el diseador de la pgina hace clic en el botn de signo ms (+) del panel Comportamientos del servidor, el ttulo del nuevo comportamiento de servidor aparecer en el men emergente. Cuando un diseador aplica una instancia de un comportamiento de servidor a un documento, el comportamiento aparece en la lista de comportamientos aplicados en el panel Comportamientos del servidor. Use el cuadro Ttulo de comportamiento de servidor para especificar el contenido del men emergente de signo ms (+) y la lista de comportamientos aplicados. El valor inicial del cuadro es el nombre que usted introdujo en el cuadro de dilogo Nuevo comportamiento de servidor. Al definir los parmetros, el nombre se actualiza automticamente y los parmetros aparecen entre parntesis a continuacin del nombre del comportamiento de servidor.

Set Session Variable (@@Name@@, @@Value@@)

Si el usuario acepta el valor predeterminado, todo lo que hay antes del parntesis aparecer en el men emergente de signo ms (+) (por ejemplo, Establecer variable de sesin). En la lista de comportamientos aplicados aparecern el nombre y los parmetros: por ejemplo, Establecer variable de sesin ("abcd", "5").
Bloque de cdigo a seleccionar especifica el bloque de cdigo que se selecciona cuando el usuario selecciona el comportamiento en el panel Comportamientos del servidor.

Cuando se aplica un comportamiento de servidor, uno de los bloques de cdigo del comportamiento es designado como el bloque de cdigo a seleccionar. Si aplica el comportamiento de servidor y luego selecciona el comportamiento en el panel Comportamientos del servidor, Dreamweaver seleccionar automticamente el bloque

Adicin de comportamientos de servidor personalizados 615

designado en la ventana de documento. Como opcin predeterminada, Dreamweaver selecciona el primer bloque de cdigo que no est situado antes de la etiqueta html. Si todos los bloques de cdigo estn situados antes de la etiqueta html, Dreamweaver seleccionar el primero. Los usuarios avanzados pueden especificar cual es el bloque de cdigo seleccionado.
14 15

Si necesita crear mas bloques de cdigo, repita los pasos 7 a 13. Si el comportamiento de servidor requiere que se le proporcionen parmetros, deber crear un cuadro de dilogo que acepte los parmetros introducidos por la persona que aplique el comportamiento. Para crear un cuadro de dilogo que acepte los parmetros introducidos por el usuario, consulte Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado en la pgina 624.

16

Despus de realizar los pasos anteriores que sean necesarios para el comportamiento de servidor que est creando, haga clic en Aceptar. Una vez que haya creado un comportamiento de servidor, ste aparecer en la lista del panel Comportamientos del servidor. Compruebe el comportamiento de servidor y asegrese de que funciona correctamente.

Para obtener ms informacin, consulte las siguientes secciones:

Escritura de bloques de cdigo en la pgina 616 Utilizacin de parmetros en comportamientos de servidor en la pgina 617 Conversin de los bloques de cdigo en condicionales en la pgina 618 Repeticin de bloques de cdigo en la pgina 619 Reglas de codificacin en la pgina 622 Colocacin de bloques de cdigo en la pgina 622

Escritura de bloques de cdigo

Los bloques de cdigo creados en el Creador de comportamientos de servidor se encapsulan en un comportamiento de servidor que aparece en el panel Comportamientos del servidor. Puede tratarse de cualquier cdigo vlido de tiempo de ejecucin para el modelo de servidor especificado. Por ejemplo, si elige ColdFusion como tipo de documento para el comportamiento de servidor personalizado, el cdigo que escriba deber ser cdigo ColdFusion vlido para su ejecucin en un servidor de aplicaciones ColdFusion. Introduccin de bloques de cdigo Puede crear los bloques de cdigo directamente en el Creador de comportamientos de servidor o copiar y pegar cdigo de otras fuentes. Cada bloque de cdigo creado en el Creador de comportamientos de servidor debe ser una nica etiqueta o bloque de script. Si necesita insertar varios bloques de etiquetas, divdalos en bloques de cdigo independientes.

616 Captulo 37

Inclusin de parmetros Puede incluir parmetros en el cdigo de tiempo de ejecucin y permitir al diseador de la pgina que proporcione valores para dichos parmetros. Para ello, introduzca marcadores de parmetros en el cdigo de la siguiente forma:
@@parameterName@@

Para obtener ms informacin, consulte Utilizacin de parmetros en comportamientos de servidor en la pgina 617. Aplicacin de condiciones y elementos repetidos a bloques de cdigo Si desea que el bloque de cdigo o una parte de un bloque de cdigo se ejecute slo si se dan una o varias condiciones, utilice la siguiente sintaxis:
<@ if (expression1) @> code block1 [<@ elseif (expression2) @> code block2]* [<@ else @> code block3] <@ endif @>

Los corchetes ([ ]) indican cdigo opcional, mientras que el asterisco (*) indica cero o ms instancias. La expresin de condicin puede ser cualquier expresin de condicin JavaScript vlida y puede contener parmetros de comportamiento de servidor. Para obtener ms informacin, consulte Conversin de los bloques de cdigo en condicionales en la pgina 618. Si desea que el bloque de cdigo o una parte de un bloque de cdigo se repita varias veces, utilice la siguiente sintaxis:
<@ loop (@@param1@@,@@param2@@) @> code block <@ endloop @>

La directiva de bucle (loop) toma como argumentos una lista de matrices de parmetros separadas por comas. El texto que debe repetirse se duplicar n veces, siendo n la longitud de los argumentos de matrices de parmetros. Si se especifica ms de un argumento de matrices de parmetros, todas las matrices debern tener la misma longitud. En la evaluacin nmero i del bucle, los elementos nmero i de las matrices de parmetros reemplazarn a las instancias de los parmetros asociados en el bloque de cdigo. Para obtener ms informacin, consulte Repeticin de bloques de cdigo en la pgina 619. Para obtener informacin general sobre codificacin, consulte Reglas de codificacin en la pgina 622. Utilizacin de parmetros en comportamientos de servidor Puede incluir parmetros en el cdigo de un comportamiento de servidor y dejar que el diseador de la pgina suministre los valores de parmetros necesarios antes de insertar el cdigo del comportamiento de servidor en la pgina. Para permitir que el diseador de la pgina proporcione valores para los parmetros, introduzca marcadores de parmetros en el cdigo como se indica a continuacin:
@@parameterName@@

Adicin de comportamientos de servidor personalizados 617

El siguiente ejemplo de comportamiento de servidor ASP contiene el parmetro formParam, que exige a la persona que inserta el comportamiento que proporcione un nombre de un objeto de formulario:
<% Session(lang_pref) = Request.Form(formParam); %>
Para crear un parmetro que permita al usuario proporcionar el valor necesario:

Encierre la cadena formParam entre marcadores de parmetro:

<% Session(lang_pref) = Request.Form(@@formParam@@); %>

Cree un cuadro de dilogo que solicite al diseador el nombre del objeto de formulario. Para obtener ms informacin, consulte Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado en la pgina 624.

Conversin de los bloques de cdigo en condicionales

Dreamweaver le permite desarrollar bloques de cdigo con declaraciones de control para que se ejecuten de manera condicional. El Creador de comportamientos de servidor utiliza las declaraciones if, elseif y else y puede incluir parmetros de comportamiento de servidor. Esto le permite insertar bloques de texto alternativo en funcin de los valores de las relaciones OR entre los parmetros de comportamiento de servidor. Las declaraciones if, elseif y else aparecen como se indica a continuacin. Los corchetes ([ ]) indican cdigo opcional, mientras que el asterisco (*) indica cero o ms instancias.
<@ if (expression1) @> conditional text1 [<@ elseif (expression2) @> conditional text2]* [<@ else @> conditional text3] <@ endif @>

Las expresiones de condicin pueden ser cualquier expresin de condicin JavaScript que pueda evaluarse utilizando la funcin JavaScript eval() y puede incluir un parmetro de comportamiento de servidor marcado mediante @@. (Los smbolos @@ son necesarios para distinguir el parmetro de las variables y palabras clave de JavaScript.) Puede anidar tantas condiciones o directivas loop (bucle) (consulte Repeticin de bloques de cdigo en la pgina 619) como desee dentro de una directiva condicional. Por ejemplo, puede especificar que si una expresin es verdadera, se ejecute un bucle.
Nota: Se omitirn las lneas nuevas situadas despus de cada @>.

Utilizacin eficaz de expresiones condicionales Cuando se utilizan las directivas if, else y elseif dentro de la etiqueta XML insertText, el texto en cuestin se preprocesa para resolver las directivas if y determinar qu texto debe incluirse en el resultado. Las directivas if y elseif toman la expresin como argumento. La expresin de condicin es idntica a las expresiones de condicin JavaScript y puede contener tambin parmetros de comportamiento de servidor. Directivas como sta le permiten elegir entre bloques de cdigo alternativos en funcin de los valores o las relaciones existentes entre los parmetros del comportamiento de servidor.

618 Captulo 37

Por ejemplo, el cdigo JSP que se muestra debajo procede de un comportamiento de servidor de Dreamweaver MX que utiliza el bloque de cdigo condicional:
@@rsName@@.close(); <conditional_code> @@rsName@@_hasData = @@rsName@@.next();

Si el comportamiento de servidor utiliza un juego de registros normal, el marcador de posicin <conditional_code> se reemplazar por:
@@rsName@@ = Statement@@rsName@@.executeQuery();

Si el comportamiento de servidor utiliza un juego de registros de un objeto ejecutable, utilizar el siguiente cdigo en su lugar.
@@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();

Si el comportamiento de servidor se aade para un objeto ejecutable, el usuario tendra que introducir un valor para el parmetro @@callableName@@ en el cuadro de dilogo Parmetro del comportamiento de servidor. En caso contrario, el parmetro @@callableName@@ estara vaco. Por consiguiente, puede reescribir el texto insertado anterior utilizando @@callableName@@ como argumento if. En este ejemplo, si el parmetro @@callableName@@ se proporciona con un valor, se selecciona el primer bloque de cdigo condicional (que contiene el mtodo getResultSet() ):
@@rsName@@.close(); <@ if (@@callableName@@ != '') @> @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();@ else @> @@rsName@@ = Statement@@rsName@@.executeQuery(); <@ endif @> @@rsName@@_hasData = @@rsName@@.next();

Repeticin de bloques de cdigo Al crear comportamientos de servidor, puede utilizar construcciones en bucle para repetir un bloque de cdigo un nmero determinado de veces. La sintaxis del bucle (loop) es la siguiente:
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @> code block <@ endloop @>

La directiva de bucle (loop) acepta como argumentos una lista de matrices de parmetros separadas por comas. En este caso, los argumentos de matrices de parmetros permiten al usuario proporcionar mltiples valores para un nico parmetro. El texto que debe repetirse se duplicar n veces, siendo n la longitud de los argumentos de matrices de parmetros. Si se especifica ms de un argumento de matrices de parmetros, todas las matrices debern tener la misma longitud. En la evaluacin nmero i del bucle, los elementos nmero i de las matrices de parmetros reemplazarn a las instancias de los parmetros asociados en el bloque de cdigo.

Adicin de comportamientos de servidor personalizados 619

Al crear posteriormente un cuadro de dilogo para el comportamiento de servidor (consulte Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado en la pgina 624), podr aadir un control al cuadro de dilogo que permita al diseador de la pgina crear matrices de parmetros. Dreamweaver incluye un control de matrices sencillo que puede utilizar para crear cuadros de dilogo. Este control, denominado Lista de campos de texto separada por comas, est disponible a travs del Creador de comportamientos de servidor. Para crear elementos de interfaz de usuario ms complejos, consulte la documentacin de la API para crear un cuadro de dilogo con un control que permita crear matrices (un control de cuadrcula, por ejemplo). Las directivas loop no se pueden anidar, aunque las directivas condicionales (consulte Conversin de los bloques de cdigo en condicionales en la pgina 618) s pueden anidarse en una directiva loop. El siguiente ejemplo muestra cmo pueden utilizarse estos bloques de cdigo repetidos para crear comportamientos de servidor (el ejemplo es un comportamiento de ColdFusion que permite obtener acceso a un comportamiento almacenado):
<CFSTOREDPROC procedure="AddNewBook" datasource=#MM_connection_DSN# username=#MM_connection_USERNAME# password=#MM_connection_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>

En este ejemplo, la etiqueta CFSTOREDPROC puede incluir cero o ms etiquetas CFPROCPARAM. No obstante, sin soporte para la directiva loop, no existe forma alguna de incluir las etiquetas CFPROCPARAM dentro de la etiqueta CFSTOREDPROC insertada. Si se creara este comportamiento de servidor sin utilizar la directiva loop, tendra que dividir este ejemplo en dos participantes: una etiqueta CFSTOREDPROC principal y una etiqueta CFPROCPARAM cuyo tipo participante es mltiple. Empleando la directiva loop, puede escribirse el mismo procedimiento de la siguiente forma:
<CFSTOREDPROC procedure="@@procedure@@" datasource=#MM_@@conn@@_DSN# username=#MM_@@conn@@_USERNAME# password=#MM_@@conn@@_PASSWORD#> <@ loop (@@paramName@@,@@value@@,@@type@@) @> <CFPROCPARAM type="IN" dbvarname="@@paramName@@" value="@@value@@" cfsqltype="@@type@@"> <@ endloop @> </CFSTOREDPROC>

En el ejemplo anterior, y tambin en el caso de bloques de cdigo condicionales, se omiten las nuevas lneas situadas despus de @>.

620 Captulo 37

Si el usuario introdujera los siguientes valores de parmetros en el cuadro de dilogo de comportamiento de servidor:
procedure = "proc1" conn = "connection1" paramName = ["@CategoryId", "@Year", "@ISBN"] value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"] type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]

El comportamiento de servidor insertara en la pgina el siguiente cdigo de tiempo de ejecucin:

<CFSTOREDPROC procedure="proc1" datasource=#MM_connection1_DSN# username=#MM_connection1_USERNAME# password=#MM_connection1_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>
Nota: Las matrices de parmetros no pueden utilizarse fuera de un bucle si no son parte de una expresin de directiva condicional.

Utilizacin de las variables _length y _index de la directiva loop La directiva loop incluye dos variables incorporadas que puede utilizar para condiciones if incrustadas. Dichas variables son: _length y _index. La variable _length se evala con respecto a la longitud de las matrices procesadas por la directiva loop, mientras que la variable _index se evala con respecto al ndice actual de la directiva 'loop'. Para asegurarse de que las variables slo se reconozcan como directivas y no como parmetros que deben pasarse al bucle, no ponga ninguna de estas variables entre @@. Un ejemplo de utilizacin de variables incorporadas consiste en aplicarlas al atributo import de la directiva de pgina. El atributo import exige la separacin de los paquetes mediante comas. Si la directiva loop engloba todo el atributo import, slo deber proporcionar como salida el nombre de atributo import= en la primera ocurrencia del bucle (incluidas las comillas dobles de cierre () y no proporcionar como salida una coma en la ltima ocurrencia del bucle). Empleando la variable incorporada, puede expresarlo de la siguiente forma:
<@loop (@@Import@@)@> <@ if(_index == 0)@>import=" <@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>, <@ endif @> <@ endloop @>

Adicin de comportamientos de servidor personalizados 621

Reglas de codificacin En general, el cdigo de los comportamientos de servidor debe ser compacto y robusto. Los desarrolladores de aplicaciones Web son muy sensibles al cdigo aadido a sus pginas. Aplique prcticas de codificacin generalmente aceptadas para el lenguaje de los tipos de documento (ColdFusion, ASP.NET, JavaScript, VBScript, PHP, Visual Basic o Java). Al escribir comentarios, tenga en cuenta las diferencias en cuanto a conocimientos tcnicos de las personas que tienen que comprender el cdigo, como son diseadores Web y de interaccin u otros desarrolladores de aplicaciones Web. Incluya comentarios que describan con precisin la finalidad del cdigo y cualquier instruccin especial para su inclusin en una pgina. Comprobacin de errores Un requisito importante es la comprobacin de errores. El cdigo del comportamiento de servidor debe gestionar los casos de error de forma correcta. Intente prever cualquier posibilidad: Por ejemplo, qu ocurre si falla la peticin de un parmetro? Qu ocurre si una consulta no devuelve ningn registro? Utilizacin de nombres exclusivos Su cdigo debe poderse identificar fcilmente y evitar los conflictos de nombres con el cdigo ya existente. Si la pgina contiene, por ejemplo, una funcin llamada hideLayer() y una variable global llamada ERROR_STRING y el comportamiento de servidor inserta cdigo que tambin usa esos nombres, el comportamiento de servidor puede originar un conflicto con el cdigo existente. Creacin de un prefijo para las funciones y variables globales del cdigo Cree su propio prefijo para las funciones de tiempo de ejecucin y variables globales que inserte en una pgina. Una posible convencin consiste en usar sus iniciales. No use nunca el prefijo MM_: est reservado para uso exclusivo de Macromedia. En el cdigo de Macromedia, todas las funciones y variables globales van precedidas por el prefijo MM_ para evitar que se produzcan conflictos con su cdigo.
var MM_ERROR_STRING = "..."; function MM_hideLayer() {

Cmo evitar bloques de cdigo similares Compruebe que el cdigo de sus bloques no se parece demasiado al cdigo de otros bloques. Si un bloque de cdigo se parece demasiado a otro bloque de cdigo de la pgina, el panel Comportamientos del servidor podra identificar errneamente el primer bloque de cdigos como una instancia del segundo bloque de cdigos (o al contrario). Una solucin simple consiste en aadir un comentario a un bloque de cdigo para hacerlo ms exclusivo. Colocacin de bloques de cdigo Despus de escribir bloques de cdigo en el Creador de comportamientos de servidor, deber especificar el lugar del cdigo HTML de la pgina en el que se insertarn. El men emergente Insertar cdigo permite especificar si el bloque de cdigo se debe situar antes de la etiqueta inicial <html>, despus de la etiqueta de cierre </html>, con relacin a otra etiqueta de la pgina o con relacin a una etiqueta seleccionada por el diseador de la pgina.

622 Captulo 37

Para situar un bloque de cdigo antes de la etiqueta <html>:

1 2

En el men emergente Insertar cdigo, elija Por encima de la etiqueta <html>. Especifique una ubicacin por encima de la etiqueta eligiendo una opcin del men emergente Posicin relativa. Puede insertar el bloque al principio del archivo, justo antes de los bloques de cdigo que abren los conjuntos de registros, justo despus de los mismos bloques o justo antes de la etiqueta <html>. Tambin puede especificar una posicin personalizada.

Si desea especificar una posicin personalizada, elija Posicin personalizada en el men emergente Posicin relativa y asigne un peso al bloque de cdigo. Dreamweaver asigna un peso de 50 a todos los bloques de cdigo de apertura de juegos de registros que se insertan por encima de la etiqueta <html>. Si coincide el peso de dos o ms bloques, Dreamweaver establece un orden aleatorio. Utilice la opcin Posicin personalizada cuando necesite insertar varios bloques de cdigo en un orden concreto. Por ejemplo, si desea insertar una serie ordenada de tres bloques de cdigo despus de los bloques de cdigo que abren los conjuntos de registros, puede especificar un peso de 60, 65 y 70 para los bloques primero, segundo y tercero, respectivamente.

Para situar un bloque de cdigo despus de la etiqueta de cierre </html>:

1 2

En el men emergente Insertar cdigo, elija Por debajo de la etiqueta </html>. Especifique una ubicacin por debajo de la etiqueta eligiendo una opcin del men emergente Posicin relativa. Puede insertar el bloque justo despus de la etiqueta </html>, justo antes de los bloques de cdigo que cierran los conjuntos de registros, justo despus de los mismos bloques o justo antes del final del archivo. Tambin puede especificar una posicin personalizada.

Si desea especificar una posicin personalizada, elija Posicin personalizada en el men emergente Posicin relativa y asigne un peso al bloque de cdigo. Dreamweaver asigna un peso de 50 a todos los bloques de cdigo de cierre de juegos de registros que se insertan por debajo de la etiqueta </html>. Si coincide el peso de dos o ms bloques, Dreamweaver establece un orden aleatorio. Utilice la opcin Posicin personalizada cuando necesite insertar varios bloques de cdigo en un orden concreto. Por ejemplo, si desea insertar una serie ordenada de tres bloques de cdigo antes de los bloques de cdigo que cierran los conjuntos de registros, puede especificar un peso de 30, 35 y 40 para los bloques primero, segundo y tercero, respectivamente.

Para situar un bloque de cdigo con relacin a otra etiqueta de la pgina:

1 2

En el men emergente Insertar cdigo, elija Relativo a una etiqueta especfica. En el cuadro de texto Etiqueta, introduzca la etiqueta o seleccinela del men emergente. Si introduce una etiqueta, omita los signos < y >.

Adicin de comportamientos de servidor personalizados 623

Especifique una ubicacin relativa a la etiqueta eligiendo una opcin del men emergente Posicin relativa. Puede insertar el bloque de cdigo justo antes o justo despus de las etiquetas inicial o de cierre. Tambin puede reemplazar la etiqueta con el cdigo, insertar el cdigo como valor de un atributo de la etiqueta (aparecer un cuadro para que pueda elegir el atributo) o insertar el cdigo dentro de la etiqueta inicial.

Para situar un bloque de cdigo con relacin a una etiqueta seleccionada por el diseador de la pgina:

1 2

En el men emergente Insertar cdigo, elija Relativo a la seleccin. Especifique una ubicacin relativa a la seleccin eligiendo una opcin del men emergente Posicin relativa. Puede insertar el bloque de cdigo justo antes o justo despus de la seleccin. Tambin puede reemplazar la seleccin con el bloque de cdigo o situar el bloque de cdigo alrededor de la seleccin. Si desea situar el bloque de cdigo alrededor de la seleccin, sta deber constar de una etiqueta inicial y otra de cierre sin nada entre ellas, como se muestra a continuacin.
<CFIF Day=Monday></CFIF>

La parte de la etiqueta de apertura del bloque de cdigo se inserta antes de la etiqueta inicial de la seleccin y la parte de cierre del bloque, despus de la etiqueta de cierre de la seleccin. Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado Los comportamientos de servidor exigen con frecuencia que el diseador de la pgina proporcione un valor para un parmetro. Dicho valor debe insertarse antes de insertar el cdigo del comportamiento de servidor en la pgina. Para ello, puede crear un cuadro de dilogo que solicite un valor para un parmetro a la persona que va a implementar el comportamiento de servidor. Deber crear el cuadro de dilogo definiendo en el cdigo los parmetros proporcionados por el diseador. Una vez definidos todos los parmetros, podr generar un cuadro de dilogo para el comportamiento de servidor.
Nota: Si especifica que el cdigo debe insertarse con relacin a una etiqueta seleccionada por el diseador de la pgina (opcin Relativo a una etiqueta especfica del men emergente Insertar cdigo), se aadir automticamente un parmetro al bloque de cdigo. Dicho parmetro aade un men de etiquetas al cuadro de dilogo del comportamiento para que el diseador pueda elegir una etiqueta.

Para crear un parmetro en el cdigo del comportamiento de servidor:

Introduzca un marcador de parmetro en la posicin del cdigo en la que desea insertar el valor del parmetro proporcionado por el diseador. La sintaxis del parmetro es la siguiente:
@@parameterName@@

Por ejemplo, si el comportamiento de servidor contiene el siguiente bloque de cdigo:

<% Session(lang_pref) = Request.Form(Form_Object_Name); %>

Para permitir que el diseador de la pgina proporcione el valor de Form_Object_Name, encierre la cadena entre marcadores de parmetro (@@):
<% Session(lang_pref) = Request.Form(@@Form_Object_Name@@); %>

624 Captulo 37

Tambin puede resaltar la cadena y hacer clic en el botn Insertar parmetro en bloque de cdigo. Introduzca un nombre de parmetro y haga clic en Aceptar. Dreamweaver reemplazar todas las instancias de la cadena resaltada con el nombre de parmetro especificado encerrado entre los marcadores de parmetro. Dreamweaver utiliza las cadenas encerradas entre marcadores de parmetros para asignar una etiqueta a los controles del cuadro de dilogo que genera (consulte el siguiente procedimiento). En el ejemplo anterior, Dreamweaver crea un cuadro de dilogo con la siguiente etiqueta:

Nota: Los nombres de parmetros en el cdigo del comportamiento de servidor no pueden incluir espacios. Por consiguiente, las etiquetas del cuadro de dilogo no pueden contener espacios. Si desea incluir espacios en la etiqueta, puede editar el archivo HTML generado.

Para crear un cuadro de dilogo para un comportamiento de servidor

En el Creador de comportamientos de servidor, haga clic en Siguiente. Aparecer un cuadro de dilogo con todos los parmetros proporcionados por el diseador definidos en el cdigo.

2 3 4

Si lo desea, cambie el orden de presentacin de los controles del cuadro de dilogo. Para ello, seleccione un parmetro y haga clic en los botones de flecha arriba y abajo. Si lo desea, puede cambiar el control de un parmetro. Para ello, seleccione el parmetro y elija otro control en la columna Mostrar como. Haga clic en Aceptar.

Adicin de comportamientos de servidor personalizados 625

Dreamweaver genera un cuadro de dilogo con un control etiquetado por cada parmetro proporcionado por el diseador que haya definido. Para ver el resultado, haga clic en el botn de signo ms (+) del panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y seleccione el comportamiento en el men emergente.
Para editar el cuadro de dilogo de un comportamiento de servidor previamente creado:

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Editar comportamientos de servidor en el men emergente. Seleccione el comportamiento de servidor en la lista y haga clic en Abrir. Se abrir el Creador de comportamientos de servidor con el comportamiento seleccionado. Haga clic en Siguiente. Aparecer un cuadro de dilogo con todos los parmetros proporcionados por el diseador definidos en el cdigo.

4 5 6

Si lo desea, cambie el orden de presentacin de los controles del cuadro de dilogo. Para ello, seleccione un parmetro y haga clic en los botones de flecha arriba y abajo. Si lo desea, puede cambiar el control de un parmetro. Para ello, seleccione el parmetro y elija otro control en la columna Mostrar como. Haga clic en Aceptar.

Comprobacin de comportamientos de servidor Macromedia Exchange recomienda realizar las siguientes comprobaciones con cada comportamiento de servidor que se crea:

Aplique el comportamiento desde el panel Comportamientos del servidor. Si tiene un cuadro

de dilogo, introduzca datos vlidos en cada campo y presione Aceptar. Verifique que no se produce ningn error al aplicar el comportamiento. Verifique que el cdigo de tiempo de ejecucin del comportamiento de servidor aparece en el inspector de cdigo.

Vuelva a aplicar el comportamiento de servidor e introduzca datos no vlidos en cada campo

del cuadro de dilogo. Pruebe a dejar el campo vaco usando nmeros muy grandes o negativos, usando caracteres no vlidos (como /, ?, :, *, etc.), y usando letras en campos numricos. Puede escribir rutinas de validacin de formularios para gestionar datos no vlidos (las rutinas de validacin implican codificacin manual, lo que queda fuera del alcance y el propsito de este libro). Una vez aplicado satisfactoriamente el comportamiento de servidor a la pgina, verifique lo siguiente:

Compruebe el panel Comportamientos del servidor para asegurarse de que el nombre del
comportamiento de servidor aparece en la lista de comportamientos aadidos a la pgina.

Si corresponde, verifique que los iconos de scripts del lado del servidor se muestran en la
pgina. Los iconos genricos de los scripts del lado del servidor son escudos de oro. Para ver los iconos, active Elementos invisibles (Ver > Ayudas visuales > Elementos invisibles).

En la vista Cdigo (Ver > Cdigo) compruebe que no se genera cdigo no vlido.

626 Captulo 37

Adems, si su comportamiento de servidor inserta cdigo en el documento estableciendo una conexin con una base de datos, cree una base de datos de prueba para comprobar el cdigo insertado en el documento. Verifique la conexin definiendo consultas que den lugar a diferentes conjuntos de datos, y diferentes tamaos de conjuntos de datos. Por ltimo, cargue la pgina en el servidor y brala en un navegador. Vea el cdigo HTML de la pgina y verifique que no los scripts del lado del servidor no hayan generado cdigo HTML no vlido.

Edicin y modificacin de cdigo de comportamientos de servidor

Puede editar cualquier comportamiento de servidor creado con el Creador de comportamientos de servidor, incluidos los que descargue del sitio Web de Macromedia Exchange y de otros desarrolladores. Si aplica un comportamiento de servidor a una pgina y luego lo edita en Dreamweaver, dejarn de mostrarse en el panel Comportamientos del servidor las instancias del comportamiento antiguo. El panel Comportamientos del servidor busca en la pgina cdigo que coincida con el cdigo de comportamientos de servidor conocidos. Si el cdigo de un comportamiento de servidor que conoce el panel cambia, el panel ya no reconocer las versiones anteriores del comportamiento en esa pgina. Si desea que tanto las versiones antiguas como las nuevas del comportamiento se muestren en el panel, haga clic en el botn de signo ms (+) del panel Comportamientos del servidor, seleccione Nuevo comportamiento de servidor, y cree una copia del comportamiento de servidor antiguo. Edicin de comportamientos de servidor
Para editar el cdigo de un comportamiento de servidor creado con el Creador de comportamientos de servidor:

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Editar comportamientos de servidor en el men emergente. Aparecer el cuadro de dilogo Editar comportamiento de servidor, en el que se mostrarn todos los comportamientos correspondientes a la actual tecnologa de servidores.

Adicin de comportamientos de servidor personalizados 627

Seleccione el comportamiento de servidor y haga clic en Editar. Aparecer el cuadro de dilogo Creador de comportamientos de servidor.

3 4

Seleccione el correspondiente bloque de cdigo y modifique el cdigo a insertar en las pginas. Si lo desea, modifique o aada marcadores de parmetros al cdigo. Para obtener instrucciones, consulte Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado en la pgina 624.

Si lo desea, cambie el lugar del cdigo HTML de la pgina en el que se debe insertar el cdigo seleccionando otra opcin en el men emergente Insertar cdigo. Para obtener instrucciones, consulte Colocacin de bloques de cdigo en la pgina 622. Si el cdigo modificado no contiene parmetros proporcionados por el diseador, haga clic en Aceptar. Dreamweaver regenerar el comportamiento de servidor sin ningn cuadro de dilogo. El nuevo comportamiento de servidor aparecer en el men emergente de signo ms (+) del panel Comportamientos del servidor.

Si el cdigo modificado contiene parmetros proporcionados por el diseador, haga clic en Siguiente. Dreamweaver le preguntar si desea crear un nuevo cuadro de dilogo que sobrescriba al antiguo. Realice las modificaciones que desee y haga clic en Aceptar.

Dreamweaver guardar todos los cambios en el archivo EDML del comportamiento de servidor.

628 Captulo 37

CAPTULO 38 Creacin de formularios interactivos

Los formularios permiten interactuar con los visitantes de un sitio Web o recopilar informacin sobre ellos. Los formularios recogen informacin del usuario y la envan al servidor para procesarla. Contienen diversos objetos que permiten la interaccin del usuario. Entre los objetos de formulario figuran los campos de texto, los cuadros de lista, las casillas de verificacin y los botones de opcin. La etiqueta form incluye parmetros que permiten especificar una ruta al script o aplicacin del lado del servidor, que procesar los datos del formulario, as como el mtodo HTTP que se utilizar para transmitir los datos del navegador al servidor. Cuando un visitante introduce informacin en el formulario de un sitio Web y hace clic en el botn de envo, la informacin se transfiere al servidor donde ser procesada por una aplicacin o script del lado del servidor. El servidor responde enviando la informacin solicitada de vuelta al usuario o bien realizando alguna accin basada en el contenido del formulario. Normalmente, un script CGI (Common Gateway Interface), pgina ColdFusion, JavaServer Page (JSP) o Active Server Page (ASP) procesa la informacin. Tenga en cuenta que no puede recoger datos del formulario sin un script o aplicacin del lado del servidor para procesarlos.
3 Se crea un documento HTML y se enva al visitante

<HTML> </HTML>

2 CF script procesa el formulario

1 El visitante rellena el formulario y lo enva al servidor Web para su procesamiento

Macromedia Dreamweaver MX permite crear distintos objetos de formulario, como campos de texto, campos de contrasea, botones de opcin, casillas de verificacin, mens emergentes o imgenes en las que es posible hacer clic (por ejemplo, un botn Enviar).

629

Dreamweaver tambin incluye un comportamiento Validar formulario para verificar la informacin proporcionada por un visitante. Por ejemplo, se puede comprobar que una direccin de correo electrnico contiene un smbolo @ o que se ha introducido informacin en un campo obligatorio. Este captulo contiene las secciones siguientes:

Objetos de formularios Creacin de un formulario Aspectos bsicos de los objetos de formulario Insercin de casillas de verificacin y botones de opcin Creacin de listas y mens Adicin de botones de formularios Diseo de formularios Utilizacin de una funcin JavaScript del lado del cliente para procesar formularios Utilizacin de comportamientos con formularios Creacin de objetos de formularios dinmicos

Objetos de formularios
En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario. Se pueden insertar objetos de formulario mediante la opcin Insertar > Objeto de formulario o accediendo a los objetos de formulario desde el panel Formularios de la barra Insertar que se muestra ms adelante.

La barra Formularios proporciona los siguientes botones:

Formulario inserta un formulario en el documento. Dreamweaver inserta etiquetas form de apertura y cierre de formulario en el cdigo HTML. Los dems objetos del formulario, como los campos de texto o los botones, deben insertarse entre las etiquetas form para que los datos se procesen correctamente en todos los navegadores. Campo de texto

inserta un campo de texto en un formulario. Los campos de texto aceptan cualquier tipo de valores alfanumricos. El texto introducido puede mostrarse como una sola lnea, varias lneas o como vietas y asteriscos (para proteccin de la contrasea).

Campo oculto

inserta un campo en el documento que permite almacenar datos del usuario. Los campos ocultos permiten almacenar informacin introducida por el usuario, como un nombre, una direccin de correo electrnico o una preferencia de compra, y utilizarlos la prxima vez que el usuario visite el sitio.

Casilla de verificacin

inserta una casilla de verificacin en un formulario. Las casillas de verificacin admiten mltiples respuestas en un solo grupo de opciones y permiten que los usuarios seleccionen tantas opciones como sean necesarias.

630 Captulo 38

Botn de opcin inserta un botn de opcin en un formulario. Los botones de opcin representan opciones exclusivas de seleccin. Al seleccionar un botn en un grupo, se anula la seleccin de todos los dems botones del grupo. Por ejemplo, un usuario puede elegir S o No. Grupo de opciones Lista/men

inserta un grupo de botones de opcin que comparten el mismo nombre.

permite crear opciones de usuario en una lista. La opcin Lista muestra los valores de las opciones en una lista de desplazamiento y permite a los usuarios seleccionar varias opciones. La opcin Men muestra los valores de las opciones en un men emergente y permite a los usuarios seleccionar una sola opcin.

Men de salto inserta una lista de navegacin o un men emergente. Los mens de salto permiten insertar un men en el que cada opcin est vinculada a un documento o un archivo. Consulte Creacin de mens de salto en la pgina 455. Campo de imagen permite insertar una imagen en un formulario. Los campos de imagen pueden usarse en lugar de los botones Enviar para crear botones grficos. Campo de archivo inserta un cuadro de texto vaco y un botn Examinar en un documento. Los campos de archivo permiten al usuario examinar los archivos de sus discos duros y cargarlos como datos de formulario. Botn

inserta un botn de texto en un formulario. Los botones llevan a cabo tareas cuando se hace clic en ellos, como enviar o restablecer formularios. Puede aadir un nombre o una etiqueta personalizada a un botn, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer.

Creacin de un formulario
La barra Insertar de Dreamweaver permite crear formularios y aadir objetos como campos de texto, botones, cuadros de lista y botones de opcin a dichos formularios.
Para aadir un formulario a un documento:

1 2

Site el punto de insercin en el lugar donde desea que aparezca el formulario. Elija Insertar > Formulario o seleccione la categora Formularios en la barra Insertar y haga clic en el icono Formulario. Dreamweaver inserta un formulario. En modo Diseo, los formularios aparecen indicados mediante un contorno de lnea de puntos de color rojo. Si no ve el contorno, compruebe que la opcin Ver > Ayudas visuales > Elementos invisibles est seleccionada.

Creacin de formularios interactivos 631

En la ventana de documento, haga clic en el contorno para seleccionar el formulario o bien seleccione la etiqueta <form> en el selector de etiquetas, que est situado en el extremo inferior izquierdo de la ventana. En el campo Nombre del formulario del inspector de propiedades, escriba un nombre exclusivo para el formulario. La asignacin de nombre al formulario permite hacer referencia a l o controlarlo con un lenguaje de scripts como JavaScript o VBScript. Si no asigna un nombre al formulario, Dreamweaver genera uno mediante la sintaxis formn e incrementa el valor de n para cada uno de los formularios que se aadan a la pgina.

En el campo Accin del inspector de propiedades, especifique la ruta de la pgina dinmica o script que va a procesar el formulario. Puede introducir la ruta completa en el campo Accin o bien hacer clic en el icono de carpeta para acceder a la carpeta que contiene el script o pgina de aplicacin. Si especifica la ruta de una pgina dinmica, la ruta al URL ser similar a este ejemplo:
http://www.mysite.com/application_name/process.cfm

En el men emergente Mtodo, elija el mtodo mediante el cual se transmitirn los datos del formulario al servidor. Los mtodos son:
POST GET Incrusta los datos del formulario en la peticin HTTP. Aade el valor a la URL que solicita la pgina.

Predeterminado Utiliza el valor predeterminado del navegador para enviar los datos del formulario del servidor. Normalmente el valor predeterminado es el mtodo GET.

Tenga en cuenta que el mtodo que elija vendr determinado por el servidor Web o de aplicaciones que utilice. Para obtener ms informacin, pngase en contacto con el administrador del servidor de su empresa. No utilice el mtodo GET para enviar formularios largos. Las URL tiene una limitacin de 8.192 caracteres. Si el tamao de los datos enviados es demasiado grande, los datos se truncarn, lo que puede producir resultados de procesamiento inesperados o errneos. Adems, no debe utilizar el mtodo GET cuando enve nombres de usuario, contraseas, nmeros de tarjetas de crdito o cualquier otro tipo de informacin confidencial. GET no es un mtodo seguro para transferir informacin.
7

El men emergente Enctype permite especificar el tipo de codificacin MIME de los datos remitidos al servidor para su procesamiento. El valor predeterminado de application/x-www-form-urlencode se utiliza normalmente junto con el mtodo POST. Si crea un campo de carga de archivos, especifique el tipo MIME multipart/form-data.

632 Captulo 38

El men emergente Destino permite especificar la ventana en la que se muestran los datos devueltos por el programa ejecutado. Si la ventana indicada no se ha abierto an, aparece una nueva ventana con ese nombre. Los valores de destino son:
_blank

abre el documento de destino en una nueva ventana sin nombre. abre el documento de destino en la ventana padre de la que muestra el documento

_parent

actual.
_self

abre el documento de destino en la misma ventana en la que se envi el formulario.

_top abre el documento de destino en el cuerpo de la ventana actual. Este valor se puede utilizar para garantizar que el documento de destino cubre la ventana completa incluso en el caso de que el documento original apareciera en un marco.

Aspectos bsicos de los objetos de formulario

Los objetos de formulario son mecanismos que permiten a los usuarios introducir datos. Para crear un objeto de formulario, es necesario insertar primero un formulario en la pgina.
Sugerencia: Si intenta insertar un objeto de formulario sin haber creado previamente el formulario, Dreamweaver presentar el mensaje Aadir etiquetas de formulario? Elija S para que Dreamweaver cree las etiquetas de formulario para el objeto.

Los objetos de formulario que se pueden agregar a un formulario son:

Campos de texto aceptan cualquier valor alfanumrico. El texto puede mostrarse en una sola lnea, en varias o como una serie de puntos o asteriscos en el caso de informacin privada (por ejemplo, para proteccin de contraseas). Campos ocultos

permiten almacenar informacin introducida por el usuario, como un nombre, una direccin de correo electrnico o una preferencia de visualizacin, y utilizarlos la prxima vez que el usuario visite el sitio.

Botones realizan acciones cuando se hace clic en ellos. Normalmente estas acciones incluyen el envo y restablecimiento de formularios. Puede aadir un nombre o una etiqueta personalizada a un botn, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer. Casillas de verificacin admiten mltiples respuestas en un solo grupo de opciones. Un usuario puede seleccionar tantas acciones como sean necesarias. Botones de opcin

representan opciones que se excluyen mutuamente. Cuando se selecciona un botn de un grupo de botones de opcin, se desactivan todos los dems botones del grupo (un grupo est formado por dos o ms botones que comparten el mismo nombre). Por ejemplo, en un formulario de subscripcin, un usuario debe elegir entre dos opciones: Varn o Hembra.

Lista/men muestra

valores de opciones en una lista de desplazamiento que permite a los usuarios seleccionar varias opciones. La opcin Men muestra los valores de las opciones en un men emergente que permite a los usuarios seleccionar una sola opcin. de navegacin o mens emergentes que permiten insertar un men en el que cada opcin se vincula a un documento o archivo. Consulte Creacin de mens de salto en la pgina 455.

Mens de salto son listas

Campos de archivo permiten al usuario examinar los archivos de su equipo y cargarlos como datos

de un formulario.

Creacin de formularios interactivos 633

Campos de imagen permiten insertar una imagen en un formulario. Los campos de imagen se pueden utilizar para crear botones grficos (por ejemplo, Enviar o Restablecer).

Utilizacin de campos de formularios Los campos permiten a los usuarios introducir texto en un formulario. Existen tres tipos de campos de formulario:

Campos de texto (en los que el usuario introduce una respuesta). Campos de archivo (en los que un usuario introduce la ruta de un archivo que se va a cargar en
el servidor).

Campos ocultos (que almacenan informacin que introdujo un usuario en otro campo).
Cuando aada un campo a un formulario, podr especificar su longitud, el nmero de lneas que contiene, el nmero mximo de caracteres que puede introducir el usuario y si se trata de un campo de contrasea. Creacin de campos de texto Un campo de texto es un objeto de formulario en el que los usuarios escriben una respuesta. Hay tres tipos de campos de texto:
Los campos de texto de una lnea se

utilizan para proporcionar respuestas compuestas por una sola palabra o una frase corta; por ejemplo, un nombre o una direccin.

Los campos de texto de varias lneas ofrecen mayor espacio al visitante para escribir la respuesta. Se puede especificar el nmero mximo de lneas que el visitante puede introducir, as como el nmero de caracteres del objeto. Si se introduce texto que supere esto valores, el campo se desplaza con arreglo al valor especificado en el atributo de ajuste. Los campos de contrasea

son un tipo especial de campos de texto. Cuando un usuario escribe en un campo de contrasea, el texto se sustituye por asteriscos o vietas para que quede oculto y evitar as que otra persona pueda ver la informacin. Tenga en cuenta que las contraseas, as como cualquier otra informacin que se enve a un servidor mediante campos de contrasea, no estn cifradas. Los datos transferidos pueden ser interceptados y ledos como texto alfanumrico. Por esta razn, debe facilitar siempre el cifrado de los datos que desea que permanezcan seguros.

634 Captulo 38

Para crear un campo de texto de una lnea o de contrasea:

1 2

Site el punto de insercin en el interior del contorno del formulario. Elija Insertar > Objetos de formulario> Campo de texto. Aparece un campo de texto en el documento y se abre el inspector de propiedades de Campo de texto.

En el inspector de propiedades del campo Campo de texto, escriba un nombre exclusivo para el campo. El nombre que elija debe identificar de forma exclusiva el campo de texto dentro del formulario. Los nombres de objeto de formulario no pueden contener espacios ni caracteres especiales. Puede utilizar cualquier combinacin de caracteres alfanumricos y un guin bajo (_). No olvide que la etiqueta que asigne al Campo de texto ser el nombre de variable que almacenar el valor (los datos introducidos) del campo. Este es el valor que se enva al servidor para su procesamiento.

En el campo Ancho car, lleve a cabo una de estas operaciones: aproximadamente en 20 caracteres.

Acepte el valor predeterminado, que establece la longitud del campo de texto Especifique la longitud mxima del campo de texto. La longitud mxima de un campo de texto
determina el nmero mximo de caracteres que podrn verse en el campo. Por ejemplo, si el valor de Ancho car es 20 (valor predeterminado) y un usuario introduce 100 caracteres, solamente 20 de esos caracteres aparecern visibles en el campo de texto. Tenga en cuenta que aunque no pueda ver los caracteres del campo, stos son reconocidos por el objeto del campo y se envan al servidor para su procesamiento.
5

En el campo Cars mx, introduzca un valor para el nmero mximo de caracteres que el usuario puede introducir en el campo de texto. Este valor define los limites de tamao del campo de texto y sirve para validar el formulario. Si deja el campo vaco, los usuarios no tendrn restricciones a la hora de introducir texto. El texto se desplaza si supera el ancho de caracteres del campo. Si el usuario supera el nmero mximo de caracteres, el formulario genera un sonido de alerta.

Seleccione Una lnea o Contrasea para especificar el tipo de campo de texto que desea crear. Tambin puede crear un campo de texto de varias lneas. Para obtener instrucciones sobre la creacin de campos de texto de varias lneas, consulte Creacin de campos de texto de varias lneas en la pgina 636.

Si desea mostrar un valor de texto predeterminado para el campo, escrbalo en el campo Val inicial, en el inspector de propiedades. El valor introducido aparecer en el campo de texto cuando el formulario se cargue por primera vez en el navegador del usuario. Por ejemplo, puede indicar que el usuario debe introducir informacin en el campo mediante una nota o un valor de ejemplo.

Creacin de formularios interactivos 635

Para crear la etiqueta el campo dentro de la pgina, coloque le punto de insercin junto al objeto e introduzca el texto adecuado.

Puede aplicar cualquier formato de texto a las etiquetas de los objetos de formulario. Para obtener ms informacin, consulte Configuracin y cambio de fuentes y estilos en la pgina 300. El ejemplo siguiente muestra un campo de texto de una lnea con la etiqueta "Introduzca su nombre de usuario:". Observe que segn el campo Ancho car del inspector de propiedades del Campo de texto, el campo debe mostrar un mximo de 30 caracteres, pero puede albergar hasta 50 caracteres.

Creacin de campos de texto de varias lneas Los campos de texto de varias lneas permiten introducir varias lneas de texto. Al crear un campo de texto de varias lneas, puede especificar el nmero de lneas de texto que puede introducir el usuario.
Para crear un campo de texto de varias lneas:

1 2

Site el punto de insercin en el interior del contorno del formulario. Elija Insertar > Objetos de formulario> Campo de texto. Se inserta un campo de texto en el documento y se abre el inspector de propiedades del Campo de texto.

636 Captulo 38

En el inspector de propiedades del campo Campo de texto, escriba un nombre exclusivo para el campo. El nombre que elija debe identificar de forma exclusiva el campo de texto dentro del formulario. Los nombres de objeto de formulario no pueden contener espacios ni caracteres especiales. Puede utilizar cualquier combinacin de caracteres alfanumricos y un guin bajo (_). No olvide que la etiqueta que asigne al Campo de texto ser el nombre de variable que almacenar el valor (los datos introducidos) del campo. Este es el valor que se enva al servidor para su procesamiento.

En el campo Ancho car, lleve a cabo una de estas operaciones: aproximadamente en 20 caracteres.

Acepte el valor predeterminado, que establece la longitud del campo de texto Especifique la longitud mxima del campo de texto. La longitud mxima de un campo de texto
determina el nmero mximo de caracteres que podrn verse en el campo. Por ejemplo, si el valor de Ancho car es 20 (valor predeterminado) y un usuario introduce 100 caracteres, solamente 20 de esos caracteres aparecern visibles en el campo de texto. Tenga en cuenta que aunque no pueda ver los caracteres del campo, stos son reconocidos por el objeto del campo y se envan al servidor para su procesamiento.
5 6

Seleccione Varias lneas para especificar el tipo de campo de texto que desea crear. En el campo Lneas nm, especifique el nmero mximo de lneas que se pueden mostrar. El valor predeterminado es dos lneas. En el men emergente Ajuste, elija una opcin para determinar cmo se mostrar el texto introducido por el usuario cuando su longitud sea superior a la capacidad del rea de texto. Las opciones de ajuste son:
Desactivado o Predeterminado impide que el texto se ajuste pasando a la siguiente lnea. Cuando el texto introducido por el usuario supera el lmite derecho del rea de texto, el texto se desplaza hacia la izquierda. El usuario deber presionar Retorno para mover el punto de insercin a la siguiente lnea del rea de texto. Virtual

para ajustar el texto en el rea de texto. Cuando el texto introducido por el usuario supera el lmite derecho del rea de texto, el texto se ajusta a la siguiente lnea. Cuando se enva los datos para su procesamiento, no se aplica el ajuste de texto. Se envan en una sola cadena de datos.

Fsico para ajustar el texto tanto en el rea de texto como en los datos que se envan para su procesamiento. 8

Si desea mostrar un valor de texto predeterminado para el campo, escrbalo en el campo Val inicial, en el inspector de propiedades. El valor introducido aparecer en el campo de texto cuando el formulario se cargue por primera vez en el navegador del usuario. Por ejemplo, puede indicar que el usuario debe introducir informacin en el campo mediante una nota o un valor de ejemplo.

Para crear la etiqueta el campo dentro de la pgina, coloque le punto de insercin junto al objeto e introduzca el texto adecuado. Puede aplicar cualquier formato de texto a las etiquetas de los objetos de formulario. Para obtener ms informacin, consulte Configuracin y cambio de fuentes y estilos en la pgina 300.

Creacin de formularios interactivos 637

Creacin de un campo de carga de archivos Puede crear un campo de carga de archivos para que el usuario pueda seleccionar un archivo de su sistema, como un documento de tratamiento de textos o un archivo grfico, y cargarlo en el servidor. Un campo de archivo tiene la apariencia de un campo de texto, pero contiene adems un botn Examinar. El usuario puede introducir manualmente la ruta del archivo que desea cargar o utilizar el botn Examinar para localizar el archivo y seleccionarlo. En los campos de archivo, es necesario utilizar el mtodoPOST para transmitir los archivos desde el navegador al servidor. El archivo se enva a la direccin especificada en el campo Accin del formulario.
Nota: Pngase en contacto con el administrador del servidor para confirmar si se permite la carga de archivos annimos, antes de usar el campo de archivo.

Para crear un campo de archivo en un formulario:

1 2 3 4

Inserte un formulario en la pgina (Insertar > Formulario). Seleccione el formulario. Aparece el inspector de propiedades del formulario. Defina el mtodo del formulario como POST. En el men Enctype, seleccione multipart/form-data.

Site el punto de insercin en el contorno del formulario y elija Insertar > Objetos de formulario > Campo de archivo o haga clic en el icono Insertar campo de archivo en la ficha Formulario de la barra Insertar. Se inserta un campo de archivo en el formulario. En el campo Campo archivo del inspector de propiedades, escriba un nombre para el objeto campo de archivo. En el campo Ancho car, especifique el nmero mximo de caracteres que desea que muestre el campo. En el campo Cars mx, especifique el nmero mximo de caracteres que debe contener el campo. Si el usuario utiliza Examinar para localizar el archivo, el nombre del archivo y la ruta pueden superar el valor de Cars mx. Sin embargo, si el usuario intenta escribir el nombre del archivo y la ruta, el campo de archivo slo admitir el nmero de caracteres especificado en el valor Cars mx.

6 7 8

638 Captulo 38

En el ejemplo siguiente se ilustra un campo de archivo sencillo. Observe que en el inspector de propiedades el valor del campo Cars mx es 75, mientras que Ancho car se ha definido como 30. Esto quiere decir que el usuario slo ver 30 caracteres de la ruta del archivo. Debe tener en cuenta los tipos de archivos que va a cargar el usuario y si necesitan ver la ruta del archivo completa en el cuadro de texto del campo de archivo.

Creacin de un campo oculto Los campos ocultos son campos de texto que se emplean para recoger informacin sobre los usuarios. La informacin almacenada en el campo se enva de vuelta al servidor al enviar el formulario. Dreamweaver crea un marcador al documento cuando se inserta un campo oculto. Si inserta un campo oculto y el marcador no es visible, elija Ver > Ayudas visuales > Elementos invisibles para verlo.
Para crear un campo oculto:

1 2

Site el punto de insercin en el interior del contorno del formulario. Elija Insertar > Objetos de formulario> Campo oculto. Aparecer un marcador en el documento. En el campo Campo oculto del inspector de propiedades, escriba un nombre exclusivo para el campo. En el campo Valor, escriba el valor que desee asignar al campo.

3 4

Insercin de casillas de verificacin y botones de opcin

Los objetos casilla de verificacin y botn de opcin crean objetos de seleccin predefinidos en los formularios. El usuario hace clic en una casilla de verificacin o un botn de opcin para hacer una eleccin.

Creacin de formularios interactivos 639

Aspectos bsicos de las casillas de verificacin y los botones de opcin Las casillas de verificacin permiten activar o desactivar respuestas individuales. Por lo tanto, el usuario puede seleccionar ms de una opcin en un grupo de casillas de verificacin. El ejemplo siguiente muestra tres casillas de verificacin seleccionadas para ilustrar esto: Surfing, Mountain Biking y Rafting.

Los botones de opcin funcionan como un grupo y ofrecen valores de seleccin mutuamente excluyentes. El usuario slo puede seleccionar una opcin dentro de un grupo de botones de opcin. En el ejemplo anterior, Rafting es la opcin seleccionada en este momento. Si el usuario hiciera clic en Surfing, el botn Rafting se desactivara automticamente.

Insercin de casillas de verificacin Las casillas de verificacin permiten a los usuarios seleccionar ms de una opcin en un grupo de opciones.
Para insertar una casilla de verificacin:

Site el punto de insercin en el interior del contorno del formulario y lleve a cabo una de estas operaciones:

Elija Insertar > Objetos de formulario> Casilla de verificacin. En la categora Formularios de la barra Insertar, haga clic en el icono Insertar casilla de
verificacin.

640 Captulo 38

2 3

En el campo Casilla del inspector de propiedades, escriba un nombre descriptivo y exclusivo para la casilla de verificacin. En el campo Valor activado, escriba un valor para la casilla de verificacin. Por ejemplo, en una encuesta, podra establecer el valor 4 para la opcin Estoy totalmente de acuerdo y 1 para la respuesta No estoy de acuerdo.

En Estado inicial, haga clic en Activado para que la opcin aparezca marcada cuando el formulario se cargue inicialmente en el navegador.

Insercin de botones de opcin Utilice los botones de opcin cuando el usuario slo deba seleccionar una de las opciones de un grupo de opciones. Generalmente, los botones de opcin se utilizan en grupos. Todos los botones de opcin de un grupo deben tener el mismo nombre y contener distintos valores de campo.
Para insertar botones de opcin como un grupo:

1 2

Site el punto de insercin en el interior del contorno del formulario: Para insertar el objeto de formulario Grupo de opciones, puede elegir una de las siguientes opciones:

Hacer clic en la ficha Formularios y, a continuacin, en el icono Grupo de opciones. Elegir Insertar > Objetos de formulario> Grupo de opciones.
Aparece el cuadro de dilogo Grupo de opcion.

Complete los campos del cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones sobre cmo seleccionar las opciones del cuadro de dilogo Grupo de opciones, haga clic en el botn Ayuda.

Dreamweaver inserta el grupo de botones de opcin en el formulario HTML. Si an no ha insertado un formulario en la pgina, Dreamweaver lo insertar automticamente. Si lo desea, puede modificar la disposicin del grupo. Tambin puede editar los botones de opcin mediante el inspector de propiedades o bien directamente en la vista Cdigo.

Creacin de formularios interactivos 641

Para insertar botones de opcin de uno en uno:

1 2 3

Site el punto de insercin en el interior del contorno del formulario. Inserte un objeto de formulario botn de opcin. Para ello, elija Insertar > Objetos de formulario> Botn de opcin. En el campo Botn opcin del inspector de propiedades, escriba un nombre descriptivo para el grupo de opciones. Si crea varios grupos de botones de opcin en un formulario, asegrese de que cada uno de ellos tiene un nombre exclusivo. Sin embargo, si inserta botones de opcin individuales para crear un grupo, cada uno de ellos deber tener una etiqueta.

En el campo Valor activado, escriba el valor que desea enviar a la aplicacin o script del lado del servidor cuando el usuario seleccione el botn de opcin. Por ejemplo, puede escribir esquiar en el campo Valor activado para indicar que el usuario ha elegido esquiar. En Estado inicial, haga clic en Activado para que la opcin aparezca marcada cuando el formulario se cargue inicialmente en el navegador.

Creacin de listas y mens

Las listas y mens permiten presentar a los usuarios varias opciones utilizando un espacio limitado. Las listas proporcionan una barra de desplazamiento para que los usuarios puedan desplazarse por las opciones y realizar varias selecciones. Los mens desplegables muestran una sola opcin, que es tambin la que est seleccionada. Los usuarios slo pueden elegir una opcin en un men. Creacin de listas de desplazamiento Las listas de desplazamiento permiten mostrar varias opciones en un espacio limitado. El usuario puede moverse por la lista y seleccionar varias opciones.

642 Captulo 38

Para crear una lista de desplazamiento:

1 2

Site el punto de insercin en el interior del contorno del formulario. Elija Insertar > Objetos de formulario > Lista/men y, si es preciso, seleccione el elemento lista/ men resultante. Aparecer el objeto Lista/men en el interior del formulario y tambin se mostrar el inspector de propiedades de Lista/men. En la siguiente ilustracin, el inspector de propiedades de Lista/ men muestra el botn Dinmico. Este botn se utiliza para crear objetos de formulario lista/ men dinmicos y slo aparece si se ha seleccionado previamente un documento dinmico.

3 4 5

En el campo Lista/men del inspector de propiedades, escriba un nombre exclusivo para la lista. En el campo Tipo, seleccione Lista. En el campo Alto, escriba el nmero de lneas (u opciones) que se mostrarn en la lista. Si el nmero especificado es inferior al nmero de opciones que contiene la lista, aparecen barras de desplazamiento.

6 7

Si desea permitir que los usuarios seleccionen ms de una opcin de la lista, elija Permitir mltiples (junto a Selecciones). Haga clic en Valores de lista para aadir las distintas opciones. Aparecer el cuadro de dilogo Listar valores.

8 9 10 11

Site el punto de insercin en el campo Etiqueta de elemento y escriba el texto que aparecer en la lista. En el campo Valor, escriba los datos que desea enviar al servidor cuando el usuario seleccione esta opcin. Para aadir otro elemento a la lista de opciones, haga clic en el botn con el signo ms (+) y repita los pasos 7 y 8. Una vez aadidos todos los elementos a la lista, haga clic en Aceptar para cerrar el cuadro de dilogo Valores de lista. Aparecer el inspector de propiedades. Las opciones disponibles se muestran en el campo Seleccionado inicialmente.

Creacin de formularios interactivos 643

12

Para que una de las opciones de la lista aparezca seleccionada de forma predeterminada, seleccinela en el campo Seleccionado inicialmente, en el inspector de propiedades.

Creacin de mens emergentes Los mens emergentes permiten al usuario seleccionar una sola opcin de una lista que contiene varias. Este tipo de mens resulta muy til cuando se dispone de espacio limitado y se deben mostrar varias opciones. Sin embargo, cuando el formulario de mens aparece en el navegador, slo hay una opcin visible. Para mostrar las dems opciones, el usuario debe hacer clic en la flecha hacia abajo.

Nota: El elemento de formulario del men emergente no es igual que el men emergente grfico. Para obtener informacin sobre cmo crear, editar, mostrar y ocultar un men emergente grfico, consulte Mostrar men emergente en la pgina 405.

Para crear un men emergente:

1 2

Site el punto de insercin en el interior del contorno del formulario. Elija Insertar > Objetos de formulario > Lista/men y, si es preciso, seleccione el elemento lista/ men resultante. Aparecer el objeto Lista/men en el interior del formulario y tambin se mostrar el inspector de propiedades de Lista/men.

3 4

En el campo Lista/men del inspector de propiedades, escriba un nombre exclusivo para el men. En el campo Tipo, seleccione Men.

644 Captulo 38

Haga clic en Valores de lista para aadir las distintas opciones. Aparecer el cuadro de dilogo Valores de lista.

6 7 8 9 10

Site el punto de insercin en el campo Etiqueta de elemento y escriba el texto que aparecer en el men. En el campo Valor, escriba los datos que desea enviar al servidor cuando el usuario seleccione esta opcin. Para aadir otro elemento a la lista de opciones, haga clic en el botn con el signo ms (+) y repita los pasos 6 y 7. Una vez aadidos todos los elementos al men, haga clic en Aceptar para cerrar el cuadro de dilogo Valores de lista. Para que una de las opciones de la lista aparezca seleccionada de forma predeterminada, seleccinela en el campo Seleccionado inicialmente, en el inspector de propiedades.

Adicin de botones de formularios

Los botones de formulario controlan las operaciones de los formularios. Estos botones permiten enviar al servidor los datos introducidos en el formulario o bien restablecer el formulario. Tambin se pueden asignar otras tareas de proceso definidas en un script para un botn. Por ejemplo, el botn del formulario puede calcular el total de artculos seleccionados, basndose en los valores asignados. Insercin de botones de formulario estndar Los botones de formulario estndar son el estilo de botn predeterminado del navegador, que contienen el texto que desea mostrar. Estos botones normalmente tienen las etiquetas Enviar o Restablecer.

Creacin de formularios interactivos 645

Para crear un botn de texto:

1 2

Site el punto de insercin en el interior del contorno del formulario. Elija Insertar > Objetos de formulario > Botn o haga clic en el icono Botn en el panel Formularios. Dreamweaver inserta el objeto Botn en el formulario y muestra el inspector de propiedades Botn.

Escriba un nombre para el botn, en el campo Nombre del botn del inspector de propiedades. Tenga en cuenta que existen dos nombres reservados: Enviar, que enva los datos del formulario para su procesamiento y Restablecer, que restablece el valor original de todos los datos del formulario.

4 5

Introduzca el texto que debe mostrar el botn en el campo Etiqueta, del inspector de propiedades. Seleccione una accin en la seccin Accin. Las acciones disponibles son:
Enviar

para enviar el formulario para su procesamiento cuando el usuario haga clic en el botn. para restablecer el formulario cuando el usuario haga clic en el botn.

Restablecer Ninguna

para activar una accin basada en el script de procesamiento cuando el usuario haga clic en el botn. Para especificar una accin, seleccione la etiqueta de formulario en la barra de estado de la ventana del documento, para seleccionar el formulario y mostrar el inspector de propiedades correspondiente. En el men emergente Accin, seleccione un script o una pgina para procesar el formulario.

Creacin de un botn grfico Enviar Puede utilizar las imgenes especificadas como iconos de botones. El uso de una imagen para llevar a cabo tareas distintas del envo de datos requiere adjuntar un comportamiento al objeto formulario. Para asignar un comportamiento al botn se utiliza el panel Comportamientos de Dreamweaver. Tambin puede usar JavaScript del lado del cliente para realizar una accin. Para obtener informacin sobre cmo adjuntar un comportamiento a un objeto, consulte Aplicacin de un comportamiento en la pgina 383.
Para crear un botn grfico Enviar:

1 2 3 4

En el documento, site el punto de insercin en el interior del contorno del formulario. Elija Insertar > Objetos de formulario> Campo de imagen. En el inspector de propiedades del campo Imagen, escriba Enviar en el campo Campo imagen. Seleccione la imagen que desea utilizar como un botn; para ello, haga clic en el icono de carpeta del campo ORIG y busque el archivo de imagen.

646 Captulo 38

En el campo Alt, escriba el texto que desea que aparezca en lugar de la imagen en los navegadores que slo admiten texto o en aqullos configurados para descargar las imgenes manualmente.

Diseo de formularios
Puede utilizar saltos de lnea, saltos de prrafo, texto preformateado o tablas para aplicar formato a los formularios. No puede insertar un formulario en otro formulario (es decir, superponer etiquetas), pero puede incluir varios formularios en una misma pgina. Cuando disee formularios, asigne textos descriptivos a las etiquetas de los campos para que los usuarios puedan saber a qu estn contestando. Por ejemplo, utilice la etiqueta Escriba su nombre para solicitar el nombre del usuario. Insercin de tablas en los formularios Puede insertar una tabla en un formulario para conseguir un diseo ms atractivo. Utilice tablas para estructurar los objetos del formulario y las etiquetas de los campos. Las tablas facilitan el alineamiento vertical y horizontal de las opciones. Cuando utilice tablas en los formularios, asegrese de que todas las etiquetas table estn situadas entre las etiquetas form.

Utilizacin de una funcin JavaScript del lado del cliente para procesar formularios
Los formularios son procesados por el script o la aplicacin especificada en el atributo action de la etiqueta form. Para ver la accin asociada a un formulario, seleccinelo y vea el inspector de propiedades. El campo Accin indicar la accin asociada. Los formularios ms simples usan JavaScript o VBScript para llevar a cabo el procesamiento del formulario en el lado del cliente (en lugar de enviar los datos del formulario al servidor para su procesamiento). Por ejemplo, al final de la pgina puede incluirse un pequeo formulario que contenga solamente dos botones de opcin con las etiquetas S y No, junto con un botn Enviar. La accin del formulario puede ser una funcin de JavaScript definida en la seccin head del documento que muestre una advertencia si el usuario selecciona S y otra advertencia si el usuario selecciona No:
function processForm(){ if (document.forms[0].elements[0].checked){ alert('Yes'); }else{ alert('No'); } }

Creacin de formularios interactivos 647

Para usar una funcin JavaScript en el lado del cliente como accin del formulario:

1 2 3 4

Seleccione un botn Enviar en un formulario. Adjunte al botn el comportamiento Llamar JavaScript (consulte Llamar JavaScript en la pgina 387) En el cuadro de texto JavaScript que aparece mientras adjunta el comportamiento, introduzca processForm(). Aada una funcin JavaScript processForm() (como la que se muestra) a la seccin head del documento.

Se pueden gestionar muchas tareas de procesamiento de formularios mediante scripts en el lado del cliente, sin embargo, no se pueden guardar los datos introducidos por el usuario ni enviarlos a otra persona. Para guardar o transmitir los datos a otra aplicacin para su procesamiento, es preciso utilizar un script o aplicacin del lado del servidor. Los scripts CGI (Common Gateway Interface) son los mecanismos del lado del servidor ms utilizados para procesar datos de formularios. Existen varios sitios en la Web que ofrecen scripts CGI gratuitos. El proveedor de servicios de Internet (ISP) donde se hospeda su sitio puede proporcionarle scripts CGI para realizar muchas tareas habituales, como recoger direcciones de correo electrnico o permitir a los visitantes que enven sus comentarios mediante un formulario Web.

Utilizacin de comportamientos con formularios

Puede adjuntar comportamientos a formularios y objetos de formulario utilizando cualquiera de los comportamientos que aparecen en el panel Comportamientos cuando se selecciona el formulario o un objeto de ste. Los comportamientos Validar formulario y Establecer texto de campo de texto slo estn disponibles si se ha insertado un campo de texto en el documento. Cuando se aplica el comportamiento Validar formulario a un objeto de formulario, deber especificar qu campo de texto se debe validar. Por ejemplo, si adjunta Validar formulario al botn Enviar, podra especificar un campo de texto creado para Nombre para comprobar si el usuario ha introducido texto en el campo Nombre. Al aplicar comportamientos, deber comprobar que todos los objetos del formulario que hay en el documento (y todos los dems objetos) tienen nombres exclusivos. Si utiliza el mismo nombre para dos objetos distintos, es posible que los comportamientos no funcionen correctamente, a pesar de que los objetos se encuentren en formularios distintos. A continuacin se explican los dos comportamientos especficos de los formularios. Para obtener informacin sobre otros comportamientos, consulte Captulo 24, Utilizacin de comportamientos JavaScript, en la pgina 381.
Validar formulario

Comprueba el contenido de los campos de texto especificados para asegurarse de que el usuario ha introducido el tipo correcto de datos. (Consulte Validar formulario en la pgina 412.)

Definir texto de campo de texto

Sustituye el contenido de un campo de texto especificado por el contenido especificado por el usuario. (Consulte Definir texto de campo de texto en la pgina 402.)

648 Captulo 38

Creacin de objetos de formularios dinmicos

Puede crear formularios HTML dinmicos para mostrar registros de una base de datos y recoger informacin de los usuarios. Por ejemplo, un formulario podra mostrar la informacin de contacto de los proveedores extrada de una tabla de base de datos. Los formularios dinmicos simplifican el mantenimiento del sitio. Por ejemplo, muchos sitios utilizan mens de formularios HTML para que los usuarios puedan saltar a otras zonas del sitio. Normalmente, este tipo de mens aparecen en varios puntos del sitio. Con mens dinmicos, basta con agregar una nueva opcin de men una vez, a la tabla de la base de datos, para actualizar todos los mens del sitio. Las listas/mens son objetos de formularios dinmicos que se utilizan con frecuencia. Tambin puede crear y utilizar botones de opcin, casillas de verificacin, campos de texto y campos de imagen dinmicos. En esta seccin se describe cmo hacer que los objetos del formulario sean dinmicos.
Nota: Dreamweaver MX no proporciona los siguientes objetos dinmicos para ASP.NET: Campo de texto dinmico, Casilla de verificacin dinmica, Lista/men dinmica o Grupo de opciones dinmico.

Creacin de una lista/men dinmicos Puede llenar un objeto de formulario lista o men de forma dinmica con las entradas de una base de datos.
Para aadir una lista/men dinmico:

1 2

Haga clic en el interior del formulario HTML de la pgina. Elija Insertar > Objetos de formulario > Lista/men. Dreamweaver inserta un objeto Lista/men en la pgina. Seleccione el objeto de formulario Lista/men. Aparece el inspector de propiedades de Lista/men.

Creacin de formularios interactivos 649

En el inspector de propiedades, haga clic en el botn Dinmico para que aparezca el cuadro de dilogo Lista/men dinmico. Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar.

Para obtener instrucciones sobre cmo seleccionar los campos del cuadro de dilogo Lista/ men dinmico, haga clic en el botn Ayuda.
5

Haga clic en Aceptar. Dreamweaver inserta la lista/men dinmico en el formulario HTML. Puede editar el men utilizando el panel Comportamientos del servidor o el inspector de propiedades, o bien editar el cdigo fuente del men directamente.

Conversin de listas/mens existentes en dinmicos Se puede hacer que una lista/men de un formulario sea dinmico.
Para convertir una lista/men en dinmico:

1 2

Seleccione el objeto de formulario lista/men que desea que sea dinmico. En el inspector de propiedades, haga clic en el botn Dinmico. Aparecer el cuadro de dilogo Lista/men dinmico. Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones sobre cmo seleccionar los campos del cuadro de dilogo Lista/ men dinmico, haga clic en el botn Ayuda.

Conversin de campos de texto y de imgenes en dinmicos Puede hacer que los campos de texto y de imgenes de un formulario sean dinmicos.
Para convertir campos de texto en dinmicos:

1 2

Seleccione un campo de texto del formulario HTML en la pgina. Elija Ventana > Comportamientos del servidor para mostrar el panel Comportamientos del servidor.

650 Captulo 38

Haga clic en el botn de signo ms (+) y seleccione Elementos dinmicos > Campo de texto dinmico en el men emergente. Aparece el cuadro de dilogo Campo de texto dinmico. Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones sobre cmo seleccionar las opciones del cuadro de dilogo, haga clic en el botn Ayuda.

Cuando se vea el formulario en un navegador, el campo de texto mostrar contenido dinmico.

Para convertir campos de imgenes en dinmicos:

Site el punto de insercin en el lugar de la pgina en el que desea que aparezca el campo de imagen y luego seleccione Insertar > Objetos de formulario > Campo de imagen. Aparecer el cuadro de dilogo Seleccionar origen de imagen. Haga clic en la opcin Fuentes de datos (Windows) o en el botn Fuente de datos (Macintosh). Aparecer una lista de fuentes de datos. Seleccione una fuente de datos de la lista. La fuente de datos debe ser un juego de registros que contenga las rutas de acceso a los archivos de imagen. En funcin de la estructura de archivos del sitio, las rutas pueden ser absolutas, relativas al documento o relativas a la raz.
Nota: Dreamweaver no admite actualmente imgenes binarias almacenadas en una base de datos.

Si no aparece ningn juego de registros en la lista, o si los conjuntos de registros disponibles no satisfacen sus necesidades, defina un nuevo juego de registros. Para obtener instrucciones, consulte Definicin de un juego de registros en la pgina 554.
4

Haga clic en Aceptar.

Cuando se vea el formulario en un navegador, el campo de imagen mostrar contenido dinmico. Conversin de casillas de verificacin en dinmicas Las casillas de verificacin permiten a los usuarios elegir varias opciones de una lista de opciones disponibles en los formularios. Para crear una casilla de verificacin dinmica, debe haber especificado un tipo de documento dinmico y asociado un juego de registros u otra fuente de contenido dinmico a la pgina. La fuente de datos debe estar en formato Booleano, como Yes/No o true/false.

Creacin de formularios interactivos 651

Para preseleccionar una casilla de verificacin de forma dinmica:

1 2

Seleccione un objeto de formulario casilla de verificacin. En el inspector de propiedades, haga clic en el botn Dinmico. Aparecer el cuadro de dilogo Casilla dinmica.

Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones sobre cmo seleccionar las opciones del cuadro de dilogo Casilla dinmica, haga clic en el botn Ayuda.

Cuando el formulario se abra en un navegador, la casilla aparecer activada o desactivada, en funcin de los datos. Conversin de botones de opcin en dinmicos Los botones de opcin se pueden preseleccionar de forma dinmica segn un valor de un juego de registros. Para crear una casilla de verificacin dinmica, debe haber especificado un tipo de documento dinmico y asociado un juego de registros u otra fuente de contenido dinmico a la pgina.
Para preseleccionar un botn de opcin de forma dinmica:

Asegrese de que la pgina incluye al menos un grupo de botones de opcin. Para crear un grupo de botones de opcin se selecciona el icono Grupo de opciones en la ficha Formularios en la barra Insertar. Para obtener ms informacin, consulte Insercin de botones de opcin en la pgina 641.

En el panel Comportamientos del servidor, haga clic en el botn ms (+) y seleccione Elementos de formularios dinmicos > Grupo de opciones dinmico. Aparecer el cuadro de dilogo Grupo de opciones dinmico. El cuadro de dilogo que aparece puede ser distinto del que muestra el ejemplo siguiente, segn el tipo de documento con el que est trabajando.

652 Captulo 38

Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para obtener instrucciones sobre cmo seleccionar las opciones del cuadro de dilogo Botones de opcin dinmicos, haga clic en el botn Ayuda.

Creacin de formularios interactivos 653

654 Captulo 38

Parte IX Desarrollo rpido de aplicaciones

Las aplicaciones Web a menudo contienen pginas que permiten a los usuarios realizar bsquedas en bases de datos, pginas donde pueden insertar, actualizar o eliminar datos de una base de datos y pginas que restringen el acceso al sitio Web. Cree rpidamente pginas de este tipo con Dreamweaver. Esta parte contiene los siguientes captulos:

Parte IX

Captulo 39, Creacin de pginas Maestro/Detalle Captulo 40, Creacin de pginas que realicen
bsquedas en bases de datos

Captulo 41, Creacin de pginas que modifiquen bases

de datos

Captulo 42, Creacin de pginas que restrinjan el

acceso al sitio

CAPTULO 39 Creacin de pginas Maestro/Detalle

Macromedia Dreamweaver MX permite crear conjuntos de pginas que presentan informacin en dos niveles de detalle. En este captulo se explica cmo crear pginas Maestro/Detalle en las secciones siguientes:

Pginas Maestro/Detalle en la pgina 657 Creacin rpida de pginas Maestro/Detalle en la pgina 659 Creacin de pginas Maestro/Detalle bloque a bloque en la pgina 660 Modificacin de pginas Maestro/Detalle en la pgina 663

Pginas Maestro/Detalle
Una pgina maestra es una pgina en la que se listan los registros y los correspondientes vnculos de cada registro. Cuando el usuario hace clic en un vnculo, se abre una pgina detalle que muestra informacin adicional sobre el registro. Por ejemplo, a continuacin se muestra una pgina maestra de un sitio de Intranet de una empresa ficticia:

657

Cuando un usuario hace clic en uno de los iconos de visualizacin vinculados, se abre una pgina detalle:

Una pgina de resultados es un ejemplo tpico de pgina maestra. Sin embargo, a diferencia de la pgina maestra descrita en esta seccin, la lista de registros de una pgina de resultados la determina, no usted como diseador, sino el usuario. (El usuario determina la lista mediante la realizacin de una bsqueda en la base de datos.) Para obtener ms informacin sobre este tipo de pgina maestra, consulte Creacin de pginas que realicen bsquedas en bases de datos en la pgina 665. Puede utilizarse una pgina detalle para actualizar o eliminar el registro mostrado. Para obtener ms informacin sobre la actualizacin y eliminacin de pginas, consulte Creacin de una pgina para actualizar registros en la pgina 683 y Creacin de una pgina para borrar un registro en la pgina 688. Una pgina maestra consta de los siguientes elementos:

Un juego de registros. Una disposicin de pgina para mostrar mltiples registros. Un comportamiento de servidor Ir a pgina Detalle para abrir la pgina detalle y pasar el ID
del registro en el que ha hecho clic el usuario. Una pgina detalle consta de los siguientes elementos:

Una disposicin de pgina para mostrar un nico registro. Un juego de registros que contengan los datos del registro. Un filtro de juego de registros para recuperar un registro concreto de la tabla de la base de
datos o un comportamiento de servidor Mover a un registro concreto para desplazarse a un registro concreto del juego de registros.

658 Captulo 39

Creacin rpida de pginas Maestro/Detalle

Puede crear rpidamente pginas Maestro/Detalle utilizando el objeto Live Juego de pginas Maestro/Detalle.
Nota: El objeto Live no se admite en PHP ni en ASP.NET.

Para completar el juego de pginas Maestro/Detalle con un objeto Live:

Cree una pgina maestra vaca y aada a ella un juego de registros. Asegrese de que el juego de registros contiene, no slo todas las columnas necesarias para la pgina maestra, sino tambin todas las columnas necesarias para la pgina detalle. El juego de registros puede definirlo usted en tiempo de diseo (consulte Definicin de un juego de registros en la pgina 554) o el usuario en tiempo de ejecucin (consulte Creacin de pginas que realicen bsquedas en bases de datos en la pgina 665). Normalmente, el juego de registros de la pgina maestra extrae unas pocas columnas de una tabla de una base de datos, mientras que un juego de registros de la pgina detalle extrae ms columnas de la misma tabla para proporcionar informacin adicional.

Abra la pgina maestra en la vista Diseo y elija Insertar > Objetos de aplicacin > Juego de pginas Maestro/Detalle. Aparecer el cuadro de dilogo Juego de pginas Maestro/Detalle.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Creacin de pginas Maestro/Detalle 659

Haga clic en Aceptar. El objeto Live crea una pgina detalle (si no la ha creado usted antes) y aade contenido dinmico y comportamientos de servidor tanto a la pgina maestra como a la pgina detalle.

Personalice la disposicin de las pginas maestra y detalle de acuerdo con sus necesidades. Puede personalizar totalmente la disposicin de cada pgina utilizando las herramientas de diseo de pginas de Macromedia Dreamweaver MX. Tambin puede editar los comportamientos de servidor haciendo doble clic en ellos en el panel Comportamientos del servidor.

Creacin de pginas Maestro/Detalle bloque a bloque

En esta seccin se describe cmo crear un juego de pginas Maestro/Detalle sin utilizar el objeto Live Juego de pginas Maestro/Detalle. Para obtener las instrucciones de cmo utilizar el objeto Live, consulte Creacin rpida de pginas Maestro/Detalle en la pgina 659. Para completar el juego de pginas Maestro/Detalle, deber realizar las siguientes tareas:

Cree una pgina maestra vaca y defina un juego de registros para ella. Muestre los registros en la pgina maestra. Deber pasar a la pgina detalle el ID del registro seleccionado por el usuario. Busque el registro en la base de datos y mustrelo en la pgina detalle.

Creacin de una pgina maestra y definicin de un juego de registros para ella El primer paso consiste en crear una pgina maestra vaca y aadirle un juego de registros. El juego de registros puede definirlo usted en tiempo de diseo (consulte Definicin de un juego de registros en la pgina 554) o el usuario en tiempo de ejecucin (consulte Creacin de pginas que realicen bsquedas en bases de datos en la pgina 665). Asegrese de que el juego de registros contiene, no slo todas las columnas necesarias para la pgina maestra, sino tambin todas las columnas necesarias para la pgina detalle. Normalmente, el juego de registros de la pgina maestra extrae unas pocas columnas de una tabla de una base de datos, mientras que un juego de registros de la pgina detalle extrae ms columnas de la misma tabla para proporcionar informacin adicional. Visualizacin de los registros en la pgina maestra Despus de crear una pgina maestra en blanco y definir un juego de registros para ella, deber mostrar los registros en la pgina.
Para ver los registros en la pgina maestra:

Cree una disposicin de pgina que permita mostrar mltiples registros y vincule las columnas del juego de registros a la pgina. Un mtodo sencillo para lograrlo consiste en crear una tabla HTML con dos filas en la pgina maestra y arrastrar un nmero limitado de columnas del juego de registros desde el panel Vinculaciones (Ventana > Vinculaciones) hasta la segunda fila de la tabla. (Utilice la primera fila para mostrar los encabezados de las columnas de la tabla.)

660 Captulo 39

Cree una regin repetida para mostrar ms de un registro a la vez. La regin repetida se aplica normalmente a la fila de la tabla en la que se encuentra el contenido dinmico.

Apertura de la pgina detalle y transferencia de un ID de registro a dicha pgina Despus de crear la pgina maestra y de mostrar registros en ella, deber crear vnculos que abran la pgina detalle y transferirle el ID del registro que el usuario ha seleccionado. Los usuarios de PHP, ASP.NET y ColdFusion deben crear un vnculo con parmetros de URL en el cdigo. Para obtener ms informacin, consulte Creacin de parmetros de URL utilizando vnculos HTML en la pgina 545. Site las etiquetas anchor alrededor del contenido dinmico que desea utilizar como vnculo.
Para abrir la pgina detalle y transferirle un parmetro de URL que contenga el ID del registro en el que ha hecho clic el usuario (slo usuarios de ASP y JSP):

1 2

En la regin repetida de la pgina maestra, seleccione el contenido dinmico que va a hacer las veces de vnculo. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Ir a pgina Detalle en el men emergente. Aparecer el cuadro de dilogo Ir a pgina Detalle.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Creacin de pginas Maestro/Detalle 661

Haga clic en Aceptar. Dreamweaver situar un vnculo especial alrededor del texto seleccionado. Cuando el usuario hace clic en el vnculo, el comportamiento de servidor Ir a pgina Detalle transfiere un parmetro de URL que contiene el ID del registro a la pgina detalle. Por ejemplo, si el parmetro de URL se denomina id y la pgina detalle se denomina customerdetail.asp, el URL presentar esta apariencia cuando el usuario haga clic en el vnculo: http://www.mysite.com/customerdetail.asp?id=43 La primera parte del URL, http://www.mysite.com/customerdetail.asp, abre la pgina detalle. La segunda parte, ?id=43, es el parmetro de URL. Dicho parmetro indica a la pgina detalle qu registro debe localizar y mostrar. El trmino id es el nombre del parmetro URL y 43 es su valor. En este ejemplo, el parmetro URL contiene el nmero de ID del registro, 43. Para obtener ms informacin sobre parmetros de URL, consulte Aspectos bsicos de los parmetros URL en la pgina 544.

Bsqueda y visualizacin del registro solicitado en la pgina detalle Despus de crear la pgina maestra, deber buscar el registro solicitado en la base de datos y mostrarlo en la pgina detalle. El procedimiento consiste en definir un juego de registros para que contenga un registro el registro solicitado por la pgina maestra y vincular las columnas del juego de registros a la pgina.
Para buscar y mostrar el registro solicitado en la pgina detalle:

1 2

Cambie a la pgina detalle. En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Juego de registros o Conjunto de datos (ASP.NET) en el men emergente. Aparecer el cuadro de dilogo sencillo. Si aparece el cuadro de dilogo avanzado, haga clic en Simple.

3 4

Asigne un nombre al juego de registros, luego elija una conexin y la tabla de base de datos que proporcionar datos al juego de registros. En el rea Columna, elija las columnas de la tabla que deben incluirse en el juego de registros. El juego de registros puede ser igual o distinto del juego de registros de la pgina maestra. Generalmente, el juego de registros de una pgina detalle incluye ms columnas para mostrar ms informacin. Si los conjuntos de registros son diferentes, el juego de registros de la pgina detalle debe tener al menos una columna en comn con la pgina maestra. La columna comn a las dos pginas suele ser la columna de ID del registro, aunque tambin puede ser el campo de unin o las tablas relacionadas. Para incluir algunas de las columnas de la tabla en el juego de registros, haga clic en Seleccionado y elija las columnas deseadas presionando Control (Windows) o Comando (Macintosh) mientras hace clic en ellas en la lista.

662 Captulo 39

Complete la seccin Filtro de la siguiente forma para localizar y mostrar el registro especificado en el parmetro URL pasado por la pgina de resultados: que contiene valores que coinciden con el valor del parmetro de URL pasado por la pgina maestra. Por ejemplo, si el parmetro de URL contiene un nmero de ID de registro, elija la columna que contiene nmeros de ID de registros.

En el primer men emergente del rea Filtro, seleccione la columna de tabla de la base de datos

En el men emergente situado junto al primer men, seleccione el signo igual (ya debe estar
seleccionado).

En el tercer men emergente, seleccione Parmetro de URL.

La pgina maestra pasa a la pgina detalle informacin que identifica la seleccin del usuario mediante un parmetro de URL.

En el cuarto cuadro, introduzca el nombre del parmetro de URL pasado por la pgina
maestra. Por ejemplo, si el URL utilizado por la pgina maestra para abrir la pgina detalle es www.mysite.com/customerdetail.asp?id=43, introduzca id. Tambin puede obtener el nombre cambiando a la pgina maestra, abriendo el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haciendo doble clic en el comportamiento de servidor Ir a pgina Detalle. Compruebe el nombre que figura en Pasar parmetro de URL.
6

Haga clic en Aceptar. El juego de registros aparecer en el panel Vinculaciones. Vincule las columnas del juego de registros a la pgina detalle seleccionando las columnas del panel Vinculaciones (Ventana > Vinculaciones) y arrastrndolas hasta la pgina.

Modificacin de pginas Maestro/Detalle

Despus de crear pginas Maestro/Detalle con comportamientos de servidor, utilice el panel Comportamientos del servidor para modificar los distintos elementos en las pginas. Para obtener ms informacin, consulte Edicin de comportamientos de servidor en la pgina 627. Si ha creado pginas con el objeto Live, tambin deber utilizar el panel Comportamientos del servidor para editar los elementos que el objeto Live inserta en las pginas. El objeto Live aade los siguientes elementos a la pgina maestra:

Una tabla bsica con una regin repetida para mostrar mltiples registros. Una barra de navegacin por el juego de registros. Un contador de registros. Un comportamiento de servidor Ir a pgina Detalle para abrir la pgina detalle y pasar el ID del registro en el que ha hecho clic el usuario.

El objeto Live tambin aade los siguientes elementos a la pgina detalle:

Una tabla bsica para mostrar un nico registro. Un juego de registros filtrado para localizar y mostrar el registro en el que el usuario ha hecho
clic en la pgina maestra.

Creacin de pginas Maestro/Detalle 663

664 Captulo 39

CAPTULO 40 Creacin de pginas que realicen bsquedas en bases de datos

Puede utilizar Macromedia Dreamweaver MX para crear un conjunto de pginas que permitan al usuario realizar bsquedas en la base de datos. Este captulo contiene las secciones siguientes:

Creacin de la pgina de bsqueda en la pgina 666 Creacin de la pgina de resultados en la pgina 667 Creacin de una pgina detalle para una pgina de resultados en la pgina 672 Utilizacin de pginas relacionadas (slo usuarios de ASP y JSP) en la pgina 676

Pginas de bsqueda/resultados
Necesitar al menos dos pginas para aadir esta funcin a la aplicacin Web. La primera pgina contendr un formulario HTML en el que los usuarios debern introducir los parmetros de bsqueda. Aunque la pgina realmente no lleva a cabo las bsquedas, se conoce como la pgina de bsqueda. La segunda pgina que necesitar es la pgina de resultados, el verdadero ncleo de este conjunto de pginas. La pgina de resultados realiza las siguientes tareas:

Lee los parmetros de bsqueda enviados por la pgina de bsqueda. Conecta con la base de datos y busca registros. Crea un juego de registros a partir de los registros encontrados. Muestra el contenido del juego de registros.

Opcionalmente, puede aadir una pgina detalle. Una pgina detalle proporciona a los usuarios ms informacin sobre un registro concreto de la pgina de resultados. Si slo tiene un parmetro de bsqueda, Dreamweaver le permite aadir prestaciones a la aplicacin Web sin utilizar consultas y variables SQL. Slo tendr que disear las pginas y completar varios cuadros de dilogo. Si tiene varios parmetros de bsqueda, tendr que escribir una declaracin SQL y definir mltiples variables para ella.

665

Creacin de la pgina de bsqueda

Una pgina de bsqueda en la Web normalmente contiene campos de formulario en los que los usuarios introducen parmetros de bsqueda. Cuando el usuario hace clic en el botn Buscar del formulario, se envan los parmetros de bsqueda a la pgina de resultados residente en el servidor. La pgina de resultados residente en el servidor, no la pgina de bsqueda del navegador, es la responsable de recuperar los registros de la base de datos. Para comenzar con esta parte de la aplicacin Web, cree dos pginas: una pgina de bsqueda que permita a los usuarios introducir parmetros de bsqueda y una pgina de resultados para mostrar los registros encontrados. Puede incluso combinar las dos pginas en una sola. Como mnimo, la pgina de bsqueda debe incluir un formulario HTML con un botn Enviar.
Para aadir un formulario HTML a una pgina de bsqueda:

Abra la pgina de bsqueda y seleccione Formulario del men Insertar. Se crear un formulario vaco en la pgina. Quiz deba activar los elementos invisibles (Ver > Ayudas visuales > Elementos invisibles) para ver los lmites del formulario, que se representan por medio de lneas rojas finas.

Aada objetos de formulario para que los usuarios introduzcan sus parmetros de bsqueda eligiendo Objetos de formulario del men Insertar. Entre los objetos de formulario figuran los campos de texto, los mens de listas, las casillas de verificacin y los botones de opcin. Puede aadir tantos objetos de formulario como desee para ayudar a los usuarios a definir bsquedas precisas. No obstante, recuerde que cuanto mayor sea el nmero de parmetros de bsqueda de la pgina de bsqueda, ms compleja ser la declaracin SQL. Para obtener ms informacin sobre objetos de formulario, consulte Captulo 38, Creacin de formularios interactivos, en la pgina 629.

3 4

Aada al formulario un botn Enviar (Insertar > Objetos de formulario > Botn). Si lo desea, cambie la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, este es el inspector de propiedades de un botn con la etiqueta buscar:

A continuacin, deber indicar al formulario el lugar al que debe enviar los parmetros de bsqueda cuando el usuario haga clic en el botn Enviar.
5

Seleccione el formulario eligiendo la etiqueta <form> en el selector de etiquetas que se encuentra en la parte inferior de la ventana de documento, como se muestra en la imagen.

En el cuadro Accin del inspector de propiedades del formulario, introduzca el nombre del archivo de la pgina de resultados que llevar a cabo la bsqueda en la base de datos.

666 Captulo 40

En el men emergente mtodo, elija uno de los siguiente mtodos para determinar cmo debe enviar los datos el formulario al servidor.
GET

enva los datos del formulario aadindolos al URL como una cadena de consulta. Dado que los URL estn limitados a 8.192 caracteres, no utilice el mtodo GET con formularios largos. enva los datos del formulario en el cuerpo de un mensaje. usa el mtodo predeterminado del navegador (generalmente, GET).

POST

Default

Ya ha terminado la pgina de bsqueda. A continuacin deber crear la pgina de resultados.

Creacin de la pgina de resultados

Despus de que el usuario introduzca los parmetros de bsqueda, la aplicacin deber recuperar los registros de la base de datos. Esta tarea la realiza la pgina de resultados. Estas son las tareas que realiza una pgina de resultados:

Obtiene los parmetros de bsqueda de la pgina de bsqueda. Conecta con la base de datos y busca registros. Crea un juego de registros a partir de los registros encontrados. Muestra el contenido del juego de registros.

Si la pgina de resultados slo tiene un parmetro de bsqueda (un solo campo de texto, por ejemplo), podr crear la pgina de resultados sin consultas ni variables SQL. Lo nico que tendr que hacer es crear un juego de registros y despus aadir un filtro para excluir registros que no cumplan las condiciones establecidas por los parmetros de bsqueda enviados por la pgina de bsqueda. Para obtener instrucciones, consulte Bsqueda con un solo parmetro de bsqueda en la pgina 667. Si la pgina de bsqueda tiene varios parmetros de bsqueda, tendr que escribir una declaracin SQL y definir mltiples variables para ella. Para obtener instrucciones, consulte Bsqueda con mltiples parmetros de bsqueda en la pgina 669. Bsqueda con un solo parmetro de bsqueda Si la pgina de bsqueda enva un nico parmetro de bsqueda al servidor, puede crear la pgina de resultados sin consultas ni variables SQL. Un juego de registros bsico se crea con un filtro que excluye registros que no cumplen el parmetro de bsqueda enviado por la pgina de bsqueda.
Nota: Si tiene varias condiciones de bsqueda, deber utilizar el cuadro de dilogo Juego de registros avanzado para definir el juego de registros. El cuadro de dilogo Juego de registros simple slo admite una condicin de bsqueda. Para obtener ms informacin, consulte Bsqueda con mltiples parmetros de bsqueda en la pgina 669.

Para crear el juego de registros que contendr los resultados de la bsqueda:

1 2

Abra la pgina de resultados en la ventana de documento. Cree un juego de registros abriendo el panel Vinculaciones (Ventana > Vinculaciones), haciendo clic en el botn de signo ms (+) y seleccionando Juego de registros o Conjunto de datos (ASP.NET) en el men emergente.

Creacin de pginas que realicen bsquedas en bases de datos 667

Asegrese de que aparece el cuadro de dilogo Juego de registros o Conjunto de datos simple.

Si aparece la versin avanzada del cuadro de dilogo, cambie a la versin sencilla haciendo clic en el botn Simple.
4

Introduzca un nombre para el juego de registros y elija una conexin. La conexin debe establecerse con una base de datos que contenga datos en los que desea que el usuario realice bsquedas.

En el men emergente Tabla, seleccione la tabla de la base de datos en la que debe realizarse la bsqueda.
Nota: En una bsqueda con un solo parmetro, puede buscar registros en una nica tabla. Para buscar en ms de una tabla a la vez, deber utilizar el cuadro de dilogo Juego de registros avanzado y definir una consulta SQL.

Para incluir algunas de las columnas de la tabla en el juego de registros, haga clic en Seleccionado y elija las columnas deseadas presionando Control (Windows) o Comando (Macintosh) mientras hace clic en ellas en la lista. Elija las columnas que contienen la informacin que desea mostrar en la pgina de resultados.

Deje abierto por ahora el cuadro de dilogo Juego de registros o Conjunto de datos. Tendr que utilizarlo a continuacin para buscar los parmetros enviados por la pgina de bsqueda y crear un filtro de juego de registros para excluir registros que no cumplan los parmetros.
Para crear un filtro de juego de registros:

En el primer men emergente del rea Filtro, seleccione una columna de la tabla para compararla con el parmetro de bsqueda enviado por la pgina de bsqueda. Por ejemplo, si el valor enviado por la pgina de bsqueda es un nombre de una ciudad, seleccione en la tabla la columna que contiene nombres de ciudades.

668 Captulo 40

Desde el men emergente situado junto al primer men, seleccione el signo igual (que debe ser el predeterminado). Esta eleccin indica que el usuario slo desea obtener los registros para los que la columna de tabla seleccionada coincide exactamente con la especificada en la pgina de bsqueda.

En el tercer men emergente, seleccione Variable de formulario si el formulario de la pgina de bsqueda utiliza el mtodo POST, o Parmetro de URL si utiliza el mtodo GET. Este men emergente especifica el lugar al que la pgina de bsqueda actualmente almacenada en el servidor debe enviarse el valor. En ASP, si el formulario de bsqueda utiliza el mtodo POST, el valor se almacena en la coleccin Request.Form. Si el formulario de bsqueda utiliza el mtodo GET, el valor se almacena en la coleccin Request.QueryString.

En el cuarto cuadro, introduzca el nombre del objeto de formulario que acepta el parmetro de bsqueda en la pgina de bsqueda. Puede obtener el nombre cambiando a la pgina de bsqueda, haciendo clic en el objeto de formulario dentro del formulario para seleccionarlo y comprobando el nombre del objeto en el inspector de propiedades. Por ejemplo, supongamos que desea crear un juego de registros que incluya slo viajes de aventura a un pas concreto. Supongamos que la tabla incluye una columna denominada TRIPLOCATION. Supongamos tambin que el formulario HTML de la pgina de bsqueda utiliza el mtodo GET y que contiene un objeto Lista/men denominado Location que muestra una lista de pases. Esta es la apariencia que debe presentar la seccin Filtro:

Si lo desea, haga clic en Prueba, introduzca un valor de prueba y haga clic en Aceptar para conectar con la base de datos y crear una copia del juego de registros. El valor de prueba simula el valor que, de otro modo, habra sido devuelto por la pgina de bsqueda. Haga clic en Aceptar para cerrar el juego de registros.

Si est satisfecho con el juego de registros, haga clic en Aceptar.

Dreamweaver inserta en la pgina un script del lado del servidor que, cuando se ejecuta en el servidor, comprueba cada registro de la tabla de la base de datos. Si el campo especificado en un registro cumple la condicin de filtro, el registro se incluir en el juego de registros. El script crea un juego de registros que contiene solamente los resultados de la bsqueda. El siguiente paso consiste en mostrar el juego de registros en la pgina de resultados. Para obtener ms informacin, consulte Visualizacin de los registros en la pgina 671. Bsqueda con mltiples parmetros de bsqueda Si la pgina de bsqueda enva ms de un parmetro de bsqueda al servidor, deber escribir una consulta SQL para la pgina de resultados y utilizar los parmetros de bsqueda en las variables SQL.

Creacin de pginas que realicen bsquedas en bases de datos 669

Despus de que Dreamweaver inserte la consulta SQL en la pgina y que se ejecute la pgina en el servidor, se comprueba cada registro de la tabla de la base de datos. Si el campo especificado en un registro cumple las condiciones de la consulta SQL, el registro se incluir en un juego de registros. La consulta SQL crea un juego de registros que contiene solamente los resultados de la bsqueda. Por ejemplo, el personal de ventas puede estar en condiciones de informar sobre qu clientes de un rea determinada tienen ingresos superiores a un nivel concreto. En un formulario de una pgina de bsqueda, el asociado comercial introduce un rea geogrfica y un nivel de ingresos mnimo y luego hace clic en el botn Enviar para enviar los dos valores a un servidor. En el servidor, los valores se pasan a la declaracin SQL de la pgina de resultados, que crea un juego de registros slo con los clientes del rea especificada con ingresos superiores al nivel especificado.
Para buscar registros de una base de datos empleando SQL:

Abra la pgina de resultados en Dreamweaver, cree un nuevo juego de registros abriendo el panel Vinculaciones (Ventana > Vinculaciones), haciendo clic en el botn de signo ms (+) y seleccionando Juego de registros o Conjunto de datos (ASP.NET) en el men emergente. Asegrese de que aparece el cuadro de dilogo Juego de registros o Conjunto de datos avanzado.

Si aparece la versin sencilla del cuadro de dilogo, cambie a la versin avanzada haciendo clic en el botn Avanzada.
3

Introduzca un nombre para el juego de registros y elija una conexin. La conexin debe establecerse con una base de datos que contenga datos en los que desea que el usuario realice bsquedas.

670 Captulo 40

Introduzca una declaracin de seleccin (Select) en el rea de texto SQL. Asegrese de que la declaracin incluye una clusula Where (donde) con variables que contengan los parmetros de bsqueda. En el siguiente ejemplo, las variables se denominan varLastName y varDept:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'

Para reducir la cantidad de datos que debe teclear, puede utilizar el rbol de elementos de la base de datos situado en la parte inferior del cuadro de dilogo Juego de registros avanzado. Para obtener instrucciones, consulte Creacin de un juego de registros avanzado escribiendo SQL en la pgina 556. Para obtener ayuda sobre la sintaxis SQL, consulte Nociones bsicas de SQL en la pgina 751.
5

Asigne a las variables SQL los valores de los parmetros de bsqueda haciendo clic en el botn de signo ms (+) en el rea Variables e introduciendo el nombre de la variable, el valor predeterminado (el valor que toma la variable si no se devuelve ningn valor de tiempo de ejecucin) y un valor de tiempo de ejecucin (normalmente, un objeto de servidor que contiene un valor enviado por un navegador, como una variable de peticin). En el siguiente ejemplo ASP, el formulario HTML de la pgina de bsqueda utiliza el mtodo GET y contiene un campo de texto denominado LastName y otro llamado Department.

En ColdFusion, los valores de tiempo de ejecucin seran #LastName# y #Department#. En JSP, los valores de tiempo de ejecucin seran request.getParameter("LastName") y
request.getParameter("Department"). 6

Si lo desea, haga clic en Prueba para crear una copia del juego de registros utilizando los valores predeterminados de las variables. Los valores predeterminados simulan el valor que, de otro modo, habra sido devuelto por la pgina de bsqueda. Haga clic en Aceptar para cerrar el juego de registros de prueba.

Si est satisfecho con el juego de registros, haga clic en Aceptar.

Visualizacin de los registros Tras crear un juego de registros que contenga los resultados de la bsqueda, si lo desea, podr mostrar la informacin en la pgina de resultados. Para visualizar los registros, slo tendr que arrastrar columnas individuales desde el panel Vinculaciones hasta la pgina de resultados. Puede aadir vnculos de navegacin para permitir el desplazamiento hacia delante o hacia atrs por el juego de registros, as como crear una regin repetida para mostrar ms de un registro en la pgina. Tambin puede aadir vnculos a una pgina detalle.

Creacin de pginas que realicen bsquedas en bases de datos 671

Para obtener ms informacin sobre la visualizacin de contenido dinmico en una pgina, consulte:

Creacin de una pgina detalle para una pgina de resultados en la pgina 672 Adicin de contenido dinmico a pginas Web en la pgina 571 Visualizacin de registros de base de datos en la pgina 579 Creacin de una pgina detalle para una pgina de resultados
El conjunto de pginas de bsqueda puede incluir una pgina detalle que muestre informacin sobre los registros concretos de la pgina de resultados. En la pgina de resultados, los registros se muestran normalmente en una regin repetida y cada registro cuenta con un vnculo. Cuando un usuario hace clic en uno de los vnculos, se abre la pgina de resultados y muestra informacin sobre el registro seleccionado. Esta seccin contiene los siguientes temas: Modificacin de una pgina de resultados para que funcione con una pgina detalle en la pgina 672 Creacin de la pgina detalle utilizando un comportamiento de servidor (slo usuarios de ASP y JSP) en la pgina 673 Creacin de la pgina detalle utilizando un juego de registros filtrado en la pgina 674 Modificacin de una pgina de resultados para que funcione con una pgina detalle La pgina de resultados debe contar con una regin repetida para mostrar varios registros a la vez, al tiempo que cada registro de la regin repetida debe tener un vnculo con la pgina detalle. El vnculo no slo debe abrir la pgina detalle, sino que tambin debe indicar a la pgina detalle el registro que ha seleccionado el usuario. El comportamiento de servidor Ir a pgina Detalle crea este tipo de vnculo (slo para usuarios de ASP y JSP). Los usuarios de PHP, ASP.NET y ColdFusion deben crear un vnculo con parmetros de URL en el cdigo. Para obtener ms informacin, consulte Creacin de parmetros de URL utilizando vnculos HTML en la pgina 545.
Para modificar una pgina de resultados para que funcione con una pgina detalle (slo usuarios de ASP y JSP):

Cree una pgina detalle vaca (Archivo > Nuevo) y asigne un nombre al archivo. Deje la pgina a un lado por el momento. Deber trabajar en ella posteriormente. Abra la pgina de resultados en Dreamweaver. Asegrese de que aparecen los resultados en una regin repetida. Para obtener instrucciones, consulte Visualizacin de mltiples comportamientos en la pgina 586.

2 3

En la regin repetida, seleccione el texto o la imagen que actuar como vnculo. Si est trabajando en la ventana Live Data, seleccione el texto o la imagen en la primera regin mostrada.
Nota: El texto o imagen que seleccione puede ser dinmico.

672 Captulo 40

Cree el vnculo con la pgina detalle abriendo el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haciendo clic en el botn de signo ms (+) y seleccionando Ir a pgina Detalle en el men emergente. Aparecer el cuadro de dilogo Ir a pgina Detalle.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

La pgina de resultados pasa el valor a la pgina detalle en un parmetro de URL, que consiste simplemente en una variable aadida al final del URL empleado para abrir la pgina detalle. Por ejemplo, si el parmetro de URL se denomina id y la pgina detalle se denomina customerdetail.asp, el URL presentar esta apariencia cuando el usuario haga clic en el vnculo: http://www.mysite.com/customerdetail.asp?id=43 La primera parte del URL, http://www.mysite.com/customerdetail.asp, abre la pgina detalle. La segunda parte, ?id=43, es el parmetro de URL. Dicho parmetro indica a la pgina detalle qu registro debe localizar y mostrar. El trmino id es el nombre del parmetro URL y 43 es su valor. En este ejemplo, el parmetro URL contiene el nmero de ID del registro, 43. Creacin de la pgina detalle utilizando un comportamiento de servidor (slo usuarios de ASP y JSP) Despus de modificar la pgina de resultados para que funcione con la pgina detalle, complete la pgina detalle. Puede crear la pgina detalle con una combinacin de juego de registros normal y un comportamiento de servidor, o bien puede crearla slo con un juego de registros filtrado. En esta seccin se describe cmo crear la primera clase de pgina detalle (slo para usuarios de ASP y JSP). Para aprender a crear la segunda clase, consulte Creacin de la pgina detalle utilizando un juego de registros filtrado en la pgina 674. En primer lugar, disee la pgina detalle empleando las herramientas de diseo de Dreamweaver. Para obtener ms informacin, consulte Creacin de pginas Maestro/Detalle en la pgina 657. En segundo lugar, defina un juego de registros para la pgina o copie y pegue el juego de registros de la pgina de resultados. La pgina detalle extraer los datos del registro de dicho juego de registros. Para obtener instrucciones, consulte Definicin de un juego de registros en la pgina 554 y Copiado de un juego de registros de una pgina a otra en la pgina 569.

Creacin de pginas que realicen bsquedas en bases de datos 673

En tercer lugar, vincule las columnas del juego de registros con la pgina. En el panel Vinculaciones (Ventana > Vinculaciones), seleccione columnas del juego de registros y arrstrelas hasta la pgina. En cuarto lugar, aada un comportamiento de servidor que lea el ID del registro en el parmetro URL pasado por la pgina de resultados y que recupere el registro. Si omite este paso, el servidor recuperar el primer registro del juego de registros.
Para recuperar un registro especfico utilizando un comportamiento de servidor (slo usuarios de ASP y JSP):

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+), seleccione Mover a registro del men emergente y elija Mover a un registro concreto. Aparecer el cuadro de dilogo Mover a un registro concreto.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

La prxima vez que un navegador solicite la pgina, leer el ID de registro en el parmetro de URL transferido por el navegador y pasar al registro especificado en el juego de registros. Creacin de la pgina detalle utilizando un juego de registros filtrado Otra forma de crear una pgina detalle consiste en filtrar el juego de registros de manera que slo quede un registro (el registro seleccionado por el usuario en la pgina de resultados). Este mtodo puede mejorar el rendimiento de la aplicacin, ya que el juego de registros slo contendr un registro. En primer lugar, disponga la pgina empleando las herramientas de diseo de Dreamweaver. Para obtener ms informacin, consulte Creacin de pginas Maestro/Detalle en la pgina 657. En segundo lugar, defina un juego de registros para la pgina o copie y pegue el juego de registros de la pgina de resultados. La pgina detalle extraer los datos del registro de dicho juego de registros. Para obtener instrucciones, consulte Definicin de un juego de registros en la pgina 554 y Copiado de un juego de registros de una pgina a otra en la pgina 569. En tercer lugar, cree un filtro de juego de registros que recupere el registro especificado en la pgina de resultados. Si crea un juego de registros utilizando el cuadro de dilogo Juego de registros simple, podr utilizar los cuadros Filtro para crear el filtro. Si utiliza el cuadro de dilogo Juego de registros avanzado, podr modificar la consulta SQL para crear el filtro.

674 Captulo 40

Para recuperar un registro concreto utilizando un filtro de juego de registros:

1 2 3

Asegrese de que la pgina detalle contiene un juego de registros. Abra el juego de registros haciendo doble clic en su nombre en el panel Vinculaciones (Ventana > Vinculaciones). Asegrese de que aparece el cuadro de dilogo Juego de registros o Conjunto de datos sencillo. Si aparece la versin avanzada del cuadro de dilogo, cambie a la versin sencilla haciendo clic en Simple. Si Dreamweaver informa de que no puede cambiar (normalmente debido a que la consulta es demasiado compleja para que aparezca en un cuadro de dilogo sencillo), deber utilizar una consulta SQL para localizar el registro; omita el siguiente procedimiento de esta seccin.

Complete la seccin Filtro de la siguiente forma para localizar y mostrar el registro especificado en el parmetro URL pasado por la pgina de resultados: que contiene valores que coinciden con el valor del parmetro de URL pasado por la pgina de resultados. Por ejemplo, si el parmetro de URL contiene un nmero de ID de registro, elija la columna que contiene nmeros de ID de registros.

En el primer men emergente del rea Filtro, seleccione la columna de tabla de la base de datos

En el men emergente situado junto al primer men, seleccione el signo igual (ya debe estar
seleccionado).

En el tercer men emergente, seleccione Parmetro de URL.

La pgina de resultados pasa a la pgina detalle informacin que identifica la seleccin del usuario mediante un parmetro de URL.

En el cuarto cuadro, introduzca el nombre del parmetro de URL pasado por la pgina de
resultados. Por ejemplo, si el URL utilizado por la pgina de resultados para abrir la pgina detalle es www.mysite.com/customerdetail.asp?id=43, introduzca id. Si ha utilizado el comportamiento de servidor Ir a pgina Detalle en la pgina de resultados, tambin puede obtener el nombre cambiando a la pgina de resultados, abriendo el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haciendo doble clic en el comportamiento de servidor Ir a pgina Detalle. Compruebe el nombre que figura en Pasar parmetro de URL.
5 6

Haga clic en Aceptar. Si an no lo ha hecho, vincule las columnas del juego de registros con la pgina seleccionando las columnas del panel Vinculaciones (Ventana > Vinculaciones) y arrastrndolas hasta la pgina.

Para recuperar un registro concreto utilizando una consulta SQL:

1 2

Asegrese de que la pgina detalle contiene un juego de registros. Abra el juego de registros haciendo doble clic en su nombre en el panel Vinculaciones (Ventana > Vinculaciones).

Creacin de pginas que realicen bsquedas en bases de datos 675

Asegrese de que aparece el cuadro de dilogo Juego de registros avanzado. Si aparece la versin simple del cuadro de dilogo Juego de registros, cambie a la versin avanzada de dicho cuadro de dilogo haciendo clic en el botn Avanzada.

Aada una clusula Where (donde) a la declaracin SQL para localizar el registro seleccionado por el usuario en la pgina de resultados. La clusula Where debe contener una variable que incluya el valor pasado por el parmetro de URL. En el siguiente ejemplo, la variable se denomina varDept:
SELECT * FROM EMPLOYEES WHERE DEPARTMENT = 'varDept'

Para obtener ayuda sobre la sintaxis SQL, consulte Nociones bsicas de SQL en la pgina 751.
5

Asigne a la variable el valor de la pgina de resultados pasado en el parmetro de URL haciendo clic en el botn de signo ms (+) en el rea Variables e introduciendo el nombre de la variable, el valor predeterminado (el valor que toma la variable si no se devuelve ningn valor de tiempo de ejecucin) y un valor de tiempo de ejecucin. En el siguiente ejemplo ASP, la pgina de resultados pasa un parmetro URL denominado
Department.

6 7

Haga clic en Aceptar. Si an no lo ha hecho, vincule las columnas del juego de registros con la pgina seleccionando las columnas del panel Vinculaciones (Ventana > Vinculaciones) y arrastrndolas hasta la pgina.

Utilizacin de pginas relacionadas (slo usuarios de ASP y JSP)

En algunas situaciones, es posible que desee mostrar una pgina que no sea una pgina de bsqueda, una pgina de resultados ni una pgina detalle, pero sin perder la informacin que ha recibido la pgina de un formulario HTML o un parmetro de URL. En lugar de utilizar un vnculo estndar para abrir la pgina relacionada, cree el vnculo empleando el comportamiento de servidor Ir a pgina Relacionada. El vnculo resultante abrir la pgina relacionada y transferir parmetros existentes a dicha pgina. Por ejemplo, puede pasar parmetros de bsqueda de una pgina a otra para que el usuario no tenga que volver a introducir los parmetros de bsqueda.
Nota: Este comportamiento de servidor slo est disponibles para pginas ASP y JSP.

Antes de aadir a una pgina un comportamiento de servidor Ir a pgina Relacionada, asegrese de que la pgina recibe los parmetros de un formulario HTML (es decir, que el atributo ACTION del formulario especifica la pgina), o de un parmetro de URL, como cuando la pgina es el destino de un vnculo desde otra pgina con un comportamiento de servidor Ir a pgina Relacionada.

676 Captulo 40

Para crear un vnculo que pase parmetros de formulario existentes a una pgina relacionada:

1 2

En la pgina, seleccione la cadena de texto o las imgenes que actualizarn como vnculo con la pgina relacionada. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Ir a pgina Relacionada del men emergente. Aparecer el cuadro de dilogo Ir a pgina Relacionada.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Cuando el usuario haga clic en el nuevo vnculo, la pgina transferir los parmetros a la pgina relacionada empleando parmetros de URL. Por ejemplo, supongamos que un parmetro de formulario se denomina lastname y que la pgina relacionada se denomina special_offer.asp. El URL tendr la siguiente apariencia cuando el usuario haga clic en el vnculo: http://www.mysite.com/special_offer.asp?lastname=Anderson La primera parte del URL, http://www.mysite.com/special_offer.asp, abre la pgina relacionada. La segunda parte, ?lastname=Anderson, es el parmetro de URL que el parmetro de formulario original pasa a la pgina relacionada.

Creacin de pginas que realicen bsquedas en bases de datos 677

678 Captulo 40

CAPTULO 41 Creacin de pginas que modifiquen bases de datos

Macromedia Dreamweaver MX incluye un conjunto de comportamientos de servidor que permiten que los usuarios aadan, actualicen y eliminen registros con sus navegadores Web. Tambin puede utilizar objetos de aplicacin para crear formularios HTML totalmente funcionales que permitan insertar y actualizar registros. Este captulo contiene las secciones siguientes:

Creacin de una pgina para insertar registros en la pgina 680 Creacin de una pgina para actualizar registros en la pgina 683 Creacin de una pgina para borrar un registro en la pgina 688 Utilizacin de procedimientos almacenados para modificar bases de datos en la pgina 691 Utilizacin de comandos ASP para modificar una base de datos en la pgina 695 Utilizacin de declaraciones preparadas JSP para modificar una base de datos en la pgina 698

679

Creacin de una pgina para insertar registros

Una aplicacin puede incluir una pgina que permita a los usuarios insertar nuevos registros en una base de datos. Por ejemplo, la siguiente pgina inserta un nuevo registro en una base de datos de empleados:

Una pgina de insercin debe incluir dos elementos:

Un formulario HTML que permite a los usuarios introducir datos Un comportamiento de servidor Insertar registro que actualiza la base de datos
Puede aadir ambos elementos en una sola operacin, mediante el objeto Live Formulario de insercin de registro, o por separado, con las herramientas de formulario de Dreamweaver y el panel Comportamientos del servidor.
Nota: La pgina de insercin slo puede contener un comportamiento de servidor de edicin de registros simultneamente. Por ejemplo, no puede aadir un comportamiento de servidor Actualizar registro o Borrar registro a la pgina de insercin.

Creacin rpida de una pgina de insercin Puede aadir los elementos bsicos de una pgina de insercin en una sola operacin mediante el objeto Live Formulario de insercin de registro. El objeto Live aade a la pgina un formulario HTML y un comportamiento de servidor Insertar registro. Tambin puede aadir los elementos por separado utilizando las herramientas de formulario y el panel Comportamientos del servidor. Para obtener ms informacin, consulte Creacin de una pgina de insercin elemento a elemento en la pgina 681. Una vez situados los elementos en la pgina, puede utilizar las herramientas de diseo de Dreamweaver para personalizar el formulario o el panel Comportamientos del servidor para editar el comportamiento de servidor Insertar registro.

680 Captulo 41

Para crear la pgina de insercin con el objeto Live Formulario de insercin de registro:

Abra la pgina en la vista Diseo y elija Insertar > Objetos de aplicacin > Formulario de insercin de registro. Aparecer el cuadro de dilogo Insertar formulario de insercin de registro.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Dreamweaver aade a la pgina un formulario HTML y un comportamiento de servidor Insertar registro. Los objetos de formulario estn dispuestos en una tabla bsica que se puede personalizar libremente por medio de las herramientas de diseo de pginas de Dreamweaver. (Asegrese de que todos los objetos de formulario se mantienen dentro de los lmites del formulario.) Para editar el comportamiento de servidor, abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haga doble clic en el comportamiento Insertar registro. Creacin de una pgina de insercin elemento a elemento Puede aadir los elementos bsicos de una pgina de insercin por separado utilizando las herramientas de formulario y el panel Comportamientos del servidor. Tambin puede aadir todos los elementos de una vez con el objeto Live Formulario de insercin de registro. Para obtener ms informacin, consulte Creacin rpida de una pgina de insercin en la pgina 680. El primer paso consiste en aadir un formulario HTML a la pgina para que los usuarios puedan introducir datos.

Creacin de pginas que modifiquen bases de datos 681

Para aadir un formulario HTML a una pgina de insercin:

1 2

Cree una nueva pgina (Archivo > Nuevo) y disela con las herramientas de diseo de Dreamweaver. Aada un formulario HTML situando el punto de insercin donde desea que aparezca el formulario y eligiendo Formulario en el men Insertar. Se crear un formulario vaco en la pgina. Quiz deba activar los elementos invisibles (Ver > Ayudas visuales > Elementos invisibles) para ver los lmites del formulario, que se representan por medio de lneas rojas finas.

Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta <form>, situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dnde y cmo enviar los datos del registro cuando el usuario presione el botn Enviar, ya que el comportamiento de servidor Insertar registro configura estos atributos automticamente.

Aada un objeto de formulario (Insertar > Objetos de formulario) para cada columna de la tabla de la base de datos en la que desee insertar registros. Los objetos de formulario permiten introducir datos. Generalmente se utilizan campos de texto, pero tambin puede usar listas/mens, casillas de verificacin y botones de opcin. Para obtener ms informacin sobre objetos de formulario, consulte Creacin de formularios interactivos en la pgina 629.

5 6

Aada al formulario un botn Enviar (Insertar > Objetos de formulario > Botn). Si lo desea, cambie la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, ste es el inspector de propiedades de un botn cuya etiqueta es Insertar registro:

El siguiente paso consiste en aadir el comportamiento de servidor Insertar registro para insertar registros en una tabla de la base de datos.

682 Captulo 41

Para aadir un comportamiento de servidor que inserte registros en una tabla de la base de datos:

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Insertar registro en el men emergente (Los usuarios de ASP.NET eligen Insertar registro al enviar el formulario). Aparecer el cuadro de dilogo Insertar registro.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios insertar registros en una tabla de la base de datos rellenando el formulario HMTL y haciendo clic en el botn Enviar.

Creacin de una pgina para actualizar registros

Una aplicacin puede incluir una pgina que permita a los usuarios actualizar los registros existentes en una tabla de la base de datos. Generalmente, una pgina de actualizacin es una pgina de detalle que funciona conjuntamente con una pgina de resultados. La pgina de resultados permite que el usuario seleccione el registro que desea actualizar y transfiere la informacin a la pgina de actualizacin. Las pginas de actualizacin constan de tres elementos:

Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos. Un formulario HTML que permite a los usuarios modificar los datos del registro. Un comportamiento de servidor Actualizar registro que permite actualizar la tabla de la base de
datos. Puede aadir a la pgina el formulario HTML y el comportamiento de servidor en una sola operacin, mediante el objeto Live Formulario de actualizacin de registros, o por separado, con las herramientas de formulario de Dreamweaver y el panel Comportamientos del servidor.
Nota: La pgina de actualizacin slo puede contener un comportamiento de servidor de edicin de registros. Por ejemplo, no puede aadir un comportamiento de servidor Insertar registro o Borrar registro a la pgina de actualizacin.

Creacin de pginas que modifiquen bases de datos 683

Identificacin del registro que desea actualizar Antes de actualizar un registro, el usuario debe encontrarlo en la base de datos. Por tanto, necesitar una pgina de bsqueda y una pgina de resultados que funcionen con la pgina de actualizacin. Para obtener instrucciones para crear pginas de bsqueda y de resultados, consulte Creacin de pginas que realicen bsquedas en bases de datos en la pgina 665. La pgina de resultados transfiere un parmetro URL a la pgina de actualizacin para indicarle el registro que debe actualizar. Por tanto, asegrese de que la pgina de resultados incluye un comportamiento de servidor Ir a pgina Detalle en el que se especifica la pgina de actualizacin como pgina de detalle. Para obtener instrucciones, consulte Modificacin de una pgina de resultados para que funcione con una pgina detalle en la pgina 672. Recuperacin del registro que desea actualizar Cuando la pgina de resultados transfiere un parmetro URL a la pgina de actualizacin para identificar el registro que desea actualizar, la pgina de actualizacin debe leer el parmetro, recuperar el registro de la tabla de la base de datos y almacenarlo temporalmente en un juego de registros.
Para recuperar el registro que desea actualizar:

En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn de signo ms (+) y seleccione Juego de registros o Conjunto de datos (ASP.NET). Si aparece el cuadro de dilogo avanzado, haga clic en el botn Simple para abrir el cuadro de dilogo sencillo.

2 3 4

Asigne un nombre al juego de registros y utilice los mens emergentes Conexin y Tabla para especificar la ubicacin de los datos que desea actualizar. Haga clic en la opcin Seleccionado y elija una columna de clave (generalmente, la columna ID del registro) y las columnas que contienen los datos que desea actualizar. Configure el rea Filtro de forma que el valor de la columna de clave sea igual al valor del parmetro URL transferido por la pgina de resultados. Este tipo de filtro crea un conjunto de registros que slo contiene el registro especificado por la pgina de resultados. Por ejemplo, si la columna de clave contiene la informacin de ID del registro y se denomina PRID, y si la pgina de resultados transfiere la informacin de ID del registro correspondiente en el parmetro URL id, sta es la apariencia que debe presentar el rea Filtro:

Para obtener ms informacin, consulte Creacin de la pgina detalle utilizando un juego de registros filtrado en la pgina 674.
5

Haga clic en Aceptar.

Cuando el usuario seleccione un registro de la pgina de resultados, la pgina de actualizacin generar un juego de registros que contendr nicamente el registro seleccionado.

684 Captulo 41

Cmo completar la pgina de actualizacin rpidamente Puede aadir los dos ltimos elementos de una pgina de actualizacin en una sola operacin mediante el objeto Live Formulario de actualizacin de registros. El objeto Live aade a la pgina un formulario HTML y un comportamiento de servidor Actualizar registro. Para utilizar el objeto Live, la aplicacin Web debe ser capaz de identificar el registro que desea actualizar, y la pgina de actualizacin necesita poder recuperarlo. (Consulte Identificacin del registro que desea actualizar en la pgina 684 y Recuperacin del registro que desea actualizar en la pgina 684.) Tambin puede aadir el formulario HTML y el comportamiento de servidor Actualizar registro por separado con las herramientas de formulario de Dreamweaver y el panel Comportamientos del servidor. (Consulte Cmo completar la pgina de actualizacin elemento a elemento en la pgina 686.) Cuando el objeto Live site los elementos en la pgina, podr utilizar las herramientas de diseo de Dreamweaver para personalizar el formulario o el panel Comportamientos del servidor para editar el comportamiento de servidor Actualizar registro.
Para crear la pgina de actualizacin con el objeto Live Formulario de actualizacin de registros:

Abra la pgina en la vista Diseo y elija Insertar > Objetos de aplicacin > Formulario de actualizacin de registros. Aparecer el cuadro de dilogo Formulario de actualizacin de registros.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

El objeto Live aade a la pgina un formulario HTML y un comportamiento de servidor Actualizar registro. Los objetos de formulario estn dispuestos en una tabla bsica que se puede personalizar por medio de las herramientas de diseo de pginas de Dreamweaver. (Asegrese de que todos los objetos de formulario se mantienen dentro de los lmites del formulario.)

Creacin de pginas que modifiquen bases de datos 685

Para editar el comportamiento de servidor, abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haga doble clic en el comportamiento Actualizar registro. Cmo completar la pgina de actualizacin elemento a elemento Puede aadir los dos ltimos elementos bsicos de una pgina de actualizacin por separado utilizando las herramientas de formulario y el panel Comportamientos del servidor. Para que se pueda aadir los elementos, la aplicacin Web debe ser capaz de identificar el registro que desea actualizar, y la pgina de actualizacin necesita poder recuperarlo. (Consulte Identificacin del registro que desea actualizar en la pgina 684 y Recuperacin del registro que desea actualizar en la pgina 684.) Tambin puede aadir los elementos restantes de una vez con el objeto Live Formulario de actualizacin de registros. (Consulte Cmo completar la pgina de actualizacin rpidamente en la pgina 685.) El primer paso consiste en aadir un formulario HTML a la pgina para que los usuarios puedan modificar los datos.
Para aadir un formulario HTML a una pgina de actualizacin:

1 2 3

Cree una pgina (Archivo > Nuevo). Disee la pgina empleando las herramientas de Dreamweaver. Aada un formulario HTML situando el punto de insercin donde desea que aparezca el formulario y eligiendo Formulario en el men Insertar. Se crear un formulario vaco en la pgina. Quiz deba activar los elementos invisibles (Ver > Ayudas visuales > Elementos invisibles) para ver los lmites del formulario, que se representan por medio de lneas rojas finas.

Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta <form>, situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dnde y cmo enviar los datos del registro cuando el usuario presione el botn Enviar, ya que el comportamiento de servidor Actualizar registro configura estos atributos automticamente.

Aada un objeto de formulario (Insertar > Objetos de formulario) para cada columna que desee actualizar en la tabla de la base de datos. Los objetos de formulario permiten introducir datos. Generalmente se utilizan campos de texto, pero tambin puede usar listas/mens, casillas de verificacin y botones de opcin. Cada objeto de formulario debe corresponder a una de las columnas del juego de registros definido previamente. La nica excepcin es la columna de clave exclusiva, que no debe estar asociada a ningn objeto de formulario. Para obtener ms informacin sobre objetos de formulario, consulte Creacin de formularios interactivos en la pgina 629.

Aada al formulario un botn Enviar (Insertar > Objetos de formulario > Botn).

686 Captulo 41

Si lo desea, cambie la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, ste es el inspector de propiedades de un botn cuya etiqueta es Actualizar registro:

El siguiente paso consiste en mostrar el registro en el formulario vinculando los objetos de formulario a las columnas de la tabla de la base de datos.
Para mostrar el registro en el formulario:

Asegrese de haber definido un juego de registros para guardar en l el registro que desea actualizar el usuario. Para obtener ms informacin, consulte Recuperacin del registro que desea actualizar en la pgina 684.

Arrastre una columna de la tabla desde el panel Vinculaciones (Ventana > Vinculaciones) hasta el objeto de formulario correspondiente de la pgina. Para obtener ms informacin, consulte Conversin de parmetros de ActiveX, Flash y de otros objetos en contenido dinmico en la pgina 577.

El ltimo paso consiste en aadir el comportamiento de servidor Actualizar registro para actualizar la tabla de la base de datos una vez que el usuario haya modificado el registro.
Para aadir un comportamiento de servidor para actualizar la tabla de la base de datos.

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Actualizar registro en el men emergente. Aparecer el cuadro de dilogo Actualizar registro.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Creacin de pginas que modifiquen bases de datos 687

Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios actualizar registros en una base de datos modificando la informacin que se muestra en el formulario HMTL y haciendo clic en el botn Enviar.

Creacin de una pgina para borrar un registro

Una aplicacin puede incluir una pgina para permitir que los usuarios borren los registros existentes en una tabla de la base de datos. Generalmente, una pgina de borrado es una pgina de detalle que funciona conjuntamente con una pgina de resultados. La pgina de resultados permite que el usuario seleccione el registro que desea borrar y transfiere la informacin a la pgina de eliminacin. Las pginas de borrado constan de cuatro elementos:

Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos. Una presentacin de slo lectura de los datos que desea borrar. Un botn Enviar que permite enviar el comando de borrado al servidor. Un comportamiento de servidor Borrar registro que permite actualizar la tabla de la base de datos.

Nota: La pgina de borrado slo puede contener un comportamiento de servidor de edicin de registros. Por ejemplo, no puede aadir un comportamiento de servidor Insertar registro o Actualizar registro a la pgina de borrado.

Identificacin del registro que desea borrar Antes de borrar un registro, el usuario debe encontrarlo en la base de datos. Por tanto, necesitar una pgina de bsqueda y una pgina de resultados que funcionen con la pgina de borrado. Para obtener instrucciones para crear pginas de bsqueda y de resultados, consulte Creacin de pginas que realicen bsquedas en bases de datos en la pgina 665. La pgina de resultados transfiere un parmetro URL a la pgina de borrado para indicarle el registro que debe borrar. Por tanto, asegrese de que la pgina de resultados incluye un comportamiento de servidor Ir a pgina Detalle en el que se especifica la pgina de borrado como pgina de detalle. Para obtener instrucciones, consulte Modificacin de una pgina de resultados para que funcione con una pgina detalle en la pgina 672. Recuperacin del registro que desea borrar Cuando la pgina de resultados transfiere un parmetro URL a la pgina de borrado para identificar el registro que desea borrar, la pgina de borrado debe leer el parmetro, recuperar el registro de la tabla de la base de datos y almacenarlo temporalmente en un conjunto de registros.
Para recuperar el registro que desea borrar:

En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn de signo ms (+) y seleccione Juego de registros o Conjunto de datos (ASP.NET). Si aparece el cuadro de dilogo avanzado, haga clic en el botn Simple para abrir el cuadro de dilogo sencillo.

Asigne un nombre al conjunto de registros y utilice los mens emergentes Conexin y Tabla para especificar la ubicacin de los datos que desea borrar.

688 Captulo 41

3 4

En el rea Columnas, seleccione la opcin Todas para elegir todas las columnas de la tabla de la base de datos. Configure el rea Filtro de forma que el valor de la columna de clave sea igual al valor del parmetro URL transferido por la pgina de resultados. Este tipo de filtro crea un conjunto de registros que slo contiene el registro especificado por la pgina de resultados. Por ejemplo, si la columna de clave contiene la informacin de ID del registro y se denomina PRID, y si la pgina de resultados transfiere la informacin de ID del registro correspondiente en el parmetro URL id, sta es la apariencia que debe presentar el rea Filtro:

Para obtener ms informacin, consulte Creacin de la pgina detalle utilizando un juego de registros filtrado en la pgina 674.
5

Haga clic en Aceptar.

Cuando el usuario seleccione un registro de la pgina de resultados, la pgina de borrado generar un juego de registros que contendr nicamente el registro seleccionado. A continuacin, aadir una presentacin de slo lectura de los datos que se borran. Visualizacin de los datos que desea borrar Es recomendable mostrar el registro antes de borrarlo para que el usuario confirme la operacin.
Para aadir una presentacin de slo lectura del registro que desea borrar:

Asegrese de haber definido un conjunto de registros para guardar en l el registro que desea eliminar el usuario. Para obtener ms informacin, consulte Recuperacin del registro que desea borrar en la pgina 688.

Arrastre una columna desde el panel Vinculaciones (Ventana > Vinculaciones) hasta la pgina. El contenido dinmico aparecer en la pgina. Puede soltar directamente el contenido dinmico en la pgina o en una tabla HTML. Para obtener ms informacin, consulte Conversin de texto en contenido dinmico en la pgina 572.

Creacin de pginas que modifiquen bases de datos 689

Envo del comando de borrado al servidor La pgina de borrado utiliza un botn Enviar para enviar el comando de borrado al servidor. Para aadir a la pgina un botn Enviar deber crear un formulario HTML que slo contenga dicho botn.
Para aadir un botn Enviar a la pgina de borrado:

En la vista Diseo, site el punto de insercin en la posicin donde desea que aparezca el botn Enviar y elija Formulario en el men Insertar. Se crear un formulario vaco en la pgina. Quiz deba activar los elementos invisibles (Ver > Ayudas visuales > Elementos invisibles) para ver los lmites del formulario, que se representan por medio de lneas rojas finas.

Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta <form>, situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dnde y cmo enviar los datos del registro cuando el usuario presione el botn Enviar, ya que el comportamiento de servidor Borrar registro configura estos atributos automticamente.

3 4

Aada al formulario un botn Enviar (Insertar > Objetos de formulario > Botn). Si lo desea, cambie la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, ste es el inspector de propiedades de un botn cuya etiqueta es Borrar registro:

A continuacin, aadir el comportamiento de servidor Borrar registro para actualizar la tabla de la base de datos cuando el usuario haga clic en el botn Enviar.

690 Captulo 41

Eliminacin del registro de la tabla de la base de datos El ltimo paso consiste en aadir el comportamiento de servidor Borrar registro para actualizar la tabla de la base de datos cuando el usuario haga clic en el botn Enviar.
Para aadir un comportamiento de servidor para borrar la tabla de la base de datos:

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Borrar registro en el men emergente. Aparecer el cuadro de dilogo Borrar registro.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios eliminar registros de una tabla de la base de datos haciendo clic en el botn Enviar del formulario.

Utilizacin de procedimientos almacenados para modificar bases de datos

Puede emplear un procedimiento almacenado para modificar una base de datos. Un procedimiento almacenado es un elemento de base de datos almacenado que realiza alguna operacin en la base de datos. Un procedimiento almacenado contiene cdigo SQL que puede, entre otras cosas, insertar, actualizar o eliminar registros. Los procedimientos almacenados tambin pueden alterar la estructura de la base de datos. Por ejemplo, puede utilizar un procedimiento almacenado para aadir una columna de tabla o incluir borrar una tabla. Un procedimiento almacenado tambin puede llamar a otro procedimiento almacenado, as como aceptar entradas y devolver mltiples valores al procedimiento llamado en forma de parmetros de salida. Un procedimiento almacenado es reutilizable en el sentido de que se puede reutilizar una versin compilada del procedimiento para ejecutar una operacin de base de datos varias veces. Si sabe que una tarea de base de datos se va a ejecutar muchas veces o que distintas aplicaciones van a ejecutar la misma tarea, el uso de un procedimiento almacenado para ejecutar dicha tarea puede agilizar las operaciones de base de datos.
Nota: Las bases de datos mySQL y Microsoft Access no admiten procedimientos almacenados.

Creacin de pginas que modifiquen bases de datos 691

Antes de utilizar un procedimiento almacenado para modificar una base de datos, compruebe que dicho procedimiento contiene SQL que modifique la base de datos de algn modo. Para crear y almacenar uno en la base de datos, consulte la documentacin de la base de datos y un buen manual de Transact-SQL. El procedimiento para utilizar un procedimiento almacenado vara segn el modelo de servidor. Ejecucin del procedimiento almacenado en ColdFusion Con las pginas Macromedia ColdFusion en Dreamweaver, deber aadir a una pgina un comportamiento de servidor Procedimiento almacenado para ejecutar un procedimiento almacenado.
Para aadir un procedimiento almacenado a una pgina ColdFusion:

1 2

En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado. En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Procedimiento almacenado. Aparecer el cuadro de dilogo Procedimiento almacenado.

Seleccione las opciones deseadas en el cuadro de dilogo. Los cuadros de dilogo de ColdFusion 4 son distintos de los de ColdFusion MX. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.

Haga clic en Aceptar.

Despus de cerrar el cuadro de dilogo Procedimiento almacenado, Dreamweaver insertar cdigo ColdFusion en la pgina que, cuando se ejecute en el servidor, llamar a un procedimiento almacenado en la base de datos. El procedimiento almacenado realizar a su vez una operacin de base de datos, como insertar un registro.

692 Captulo 41

Si el procedimiento almacenado toma parmetros, puede crear una pgina que recoja los valores de los parmetros y los enve a la pgina con el procedimiento almacenado. Por ejemplo, puede crear una pgina que utilice parmetros de URL o un formulario HTML que recoja los valores de los parmetros de los usuarios. Ejecucin del procedimiento almacenado en ASP Con las pginas ASP en Dreamweaver, deber aadir a una pgina un objeto de comando para ejecutar un procedimiento almacenado. Para obtener ms informacin sobre objetos de comando, consulte Aspectos bsicos de los comandos ASP en la pgina 696.
Para aadir un procedimiento almacenado a una pgina ASP:

1 2

En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado. En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Comando (procedimiento almacenado). Aparecer el cuadro de dilogo Comando. Introduzca un nombre para el comando, elija una conexin con la base de datos que contiene el procedimiento almacenado y, a continuacin, elija Procedimiento almacenado en el men emergente Tipo. Elija el procedimiento almacenado ampliando la rama Procedimientos almacenados del cuadro Elementos de base de datos, eligiendo el procedimiento almacenado en la lista y haciendo clic en el botn Procedimiento. Introduzca los parmetros necesarios en la tabla Variables. No es preciso que introduzca ningn parmetro para variables RETURN_VALUE. Haga clic en Aceptar.

Despus de cerrar el cuadro de dilogo, Dreamweaver insertar cdigo ASP en la pgina que, cuando se ejecute en el servidor, crear un objeto de comando que ejecute un procedimiento almacenado en la base de datos. El procedimiento almacenado realizar a su vez una operacin de base de datos, como insertar un registro.
true,

De forma predeterminada, el cdigo define la propiedad Preparado del objeto Comando como lo que hace que el servidor de aplicaciones reutilice una versin compilada del objeto cada vez que se ejecuta el procedimiento almacenado. Si sabe que el comando se va a ejecutar muchas veces, puede utilizar una versin compilada del objeto para agilizar las operaciones de base de datos. Sin embargo, si el comando slo se va a ejecutar una o dos veces, el uso de una versin compilada puede ralentizar la aplicacin Web, pues el sistema tiene que detenerse para compilar el comando. Para cambiar la configuracin, pase a la vista Cdigo y establezca la propiedad Preparado como false.

Nota: No todos los proveedores de base de datos admiten comandos preparados. Si su base de datos no los admite, es posible que aparezca un mensaje de error cuando ejecute la pgina. Cambie a la vista Cdigo y establezca la propiedad Preparado como false.

Si el procedimiento almacenado toma parmetros, puede crear una pgina que recoja los valores de los parmetros y los enve a la pgina con el procedimiento almacenado. Por ejemplo, puede crear una pgina que utilice parmetros de URL o un formulario HTML que recoja los valores de los parmetros de los usuarios.

Creacin de pginas que modifiquen bases de datos 693

Ejecucin del procedimiento almacenado en ASP.NET Con las pginas ASP.NET en Dreamweaver, deber aadir a una pgina un comportamiento de servidor Procedimiento almacenado para ejecutar un procedimiento almacenado.
Para aadir un procedimiento almacenado a una pgina ASP.NET:

1 2

En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado. En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Procedimiento almacenado. Aparecer el cuadro de dilogo Procedimiento almacenado.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Despus de cerrar el cuadro de dilogo, Dreamweaver insertar cdigo ASP.NET en la pgina que, cuando se ejecute en el servidor, ejecutar un procedimiento almacenado en la base de datos. El procedimiento almacenado realizar a su vez una operacin de base de datos, como insertar un registro o ejecutar una consulta. Si el procedimiento almacenado toma parmetros, puede crear una pgina que recoja los valores de los parmetros y los enve a la pgina con el procedimiento almacenado. Por ejemplo, puede crear una pgina que utilice parmetros de URL o un formulario HTML que recoja los valores de los parmetros de los usuarios.

694 Captulo 41

Ejecucin del procedimiento almacenado en JSP Con las pginas JSP en Dreamweaver, deber aadir a una pgina un comportamiento de servidor Ejecutable para ejecutar un procedimiento almacenado.
Para aadir un procedimiento almacenado a una pgina JSP:

1 2

En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado. En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Ejecutable (procedimiento almacenado). Aparecer el cuadro de dilogo Ejecutable (procedimiento almacenado).

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Despus de cerrar el cuadro de dilogo Ejecutable (procedimiento almacenado), Dreamweaver insertar cdigo JSP en la pgina que, cuando se ejecute en el servidor, llamar a un procedimiento almacenado en la base de datos. El procedimiento almacenado realizar a su vez una operacin de base de datos, como insertar un registro. Si el procedimiento almacenado toma parmetros, puede crear una pgina que recoja los valores de los parmetros y los enve a la pgina con el procedimiento almacenado. Por ejemplo, puede crear una pgina que utilice parmetros de URL o un formulario HTML que recoja los valores de los parmetros de los usuarios.

Utilizacin de comandos ASP para modificar una base de datos

Puede utilizar Dreamweaver para crear objetos de comando ASP que inserten, actualicen o eliminen registros de una base de datos. Deber suministrar el objeto de comando con la declaracin SQL que realiza la operacin en la base de datos. Tambin puede suministrar el objeto con un procedimiento almacenado que realice la operacin. Para obtener ms informacin, consulte Ejecucin del procedimiento almacenado en ASP en la pgina 693.

Creacin de pginas que modifiquen bases de datos 695

Aspectos bsicos de los comandos ASP Un objeto de comando es un objeto de servidor que realiza alguna operacin en la base de datos. El objeto puede contener cualquier declaracin SQL vlida, incluida una que devuelva un juego de registros o que inserte, actualice o elimine registros de una base de datos. Un objeto de comando puede alterar la estructura de una base de datos si la declaracin SQL aade o elimina una columna de una tabla. Tambin puede utilizar un objeto de comando para ejecutar un procedimiento almacenado en una base de datos. Un objeto de comando es reutilizable en el sentido de que el servidor de aplicaciones puede reutilizar una versin compilada del objeto para ejecutar el comando varias veces. Para hacer que el comando sea reutilizable, defina la propiedad Preparado del objeto Comando como true, como en la siguiente declaracin VBScript:
mycommand.Prepared = true

Si sabe que el comando se va a ejecutar muchas veces, puede utilizar una versin compilada del objeto para agilizar las operaciones de base de datos.
Nota: No todos los proveedores de base de datos admiten comandos preparados. Si su base de datos no los admite, es posible que aparezca un error cuando defina esta propiedad como true. Es posible incluso que ignore la peticin de preparar el comando y defina la propiedad Preparado como false.

Un objeto de comando se crea mediante scripts en una pgina ASP, pero Dreamweaver permite crear objetos de comando sin escribir una lnea de cdigo ASP. En el resto de la seccin se explica cmo utilizar las herramientas de desarrollo rpido de aplicaciones (RAD) en Dreamweaver para crear objetos de comando ASP que editen registros de la base de datos. Creacin de un comando que utilice SQL para editar una base de datos Puede utilizar un objeto de comando ASP que utilice una declaracin SQL para insertar, actualizar o eliminar registros de una base de datos.
Para crear un objeto de comando:

1 2

En Dreamweaver, abra la pgina ASP que ejecutar el comando. Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Comando. Aparecer el cuadro de dilogo Comando. Introduzca un nombre para el comando, elija una conexin con la base de datos que contiene los registros que desea editar y elija la operacin de edicin que desea que realice el comando (Insertar, Actualizar o Eliminar). Dreamweaver iniciar la declaracin SQL basndose en el tipo de operacin que usted elija. Por ejemplo, ste es el cuadro de dilogo despus de elegir Insertar:

696 Captulo 41

Realice la declaracin SQL. Para obtener informacin sobre cmo escribir declaraciones SQL que modifiquen bases de datos, consulte un manual de Transact-SQL.

Utilice el rea Variables para definir variables SQL. Por ejemplo, a continuacin se incluye una declaracin Insertar que contiene tres variables SQL. Los valores de estas variables se obtienen a travs de los parmetros de URL transferidos a la pgina, como se define en la columna Valor de tiempo de ejecucin del rea Variables.

Despus de cerrar el cuadro de dilogo, Dreamweaver insertar cdigo ASP en la pgina que, cuando se ejecute en el servidor, crear un comando que inserte, actualice o elimine registros de la base de datos. De forma predeterminada, el cdigo define la propiedad Preparado del objeto Comando como true, lo que hace que el servidor de aplicaciones reutilice una versin compilada del objeto cada vez que se ejecuta el comando. Para cambiar esta configuracin, pase a la vista Cdigo y establezca la propiedad Preparado como false. En el ejemplo anterior, a continuacin probablemente creara una pgina con un formulario HTML en el que los usuarios podrn introducir datos de registros. El formulario HTML contendra tres campos de texto (txtFirstName, txtLastName, and txtDept) y un botn Enviar. Asimismo, el formulario utilizara el mtodo GET y enviara los valores de campo de texto a la pgina que contiene el comando.

Creacin de pginas que modifiquen bases de datos 697

Utilizacin de declaraciones preparadas JSP para modificar una base de datos

Puede utilizar Dreamweaver para crear declaraciones preparadas JSP que inserten, actualicen o eliminen registros de una base de datos. Deber suministrar la declaracin preparada con el SQL que realiza la operacin en la base de datos. Aspectos bsicos de las declaraciones preparadas JSP Una declaracin preparada JSP es un objeto de servidor reutilizable que contiene una declaracin SQL. Puede colocar cualquier declaracin SQL vlida en una declaracin preparada. Por ejemplo, una declaracin preparada puede contener una declaracin SQL que devuelva un juego de registros o que inserte, actualice o elimine registros de una base de datos. Una declaracin preparada es reutilizable en el sentido de que el servidor de aplicaciones utiliza una instancia del objeto de declaracin preparada para consultar la base de datos varias veces. A diferencia del objeto de declaracin JSP, no se crea una nueva instancia del objeto de declaracin preparada para cada nueva consulta de base de datos. Si sabe que la declaracin se va a ejecutar muchas veces, puede utilizar una instancia del objeto para agilizar las operaciones de base de datos y ocupar menos memoria en el servidor. Un objeto de declaracin preparada se crea mediante un scriptlet Java en una pgina JSP. Sin embargo, Dreamweaver permite crear declaraciones preparadas sin escribir una sola lnea de cdigo Java. Si est interesado en el cdigo, el scriptlet siguiente crea una declaracin preparada:
String myquery = SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?; PreparedStatement mystatement = connection.prepareStatement(myquery);

La primera lnea almacena la declaracin SQL en una variable de cadena llamada myquery, con un signo de interrogacin que acta como marcador de posicin para el valor de la variable SQL. La segunda lnea crea un objeto de declaracin preparada llamado mystatement. A continuacin, asigne un valor a la variable SQL de este modo:
mystatement.setString(1, request.getParameter(myURLparam));

El mtodo setString asigna el valor a la variable y toma dos argumentos. El primer argumento especifica la variable afectada por su posicin (aqu, la primera posicin de la declaracin SQL). El segundo argumento especifica el valor de la variable. En este ejemplo, el valor lo suministra un parmetro de URL transferido a la pgina.
Nota: Deber utilizar distintos mtodos para asignar valores que no son de cadena a variables SQL. Por ejemplo, para asignar un entero a la variable, utilizara el mtodo mystatement.setInt().

Por ltimo, genere el juego de registros de este modo:

ResultSet myresults = mystatement.execute();

En el resto de la seccin se explica cmo crear declaraciones preparadas JSP utilizando las herramientas de desarrollo rpido de aplicaciones (RAD) de Dreamweaver. Estas herramientas permiten crear declaraciones preparadas sin escribir una sola lnea de cdigo JSP.

698 Captulo 41

Creacin de una declaracin preparada que edite un registro de base de datos Puede utilizar una declaracin preparada JSP para insertar, actualizar o eliminar registros de una base de datos.
Para crear la declaracin preparada:

1 2

En Dreamweaver, abra la pgina JSP que ejecutar el comando. Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Preparado (insertar, actualizar, eliminar). Aparecer el cuadro de dilogo Preparado (insertar, actualizar, eliminar):

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Despus de cerrar el cuadro de dilogo, Dreamweaver insertar cdigo JSP en la pgina que, cuando se ejecute en el servidor, crear una declaracin preparada que inserte, actualice o elimine registros de la base de datos.

Creacin de pginas que modifiquen bases de datos 699

700 Captulo 41

CAPTULO 42 Creacin de pginas que restrinjan el acceso al sitio

Puede utilizar Macromedia Dreamweaver MX para crear las siguientes pginas que restrinjan el acceso al sitio:

Una pgina que obligue a los usuarios a registrarse en su primera visita al sitio (consulte
Creacin de una pgina de registro en la pgina 701).

Una pgina que permita que los usuarios registrados se conecten al sitio (consulte Creacin de
una pgina de conexin en la pgina 705).

Pginas que slo puedan ver los usuarios autorizados (consulte Creacin de una pgina a la
que slo pueden acceder los usuarios autorizados en la pgina 708).
Nota: Dreamweaver no dispone de comportamientos de servidor de autenticacin para pginas ASP.NET o PHP.

Creacin de una pgina de registro

Una aplicacin Web puede contener una pgina que obligue a los usuarios a registrarse en su primera visita al sitio.
Nota: Dreamweaver no dispone de comportamientos de servidor de autenticacin para pginas ASP.NET o PHP.

701

Por ejemplo, la siguiente pgina solicita a los usuarios primerizos que se registren:

Una pgina de registro consta de los siguientes bloques:

Una tabla de base de datos para almacenar la informacin de conexin de los usuarios. Un formulario HTML en el que los usuarios pueden elegir un nombre de usuario y una
contrasea Tambin puede utilizar el formulario para obtener informacin personal adicional de los usuarios.

Un comportamiento de servidor Insertar registro para actualizar la tabla de la base de datos. Un comportamiento de servidor Comprobar nuevo nombre de usuario para comprobar que el
nombre introducido por el usuario no sea utilizado por otro usuario.
Nota: Puede eliminar o cambiar las propiedades de cualquier comportamiento de servidor que aada a una pgina (consulte Edicin de comportamientos de servidor en la pgina 627).

Almacenamiento de la informacin de conexin de los usuarios Una pgina de registro necesita utilizar una tabla de base de datos para almacenar la informacin de conexin que introducen los usuarios. Asegrese de que la tabla de la base de datos contiene columnas de nombre de usuario y contrasea. Si desea conceder distintos privilegios de acceso a los usuarios, incluya tambin una columna de privilegio de acceso (consulte Almacenamiento de privilegios de acceso en la base de datos de usuarios en la pgina 709). Si desea establecer una contrasea comn para todos los usuarios del sitio, configure la aplicacin de base de datos (Microsoft Access, Microsoft SQL Server, Oracle, etc.) para introducir la contrasea de forma predeterminada en todo nuevo registro de usuario. La mayora de las aplicaciones de base de datos permiten establecer el valor predeterminado de una columna cada vez que se crea un nuevo registro. Establezca el valor predeterminado de la contrasea. Tambin puede utilizar la tabla de la base de datos para almacenar otra informacin de utilidad sobre los usuarios.

702 Captulo 42

Cmo permitir que los usuarios elijan un nombre de usuario y una contrasea Para que los usuarios puedan elegir un nombre de usuario y una contrasea (si es aplicable), deber aadir un formulario HTML a la pgina de registro.
Para permitir que los usuarios elijan un nombre de usuario y una contrasea:

1 2

Cree una nueva pgina (Archivo > Nuevo) y disponga la pgina de registro con las herramientas de diseo de Dreamweaver. Aada un formulario HTML situando el punto de insercin donde desea que aparezca el formulario y eligiendo Formulario en el men Insertar. Se crear un formulario vaco en la pgina. Quiz deba activar los elementos invisibles (Ver > Ayudas visuales > Elementos invisibles) para ver los lmites del formulario, que se representan por medio de lneas rojas finas.

Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta <form>, situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dnde y cmo enviar los datos del registro cuando el usuario presione el botn Enviar, ya que el comportamiento de servidor Insertar registro configura estos atributos automticamente (consulte Actualizacin de la tabla de usuarios de la base de datos en la pgina 704).

Aada campos de texto (Insertar > Objetos de formulario > Campo de texto) para permitir que el usuario introduzca el nombre de usuario y la contrasea. El formulario tambin puede incluir otros objetos formulario para obtener informacin personal adicional. Deber aadir etiquetas (de texto o imgenes) junto a cada objeto de formulario para indicar a los usuarios la informacin que deben introducir. Tambin es recomendable alinear los objetos situndolos dentro de una tabla HTML. Para obtener ms informacin sobre objetos de formulario, consulte Creacin de formularios interactivos en la pgina 629.

5 6

Aada al formulario un botn Enviar (Insertar > Objetos de formulario > Botn). Si lo desea, cambie la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, ste es el inspector de propiedades de un botn cuya etiqueta es Register:

El siguiente paso consiste en aadir el comportamiento de servidor Insertar registro para insertar registros en la tabla de usuarios de la base de datos.

Creacin de pginas que restrinjan el acceso al sitio 703

Actualizacin de la tabla de usuarios de la base de datos Para actualizar la tabla de usuarios de la base de datos deber aadir un comportamiento de servidor Insertar registro.
Para actualizar la tabla de usuarios de la base de datos:

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Insertar registro del men emergente. Aparecer el cuadro de dilogo Insertar registro. Utilice los mens emergentes Conexin e Insertar en la tabla para especificar la tabla de usuarios de la base de datos. En el cuadro de dilogo Tras insertar, ir a, introduzca la pgina que se debe abrir despus de insertar el registro en la tabla. En el men emergente Obtener valores de, elija el formulario HTML utilizado para obtener el nombre de usuario y la contrasea de los usuarios. Dreamweaver elegir automticamente el primer formulario de la pgina. Especifique el campo de la tabla de la base de datos que actualizar cada objeto del formulario. Para ello, seleccione un objeto de formulario en la lista Elementos de formulario y elija una columna de la tabla en el men emergente Columna y el tipo de datos correspondiente en el men emergente Enviar como. El tipo de datos indica la clase de datos que espera recibir la columna de la tabla de la base de datos (texto, numrico, valores booleanos de casilla de verificacin). Generalmente, las columnas de contrasea y nombre de usuario son de texto. Por ejemplo, en la lista Elementos de formulario, haga clic en el campo de texto de contrasea, seleccione la columna de la tabla de base de datos en la que se almacenar la contrasea y elija el tipo de datos Texto. Repita el mismo procedimiento para cada objeto de formulario de la lista Elementos de formulario.

2 3 4

Haga clic en Aceptar.

El ltimo paso consiste en comprobar que el nombre de usuario no est siendo utilizado por otro usuario registrado. Comprobacin de que el nombre de usuario elegido es exclusivo Para asegurarse de que el nombre de usuario introducido no est siendo utilizado por otro usuario registrado, deber aadir un comportamiento de servidor. Cuando el usuario hace clic en el botn Enviar de la pgina de registro, el comportamiento de servidor compara el nombre utilizado con los nombres de usuario almacenados en una tabla de base de datos de usuarios registrados. Si el nombre de usuario no se encuentra en la tabla de la base de datos, el comportamiento de servidor lleva a cabo la insercin del registro con normalidad. Si el nombre de usuario ya existe, el comportamiento de servidor cancela la operacin de insercin del registro y abre una nueva pgina en la que, generalmente, se indica al usuario que el nombre de usuario introducido ya est reservado.

704 Captulo 42

Para comprobar que el nombre de usuario elegido es exclusivo:

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Autenticacin de usuarios > Comprobar nuevo nombre de usuario en el men emergente. Aparecer el cuadro de dilogo Comprobar nuevo nombre de usuario.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Dreamweaver aade a la pgina de registro un comportamiento de servidor que comprueba que el nombre de usuario enviado por un visitante es exclusivo antes de aadir la informacin de ese visitante a la base de datos de usuarios registrados.

Creacin de una pgina de conexin

Una aplicacin Web puede contener una pgina que permita que los usuarios registrados se conecten al sitio.
Nota: Dreamweaver no dispone de comportamientos de servidor de autenticacin para pginas ASP.NET o PHP.

Por ejemplo, la siguiente pgina solicita a los usuarios registrados que se conecten:

Creacin de pginas que restrinjan el acceso al sitio 705

Una pgina de conexin consta de los siguientes elementos:

Una tabla de base de datos de usuarios registrados Un formulario HTML en el que los usuarios pueden introducir un nombre de usuario y una
contrasea

Un comportamiento de servidor Conectar usuario para comprobar que el nombre de usuario y

la contrasea que se han introducido son vlidos Cuando el usuario se conecta correctamente, se crea una variable de sesin que contiene su nombre de usuario.
Nota: Puede eliminar o cambiar las propiedades de cualquier comportamiento de servidor que aada a una pgina (consulte Edicin de comportamientos de servidor en la pgina 627).

Creacin de una tabla de base de datos de usuarios registrados Necesita una tabla de base de datos de usuarios registrados para comprobar si el nombre de usuario y la contrasea introducidos en la pgina de conexin son vlidos. Utilice la aplicacin de base de datos y una pgina de registro para crear la tabla. Para obtener ms informacin, consulte Creacin de una pgina de registro en la pgina 701. Cmo permitir que los usuarios se conecten Para que los usuarios se conecten introduciendo un nombre de usuario y una contrasea, deber aadir un formulario HTML a la pgina.
Para que los usuarios puedan conectarse:

1 2

Cree una pgina (Archivo > Nuevo) y disponga la pgina de conexin utilizando las herramientas de diseo de Dreamweaver. Aada un formulario HTML situando el punto de insercin donde desea que aparezca el formulario y eligiendo Formulario en el men Insertar. Se crear un formulario vaco en la pgina. Quiz deba activar los elementos invisibles (Ver > Ayudas visuales > Elementos invisibles) para ver los lmites del formulario, que se representan por medio de lneas rojas finas.

Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta <form>, situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dnde y cmo enviar los datos del registro cuando el usuario presione el botn Enviar, ya que el comportamiento de servidor Conectar usuario configura estos atributos automticamente (consulte Comprobacin del nombre de usuario y la contrasea en la pgina 707).

Aada campos de texto al formulario para el nombre de usuario y la contrasea (Insertar > Objetos de formulario > Campo de texto). Coloque etiquetas (de texto o imgenes) junto a cada campo de texto y, para alinear los campos, sitelos dentro de una tabla HTML y asigne el valor 0 al atributo border de la misma.

Aada al formulario un botn Enviar (Insertar > Objetos de formulario > Botn).

706 Captulo 42

Si lo desea, cambie la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, ste es el inspector de propiedades de un botn cuya etiqueta es Log In:

El siguiente paso consiste en aadir el comportamiento de servidor Conectar usuario para comprobar que el nombre de usuario y la contrasea introducidos son vlidos. Comprobacin del nombre de usuario y la contrasea Para comprobar que el nombre de usuario y la contrasea introducidos por el usuario son vlidos, deber aadir un comportamiento de servidor Conectar usuario. Cuando el usuario hace clic en el botn Enviar de la pgina de conexin, el comportamiento de servidor Conectar usuario compara los valores introducidos con los de los usuarios registrados. Si coinciden, el comportamiento de servidor abre una pgina (generalmente, la pgina inicial del sitio). En caso contrario, el comportamiento de servidor abre otra pgina en la que, normalmente, se advierte al usuario de que el intento de conexin ha fallado.
Para comprobar el nombre de usuario y la contrasea:

En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Autenticacin de usuarios > Conectar usuario en el men emergente. Aparecer el cuadro de dilogo Conectar usuario.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Dreamweaver aade a la pgina de conexin un comportamiento de servidor que comprueba que el nombre de usuario y la contrasea introducidos por un visitante son vlidos.

Creacin de pginas que restrinjan el acceso al sitio 707

Creacin de una pgina a la que slo pueden acceder los usuarios autorizados
Una aplicacin Web puede contener una pgina protegida a la que slo pueden acceder los usuarios autorizados.
Nota: Dreamweaver no dispone de comportamientos de servidor de autenticacin para pginas ASP.NET o PHP.

Por ejemplo, si un usuario intenta omitir la pgina de conexin escribiendo en el navegador el URL de la pgina protegida, es posible remitirle a otra pgina. De manera similar, si define el nivel de autorizacin de una pgina como administrador, slo podrn acceder a ella los usuarios con privilegios de acceso de administrador. Si un usuario conectado intenta acceder a la pgina protegida sin los privilegios de acceso necesarios, se le remite a otra pgina. Tambin puede utilizar niveles de autorizacin para evaluar a los usuarios recin registrados antes de concederles acceso total al sitio. Por ejemplo, puede que desee recibir un pago antes de permitir que un usuario acceda a las pginas de miembros del sitio. Para ello, puede proteger las pginas para miembros con un nivel de autorizacin de miembro y conceder slo privilegios de invitado a los usuarios recin registrados. Tras recibir el pago, puede actualizar los privilegios de acceso del usuario a los de miembro (en la tabla de la base de datos de usuarios registrados). Si no tiene previsto utilizar niveles de autorizacin, puede proteger cualquiera de las pginas del sitio aadiendo a la misma un comportamiento de servidor Restringir acceso a la pgina. El comportamiento de servidor enva a otra pgina a cualquier usuario que no se haya conectado correctamente. Si tiene la intencin de utilizar niveles de autorizacin, puede proteger cualquiera de las pginas del sitio por medio de los siguientes elementos:

Una columna adicional en la tabla de la base de datos de usuarios para almacenar los privilegios
de acceso de cada usuario

Un comportamiento de servidor Restringir acceso a la pgina para enviar a los usuarios no

autorizados a otra pgina En este caso, el comportamiento de servidor remite al usuario a otra pgina que carece de los privilegios de acceso necesarios. En ambos casos, puede aadir un vnculo a la pgina protegida para que el usuario pueda desconectarse y para borrar las variables de sesin. Para obtener ms informacin, consulte Desconexin de usuarios en la pgina 710. Redireccionamiento de usuarios no autorizados a otra pgina Para impedir el acceso de los usuarios no autorizados a una pgina, deber aadir a la misma un comportamiento de servidor Restringir acceso a la pgina. Este comportamiento de servidor remite a otra pgina a todo usuario que intente omitir la pgina de conexin escribiendo directamente el URL de una pgina protegida en un navegador o que, estando conectado, intente acceder a una pgina protegida sin contar con los privilegios de acceso necesarios.
Nota: El comportamiento de servidor Restringir acceso a la pgina slo permite proteger pginas HTML. No protege otros recursos del sitio, como los archivos de imagen o de audio, por ejemplo.

Si desea asignar los mismos derechos de acceso a varias pginas del sitio, puede copiarlos y pegarlos de una pgina a otra.

708 Captulo 42

Para remitir a otra pgina a los usuarios no autorizados:

1 2

Abra la pgina que desea proteger. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Autenticacin de usuarios > Restringir acceso a la pgina en el men emergente. Aparecer el cuadro de dilogo Restringir acceso a la pgina.

Seleccione las opciones deseadas en el cuadro de dilogo. Para obtener instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.

Dreamweaver aade un comportamiento de servidor a la pgina que slo permite ver la pgina a los usuarios autorizados.
Para copiar y pegar los derechos de acceso de una pgina a otras pginas del sitio:

Abra la pgina protegida y seleccione el comportamiento de servidor Restringir acceso a la pgina que aparece en el panel Comportamientos del servidor (no el del men emergente del signo ms). Haga clic en el botn de flecha de la esquina superior derecha del panel y elija Copiar en el men emergente. El comportamiento de servidor Restringir acceso a la pgina se copia al Portapapeles del sistema.

3 4

Abra otra pgina que desee proteger del mismo modo. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de flecha situado en la esquina superior derecha y elija Pegar en el men emergente. Repita los pasos 3 y 4 en cada pgina que desee proteger.

Almacenamiento de privilegios de acceso en la base de datos de usuarios Este elemento slo es necesario si desea que los usuarios conectados puedan tener distintos privilegios de acceso. Si slo desea que los usuarios se conecten, no necesita almacenar los privilegios de acceso.

Creacin de pginas que restrinjan el acceso al sitio 709

Si desea que los usuarios conectado tengan distintos privilegios de acceso, asegrese de que la tabla de la base de datos de usuario contiene una columna en la que se especifican los privilegios de acceso de cada usuario (invitado, usuario, administrador, etc.). El administrador del sitio deber introducir en la base de datos los privilegios de acceso de cada usuario. La mayora de las aplicaciones de base de datos permiten establecer el valor predeterminado de una columna cada vez que se crea un nuevo registro. Defina el privilegio de acceso ms habitual como valor predeterminado del sitio (por ejemplo, invitado) y cambie manualmente los casos que sean una excepcin (por ejemplo, cambiar de invitado a administrador). Ahora el usuario tiene acceso a todas las pginas de administrador. Asegrese de que todos los usuarios de la base de datos tienen un solo privilegio de acceso (como invitado o administrador) y no varios (como Usuario, Administrador). Si desea establecer varios privilegios de acceso a las pginas (por ejemplo, para que todos los invitados y administradores puedan ver una pgina), establzcalos a nivel de la pgina, no de la base de datos. Para obtener ms informacin, consulte Redireccionamiento de usuarios no autorizados a otra pgina en la pgina 708. Desconexin de usuarios Cuando un usuario se conecta correctamente, se crea una variable de sesin que contiene el nombre de usuario correspondiente. Cuando el usuario abandona el sitio, se puede utilizar el comportamiento de servidor Desconectar usuario para borrar la variable de sesin y enviar al usuario a otra pgina (generalmente, una pgina de despedida o de agradecimiento). Puede llamar al comportamiento de servidor Desconectar usuario cuando el usuario hace clic en un vnculo o al cargar una pgina dada.
Para aadir un vnculo para desconectar al usuario:

1 2

En la pgina, seleccione el texto o la imagen que se utilizar como vnculo. En el panel Comportamientos de servidor, haga clic en el botn de signo ms (+) y elija Autenticacin de usuarios > Desconectar usuario. Aparecer el cuadro de dilogo Desconectar usuario. Especifique la pgina que se debe abrir cuando el usuario haga clic en el vnculo. Generalmente, se trata de una pgina de despedida o agradecimiento. Haga clic en Aceptar.

Para desconectar un usuario al cargar una pgina concreta:

Abra la pgina que se cargar en Dreamweaver. Generalmente, se trata de una pgina de despedida o agradecimiento. En el panel Comportamientos de servidor, haga clic en el botn de signo ms (+) y elija Autenticacin de usuarios > Desconectar usuario. Aparecer el cuadro de dilogo Desconectar usuario. Seleccione la opcin Desconectar al Cargarse la pgina. Haga clic en Aceptar.

3 4

710 Captulo 42

Parte X Utilizacin de Dreamweaver con Macromedia Contribute

Utilice Dreamweaver para configurar y administrar sitios que los usuarios de Contribute pueden actualizar. Cree claves de conexin para que los usuarios de Contribute puedan conectar con un sitio. Administre grupos de permisos de Contribute y la configuracin para todo el sitio desde Dreamweaver. Si es necesario, recupere la versin anterior de una pgina. Esta parte contiene los siguientes captulos:

Parte X

Captulo 43, Configuracin de un sitio para su

utilizacin con Contribute

Captulo 44, Conexin y administracin de un sitio de

Contribute mediante Dreamweaver

Captulo 45, Administracin de archivos de Contribute

con Dreamweaver

CAPTULO 43 Configuracin de un sitio para su utilizacin con Contribute

Macromedia Contribute combina un navegador Web con un editor de pginas Web bsico. Permite a sus colegas o clientes navegar hasta una pgina de un sitio que usted ha creado y editarla o actualizarla, siempre y cuando tengan permiso para hacerlo. Los usuarios de Contribute pueden aadir y actualizar contenido Web bsico, incluido texto con formato, imgenes, tablas y vnculos. Los administradores de sitios de Contribute pueden limitar lo que los usuarios normales (aquellos que no sean administradores) pueden hacer en un sitio. La mayora de los usuarios de Dreamweaver que conectan con un sitio de Contribute son administradores de sitios; en este captulo y en otros captulos de la documentacin de Dreamweaver que tratan sobre la manipulacin de un sitio de Contribute se presupone que usted es el administrador de un sitio. Antes de facilitar a los usuarios de Contribute la informacin de conexin que necesitan para editar pginas, debe llevar cabo varias tareas de configuracin del sitio. Concretamente, debe utilizar Dreamweaver para crear la jerarqua de carpetas bsica para el sitio y crear las plantillas y hojas de estilos CSS que sean necesarias para el sitio.
Nota: En este captulo se presupone que usted sabe configurar un sitio de Dreamweaver. Para obtener ms informacin, consulte Planificacin y configuracin del sitio en la pgina 69.

Una vez configurado un sitio mediante Dreamweaver, podr exportar la informacin de definicin del sitio como clave de conexin, un archivo que los usuarios de Contribute pueden emplear para conectar con el sitio. Este captulo contiene los siguientes temas:

Creacin de la estructura del sitio y diseo de pginas para un sitio de Contribute en la

pgina 714

Configuracin de la direccin HTTP de un sitio de Contribute en la pgina 715 Exportacin de definiciones de sitios para su utilizacin con Contribute en la pgina 716 Creacin de plantillas para un sitio de Contribute en la pgina 716 Creacin de pginas dinmicas en un sitio de Contribute en la pgina 718

713

Creacin de la estructura del sitio y diseo de pginas para un sitio de Contribute

Para preparar el sitio Web que editarn los usuarios de Contribute, debe dar una estructura adecuada al sitio. Cree las carpetas que los usuarios de Contribute deben utilizar para sus pginas, cree las pginas de ndice para dichas carpetas y aada a las pginas elementos de navegacin bsicos. Si lo desea, puede crear carpetas especficas de usuario para que stos practiquen en ellas. Asimismo, puede crear hojas de estilos que definan los estilos para cada pgina o carpeta. Puede llevar a cabo parte de este trabajo de configuracin en Contribute, aunque es ms fcil configurar un sitio mediante Dreamweaver. Adems, puede crear plantillas para que los usuarios de Contribute las utilicen como base para las nuevas pginas. (Consulte Creacin de plantillas para un sitio de Contribute.) Las siguientes sugerencias pueden ayudarle a la hora de crear un sitio que facilite la tarea a los usuarios de Contribute:

Mantenga una estructura sencilla para el sitio. Evite anidar demasiados niveles de carpetas.
Agrupe los elementos relacionados en una misma carpeta.

Configure en el servidor los permisos de lectura y escritura adecuados para las carpetas. Para
obtener ms informacin, consulte Cambio de permisos para archivos y carpetas del servidor.

Conforme cree la estructura de carpetas, aada pginas de ndice a las carpetas para lograr que
los usuarios de Contribute coloquen las nuevas pginas en las carpetas correctas. Por ejemplo, si los usuarios de Contribute van a suministrar pginas que contengan actas de reuniones, puede crear una carpeta en la carpeta raz del sitio con el nombre actas_reuniones y crear una pgina de ndice en dicha carpeta. Luego puede proporcionar un vnculo que lleve de la pgina principal del sitio a la pgina de ndice de actas de reuniones. De esta forma, un usuario de Contribute podr navegar hasta la pgina de ndice y crear una nueva pgina con un acta para una reunin concreta con un vnculo desde dicha pgina; la nueva pgina se crear automticamente dentro de la carpeta actas_reuniones.

En la pgina de ndice de cada carpeta, proporcione una lista de vnculos con las pginas de
contenido y los documentos independientes existentes en dicha carpeta.

Mantenga un diseo de pgina lo ms sencillo posible, evitando formatos complicados. Asigne a los estilos CSS nombres que permitan identificarlos claramente. Si los usuarios de
Contribute que trabajan en el sitio utilizan un conjunto de estilos estndar en Microsoft Word, asigne a los estilos CSS los mismos nombres que los correspondientes estilos de Word, de manera que Contribute pueda establecer asignaciones de estilos cuando un usuario copie informacin de un documento de Word y la pegue en una pgina de Contribute.

Para evitar que un estilo CSS est disponible para los usuarios de Contribute, cambie el
nombre del estilo de manera que comience por mmhide_ (sin comillas). Por ejemplo, si utiliza un estilo denominado Right_Justified en una pgina pero no desea que los usuarios de Contribute puedan utilizar dicho estilo, cambie el nombre del estilo a mmhide_Right_Justified.

Utilice CSS en lugar de estilos HTML. Contribute reconoce los estilos CSS y permite a los
usuarios aplicarlos. Los estilos HTML de Dreamweaver se basan en etiquetas que ya no se incluyen en las versiones ms recientes de HTML.

714 Captulo 43

 Utilice el menor nmero posible de estilos CSS con el fin de mantener un formato sencillo y
limpio.

Si utiliza server-side includes para elementos de pgina HTML, como encabezados o pies, cree
una pgina HTML sencilla no vinculada que contenga los vnculos con los archivos de includes. De esta forma, los usuarios de Contribute podrn establecer un marcador en la pgina y utilizarla para navegar hasta los archivos de includes y editarlos. Para obtener ms informacin, consulte los siguientes temas:

Planificacin y configuracin del sitio en la pgina 69 Creacin de documentos de Dreamweaver en la pgina 123 Uso del panel Sitio en la pgina 85 Hojas de estilos en cascada en la pgina 311 Manipulacin de server-side includes en la pgina 243

Configuracin de la direccin HTTP de un sitio de Contribute

Antes de administrar un sitio de Contribute, deber asegurarse de que Dreamweaver est utilizando el URL correcto para la raz del sitio. Dreamweaver genera el URL de raz del sitio a partir de otros datos de definicin del sitio que usted ha suministrado, aunque, en ocasiones, el URL resultante no es correcto.
Para configurar el URL del sitio:

1 2 3 4 5

Elija Sitio> Editar sitios. En el cuadro de dilogo Editar sitios, seleccione un sitio y haga clic en Editar. En el cuadro de dilogo Definicin del sitio, seleccione la ficha Avanzadas. Seleccione la categora Contribute de la lista de categoras de la izquierda. Si no est activada la compatibilidad con Contribute, seleccione la opcin Activar compatibilidad con Contribute. Para obtener ms informacin, consulte Activacin de la compatibilidad con Contribute en la pgina 721. Aparecern el cuadro de texto URL de raz del sitio y el botn Administrar sitio Web. Si el URL que Dreamweaver ha suministrado en el cuadro de texto URL de raz del sitio es incorrecto, corrjalo. Haga clic en el botn Prueba para comprobar que ha introducido el URL correcto. Haga clic en Aceptar para cerrar el cuadro de dilogo Definicin del sitio. Haga clic en Listo para cerrar el cuadro de dilogo Editar sitios.

6 7 8 9

Configuracin de un sitio para su utilizacin con Contribute 715

Exportacin de definiciones de sitios para su utilizacin con Contribute

Los usuarios de Contribute necesitan cierta informacin sobre el sitio para poder conectar con l: el nombre del servidor en el que se encuentra, la ubicacin de la carpeta raz, la contrasea, etc. Puede empaquetar toda esta informacin en un archivo que se conoce como clave de conexin. En Dreamweaver o Contribute, un administrador de un sitio de Contribute puede crear una clave de conexin para enviarla a los usuarios de Contribute.
Nota: Una clave de conexin no es lo mismo que un archivo de sitio exportado desde Dreamweaver. Para exportar la informacin del sitio para su utilizacin con Contribute, siga este procedimiento, mediante el cual se crea un archivo de clave de conexin de Contribute con la extensin .stc. Para exportar informacin de un sitio y poder utilizarla con Dreamweaver, elija Sitio > Editar sitios, seleccione un sitio y haga clic en el botn Exportar, que genera un archivo de definicin del sitio de Dreamweaver con la extensin .ste.

Para crear y enviar una clave de conexin en Dreamweaver:

1 2

Seleccione Sitio > Administrar sitio de Contribute. Si no estn activadas algunas opciones necesarias para la compatibilidad con Contribute, aparecer un cuadro de dilogo que le pedir que active dichas opciones. Haga clic en Aceptar para activar dichas opciones y la compatibilidad con Contribute. Para obtener ms informacin, consulte Activacin de la compatibilidad con Contribute en la pgina 721. Lleve a cabo una de estas operaciones: administrador y haga clic en Aceptar.

Si aparece el cuadro de dilogo Contrasea de administrador, escriba la contrasea de Si el sitio no tiene administrador, aparecer un cuadro de dilogo que le preguntar si desea
convertirse en el administrador el sitio Web. Haga clic en S, luego escriba y confirme una contrasea de administrador para el sitio Web y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web.
4 5

Haga clic en el botn Enviar clave de conexin. Cree una clave de conexin utilizando el Asistente de conexin y gurdela como un archivo o envela a un usuario de Contribute. Para obtener ms informacin, consulte Administracin de Macromedia Contribute. Haga clic en Aceptar para cerrar el cuadro de dilogo Administrar sitio Web.

Creacin de plantillas para un sitio de Contribute

Puede crear plantillas mediante Dreamweaver para ayudar a los usuarios de Contribute a crear nuevas pginas, lograr un aspecto y un funcionamiento coherente y permitir una actualizacin de la disposicin de muchas pginas a la vez. Al crear una plantilla y cargarla en el servidor, sta se encontrar a disposicin de todos los usuarios de Contribute que conecten con el sitio, a no ser que haya establecido restricciones de utilizacin de la plantilla para grupos de permisos de Contribute. Si ha establecido restricciones de utilizacin de plantillas, es posible que tenga que aadir cada nueva plantilla a la lista de plantillas que puede utilizar un usuario de Contribute. Para obtener ms informacin, consulte Administracin de Macromedia Contribute.
Nota: Asegrese de que la carpeta raz del sitio establecida en la definicin de sitio de cada usuario de Contribute es la misma que la carpeta raz del sitio establecida en su definicin del sitio en Dreamweaver. Si la carpeta raz del sitio de un usuario no coincide con la suya, el usuario no podr utilizar las plantillas.

716 Captulo 43

Adems de plantillas de Dreamweaver, puede crear plantillas externas a Dreamweaver mediante las herramientas de administracin de Contribute. Una plantilla externa a Dreamweaver es una pgina existente que los usuarios de Contribute utilizan para crear nuevas pginas; es similar a una plantilla de Dreamweaver, con la diferencia de que las pginas basadas en ella no se actualizan cuando se modifica la plantilla. Asimismo, las plantillas externas a Dreamweaver no pueden incluir elementos de plantilla de Dreamweaver, como las regiones editables, bloqueadas, repetidas y opcionales. Cuando un usuario de Contribute crea un nuevo documento dentro de un sitio que contiene plantillas de Dreamweaver, Contribute enumera las plantillas disponibles (tanto las plantillas de Dreamweaver como las externas a Dreamweaver) en el cuadro de dilogo New Page (nueva pgina).

Para incluir en el sitio pginas que utilicen codificaciones distintas de Latin-1, deber crear plantillas (de Dreamweaver o externas a Dreamweaver). Contribute permite editar pginas que empleen cualquier codificacin. Sin embargo, cuando un usuario de Contribute crea una nueva pgina en blanco, sta utiliza la codificacin Latin-1. Para crear una pgina que utilice una codificacin diferente, un usuario de Contribute puede crear una copia de una pgina existente que emplee una codificacin diferente o utilizar una plantilla que utilice una codificacin diferente. No obstante, si no hay ninguna pgina o plantilla en el sitio que utilice otras codificaciones, deber crear primero en Dreamweaver una pgina o plantilla que utilice otra codificacin. Para obtener informacin sobre la creacin, edicin y actualizacin de plantillas de Dreamweaver, consulte Plantillas de Dreamweaver en la pgina 481.

Configuracin de un sitio para su utilizacin con Contribute 717

Para crear una plantilla externa a Dreamweaver:

1 2

Seleccione Sitio > Administrar sitio de Contribute. Si no estn activadas algunas opciones necesarias para la compatibilidad con Contribute, aparecer un cuadro de dilogo que le pedir que active dichas opciones. Haga clic en Aceptar para activar dichas opciones y la compatibilidad con Contribute. Para obtener ms informacin, consulte Activacin de la compatibilidad con Contribute en la pgina 721. Lleve a cabo una de estas operaciones: administrador y haga clic en Aceptar.

Si aparece el cuadro de dilogo Contrasea de administrador, escriba la contrasea de Si el sitio no tiene administrador, aparecer un cuadro de dilogo que le preguntar si desea
convertirse en el administrador el sitio Web. Haga clic en S, luego escriba y confirme una contrasea de administrador para el sitio Web y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web.
4 5

Seleccione un grupo de permisos y haga clic en el botn Editar grupo. Seleccione la categora Nuevas pginas y aada pginas existentes a la lista situada bajo la opcin Crear una nueva pgina copiando una pgina de esta lista. Para obtener ms informacin, consulte Administracin de Macromedia Contribute. Haga clic en Aceptar para cerrar el cuadro de dilogo Grupo de permisos. Haga clic en Aceptar para cerrar el cuadro de dilogo Administrar sitio Web.

6 7

Creacin de pginas dinmicas en un sitio de Contribute

Cuando un usuario de Contribute edite una pgina que incluya contenido dinmico o elementos invisibles (como scripts y comentarios, por ejemplo), Contribute mostrar el contenido dinmico y los elementos invisibles como marcadores amarillos. De manera predeterminada, los usuarios de Contribute no pueden seleccionar ni eliminar estos marcadores. Si desea que los usuarios de Contribute puedan seleccionar y eliminar contenido dinmico y otros elementos invisibles de una pgina, puede cambiar la configuracin de grupo de permisos para permitirlo. Los usuarios de Contribute no pueden editar contenido dinmico, aunque usted les permita seleccionarlo.
Sugerencia: Para permitir que los usuarios de Contribute apliquen etiquetas de formato a texto dinmico, deber permitirles seleccionar contenido dinmico. Nota: Al utilizar algunas tecnologas de servidor, puede mostrar texto esttico mediante una etiqueta o funcin del servidor. Para permitir a los usuarios de Contribute editar texto esttico de una pgina dinmica que emplea una tecnologa de servidor de este tipo, site el texto fuera de las etiquetas del servidor.

718 Captulo 43

Para permitir que un grupo de usuarios de Contribute elimine cdigo de las pginas:

1 2

Seleccione Sitio > Administrar sitio de Contribute. Si no estn activadas algunas opciones necesarias para la compatibilidad con Contribute, aparecer un cuadro de dilogo que le pedir que active dichas opciones. Haga clic en Aceptar para activar dichas opciones y la compatibilidad con Contribute. Para obtener ms informacin, consulte Activacin de la compatibilidad con Contribute en la pgina 721. Lleve a cabo una de estas operaciones: administrador y haga clic en Aceptar.

Si aparece el cuadro de dilogo Contrasea de administrador, escriba la contrasea de Si el sitio no tiene administrador, aparecer un cuadro de dilogo que le preguntar si desea
convertirse en el administrador el sitio Web. Haga clic en S, luego escriba y confirme una contrasea de administrador para el sitio Web y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web.
4 5

Seleccione un grupo de permisos y haga clic en el botn Editar grupo. Seleccione la categora Edicin y anule la seleccin de la opcin para proteger scripts y formularios. Para obtener ms informacin, consulte Administracin de Macromedia Contribute. Haga clic en Aceptar para cerrar el cuadro de dilogo Grupo de permisos. Haga clic en Aceptar para cerrar el cuadro de dilogo Administrar sitio Web.

6 7

Configuracin de un sitio para su utilizacin con Contribute 719

720 Captulo 43

CAPTULO 44 Conexin y administracin de un sitio de Contribute mediante Dreamweaver

Puede conectar con un sitio de Macromedia Contribute mediante Dreamweaver y modificar los archivos del sitio de la misma forma que lo hara en el caso de cualquier otro sitio de Dreamweaver. Tambin puede activar las funciones de compatibilidad de Contribute, que le permite realizar tareas de administracin de Contribute mediante Dreamweaver. Esto puede resultar ms cmodo que realizar dichas tareas mediante Contribute.
Nota: Dreamweaver no exige que active la compatibilidad con Contribute, sino que puede continuar utilizando Dreamweaver para editar y administrar el sitio. No obstante, si adopta este enfoque, tenga cuidado de no modificar nada que pueda impedir que los usuarios de Contribute realicen cambios en el sitio.

Este captulo contiene los siguientes temas:

Activacin de la compatibilidad con Contribute en la pgina 721 Configuracin de una contrasea de administrador para un sitio de Contribute en la
pgina 722

Cambio de la configuracin de administracin para un sitio de Contribute en la pgina 723 Cambio de la configuracin de grupos de permisos para un sitio de Contribute en la
pgina 724

Solucin de problemas relacionados con un sitio de Contribute en la pgina 724 Activacin de la compatibilidad con Contribute
Antes de utilizar funciones relacionadas con Contribute en Dreamweaver, debe activar la compatibilidad con Contribute.
Nota: Al conectar con un sitio configurado como sitio de Contribute (y que ya cuenta con administrador), Dreamweaver le pedir que active la compatibilidad con Contribute.

Cuando active la compatibilidad con Contribute, Dreamweaver activar automticamente las Design Notes (incluida la opcin Cargar Design Notes para compartir) y el sistema Desproteger/ Proteger.

721

Dreamweaver le permite conectar con un sitio remoto de diversas formas, aunque no todos los tipos de conexin admiten la compatibilidad con Contribute. En concreto, existen las siguientes restricciones para los tipos de conexin:

Si est conectando con el sitio remoto mediante WebDAV o SourceSafe, no podr activar la
compatibilidad con Contribute, ya que dichos sistemas de control de cdigo fuente no son compatibles con las Design Notes ni con el sistema Desproteger/Proteger que Dreamweaver utiliza para los sitios de Contribute.

Si utiliza RDS para conectar con el sitio remoto, puede activar la compatibilidad con
Contribute, pero deber personalizar la conexin para poder compartirla con los usuarios de Contribute.

Si utiliza su equipo local como servidor Web, deber configurar el sitio empleando una
conexin FTP o de red con el equipo (en lugar de una simple ruta de carpeta local) para poder compartir la conexin con los usuarios de Contribute.
Para activar las funciones de compatibilidad de Contribute para un sitio de Dreamweaver definido:

1 2 3 4 5 6

Elija Sitio> Editar sitios. En el cuadro de dilogo Editar sitios, seleccione un sitio y haga clic en el botn Editar. Seleccione la ficha Avanzadas. Seleccione la categora Contribute de la lista de categoras de la izquierda. Seleccione la opcin Activar compatibilidad con Contribute. Si aparece un cuadro de dilogo que le indica que debe activar Design Notes y Desproteger/ Proteger, haga clic en Aceptar. Si no ha proporcionado todava informacin de contacto para Desproteger/Proteger, aparecer un cuadro de dilogo que le pedir dicha informacin; escriba su nombre y su direccin de correo electrnico en el cuadro de dilogo y haga clic en Aceptar. El cuadro de texto URL de raz del sitio y el botn Administrar sitio Web aparecern en el cuadro de dilogo Definicin del sitio.

Para obtener ms informacin, consulte los siguientes temas:

Exportacin de definiciones de sitios para su utilizacin con Contribute en la pgina 716 Configuracin de la direccin HTTP de un sitio de Contribute en la pgina 715 Utilizacin de Design Notes en la pgina 113 Utilizacin de desproteger/proteger en la pgina 102 Configuracin de un sitio Dreamweaver en la pgina 74

Configuracin de una contrasea de administrador para un sitio de Contribute

Si no se ha establecido ninguna contrasea de administrador para un sitio de Contribute, puede establecerla mediante Dreamweaver.
Nota: Un administrador puede establecer la contrasea de administrador para que est en blanco; Contribute y Dreamweaver tratan una contrasea en blanco como una contrasea vlida. Es distinto establecer una contrasea para un sitio que no tiene contrasea que cambiar la contrasea para un sitio que tiene una contrasea en blanco. Para obtener informacin sobre el cambio de una contrasea existente, incluida una contrasea en blanco ya existente, consulte Cambio de la configuracin de administracin para un sitio de Contribute.

722 Captulo 44

Para establecer una contrasea de administrador para un sitio de Contribute que carece de contrasea:

1 2

Seleccione Sitio > Administrar sitio de Contribute. Si no estn activadas algunas opciones necesarias para la compatibilidad con Contribute, aparecer un cuadro de dilogo que le pedir que active dichas opciones. Haga clic en Aceptar para activar dichas opciones y la compatibilidad con Contribute. Para obtener ms informacin, consulte Activacin de la compatibilidad con Contribute en la pgina 721. Aparecer un cuadro de dilogo que le preguntar si desea ser el administrador del sitio. Si no aparece dicho cuadro de dilogo, ello indicar que el sitio ya tiene una contrasea de administrador establecida.

Haga clic en S. Aparecer el cuadro de dilogo Contrasea de administrador. Escriba una nueva contrasea de administrador para el sitio en el cuadro de texto Nueva contrasea, escrbala de nuevo en el cuadro de texto Confirmar nueva contrasea y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web. Haga clic en Aceptar o contine con la administracin del sitio.

Cambio de la configuracin de administracin para un sitio de Contribute

Como administrador de un sitio de Contribute, puede utilizar Dreamweaver para cambiar la configuracin de todo el sitio, como la contrasea de administrador, la direccin de correo electrnico de contacto del administrador o el nmero de revisiones guardadas en el servidor.
Para cambiar la configuracin de administracin de todo el sitio para un sitio de Contribute:

1 2

Seleccione Sitio > Administrar sitio de Contribute. Si no estn activadas algunas opciones necesarias para la compatibilidad con Contribute, aparecer un cuadro de dilogo que le pedir que active dichas opciones. Haga clic en Aceptar para activar dichas opciones y la compatibilidad con Contribute. Para obtener ms informacin, consulte Activacin de la compatibilidad con Contribute en la pgina 721. Lleve a cabo una de estas operaciones: administrador y haga clic en Aceptar.

Si aparece el cuadro de dilogo Contrasea de administrador, escriba la contrasea de Si el sitio no tiene administrador, aparecer un cuadro de dilogo que le preguntar si desea
convertirse en el administrador el sitio Web. Haga clic en S, luego escriba y confirme una contrasea de administrador para el sitio Web y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web.
4

Haga clic en el botn Configuracin para todo el sitio. Aparecer el cuadro de dilogo Configuracin para todo el sitio. Cambie la configuracin de administracin para todo el sitio. Para obtener ms informacin, consulte Administracin de Macromedia Contribute.

Conexin y administracin de un sitio de Contribute mediante Dreamweaver 723

6 7

Haga clic en Aceptar para guardar la nueva configuracin y cerrar el cuadro de dilogo Configuracin para todo el sitio. Haga clic en Aceptar para cerrar el cuadro de dilogo Administrar sitio Web.

Cambio de la configuracin de grupos de permisos para un sitio de Contribute

Como administrador de un sitio de Contribute, puede utilizar Dreamweaver para cambiar los permisos concedidos a los grupos de usuarios de Contribute.
Para cambiar la configuracin de grupos de permisos para un sitio de Contribute:

1 2

Seleccione Sitio > Administrar sitio de Contribute. Si no estn activadas algunas opciones necesarias para la compatibilidad con Contribute, aparecer un cuadro de dilogo que le pedir que active dichas opciones. Haga clic en Aceptar para activar dichas opciones y la compatibilidad con Contribute. Para obtener ms informacin, consulte Activacin de la compatibilidad con Contribute en la pgina 721. Lleve a cabo una de estas operaciones: administrador y haga clic en Aceptar.

Si aparece el cuadro de dilogo Contrasea de administrador, escriba la contrasea de Si el sitio no tiene administrador, aparecer un cuadro de dilogo que le preguntar si desea
convertirse en el administrador el sitio Web. Haga clic en S, luego escriba y confirme una contrasea de administrador para el sitio Web y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web.
4

Seleccione un grupo de permisos y haga clic en el botn Editar grupo. Aparecer el cuadro de dilogo Grupo de permisos. Modifique los permisos para el grupo. Para obtener ms informacin, consulte Administracin de Macromedia Contribute. Haga clic en Aceptar para guardar la nueva configuracin y cerrar el cuadro de dilogo Grupo de permisos. Haga clic en Aceptar para cerrar el cuadro de dilogo Administrar sitio Web.

5 6 7

Solucin de problemas relacionados con un sitio de Contribute

Si experimenta algn problema con un sitio de Contribute, consulte los siguientes temas especficos para obtener informacin de cmo resolver el problema:

En el caso de problemas relacionados con la conexin con un sitio de Contribute, consulte

Solucin de problemas de conexin con un sitio de Contribute en la pgina 725.

En el caso de problemas relacionados con la configuracin de permisos para un grupo, consulte

Comprobacin de permisos de grupos en un sitio de Contribute en la pgina 725.

En el caso de problemas relacionados con la utilizacin de las herramientas de administracin,

consulte Solucin de problemas con las herramientas de administracin de Contribute en la pgina 726.

724 Captulo 44

Solucin de problemas de conexin con un sitio de Contribute Al hacer clic en cualquier botn relacionado con la administracin de un sitio de Contribute, Dreamweaver comprueba que puede conectar con su sitio remoto y que el URL de raz del sitio que ha facilitado para el sitio (en la categora Contribute del cuadro de dilogo Definicin del sitio) es vlido. Si Dreamweaver no logra conectar o si el URL no es vlido, aparecer un mensaje de error.
Para comprobar una conexin de Contribute:

1 2 3

Compruebe el URL que figura en el cuadro de texto URL de raz del sitio abriendo dicho URL en un navegador para asegurarse de que abre la pgina correcta. Utilice el botn Prueba de la categora Datos remotos del cuadro de dilogo Definicin del sitio para asegurarse de que puede conectar con el sitio. Si el URL es correcto pero el botn Prueba da como resultado un mensaje de error, pida ayuda al administrador del sistema.

Comprobacin de permisos de grupos en un sitio de Contribute Una vez establecidos los permisos para un grupo de permisos, puede comprobar que dichos permisos funcionan correctamente volviendo a conectar con el sitio como miembro del grupo.
Para comprobar la configuracin de grupo de permisos:

1 2 3

Inicie Contribute. (No puede cambiar los grupos de permisos en Dreamweaver.) Seleccione Edit > My Connections. Lleve a cabo una de estas operaciones. Aparecer el Asistente de conexin (Connection Wizard).

Si ya dispone de una conexin con el sitio, seleccione la conexin y haga clic en el botn Edit. Si no dispone an de una conexin con el sitio, haga clic en el botn Nueva (New) y siga las
instrucciones del Asistente de conexin. No utilice una clave de conexin para conectar; si utiliza una clave de conexin, puede que no se le pida que especifique un grupo de permisos.
4

En la pantalla Informacin de grupo (Group Information) del asistente, seleccione un grupo de permisos. Para obtener ms informacin, consulte Administracin de Macromedia Contribute. Cuando termine de editar o crear la conexin, haga clic en Cerrar para cerrar el cuadro de dilogo My Connections. Lleve a cabo varias tareas como miembro del grupo para asegurarse de que los permisos estn correctamente configurados.

5 6

Para obtener ms informacin, consulte Cambio de la configuracin de grupos de permisos para un sitio de Contribute en la pgina 724.

Conexin y administracin de un sitio de Contribute mediante Dreamweaver 725

Solucin de problemas con las herramientas de administracin de Contribute Si las herramientas de administracin no funcionan correctamente, es posible que exista algn problema en la carpeta _mm .
Para comprobar la carpeta _mm:

1 2 3

En la ventana Sitio, asegrese de que la carpeta _mm no est oculta. En el servidor, asegrese de que dispone de permisos de lectura y escritura para la carpeta _mm. Asegrese de que la carpeta _mm contiene un archivo de configuracin compartido con un nombre como contribute.xml. Si no existe dicho archivo, utilice el Asistente de conexin para crear una conexin con el sitio y convertirse en un administrador del sitio. El archivo de configuracin compartido se crea automticamente cuando usted se convierte en administrador. Para obtener ms informacin, consulte Administracin de Macromedia Contribute.

726 Captulo 44

CAPTULO 45 Administracin de archivos de Contribute con Dreamweaver

La mayora de las funciones de Macromedia Dreamweaver funcionan de la misma forma con un sitio de Macromedia Contribute que con cualquier otro sitio. No obstante, cuando utilice Dreamweaver con un sitio de Contribute, Dreamweaver realizar automticamente ciertas operaciones de administracin de archivos, como el almacenamiento de mltiples versiones de un documento. En este captulo se describen los aspectos de la manipulacin de archivos de un sitio de Contribute que difieren de la manipulacin de archivos de otros sitios.
Nota: Un administrador de Contribute puede asignar usuarios a grupos conocidos como grupos de permisos, as como especificar aquellas acciones que puede realizar cada grupo. Cuando utilice Dreamweaver para administrar archivos en un sitio de Contribute, las restricciones impuestas por los grupos de permisos no surtirn efecto; las nicas restricciones que se aplicarn sern las de permisos de lectura y escritura para el servidor. Para obtener ms informacin sobre los distintos tipos de permisos, consulte Cambio de permisos para archivos y carpetas del servidor en la pgina 731.

Este captulo contiene las secciones siguientes:

Eliminacin, traslado y cambio de nombre de un archivo remoto de un sitio de Contribute Transferencia de archivos desde y hacia un sitio de Contribute Restauracin de una versin anterior de una pgina de un sitio de Contribute Actualizacin de plantillas en un sitio de Contribute Actualizacin de hojas de estilos CSS en un sitio de Contribute Cambio de permisos para archivos y carpetas del servidor Desbloqueo de un archivo en un sitio de Contribute Manipulacin de archivos especiales de Contribute

Eliminacin, traslado y cambio de nombre de un archivo remoto de un sitio de Contribute

La eliminacin de un archivo del servidor remoto que aloja un sitio de Contribute funciona de forma muy semejante a la eliminacin de un archivo del servidor para cualquier sitio de Dreamweaver. No obstante, cuando elimine un archivo de un sitio de Contribute, Dreamweaver le preguntar si deben eliminarse todas las versiones anteriores del archivo. Si opta por conservar las versiones anteriores, Dreamweaver guardar tambin una copia de la versin actual de manera que pueda restaurarla posteriormente si es preciso.

727

El cambio de nombre de un archivo remoto o su traslado de una carpeta a otra en un sitio de Contribute funciona de la misma forma que en cualquier sitio de Dreamweaver. En un sitio de Contribute, Dreamweaver tambin cambia de nombre o mueve las versiones anteriores asociadas al archivo que estn almacenadas en la carpeta _baks.
Para eliminar un archivo remoto:

Seleccione el archivo en la seccin remota del panel Sitio y presione Retroceso (Windows) o Eliminar (Macintosh). Aparecer un cuadro de dilogo que le pedir confirmacin de que desea eliminar el archivo. Si aparece la opcin Eliminar versiones anteriores en el cuadro de dilogo de confirmacin, lleve a cabo una de las siguientes operaciones: opcin Eliminar versiones anteriores.

Para eliminar todas las versiones anteriores del archivo adems de la versin actual, seleccione la Para conservar las versiones anteriores en el servidor, anule la seleccin de la opcin Eliminar
versiones anteriores.
3

Haga clic en S para eliminar el archivo. El archivo quedar eliminado. Si opt por eliminar las versiones anteriores, stas tambin quedarn eliminadas. Si opt por no eliminar las versiones anteriores, se guardar una copia de la versin actual en la carpeta _baks como nueva revisin del archivo.

Para obtener ms informacin, consulte los siguientes temas:

Uso del panel Sitio en la pgina 85 Restauracin de una versin anterior de una pgina de un sitio de Contribute en la
pgina 729

Manipulacin de archivos en el panel Sitio en la pgina 92 Transferencia de archivos desde y hacia un sitio de Contribute
Contribute utiliza un sistema muy semejante al sistema Desproteger/Proteger de Dreamweaver para asegurarse de que slo un usuario pueda editar una pgina Web determinada en todo momento. Al activar la compatibilidad con Contribute en Dreamweaver, se activa automticamente el sistema Desproteger/Proteger de Dreamweaver. Para transferir archivos desde y hacia un sitio de Contribute mediante Dreamweaver, utilice siempre los comandos Desproteger y Proteger. Si, en lugar de estos comandos, utiliza los comandos Obtener y Colocar para transferir archivos, puede que sobrescriba las modificaciones realizadas recientemente en un archivo por un usuario de Contribute.
Nota: Si utiliza el comando Colocar en un sitio de Contribute, Dreamweaver desproteger automticamente el archivo y luego lo volver a proteger con el fin de reducir las posibilidades de que los cambios que usted realice entren en conflicto con los realizados por otro usuario.

La proteccin de un archivo de un sitio de Contribute funciona exactamente igual que en cualquier otro sitio.

728 Captulo 45

Al desproteger un archivo en un sitio de Contribute, Dreamweaver crea automticamente una copia de seguridad de la versin previamente desprotegida del archivo en la carpeta _baks y aade su nombre de usuario y un sello de fecha a un archivo de Design Notes para que los dems usuarios puedan ver quin desprotegi el archivo y cundo lo hizo. Para obtener ms informacin sobre copias de seguridad automticas, consulte Restauracin de una versin anterior de una pgina de un sitio de Contribute en la pgina 729. Para obtener ms informacin, consulte los siguientes temas:

Utilizacin de desproteger/proteger en la pgina 102 Activacin de la compatibilidad con Contribute en la pgina 721 Restauracin de una versin anterior de una pgina de un sitio de Contribute
Cuando un usuario de Contribute guarda una nueva versin de un archivo en un sitio de Contribute, Contribute copia automticamente la versin del archivo previamente guardada en una subcarpeta denominada _baks. Puede restaurar cualquiera de las versiones guardadas de un archivo, lo que sobrescribe los cambios ms recientes. Todas las carpetas de un sitio de Contribute contienen una subcarpeta _baks. El nombre de archivo de una versin guardada de un archivo consta del nombre de archivo original (incluida su extensin), seguido del nmero de versin de la copia en cuestin, seguido de una serie aleatoria de dgitos hexadecimales (para evitar que los visitantes del sitio puedan adivinar los nombres de los archivos de copia de seguridad), seguido por la extensin .bak. Por ejemplo, si edita un archivo denominado index.htm, la primera versin de dicho archivo que se guarda en la carpeta _baks podra denominarse index.htm.0001.f588.bak.
Nota: Si elimina una subcarpeta _baks de una carpeta determinada, los usuarios ya no podrn restaurar versiones anteriores de los archivos existentes en dicha carpeta. En general, debe evitar realizar cambios en las carpetas _baks; por el contrario, debe dejar que Contribute y Dreamweaver las administren automticamente.

Para recuperar una versin anterior de un archivo cuando la versin actual del archivo an existe:

1 2

Si el archivo est protegido, desprotjalo o deshaga la proteccin. Para obtener ms informacin, consulte Utilizacin de desproteger/proteger en la pgina 102. Elija Archivo > Restaurar pgina en el panel Sitio (Windows) o Sitio > Restaurar pgina (Macintosh). Dreamweaver muestra la lista de versiones anteriores del archivo que se encuentran disponibles. Seleccione la versin que desea restaurar y haga clic en Restaurar. Para obtener ms informacin, consulte la Ayuda de Dreamweaver.

Para recuperar una versin anterior de un archivo cuando la versin actual del archivo ya se ha eliminado:

En el panel Sitio, abra la carpeta _baks que cuelga de la carpeta en la que se encontraba el archivo eliminado. Por ejemplo, si el archivo eliminado se denominaba index.htm y se encontraba en una carpeta llamada catalog, deber buscar en catalog/_baks.

Administracin de archivos de Contribute con Dreamweaver 729

Decida qu versin del archivo eliminado desea restaurar. Normalmente, desear utilizar la versin ms reciente. Por ejemplo, si hay cuatro versiones guardadas del archivo index.htm, podra optar por restaurar la versin guardada ms reciente, que podra denominarse index.htm.0004.056f.bak.

Copie la versin elegida del archivo en la carpeta principal en la que se encontraba el archivo eliminado. Por ejemplo, podra copiar catalog/_baks/index.htm.0004.056f.bak en la carpeta situada un nivel ms arriba en la jerarqua de carpetas, es decir, en la carpeta catalog.

Copie el correspondiente archivo de Design Notes de la subcarpeta _notes que cuelga de la carpeta _baks a la subcarpeta _notes de la carpeta principal en la que se encontraba el archivo eliminado. Por ejemplo, podra copiar el archivo catalog/_baks/_notes/index.htm.0004.056f.bak.mno en la carpeta catalog/_notes.

Cambie el nombre de la copia del archivo para que sea idntico al del archivo eliminado. Por ejemplo, cambie el nombre del archivo catalog/index.htm.0004.056f.bak para que pase a denominarse catalog/index.htm.

Cambie el nombre de la copia del archivo de Design Notes por el nombre correspondiente. Por ejemplo, cambie el nombre del archivo catalog/_notes/index.htm.0004.056f.bak.mno para que pase a denominarse catalog/_notes/index.htm.mno.

Para obtener ms informacin, consulte Cambio de la configuracin de administracin para un sitio de Contribute en la pgina 723.

Actualizacin de plantillas en un sitio de Contribute

Los usuarios de Contribute no pueden realizar cambios en una plantilla de Dreamweaver. Para cambiar una plantilla para un sitio de Contribute, utilice Dreamweaver. A continuacin se enumeran factores importantes que debe tener en cuenta a la hora de actualizar plantillas en un sitio de Contribute:

Contribute recupera las plantillas nuevas y modificadas del sitio slo cuando se inicia
Contribute y cuando un usuario de Contribute cambia su informacin de conexin. Si realiza cambios en una plantilla mientras un usuario de Contribute est editando un archivo basado en dicha plantilla, el usuario no ver los cambios realizados en la plantilla hasta que reinicie Contribute.

Si quita una regin editable de una plantilla, un usuario de Contribute que est editando una
pgina basada en dicha plantilla podra dudar sobre qu hacer con el contenido que se encontraba en dicha regin editable.
Para editar una plantilla en un sitio de Contribute:

1 2

Edite la plantilla utilizando las herramientas de edicin de plantillas de Dreamweaver. Para obtener ms informacin, consulte Plantillas de Dreamweaver en la pgina 481. Solicite a todos los usuarios de Contribute que estn trabajando en el sitio que salgan de Contribute y vuelvan a iniciarlo.

730 Captulo 45

Actualizacin de hojas de estilos CSS en un sitio de Contribute

Los usuarios de Contribute no pueden realizar cambios en hojas de estilos CSS. Para cambiar una hoja de estilos para un sitio de Contribute, utilice Dreamweaver. A continuacin se enumeran factores importantes que debe tener en cuenta a la hora de actualizar hojas de estilos para un sitio de Contribute:

Si realiza cambios en una hoja de estilos mientras un usuario de Contribute est editando una
pgina que emplea dicha hoja de estilos, el usuario no ver los cambios realizados en la hoja de estilos hasta que publique la pgina.

Si elimina un estilo de una hoja de estilos, el nombre del estilo no se eliminar de las pginas
que utilicen dicha hoja de estilos, pero, dado que ya no existe, no se mostrar de la manera esperada por el usuario de Contribute. Por consiguiente, si un usuario le informa de que no ocurre nada cuando aplica un estilo concreto, es posible que el problema se deba a que el estilo ha sido eliminado de la hoja de estilos.
Para editar una hoja de estilos CSS en un sitio de Contribute:

Edite la hoja de estilos utilizando las herramientas de edicin de hojas de estilos de Dreamweaver. Para obtener ms informacin, consulte Hojas de estilos en cascada en la pgina 311. Solicite a todos los usuarios de Contribute que estn trabajando en el sitio que publiquen las pginas que emplean dicha hoja de estilos y que luego vuelvan a editar las pginas para ver la nueva hoja de estilos.

Cambio de permisos para archivos y carpetas del servidor

Contribute le ofrece un medio para administrar permisos sobre archivos y carpetas para cada grupo de usuarios que usted defina. Para obtener ms informacin, consulte Administracin de Macromedia Contribute y Cambio de la configuracin de grupos de permisos para un sitio de Contribute en la pgina 724. Los usuarios de Dreamweaver no se ven afectados por estos permisos, aunque Contribute aplica estos permisos a los usuarios de Contribute. No obstante, Contribute no ofrece ningn medio para administrar los permisos de lectura y escritura subyacentes asignados a los archivos y carpetas por el servidor. Puede administrar dichos permisos directamente en el servidor. Los grupos de permisos de Contribute pueden concebirse como una superposicin a los permisos de lectura y escritura del servidor; por ejemplo, si un usuario carece de permiso de escritura en una carpeta del servidor, no podr guardar archivos en dicha carpeta aunque sea miembro de un grupo de permisos autorizado a escribir en dicha carpeta (conforme a los permisos de Contribute). Si un usuario de Contribute no dispone de acceso de lectura en el servidor para un archivo dependiente, como, por ejemplo, una imagen que aparece en una pgina, el contenido del archivo dependiente no aparecer en la ventana de Contribute. Por ejemplo, si un usuario no dispone de acceso de lectura a una carpeta de imgenes, las imgenes de dicha carpeta aparecern como iconos de imagen rota en Contribute. De igual forma, las plantillas de Dreamweaver estn almacenadas en una subcarpeta de la carpeta raz del sitio, por lo que, si un usuario de Contribute no dispone de acceso de lectura para la carpeta raz, no podr utilizar las plantillas de dicho sitio a no ser que usted copie las plantillas en una carpeta adecuada. Cuando configure un sitio, es recomendable conceder a los usuarios acceso de lectura en el servidor a la carpeta /_mm (la subcarpeta _mm de la carpeta raz), la carpeta /Templates y todas las carpetas que contengan activos que deban utilizar.

Administracin de archivos de Contribute con Dreamweaver 731

Si, por cualquier motivo, no puede conceder a los usuarios acceso a la carpeta /Templates, siga este procedimiento para proporcionarles las plantillas.
Para permitir que los usuarios de Contribute utilicen las plantillas sin acceso de lectura a la carpeta raz del sitio principal:

1 2 3

Configure el sitio de Contribute de manera que su carpeta raz sea la carpeta que desea que los usuarios vean como raz. Copie manualmente la carpeta de plantillas de la carpeta raz del sitio principal a la carpeta raz del sitio de Contribute a travs del panel Sitio. Despus de actualizar las plantillas para el sitio principal, vuelva a copiar las plantillas copiadas en las subcarpetas correspondientes segn sea necesario.

Si adopta este enfoque de subsitio, no utilice vnculos relativos a la raz del sitio en los subsitios. Los vnculos relativos a la raz del sitio son relativos a la carpeta raz principal en el servidor, no a la carpeta raz que usted define en Dreamweaver. Los usuarios de Contribute no pueden crear vnculos relativos a la raz del sitio. Para obtener ms informacin sobre vnculos relativos a la raz del sitio, consulte Ubicacin y rutas de los documentos en la pgina 440. Si los vnculos de una pgina de Contribute aparecen rotos, es posible que exista un problema de permisos de carpetas, sobre todo si los vnculos sealan a pginas situadas fuera de la carpeta raz del usuario de Contribute. Compruebe en el servidor los permisos de lectura y escritura para las carpetas.

Desbloqueo de un archivo en un sitio de Contribute

En ocasiones, un archivo remoto de un sitio de Contribute aparece como si estuviera protegido cuando en realidad el archivo no est bloqueado en el equipo del usuario. Cuando suceda esto, desbloquee el archivo para permitir que los usuarios lo editen.
Nota: Antes de seguir este procedimiento, asegrese de que el archivo no est realmente protegido. Si desbloquea un archivo mientras un usuario de Contribute lo est editando, podra ocurrir que varios usuarios estuvieran editando el archivo a la vez, lo que podra provocar una prdida de datos.

Para desbloquear un archivo protegido:

1 2

Seleccione el archivo en el panel remoto de la ventana Sitio. Seleccione Sitio > Deshacer proteger. Puede que aparezca un cuadro de dilogo que indica quin ha protegido el archivo y que le pide que confirme que desea desbloquear el archivo.

Si aparece dicho cuadro de dilogo, haga clic en S para confirmar. El archivo quedar desbloqueado en el servidor.

732 Captulo 45

Manipulacin de archivos especiales de Contribute

Contribute emplea diversos archivos especiales que no estn pensados para que los vean los visitantes del sitio. Dichos archivos son:

El archivo de configuracin compartido, un archivo XML con un nombre como

contribute.xml, que aparece en una carpeta denominada _mm en la carpeta raz del sitio y que contiene informacin que Contribute utiliza para administrar el sitio.

Versiones anteriores de los archivos, que se encuentran en carpetas _baks (consulte

Restauracin de una versin anterior de una pgina de un sitio de Contribute en la pgina 729)

Versiones temporales de las pginas, que permiten que los usuarios puedan obtener una vista
previa de los cambios realizados.

Archivos de bloqueo temporales, que indican que una determinada pgina est siendo editada
o mostrada en una vista previa.

Archivos de Design Notes, que contienen metadatos sobre las pginas del sitio.
Por lo general, no debe editar estos archivos especiales de Contribute mediante Dreamweaver, ya que Dreamweaver los administra automticamente. Si no desea que estos archivos especiales de Contribute aparezcan en su servidor con acceso pblico, puede establecer un servidor de realizacin de pruebas para que los usuarios de Contribute manipulen en l las pginas. Posteriormente, podr copiar peridicamente dichas pginas Web del servidor de realizacin de pruebas a un servidor de produccin conectado a la Web. Si adopta este enfoque de servidor de realizacin de pruebas, copie en el servidor de produccin slo las pginas Web, no los archivos especiales de Contribute enumerados ms arriba. En particular, no copie en el servidor de produccin las carpetas _mm y _baks. Si no est utilizando un servidor de realizacin de pruebas, de vez en cuando elimine manualmente las versiones antiguas existentes en las carpetas _baks para asegurarse de que los visitantes no pueden ver las versiones antiguas de los archivos. Para obtener informacin sobre la configuracin de un servidor con el fin de evitar que los visitantes vean los archivos existentes en las carpetas cuyos nombres comienzan por un guin bajo, consulte Administracin de Macromedia Contribute. En determinadas circunstancias, puede que tenga que eliminar manualmente otros archivos especiales de Contribute. Por ejemplo, puede ocurrir que Contribute no elimine archivos temporales de vistas previas cuando el usuario finaliza una vista previa; en este caso, deber eliminar manualmente dichas pginas temporales. Las pginas temporales de vista previa tienen nombres de archivo que comienzan por TMP. De igual forma, es posible que, en algunos casos, un archivo de bloqueo caducado permanezca accidentalmente en el servidor. En este caso, deber eliminar manualmente el archivo de bloqueo para permitir que otros usuarios editen la pgina. Para obtener informacin de cmo eliminar el archivo de bloqueo, consulte Desbloqueo de un archivo en un sitio de Contribute en la pgina 732.

Administracin de archivos de Contribute con Dreamweaver 733

734 Captulo 45

Parte XI Apndices
Obtenga ms ayuda para desarrollar aplicaciones Web. Esta parte contiene los siguientes captulos:

Parte XI

Apndice A, Gua de bases de datos para principiantes Apndice B, Nociones bsicas de SQL Apndice C, Configuracin de un DSN en Windows Apndice D, Referencia rpida: Etiquetas de Macromedia ASP.NET

APNDICE A Gua de bases de datos para principiantes

Este apndice est destinado a los usuarios de Macromedia Dreamweaver MX con poca o nula experiencia en el trabajo con bases de datos o conexiones de base de datos. En l se explican conceptos generales, no procedimientos especficos. Para ver cmo se aplican en la prctica estos conceptos, lea el resto de esta gua. En el apndice se describe cmo designar una base de datos, pero no cmo crearla en una aplicacin, como Microsoft Access o SQL Server. Ese proceso se describe en la documentacin impresa o en lnea incluida en su sistema de base de datos. Este apndice contiene las siguientes secciones:

Bases de datos en la pgina 737 Aspectos bsicos del diseo de bases de datos en la pgina 738 Aspectos bsicos de las conexiones de bases de datos en la pgina 744 Bases de datos
El componente bsico de la base de datos es el registro. Un registro es un conjunto de datos relacionados que se tratan como una sola entidad. Por ejemplo, una tarjeta de ftbol sera un registro: contiene el nombre, la fotografa, el equipo y las estadsticas de un jugador. Empleando la terminologa propia de las bases de datos, cada uno de esos elementos de informacin recibe el nombre de campo: cada registro de tarjeta de ftbol tiene un campo nombre, un campo fotografa, un campo equipo y varios campos de estadsticas. Al juego de registros que comparten los mismos campos se le llama tabla, porque este tipo de informacin puede presentarse fcilmente en formato de tabla: cada columna representa un campo y cada fila representa un registro. De hecho, la palabra columna es sinnimo de la palabra campo, y la palabra fila es sinnimo de la palabra registro.
Campos (columnas) Number LastName FirstName Position Goal Registros (filas)

Una base de datos puede contener ms de una tabla, cada una de las cuales tiene un nombre exclusivo. Estas tablas pueden estar relacionadas o ser independientes entre s.

737

Un subconjunto de datos extrados de una o varias tablas se denomina juego de registros (o conjunto de datos, en ASP.NET). Un juego de registros tambin es una tabla porque es una coleccin de registros que comparte las mismas columnas. Por ejemplo, un alineamiento de un equipo de ftbol en el que se relacionan los nombres y las posiciones de los jugadores en el campo sera un juego de registros: consta de un subconjunto de toda la informacin posible sobre los jugadores, incluidos los goles, las asistencias, las faltas, etc.
Number LastName FirstName Position Goals

Tabla de base de datos

LastName FirstName

Position

Tabla de conjunto de registros

Para crear un juego de registros, se realiza una consulta de base de datos. Una consulta consta de criterios de bsqueda. Por ejemplo, la consulta puede especificar que slo se incluyan algunas de las columnas en el juego de registros, o que slo se incluyan determinados registros. Para obtener ms informacin, consulte Definicin de un juego de registros en la pgina 554.

Aspectos bsicos del diseo de bases de datos

El diseo de la base de datos es el primer paso para crear un sitio Web gestionado por una base de datos. Esta seccin presenta un caso que se ha utilizado para explicar los principios bsicos del diseo de bases de datos. En este caso se va a crear una aplicacin Web que ha encargado una empresa ficticia llamada Arrow Aircraft Services, una compaa que gestiona una pequea flota de aviones de negocios privados. Esta seccin contiene los siguientes temas:

Estudio de las normas y poltica empresarial de Arrow Aircraft en la pgina 739 Estudio de las caractersticas del encargo de Arrow Aircraft en la pgina 739 Qu preguntas harn los usuarios a la base de datos? en la pgina 739 Eleccin de las tablas de la base de datos en la pgina 740 Eleccin de las columnas en cada tabla en la pgina 741 Definicin de la relacin entre las tablas en la pgina 742 Creacin de la base de datos en la pgina 743

738 Apndice A

Estudio de las normas y poltica empresarial de Arrow Aircraft Le han contratado para crear una aplicacin Web para la empresa Arrow Aircraft Services. Antes de empezar a disear la base de datos, debe asegurarse de que conoce todas las normas y reglas comerciales de la organizacin que afectarn a la aplicacin. En esta seccin se describen las normas y reglas empresariales (simplificadas) de Arrow Aircraft Services. Arrow Aircraft gestiona una flota de cinco aviones de negocios de distintos tamaos y modelos para sus propietarios. Cada avin tiene hasta ocho copropietarios, empresas o individuos que han comprado una participacin del avin. Este tipo de arreglo resulta muy til para las personas que no necesitan un avin de negocios todo el ao. Los copropietarios, o accionistas, abonan a Arrow Aircraft lo siguiente:

Un importe de administracin mensual proporcional a la parte del propietario del avin para
cubrir gastos de piloto, seguro y hangar.

Una tarifa por hora de ocupacin que cubre todos los costes directos, como mantenimiento,
combustible y catering. A cambio, los copropietarios indican a Arrow Aircraft cundo y dnde desean viajar y la empresa se encarga del resto, incluido el personal de vuelo y de tierra y el servicio de catering. Arrow Aircraft debe recibir el aviso con una antelacin mnima de 8 horas para preparar el avin para un vuelo. Arrow Aircraft garantiza 800 horas de ocupacin al ao, para cada avin. Se entiende por horas de ocupacin, las horas en las que el avin est volando, con al menos un pasajero. Las horas de ocupacin comienzan seis minutos (0,1 hora) antes de que el avin despegue con los pasajeros y terminan seis minutos despus de que el avin haya aterrizado. Cada avin puede tener un mximo de ocho propietarios. Por ejemplo, un individuo o una empresa puede comprar un inters del 1/5 (o 1/5 de accin) de un avin. Arrow Aircraft garantiza 800 horas de ocupacin al ao, por lo tanto el propietario de la participacin de 1/5 tiene derecho a 160 horas de ocupacin (800 horas / 5 = 160). Estudio de las caractersticas del encargo de Arrow Aircraft Arrow Aircraft le ha contratado para crear una aplicacin Web con las siguientes caractersticas:

Permitir que cualquier accionista del avin pueda solicitar una nave para realizar un vuelo. Proporcionar al Departamento de operaciones de vuelo de la empresa toda la informacin
necesaria para empezar a preparar el avin, incluidos detalles de la solicitud del accionista (itinerario, fecha y hora de salida, necesidades de catering, etc.), las horas de ocupacin que le quedan al copropietario y la disponibilidad del avin para el viaje propuesto.

Permitir al Departamento de operaciones de vuelo reservar el avin para evitar conflictos de

planificacin. Qu preguntas harn los usuarios a la base de datos? Una vez que se haya familiarizado con las caractersticas que se han propuesto para la aplicacin Web, puede plantear las siguientes preguntas a los usuarios de la base de datos: Qu preguntas har a la base de datos?

Gua de bases de datos para principiantes 739

De la informacin obtenida de los copropietarios del avin extraer lo siguiente:

Cuntas horas de ocupacin me quedan? Est disponible mi avin para determinada fecha o fechas?
Despus de que un copropietario solicite un avin, los empleados del Departamento de operaciones de vuelo preguntarn lo siguiente a la base de datos:

Dnde desea ir el copropietario? Cul ser el itinerario: slo ida, ida y vuelta, varias escalas? El Departamento de operaciones de
vuelo necesita esta informacin para empezar a planificar el vuelo (consultar la previsin atmosfrica, entregar los planes de vuelo, etc.) y estimar el total de horas de ocupacin.

Le quedan al accionista suficientes horas de ocupacin para el itinerario propuesto? Desde dnde desea salir el propietario? Cul es el avin del propietario? Est disponible el avin para el itinerario propuesto? Cuntos pasajeros acompaarn al propietario? Cunto equipaje llevarn; ligero (de mano), normal (una maleta por pasajero) o pesado (ms de una maleta)?

Cules son las necesidades de catering del propietario? Cul es la tarifa por hora de ocupacin del avin? Dnde puedo contactar con el accionista para confirmar el vuelo y el precio estimado?
Eleccin de las tablas de la base de datos Tras conocer las preguntas que harn los usuarios a la base de datos, debe pensar en cmo estructurar la base de datos para responder convenientemente a estas preguntas. El primer paso es elegir las tablas que la van a componer. En una base de datos relacional, todos los datos se representan en filas y columnas de tablas. Cada tabla describe un conjunto de entidades relacionadas, como personas, objetos o eventos. Cada fila describe una aparicin de la entidad y cada fila describe una propiedad de la entidad; por ejemplo, el apellido de una persona, el color de un objeto o la fecha de un evento. Para la base de datos de Arrow Aircraft, se eligen las siguientes tablas:

Una tabla de aviones que describe todos los aviones de negocios que gestiona Arrow Aircraft. Una tabla de reservas que incluye todas las fechas en las que los aviones estn reservados o
disponibles para volar.

Una tabla de accionistas que describe todas las empresas o individuos que poseen
participaciones de los aviones.

Una tabla de itinerarios que describe todos los itinerarios solicitados por los propietarios. Una tabla de vuelos que describe todas las etapas (vuelos) de los itinerarios.

740 Apndice A

Eleccin de las columnas en cada tabla El paso siguiente es elegir las columnas de cada tabla. Las columnas describen las propiedades de cada entidad de la tabla. Una buena regla general al elegir columnas es evitar los datos duplicados. Por ejemplo, en la aplicacin de Arrow Aircraft, sabe que para contestar a la siguiente pregunta del Departamento de operaciones de vuelo, debern utilizarse nombres de propietarios asociados a datos de itinerarios: Cules son las necesidades del propietario para un itinerario determinado? Una opcin sera incluir las columnas de nombre y de apellidos del propietario en la tabla de propietarios y tambin en la tabla de itinerarios. Sin embargo, esto supondra no slo duplicar los nombres en dos tablas, sino tambin varias veces en la tabla de itinerarios (tendra que introducir el nombre del propietario cada vez que ste solicitara un nuevo itinerario). Esta opcin implica un mayor esfuerzo para introducir los datos, aumenta las posibilidades de error y pone en peligro la integridad de los datos. Una solucin mucho ms conveniente sera introducir el nombre y los apellidos del propietario una sola vez en una nica tabla, la tabla de propietarios. Para contestar la pregunta formulada por el Departamento de operaciones de vuelo, pueden unirse las tablas de propietarios y de itinerarios mediante una expresin SQL. Compruebe que las tablas tienen una columna de clave principal. Las columnas de clave principal contienen valores que son exclusivos para cada fila. De esta forma, se puede localizar exactamente la fila que se busca en la base de datos. La mayora de las columnas de clave principal constan de nmeros ID, pero tambin se pueden utilizar claves principales reales, como nmeros de formularios oficiales o nmeros de serie de los aviones.

Gua de bases de datos para principiantes 741

Tras considerarlo detenidamente, decide elegir las siguientes propiedades y claves principales para las tablas de la base de datos de Arrow Aircraft:

Definicin de la relacin entre las tablas Tras definir las columnas y las claves principales bsicas de las tablas, ya puede comenzar a definir las relaciones. Una vez que estn definidas las relaciones entre las tablas, puede escribir sentencias SQL en Dreamweaver MX para combinar datos procedentes de dos tablas (consulte Unin de tablas en la pgina 757). Por ejemplo, cada avin gestionado por Arrow Aircraft tiene varios propietarios. Desea establecer una relacin uno a varios entre los aviones de la tabla de aviones y los propietarios de la tabla de propietarios. Esto le evitara tener que introducir y controlar datos de aviones redundantes en la tabla de propietarios. En las relaciones de bases de datos "uno a varios", cada fila de una tabla est relacionada con varias filas de la otra tabla. Para definir esta clase de relacin, se incluye una clave externa en la tabla que incluya todas las filas de la tabla propietarios, como en el ejemplo anterior. Una clave externa es una columna que contiene valores que corresponden a los de la columna de clave principal de otra tabla. La clave principal de la tabla de aviones de este caso se llama ac_serial. Por lo tanto, si incluimos una clave externa denominada ac_serial en la tabla de propietarios definiramos una relacin uno a varios propietarios.

742 Apndice A

Con lo que sabe sobre las caractersticas que demanda el cliente y las normas y poltica comercial de la empresa, decide definir la siguiente relacin uno a varios en la base de datos:

Cada avin puede tener varios propietarios Cada avin tiene varias reservas Cada avin tiene varios itinerarios Cada propietario tiene varios itinerarios Cada itinerario tiene varios vuelos (o etapas)

A continuacin se muestran los diagramas de las tablas revisados tras haber agregado las claves externas que definen estas relaciones:

Los diagramas de denominan diagramas E-R, o diagramas entidad-relacin. Creacin de la base de datos El ltimo paso del diseo es la creacin de la base de datos utilizando un sistema como Microsoft Access, SQL Server, Oracle9i o MySQL. Consulte la documentacin de su sistema de base de datos, para obtener ms informacin.

Gua de bases de datos para principiantes 743

Aspectos bsicos de las conexiones de bases de datos

Si tiene previsto utilizar una base de datos con su aplicacin Web, tiene que crear por lo menos una conexin de base de datos. Sin esa conexin, la aplicacin no sabr dnde encontrar la base de datos ni cmo conectar con ella. En Dreamweaver, se crea una conexin de base de datos proporcionando la informacin (o los parmetros) que necesita la aplicacin para establecer contacto con la base de datos.
Nota: Para las pginas ColdFusion en Dreamweaver MX no es preciso crear las conexiones de base de datos, ya que la conexin se realiza utilizando los orgenes de datos de ColdFusion definidos por ColdFusion Administrator.

En esta seccin se describen las conexiones de la base de datos, en trminos generales. Para obtener instrucciones especficas sobre la creacin de conexiones en Dreamweaver MX, consulte Conexin con una base de datos en la pgina 154. Interfaz con la base de datos Normalmente, los datos almacenados en una base de datos estn en un formato propietario (de un fabricante determinado) de la misma forma que el texto del archivo de un procesador de textos est en formato propietario. Por ejemplo, esta es la apariencia de los datos en Microsoft Access:

744 Apndice A

Esta es la apariencia de la misma base de datos en el Bloc de notas:

La aplicacin Web se encuentra con el mismo problema que con el Bloc de notas o cualquier otra aplicacin que trata de acceder a datos cuyo formato es desconocido: la aplicacin no puede descifrar los datos. Hace falta una interfaz de software entre la aplicacin Web y la base de datos que haga posible el dilogo entre ambas. Hay tres interfaces comunes que permiten a las aplicaciones comunicarse con las bases de datos. La primera se llama Open Database Connectivity, u ODBC; la segunda, OLE DB (vinculacin e incrustacin de objetos) y la tercera se llama Java Database Connectivity, o JDBC. La funcin de estas interfaces es actuar como intrpretes. Por ejemplo, cuando en las Naciones Unidas se realiza un discurso en ingls, un intrprete lo traduce al francs y otro lo traduce al alemn para los representantes que hablan estos idiomas. De manera similar, se usa una interfaz para las aplicaciones que hablan OLE DB, otra interfaz para las aplicaciones Web que hablan ODBC y una tercera interfaz para aquellas aplicaciones que hablan JDBC. Las aplicaciones ColdFusion MX y JSP hablan JDBC, ASP y ASP.NET hablan OLE DB y ColdFusion 4 o 5 habla ODBC y OLE DB. Las aplicaciones ASP (aunque no las ASP.NET) tambin hablan ODBC con fluidez gracias al intrprete OLE DB/ODBC que llevan incorporado. Supongamos, por ejemplo, que usted desea que su aplicacin se comunique con una base de datos de Microsoft Access usando una interfaz ODBC. En ASP, si se especifica solamente la interfaz ODBC y no la interfaz OLE DB, la aplicacin usar como opcin predeterminada un intrprete OLE DB/ODBC para traducir OLE DB a ODBC, y luego usar el intrprete ODBC/Access que usted especific para traducir el ODBC a algo que Access pueda entender.

Gua de bases de datos para principiantes 745

En la siguiente ilustracin se explica el proceso:

Aplicacin Web ASP

Interfaz BD OLE para ODBC

Interfaz ODBC

Interfaz ODBC

Interfaz ODBC

Access

SQL Server

DB2

Nota: SQL Server y DB2 son sistemas de bases de datos basadas en servidor, de Microsoft e IBM, respectivamente.

Utilizacin de controladores de bases de datos para interactuar con una base de datos Las interfaces ODBC, OLE DB y JDBC estn incluidas como controladores de bases de datos (o proveedores de datos en OLE DB), que no son ms que elementos de software. Para comunicarse con la base de datos, la aplicacin Web utiliza un controlador, que acta como intermediario. Los controladores de bases de datos son especficos de cada base de datos. Puede usar, por ejemplo, los controladores de Microsoft Access, SQL Server y dBase. De manera similar, puede usar proveedores de OLE DB como el proveedor OLE DB para SQL Server. Su eleccin depender de su base de datos. Los controladores son creados por los proveedores de bases de datos como Microsoft y Oracle, y por otros proveedores de software. Microsoft ofrece distintos controladores ODBC y proveedores de OLE DB para los paquetes de bases de datos ms utilizados, como Microsoft Access, Microsoft SQL Server y Oracle. Los controladores ODBC, que slo funcionan en la plataforma Windows, se instalan automticamente con Microsoft Office y Windows 2000. Tambin se instalan con los paquetes Microsoft Data Access Components (MDAC) 2.5, 2.6 y 2.7, que pueden descargarse gratuitamente del sitio Web de Microsoft, en en http://www.microsoft.com/data/download.htm. MDAC 2.6 instala algunos proveedores de OLE DB.
Nota: Instale primero MDAC 2.5 y, a continuacin, MDAC 2.6.

Para saber qu controladores ODBC estn instalados en su sistema Windows, consulte Visualizacin de los controladores ODBC instalados en un sistema Windows en la pgina 747. Como hay muy pocas bases de datos para Macintosh, existen muy pocos controladores ODBC para esta plataforma.

746 Apndice A

Algunos controladores JDBC incluyen los controladores I-net JDBC para las bases de datos Microsoft SQL Server, el controlador Oracle Thin para las bases de datos Oracle y el controlador JDBC Driver for DB2 para las bases de datos IBM DB2. Para obtener ms informacin sobre controladores JDBC y sus proveedores, consulte la base de datos de controladores JDBC, apta para la realizacin de bsquedas, incluida en el sitio Web de Sun en http://industry.java.sun.com/ products/jdbc/drivers. A continuacin se enumeran las interfaces de bases de datos para cada tipo de aplicacin Web y los controladores ms habituales para cada una:
Aplicacin Web ColdFusion MX JSP Interfaz de base de datos JDBC Controladores habituales Controlador Sun JDBC-ODBC Controlador i-net Sprinta JDBC para SQL Server Controlador Oracle Thin JDBC Controladores nativos de ColdFusion Controlador de Microsoft Access Controlador de Microsoft SQL Server Controlador de Microsoft Access Controlador de Microsoft SQL Server Proveedor de Microsoft SQL Server Microsoft ODBC para Oracle Proveedor de Microsoft Jet Proveedor de Microsoft SQL Server Proveedor de Microsoft Oracle Controlador MySQL

ColdFusion 4 o 5

ODBC u OLE DB

ASP

ODBC u OLE DB

ASP.NET

OLE DB

PHP

Especfico MySQL

Visualizacin de los controladores ODBC instalados en un sistema Windows Si necesita un controlador ODBC especfico y el servidor Web se basa en un sistema Windows, podr descubrir fcilmente si el controlador ODBC necesario est instalado en el sistema.
Para ver los controladores ODBC instalados en un sistema Windows:

Abra el Administrador de orgenes de datos ODBC de la siguiente forma: el icono de Orgenes de datos ODBC. Segn el sistema empleado, el icono tambin puede denominarse ODBC o 32bit ODBC.

En Windows 95, 98 o NT, elija Inicio>Configuracin > Panel de control y haga doble clic en En Windows 2000, elija Inicio > Configuracin > Panel de control > Herramientas
administrativas > Orgenes de datos.

En Windows XP, elija Inicio > Panel de control> Rendimiento y mantenimiento>

Herramientas administrativas > Orgenes de datos (ODBC).

Gua de bases de datos para principiantes 747

Haga clic en la ficha Controladores. Aparecer la lista de controladores ODBC instalados en el sistema.

Llamada a los controladores de bases de datos Para poder establecer una comunicacin en los dos sentidos, una aplicacin tiene que llamar al controlador de la base de datos. Una aplicacin Web llama a un controlador mediante una cadena de conexin. Una cadena de conexin consta de toda la informacin (o parmetros) necesarios par establecer una conexin con una base de datos. En su forma ms simple, una cadena de conexin especifica una controlador y una base de datos, como en el siguiente ejemplo:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Scaal\scaalcoffee.mdb

Las cadenas de conexin ASP pueden contener un parmetro de proveedor que especifique un proveedor de OLE DB. Si se omite este parmetro, ASP usar como opcin predeterminada el proveedor de OLE DB para los controladores ODBC. En el ejemplo anterior, el proveedor de OLE DB para los controladores ODBC se comunicara con el controlador ODBC, Microsoft Access Driver, que a su vez se comunicara con la base de datos Access, scaalcoffee.mdb. Los parmetros de una cadena de conexin pueden variar segn el controlador. A continuacin se muestra una cadena de conexin para una base de datos SQL Server llamada Cases, que se encuentra en un servidor llamado Hoover:
Driver={SQL Server};Server=Hoover;Database=Cases; UID=DanaS;PWD=Queequeg
Nota: UID corresponde a ID de usuario; PWD a contrasea.

748 Apndice A

Dreamweaver simplifica el proceso de insertar cadenas de conexin en las pginas, mediante un cuadro de dilogo en el que se pueden introducir los diferentes parmetros de la conexin. Por ejemplo, esta es la apariencia que presenta el cuadro de dilogo que se emplea para definir una conexin cuando se desarrolla una aplicacin JSP:

Tras completar el cuadro de dilogo y hacer clic en Aceptar, Dreamweaver inserta la cadena de conexin en un archivo include en su sitio. Utilizacin de un DSN en una cadena de conexin En algunas conexiones, se pueden especificar nombres de orgenes de datos (DSN). Un DSN es un tipo de acceso directo que se crea en Windows para una cadena de conexin. Una vez definido, puede referirse simplemente a la conexin por su nombre. Por ejemplo, una cadena de conexin puede constar de los siguientes parmetros:
Driver={SQL Server};Server=Clinic-6;Database=Patients; UID=dholmes;PWD=stetson2

Despus de definir un DSN patients en Windows mediante los parmetros anteriores, se puede usar la cadena de conexin en la aplicacin especificando un solo parmetro:
dsn=patients

Si su servidor de aplicaciones se ejecuta en Windows y ha definido un DSN en este sistema, podr usar el DSN para definir una conexin ASP o ColdFusion 4 o 5. Si no dispone de acceso fsico a un servidor (y, por tanto, no puede definir un DSN en l) deber usar una cadena de conexin para establecer la conexin con la base de datos. Para obtener ms informacin, consulte Configuracin de un DSN en Windows en la pgina 759.

Gua de bases de datos para principiantes 749

750 Apndice A

APNDICE B Nociones bsicas de SQL

En este apndice se describe cmo utilizar Structured Query Language (SQL) para crear juegos de registros para las pginas dinmicas. SQL ) es un lenguaje que permite leer y escribir datos de una base de datos. Aunque slo consta de algunas palabras clave y sencillas normas de sintaxis, este lenguaje permite realizar sofisticadas operaciones de bases de datos. Este apndice contiene las siguientes secciones:

Aspectos bsicos de la sintaxis en la pgina 751 Definicin de las columnas en un juego de registros en la pgina 752 Limitacin de los registros en un juego de registros en la pgina 753 Clasificacin de los registros en un juego de registros en la pgina 756 Unin de tablas en la pgina 757

Nota: Macromedia no ofrece servicio tcnico para las tecnologas de otros fabricantes, como SQL.

Aspectos bsicos de la sintaxis

SELECT

es una de las declaraciones SQL de uso ms frecuente para crear un juego de registros. Extrae las columnas especificadas de una o varias tablas de base de datos y las utiliza para crear un juego de registros. La declaracin SELECT utiliza la siguiente sintaxis:

SELECT ColumnName FROM TableName

Puede aadir saltos de lnea, tabuladores y espacios en blanco a la declaracin para que resulte ms clara: SQL no tiene en cuenta los espacios en blanco. Por ejemplo, la siguiente declaracin es vlida:
SELECT PaidDues FROM Members

Las siguientes palabras clave identifican comandos SQL que se utilizan habitualmente:
Palabra clave SELECT INSERT UPDATE DELETE Descripcin Recupera los registros especificados de una base de datos Agrega un nuevo registro a la tabla de la base de datos Cambia valores en los registros de base de datos especificados Elimina los registros de base de datos especificados

751

Las siguientes palabras clave se emplean para definir ms especficamente las sentencias SQL:
Palabra clave FROM WHERE ORDER BY GROUP BY Descripcin Designa la fuente de datos de una operacin Establece una o varias condiciones para la operacin Clasifica las filas del juego de registros en el orden especificado Agrupa el juego de registros segn los elementos de la lista seleccionados

El siguiente operador especifica las condiciones y efecta las funciones lgicas y numricas:
Operador = LIKE <> NOT LIKE < > <= >= AND OR NOT Significado Igual a Como (caracteres comodn OK) No igual a No como (caracteres comodn OK) Menor que Mayor que Menor o igual que Mayor o igual que Se deben cumplir las dos condiciones, como Londres Y Madrid Se cumple al menos una de las condiciones, como Jimnez o Gimnez Excluye la condicin que viene a continuacin, como Pars NOT Francia

Si el elemento que se compara es un texto, escrbalo entre comillas simples, tal y como se muestra en el siguiente ejemplo:
...WHERE Country = 'Germany'

Si el elemento que se compara es una fecha y se trabaja con una base de datos Microsoft Access, escrbalo entre smbolos #:
...WHERE DateOfBirth < #01/01/1970#

Es posible que otras bases de datos utilicen sus propias convenciones de fecha. Consulte la documentacin del sistema. Es posible que algunos sistemas de base de datos no utilicen sintaxis SQL estndar en sus productos. Consulte la documentacin del sistema de base de datos.

Definicin de las columnas en un juego de registros

Puede utilizar SQL para definir juegos de registros para las pginas. Un juego de registros es un grupo de registros extrados de una base de datos. Para obtener ms informacin, consulte Bases de datos en la pgina 737. Esta es la sintaxis SQL bsica para definir las columnas de un juego de registros:
SELECT ColumnName1, ColumnName2, ColumnNameX FROM TableName

752 Apndice B

Si desea incluir todas las columnas de una tabla en un juego de registros, puede utilizar el carcter comodn *, de la forma siguiente:
SELECT * FROM TableName

Por ejemplo, supongamos que tiene una tabla denominada Customers. Para extraer todas las columnas, escriba la siguiente declaracin SELECT:
SELECT * FROM Customers

Supongamos que slo necesita los datos que contienen dos de las columnas de la tabla Customers: YearBorn y DateLastPurchase. Para crear un juego de registros que slo contenga los datos de estas dos columnas, escriba la siguiente declaracin SELECT:
SELECT YearBorn, DateLastPurchase FROM Customers

Limitacin de los registros en un juego de registros

Utilice una clusula WHERE para limitar el nmero de registros del juego de registros. Por ejemplo, puede que slo desee incluir los clientes que ganan ms de 30.000 euros al ao. Supongamos que la tabla contiene una columna Earnings que indica lo que ganan los clientes. La declaracin SELECT sera la siguiente:
SELECT YearBorn, DateLastPurchase FROM Customers WHERE Earnings > 30000

Para filtrar los registros de la base de datos, se especifican una o varias condiciones en una clusula WHERE. En las siguientes secciones se describen los mtodos para filtrar registros con la clusula WHERE:

Filtrado de registros segn la equivalencia de dos valores en la pgina 753 Filtrado de registros segn la similitud de dos valores en la pgina 754 Filtrado de registros segn un intervalo de valores en la pgina 755 Filtrado de registros segn una combinacin de condiciones de bsqueda en la pgina 756

Filtrado de registros segn la equivalencia de dos valores Los registros de una base de datos pueden filtrarse segn la equivalencia del valor de un parmetro con el valor de la columna de un registro. Supongamos que los usuarios van a realizar una bsqueda en la base de datos por departamento. Para obtener el juego de registros de resultados de la bsqueda, se utiliza la siguiente lgica:

Se comprueba un registro en la tabla de base de datos. Si el valor de la columna department del registro coincide con el nombre del departamento
que ha indicado el usuario, se incluir ese registro en el juego de registros de resultados de bsqueda.

Compruebe el siguiente registro de la tabla.

Puede expresar la lgica con la siguiente clusula WHERE:
WHERE ColumnName = ParameterValue ParameterValue es una variable SQL que contiene un parmetro de bsqueda. En una aplicacin Web, el usuario normalmente introduce este parmetro utilizando un formulario HTML.

Nociones bsicas de SQL 753

Esta consulta de base de datos se podra expresar en SQL de la forma siguiente:

SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL FROM EMPLOYEES WHERE DEPARTMENT = 'varDept'

Esta sentencia SQL localiza todos los registros de la tabla de empleados con un valor de DEPARTMENT igual al que contiene la variable varDept. Por ejemplo, si el usuario especifica Operations como el nombre de departamento, la sentencia SQL puede generar el siguiente juego de registros:

Filtrado de registros segn la similitud de dos valores Los registros de una base de datos pueden filtrarse segn la similitud del valor de un parmetro con el valor de la columna de un registro. Si se utilizan dos valores similares en lugar de coincidentes, los usuarios tienen ms flexibilidad al especificar el valor de los parmetros de bsqueda. Por ejemplo, no es preciso respetar las maysculas o minsculas en las palabras de bsqueda. Si el usuario escribe ohio y la columna de la tabla contiene el valor Ohio, se ha encontrado la coincidencia. Adems, el uso de similitudes permite utilizar caracteres comodn, de forma que los usuarios puedan realizar bsquedas alfabticas y parciales. Por ejemplo, si el usuario introduce m y la columna de la tabla contiene los valores Morgan, Macy y Michelson, puede utilizar un carcter comodn en la declaracin SQL para encontrar las tres coincidencias. El carcter comodn estndar es el signo de porcentaje (%):
...WHERE LastName LIKE 'Mc%'

Supongamos que los usuarios van a realizar una bsqueda en la base de datos por apellido. Para obtener el juego de registros de resultados de la bsqueda, se utiliza la siguiente lgica:

Se comprueba un registro en la tabla de base de datos. Si el valor de la columna last name del registro contiene un valor similar al introducido por el
usuario, se incluir ese registro en el juego de registros de resultados.

Compruebe el siguiente registro de la tabla.

Puede expresar la lgica con la siguiente clusula WHERE:
WHERE ColumnName LIKE ParameterValue ParameterValue es una variable SQL que contiene un parmetro de bsqueda. En una aplicacin Web, el usuario normalmente introduce este parmetro utilizando un formulario HTML.

Esta consulta de base de datos se podra expresar en SQL de la forma siguiente:

SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL FROM EMPLOYEES WHERE DEPARTMENT LIKE 'varLastName'

754 Apndice B

Si desea dar a los usuarios la opcin de realizar bsquedas de palabras parciales, combine la variable con un carcter comodn. El carcter comodn SQL que se utiliza en estos casos es el signo de porcentaje (%). He aqu un ejemplo:
...WHERE LASTNAME LIKE 'varLastName%'

Por ejemplo, si el usuario escribe s como el parmetro de bsqueda, todos los registros con apellidos que comiencen por la letra s se incluirn en el juego de registros, como en el ejemplo siguiente:

Si el usuario especifica sm como parmetro de bsqueda, entonces, slo se incluirn en el juego los registros en los que los apellidos empiecen por las letras sm:

Filtrado de registros segn un intervalo de valores Los registros de una base de datos se pueden filtrar utilizando como criterio un intervalo de dos valores de parmetros. Supongamos que los usuarios van a realizar una bsqueda en la base de datos por un intervalo de fechas. Para obtener el juego de registros de resultados de la bsqueda, se utiliza la siguiente lgica:

Se comprueba un registro en la tabla de base de datos. Si el valor de la columna date del registro est comprendido entre dos valores de fecha que ha
indicado el usuario, se incluir ese registro en el juego de registros de resultados.

Compruebe el siguiente registro de la tabla.

Puede expresar la lgica con la siguiente clusula WHERE:
WHERE ColumnName BETWEEN ParameterValue1 AND ParameterValue2 ParameterValue1 y ParameterValue2 son variables SQL que contienen parmetros de bsqueda. En una aplicacin Web, el usuario normalmente introduce estos parmetros utilizando un formulario HTML.

Este tipo de consulta de base de datos se puede expresar en SQL de la forma siguiente:
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, STARTDATE FROM EMPLOYEES WHERE STARTDATE BETWEEN #varStartRange# AND #varEndRange#

Nociones bsicas de SQL 755

Por ejemplo, si el usuario introduce 7/1/99 y 12/31/99 como parmetros de intervalo, todos los empleados que comiencen en la segunda mitad de 1999 se incluyen en el juego de registros, como en el ejemplo siguiente:

Filtrado de registros segn una combinacin de condiciones de bsqueda En esta seccin se describe cmo incluir registros en el juego de registros de resultados de la bsqueda basndose en una combinacin de condiciones de bsqueda. Para combinar las condiciones de bsqueda en SQL, se utilizan los operadores lgicos AND, OR y NOT. Si para incluir un registro en el juego de registros, todas las condiciones deben ser true, utilice el operador AND como se indica a continuacin:
...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'

Si para incluir un registro en el juego de registros, debe ser true cualquiera de las condiciones, utilice el operador OR de la forma siguiente:
...WHERE LASTNAME LIKE 'varLastName' OR DEPARTMENT LIKE 'varDept'

Si desea que una de las condiciones sea true pero otra no, utilice el operador NOT de la forma siguiente:
...WHERE DEPARTMENT LIKE 'varDept' AND NOT COUNTRY LIKE 'varCountry'

Puede utilizar parntesis para agrupar las condiciones de bsqueda:

...WHERE (DEPARTMENT LIKE 'varDept' AND STARTDATE < #varStart#) OR STARTDATE BETWEEN #varStartRange# AND #varEndRange#

Clasificacin de los registros en un juego de registros

Utilice la clusula ORDER BY para ordenar los registros del juego de registros. Por ejemplo, supongamos que desea ordenar los registros del juego de registros por ingresos de cliente, de menor a mayor. En SQL, los registros se ordenan de la forma siguiente:
SELECT LastName, FirstName, Earnings FROM Customers ORDER BY Earnings

De forma predeterminada, la clusula ORDER BY ordena los registros en orden ascendente (1, 2, 3... o A, B, C...). Si desea aplicar el orden descendente, comenzando por el valor ms alto y finalizando por el ms bajo, utilice la palabra clave DESC de la siguiente manera:
ORDER BY Earnings DESC

756 Apndice B

Unin de tablas
Puede utilizar una nica declaracin SELECT para recuperar datos de ms de una tabla en la base de datos. La declaracin une las tablas y devuelve un nico juego de registros con los datos seleccionados de cada tabla. Por ejemplo, la base de datos de una empresa puede contener una tabla con datos personales sobre los empleados y otra tabla con datos sobre los distintos departamentos. Si desea crear un directorio de empleados que muestre el nombre, nmero de telfono y departamento del empleado, debe recuperar informacin de las dos tablas de forma simultnea. Para ello, cree una unin que especifique todas las tablas que se van a incluir y de qu forma van a relacionarse. He aqu un ejemplo:
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME FROM EMPLOYEES, DEPARTMENTS WHERE EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID
Nota: Utilice puntos para identificar las columnas de forma ms precisa. Por ejemplo, EMPLOYEES.DEPT_ID se refiere a la columna DEPT_ID de la tabla EMPLOYEES.

La primera lnea especifica las columnas que se van a recuperar. Las tres primeras columnas, FIRSTNAME, LASTNAME, PHONE, pertenecen a la tabla EMPLOYEES, mientras que la cuarta, DEPTNAME, slo existe en la tabla DEPARTMENTS. La segunda lnea especifica las dos tablas desde las que se recuperan los datos, EMPLOYEES y DEPARTMENTS. La lnea final especifica los registros que se van a unir y recuperar de las dos tablas. Cada tabla tiene una columna con el nombre DEPT_ID. (En la tabla DEPARTMENTS, la columna es la clave principal. Para obtener ms informacin, consulte Definicin de la relacin entre las tablas en la pgina 742.) La clusula WHERE compara el valor de DEPT_ID en una tabla con el valor de DEPT_ID, en la otra. Cuando se encuentra una coincidencia, todos los campos del registro de la tabla EMPLOYEES se unen con todos los campos del registro en la tabla DEPARTMENTS. A continuacin, los datos combinados se filtran para crear un nuevo registro compuesto de una columna FIRSTNAME, LASTNAME, PHONE y DEPTNAME. Por ltimo, el nuevo registro se agrega al juego de registros. Es posible que en algunos sistemas de bases de datos, sea preferible utilizar una sintaxis de unin algo distinta. Por ejemplo, en la siguiente declaracin SQL se utilizan las palabras clave SQL INNER JOIN...ON para conseguir el mismo resultado que en el ejemplo anterior:
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME FROM EMPLOYEES INNER JOIN DEPARTMENTS ON EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID

Consulte la documentacin del sistema de bases de datos para determinar qu sintaxis debe utilizar.

Nociones bsicas de SQL 757

758 Apndice B

APNDICE C Configuracin de un DSN en Windows

Un DSN es una especie de acceso directo de Windows empleado para establecer una conexin de base de datos (consulte Aspectos bsicos de las conexiones de bases de datos en la pgina 744). Antes de utilizar un DSN en la aplicacin Web, deber configurarlo en su equipo o en un servidor remoto, como se describe en este apndice. Este apndice slo es aplicable si la base de datos est situada en un sistema compatible con nombres de fuentes de datos (DSN) ODBC como, por ejemplo, Microsoft Windows y Windows NT, pero no Macintosh. Este apndice contiene las siguientes secciones:

Aspectos bsicos de los DSN en la pgina 759 Creacin de un DSN en la pgina 759 Aspectos bsicos de los DSN
Un DNS es una palabra exclusiva que identifica un grupo de parmetros de conexin de base de datos. Entre los parmetros pueden figurar el nombre del servidor, la ruta de la base de datos o el nombre de la base de datos, el controlador ODBC que se va a utilizar y el nombre de usuario y la contrasea, en caso de que sean necesarios. Por ejemplo, supongamos que tiene una base de datos Microsoft SQL Server denominada Precinct ubicada en un servidor llamado Kojak. Para obtener acceso a la base de datos, debe introducir el nombre de usuario columbo y la contrasea savalas7. Tras utilizar estos parmetros para definir un DSN denominado ourcops, puede crear la conexin introduciendo la palabra ourcops en Dreamweaver MX, en lugar de utilizar todos los dems parmetros.

Creacin de un DSN
Para crear un DNS, debe instalar un controlador de ODBC para la base de datos en el sistema Windows que ejecute el servidor de aplicaciones. ODBC (Conectividad de base de datos abierta) es un software intermediario que permite a las aplicaciones comunicarse con la base de datos. Para obtener ms informacin, consulte Interfaz con la base de datos en la pgina 744.

759

Asegrese de que el sistema dispone del controlador adecuado para la base de datos. Para obtener la lista de controladores ODBC de un sistema Windows 95, 98 o NT, elija Inicio > Configuracin > Panel de control y haga doble clic en el icono Fuentes de datos ODBC. (Segn el sistema empleado, el icono tambin puede denominarse ODBC o 32bit ODBC.) Al hacer clic en la ficha Controladores, aparece la lista de controladores instalados en el sistema. En Windows 2000, elija Inicio > Configuracin > Panel de control > Herramientas administrativas > Orgenes de datos y haga clic en la ficha Controladores. En Windows XP, elija Inicio > Panel de control > Rendimiento y mantenimiento > Herramientas administrativas > Orgenes de datos (ODBC) y, a continuacin, haga clic en la ficha Controladores. Si no se ha instalado el controlador necesario, descargue e instale los paquetes Microsoft Data Access Components (MDAC) 2.5 y 2.6, que pueden obtenerse de forma gratuita del sitio Web de Microsoft en http://www.microsoft.com/data/download.htm. Estos paquetes contienen los ltimos controladores ODBC de Microsoft para las bases de datos ms habituales.
Nota: Instale primero MDAC 2.5 y, a continuacin, MDAC 2.6.

Si MDAC no tiene un controlador ODBC para su base de datos, consulte al proveedor de la base de datos.
Para crear un DNS:

Abra el Administrador de orgenes de datos ODBC de la siguiente forma: el icono de Orgenes de datos ODBC. Segn el sistema empleado, el icono tambin puede denominarse ODBC o 32bit ODBC.

En Windows 95, 98 o NT, elija Inicio>Configuracin > Panel de control y haga doble clic en En Windows 2000, elija Inicio > Configuracin > Panel de control > Herramientas
administrativas > Orgenes de datos.

En Windows XP, elija Inicio > Panel de control> Rendimiento y mantenimiento>

Herramientas administrativas > Orgenes de datos (ODBC).

760 Apndice C

En el cuadro de dilogo de Dreamweaver que permite crear una conexin DSN, haga clic en el botn Definir. Aparecer el Administrador de orgenes de datos ODBC:

Haga clic en la ficha DSN de sistema. La ficha mostrar la lista de los DSN del sistema. Haga clic en Agregar para aadir un nuevo DSN a la lista. Aparecer el cuadro de dilogo Crear un nuevo origen de datos con todos los controladores cargados en el sistema.

Seleccione uno de ellos y haga clic en Finalizar. Por ejemplo, si utiliza un archivo de base de datos de Microsoft Access, seleccione Controlador de Microsoft Access (*.mdb). Si la lista no contiene el controlador necesario, deber descargarlo del sitio Web del fabricante e instalarlo en el equipo.

En el cuadro de dilogo que aparece, asigne un nombre al DSN y especifique los parmetros de conexin. Los cuadros de dilogo que se utilizan para especificar los parmetros varan en funcin del controlador seleccionado. En el caso del controlador de Microsoft Access, deber introducir un nombre, hacer clic en Seleccionar, buscar el archivo de base de datos en el disco duro y hacer clic en Aceptar.

Haga clic en Aceptar para cerrar el cuadro de dilogo. El nuevo DSN se aadir a la lista de DSN del sistema.

Configuracin de un DSN en Windows 761

762 Apndice C

APNDICE D Referencia rpida: Etiquetas de Macromedia ASP.NET

Macromedia Dreamweaver MX utiliza una serie de etiquetas personalizadas para crear comportamientos de servidor en las pginas ASP.NET. Tambin puede utilizar estas etiquetas en sus propias pginas ASP.NET. En este apndice se describen las siguientes etiquetas personalizadas de Macromedia:

MM:DataSet en la pgina 763 MM:If en la pgina 766

Dreamweaver tambin utiliza las siguientes etiquetas para crear comportamientos de servidor:

MM:Insert en la pgina 766 MM:Update en la pgina 767 MM:Delete en la pgina 768

Por ltimo, si una etiqueta contiene una declaracin SQL o un procedimiento almacenado que toma parmetros, utilice las dos etiquetas siguientes para especificar los valores de los parmetros:

Parameters en la pgina 769 Parameter en la pgina 769

Nota: Al igual que las etiquetas de Microsoft ASP.NET, cada etiqueta personalizada de Macromedia requiere un atributo runat="server".

Para obtener una descripcin ms detallada de las etiquetas y sus atributos, visite el Centro de servicio tcnico de Dreamweaver en http://www.macromedia.com/go/customtags_asp. MM:DataSet Utilice la etiqueta MM:DataSet para crear un conjunto de datos. Los conjuntos de datos de ASP.NET son muy similares a los juegos de registros de ASP. Ejemplo
<MM:DataSet id="fruitsDS" runat="server" CommandText=SELECT name, color FROM fruits ConnectionString=<%# MM_NOTD_STRING %> />

763

Directivas obligatorias
<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Si se van a utilizar etiquetas de parmetros, a menudo (aunque no siempre) se necesitan las siguientes directivas:
<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <%@ Import Namespace="System.Data.OleDb" %>

Atributos
CommandText

Obligatorio. Especifica una declaracin SQL o el nombre de un procedimiento almacenado. La declaracin SQL se puede parametrizar utilizando signos de interrogacin como marcadores de posicin. Consulte Parameters en la pgina 769.
ConnectionString

Obligatorio. Especifica una cadena de conexin que contiene informacin para conectar con una base de datos.
CreateDataSet

Opcional. Verdadero o falso. Cuando es falso, no se crea ningn conjunto de datos. El valor predeterminado es verdadero.
Expression

Opcional. Verdadero o falso. Permite controlar cundo se ejecuta la declaracin CommandText. Si es falso, no se ejecuta la declaracin CommandText. Puede alternar el valor programticamente.
IsStoredProcedure

Opcional. Verdadero o falso. Permite indicar la naturaleza de CommandText. El valor predeterminado es falso.
PageSize

Opcional. Entero. Cuando CreateDataSet es verdadero, permite dividir los registros en grupos (pginas) de un tamao fijo. Consulte CurrentPage. No establezca PageSize/CurrentPage y StartRecord/MaxRecords al mismo tiempo. Si especifica las dos series de atributos, se utilizar la primera (PageSize/CurrentPage).
CurrentPage

Opcional. Entero. Cuando se utiliza PageSize, permite especificar una determinada pgina (grupo de registros). El ndice de la primera pgina es cero. Consulte PageSize.
StartRecord

Opcional. Entero. Un desplazamiento desde el primer registro de un conjunto de datos (el ndice del primer registro es cero). Cuando CreateDataSet es verdadero, permite recuperar un subconjunto de registros junto con el atributo MaxRecords. No establezca PageSize/CurrentPage y StartRecord/MaxRecords al mismo tiempo. Si especifica las dos series de atributos, se utilizar la primera (PageSize/CurrentPage). Si PageSize es mayor que cero, StartRecord se calcular automticamente como (PageSize * CurrentPage).

764 Apndice D

MaxRecords

Opcional. Entero. Permite especificar cuntos registros se recuperan empezando en el desplazamiento StartRecord. Consulte StartRecord.
GetRecordCount

Opcional. Verdadero o falso. Cuando se utiliza PageSize, permite desactivar el recuento de registros para mejorar el rendimiento. Si la pgina no utiliza los atributos RecordCount o LastPage, no necesita contar registros. El valor predeterminado es verdadero.
RecordCountCommandText

Opcional. Para mejorar el rendimiento cuando GetRecordCount es verdadero, permite especificar una declaracin SQL explcita para obtener un recuento de registros. La declaracin deber tener la forma SELECT COUNT (*) FROM... y puede incluir clusulas WHERE, pero no parmetros.
EndRecord

Opcional. Slo lectura. Permite obtener el mnimo de (CurrentPage + 1) * PageSize y RecordCount.

LastPage

Opcional. Slo lectura. Cuando se utiliza PageSize y GetRecordCount es verdadero, permite obtener el ndice basado en cero de la ltima pgina.
RecordCount

Opcional. Slo lectura. Cuando CreateDataSet y GetRecordCount son verdaderos, permite obtener el nmero total de registros generados por la expresin CommandText.
theDS

Opcional. Slo lectura. Proporciona acceso al conjunto de datos que contiene los registros recuperados al definir CreateDataSet como verdadero.
DefaultView

Opcional. Slo lectura. Proporciona acceso a theDS.Tables[0].DefaultView

Debug

Opcional. Verdadero o falso. Permite ver los indicadores adicionales si la ejecucin de esta etiqueta lanza una excepcin. Si el atributo Debug es verdadero, se ignorar FailureURL (consulte FailureURL). Cuando desarrolle la pgina, defina Debug como verdadero para obtener amplia informacin de diagnstico sobre los problemas con la pgina. Cuando vaya a desplegar la pgina, defina Debug como falso para evitar que los visitantes externos vean el diagnstico y otros datos internos si se producen problemas con la pgina.
FailureURL

Opcional. Permite especificar el URL de una pgina para abrirla si se lanza una excepcin mientras se ejecuta CommandText o si los atributos especificados entran en conflicto.
SuccessURL

Opcional. Permite especificar el URL de una pgina que se abrir si la declaracin CommandText se ejecuta sin que se lancen excepciones.

Referencia rpida: Etiquetas de Macromedia ASP.NET 765

MM:If Utilice la etiqueta MM:If para controlar la inclusin de contenido o lgica en una pgina. Ejemplo
<MM:If runat="server" Expression="<%# (fruitsDS.CurrentPage == 0) %>"> <ContentsTemplate> <font color='#CCCCCC'>Previous</font> </ContentsTemplate> </MM:If>

Directiva obligatoria
<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Atributo
Expression

Obligatorio. Permite especificar una expresin para resolver. Si la expresin es verdadera, se utiliza el contenido interno de la etiqueta. Si la expresin es falsa, se ignora el contenido interno. MM:Insert Utilice la etiqueta MM:Insert para insertar registros en una base de datos. Ejemplo
<MM:Insert runat="server" CommandText="INSERT INTO fruits (name, color) VALUES (?, ?)" ConnectionString='<%# MM_NOTD_STRING %>' Expression=<%# Request.Form["MM_insert"] == "true" %> Debug=true CreateDataSet="false" > <Parameters> <Parameter Value='<%# Request.Form["fruitName"] %>' /> <Parameter Value='<%# Request.Form["fruitColor"] %>' /> </Parameters> </MM:Insert>

Directiva obligatoria
<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Atributo La etiqueta MM:Insert utiliza la lgica de la etiqueta MM:DataSet, por lo que comparte todos sus atributos. Para obtener ms informacin, consulte MM:DataSet en la pgina 763. Observe los siguientes valores de atributos:

766 Apndice D

Expression

Si define este atributo como false, la etiqueta no har nada. Es decir, la declaracin SQL o el procedimiento almacenado especificado en el atributo CommandText no se ejecutar. Puede utilizar el atributo Expression para controlar cundo se producir la operacin de insercin. Por ejemplo, quiz resulte conveniente realizar validacin de formularios del lado del servidor antes de llevar a cabo la operacin de insercin. En otro caso, el cdigo podra establecer Expression como true slo si se ha enviado el formulario que contiene los datos que se van a insertar.
CommandText

Suele ser una declaracin INSERT SQL o un procedimiento almacenado que inserta registros.
CreateDataSet

Este atributo suele establecerse como false porque no se crea un conjunto de datos despus de ejecutar una declaracin INSERT. Sin embargo, en el caso de un procedimiento almacenado podra crearse un conjunto de datos una vez realizada la operacin de insercin. MM:Update Utilice la etiqueta MM:Update para actualizar registros en una base de datos. Ejemplo
<MM:Update runat="server" CommandText="UPDATE fruits SET color=? WHERE name=?" ConnectionString='<%# MM_NOTD_STRING %>' Expression=<%# Request.Form["MM_update"] == "true" %> Debug=true CreateDataSet="false" > <Parameters> <Parameter Value='<%# Request.Form["fruitColor"] %>' /> <Parameter Value='<%# Request.Form["updateNames"] %>' /> </Parameters> </MM:Update>

Directiva obligatoria
<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Atributo La etiqueta MM:Update utiliza la lgica de la etiqueta MM:DataSet, por lo que comparte todos sus atributos. Para obtener ms informacin, consulte MM:DataSet en la pgina 763. Observe los siguientes valores de atributos:
Expression

Si define este atributo como false, la etiqueta no har nada. Es decir, la declaracin SQL o el procedimiento almacenado especificado en el atributo CommandText no se ejecutar. Puede utilizar el atributo Expression para controlar cundo se producir la operacin de actualizacin. Por ejemplo, quiz resulte conveniente realizar validacin de formularios del lado del servidor antes de llevar a cabo la operacin de actualizacin. En otro caso, el cdigo podra establecer Expression como true slo si se ha enviado el formulario que contiene los datos que se van a actualizar.

Referencia rpida: Etiquetas de Macromedia ASP.NET 767

CommandText

Suele ser una declaracin UPDATE SQL o un procedimiento almacenado que actualiza registros.
CreateDataSet

Este atributo suele establecerse como false porque no se crea un conjunto de datos despus de ejecutar una declaracin UPDATE. Sin embargo, en el caso de un procedimiento almacenado podra crearse un conjunto de datos una vez realizada la operacin de actualizacin. MM:Delete Utilice la etiqueta MM:Delete para eliminar registros en una base de datos. Ejemplo
<MM:Delete runat="server" CommandText="DELETE FROM fruits WHERE name=?" ConnectionString='<%# MM_NOTD_STRING %>' Expression=<%# Request.Form["MM_delete"] == "true" %> Debug=true CreateDataSet="false" > <Parameters> <Parameter Value='<%# Request.Form["deleteNames"] %>' /> </Parameters> </MM:Delete>

Directiva obligatoria
<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Atributo La etiqueta MM:Delete utiliza la lgica de la etiqueta MM:DataSet, por lo que comparte todos sus atributos. Para obtener ms informacin, consulte MM:DataSet en la pgina 763. Observe los siguientes valores de atributos:
Expression

Si define Expression como false, la etiqueta no har nada. Es decir, la declaracin SQL o el procedimiento almacenado especificado en el atributo CommandText no se ejecutar. Puede utilizar el atributo Expression para controlar cundo se producir la operacin de borrado. Por ejemplo, quiz resulte conveniente realizar validacin del lado del servidor antes de llevar a cabo la operacin de borrado.
CommandText

Suele ser una declaracin DELETE SQL o un procedimiento almacenado que borra registros.
CreateDataSet

Este atributo suele establecerse como false porque no se crea un conjunto de datos despus de ejecutar una declaracin DELETE. Sin embargo, en el caso de un procedimiento almacenado podra crearse un conjunto de datos una vez realizada la operacin de borrado.

768 Apndice D

Parameters Utilice la etiqueta Parameters para especificar parmetros. Hay dos condiciones en las que podran especificarse parmetros.

El atributo CommandText de la etiqueta principal especifica una declaracin SQL

parametrizada. sta es una declaracin SQL que tiene signos de interrogacin (?) como marcadores de posicin para los parmetros.
Nota: No es vlido parametrizar cada parte de cada declaracin SQL. Por ejemplo, es posible parametrizar la clusula WHERE de una declaracin SELECT, pero no su clusula ORDER BY. En general se puede parametrizar cualquier para nombre/valor de una declaracin SQL.

El atributo CommandText especifica un procedimiento almacenado que toma parmetros.

En ambos casos, los valores de parmetro los suministran etiquetas Parameter que aparecen en el mismo orden que los marcadores de posicin (consulte Parameter en la pgina 769). Las etiquetas Parameter deben estar rodeadas por una etiqueta Parameters. Ejemplo
<MM:Update runat="server" CommandText="UPDATE fruits SET color=? WHERE name=?" ConnectionString='<%# MM_NOTD_STRING %>' Expression=<%# Request.Form["MM_update"] == "true" %> Debug=true CreateDataSet="false" > <Parameters> <Parameter Value='<%# Request.Form["fruitColor"] %>' /> <Parameter Value='<%# Request.Form["updateNames"] %>' /> </Parameters> </MM:Update>

Parameter Utilice la etiqueta Parameter para especificar valores de parmetro. Ejemplo

<MM:Insert runat="server" CommandText="INSERT INTO fruits (name, color) VALUES (?, ?)" ConnectionString='<%# MM_NOTD_STRING %>' Expression=<%# Request.Form["MM_insert"] == "true" %> Debug=true CreateDataSet="false" > <Parameters> <Parameter Value='<%# Request.Form["fruitName"] %>' /> <Parameter Value='<%# Request.Form["fruitColor"] %>' /> </Parameters> </MM:Insert>

Referencia rpida: Etiquetas de Macromedia ASP.NET 769

Atributos
Value

Obligatorio. El valor que se debe asignar a los parmetros Input o InputOutput (consulte Direction). El valor se convertir a un tipo de datos adecuado antes de transferirlo a la base de datos. La conversin depender de la configuracin del atributo Type. Cuando el atributo Direction es Output, InputOutput o ReturnValue, el valor se establecer despus de ejecutar CommandText.
Direction

Opcional. Permite especificar uno de los valores siguientes: Input, InputOutput, Output, ReturnValue. El valor predeterminado es Input.
Name

Opcional. Para declaraciones SQL parametrizadas, el nombre puede ser cualquier cosa. El nombre suele estar relacionado con el significado del parmetro, como @deptName, y comienza con el carcter @. Sin embargo, el nico requisito es que el orden de aparicin de las etiquetas Parameter debe corresponder al orden de los signos de interrogacin en la declaracin SQL. Puesto que el nombre es opcional, puede omitir este atributo, en cuyo caso el nombre se definir como parameter_ ms el ndice basado en uno del parmetro que se encuentra en la lista de parmetros suministrada. Para procedimientos almacenados, el nombre debe coincidir con los marcadores de parmetro del procedimiento almacenado (por ejemplo, @id). Esto significa que deber suministrar este atributo cuando utilice procedimientos almacenados. Si se necesita un parmetro de tipo ReturnValue, su etiqueta Parameter deber situarse antes de cualquier otras etiqueta Parameter.
Size

Opcional. El tamao del valor del parmetro. Tambin se conoce como el ancho de la columna. Si no se suministra, el valor de este atributo se deduce de los atributos Type y Value.
Type

Opcional. Especifica el tipo de parmetro. Puede especificar los siguientes tipos de datos, cada uno de los cuales puede expresarse de dos formas:
(int)OleDbType.Boolean (int)OleDbType.UnsignedTinyInt (int)OleDbType.Char (int)OleDbType.DBTimeStamp (int)OleDbType.Decimal (int)OleDbType.Double (int)OleDbType.Single (int)OleDbType.Integer (int)OleDbType.SmallInt (int)OleDbType.BigInt (int)OleDbType.VarChar (int)OleDbType.UnsignedSmallInt (int)OleDbType.UnsignedInt "Boolean" "UnsignedTinyInt" "Char" "DBTimeStamp" "Decimal" "Double" "Single" "Integer" "SmallInt" "BigInt" "VarChar" "UnsignedSmallInt" "UnsignedInt"

770 Apndice D

(int)OleDbType.UnsignedBigInt (int)OleDbType.Currency (int)OleDbType.DBDate (int)OleDbType.TinyInt (int)OleDbType.DBTime (int)OleDbType.VarNumeric

"UnsignedBigInt" "Currency" "DBDate" "TinyInt" "DBTime" "VarNumeric"

No se admiten los siguientes valores OleDbType:

(int)OleDbType.Guid (int)OleDbType.Variant "Guid" "Variant"

Referencia rpida: Etiquetas de Macromedia ASP.NET 771

772 Apndice D

NDICE ALFABTICO

Smbolos

@import 317
A

abrir archivos de texto 128 documentos existentes. Consulte documentos 128 abrir archivos HTML de Word 128 abrir archivos no HTML 199 preferencias 199 abrir documentos vinculados 516 Abrir pgina vinculada, comando 516 Abrir plantilla adjunta, comando 504 Abrir ventana del navegador, accin 396 Abrir, comando 128 absolutas, rutas 440 accesibilidad 365 comprobar 376 crear sitios Web 369 cuadro de dilogo, activar 370 funciones del sistema operativo 366 imgenes 371 Iniciativa de Accesibilidad para la Web (W3C) 365 lector de pantalla 366 Ley federal de insercin 365 marcos 373 navegacin mediante teclado 366 objetos multimedia 374, 375 objetos, insertar 372 acciones cambiar en comportamientos 385 compatibilidad con navegadores 387 controlar lneas de tiempo 435 crear 386 definicin 381 elegir en el panel Comportamientos 383 incluidas con Dreamweaver 387413 Vase tambin acciones individuales por nombre

acoplar paneles y grupos paneles 57 ActiveX, convertir en dinmico 577 activos abrir el panel Activos 464 actualizar la lista Sitio 466 aplicar colores a texto 467 Biblioteca, categora del panel Activos 469 carpetas Favoritos 475 categoras 465 colores, crear 474 editar 469 Favoritos, listas 473 insertar 467 introduccin 464 planificar 73 Plantillas, categora del panel Activos 470 seleccionar mltiples 468 URL, crear 474 ver en el panel Activos 465 actualizar Sitio, lista (panel Activos) 466 Actualizar automticamente 529 Actualizar HTML, comando 343 Actualizar local, comando 99 Actualizar pgina actual, comando 478, 504 Actualizar pginas, comando 504 Actualizar registro, comportamiento 687 actualizar registros 683 actualizar vnculos 451 Adjuntar icono de hoja de estilos 317 administrador, contrasea para sitios de Contribute 722 administrar activos. Consulte activos extensiones 67 grupos de paneles 57 sitios 83 vnculos 451

773

Ajustar a valores seguros para la Web, paleta de colores 131 Ajustar posicin, comando 135 lbumes de fotos Web, crear 344 alinear capas 421 elementos de pgina 329 imagen de rastreo 135 imgenes 302 opciones 329 texto 302 Alinear con seleccin, comando 135 aadir contenido dinmico 571 extensiones a Dreamweaver 67 filas y columnas 258 fotogramas a una lnea de tiempo 431 objetos a una lnea de tiempo 429 vnculos 468, 469 Aadir fotograma, comando 429 Aadir objeto a Biblioteca, comando 477 Aadir objeto a lnea de tiempo, comando 429 anidar 418 capas 419 marcos 287 Anidar al crear en una capa, opcin 418 animaciones aplicar a objetos 433 con rutas completas 430 copiar y pegar 433 crear 429 introduccin 32 lneas de tiempo 427 mejorar 434 Aplicacin automtica, opcin (panel Estilos HTML) 307 aplicaciones Web requisitos 146 aplicaciones, otras, utilizar con Dreamweaver 62 aplicar colores a texto 467 comportamientos a imgenes 332 CSS, estilos 315 estilos HTML 310 estilos personalizados 315 Aplicar formato de origen, com. 197 Aplicar plantilla a pgina, comando 503 applets. Consulte applets de Java applets de Java insertar 351, 364 introduccin 364

applets Java convertir en dinmicos 577 archivos administrar en sitios de Contribute 727 buscar 322 cargar 107 colocar 107 crear 123 desbloquear en sitios de Contribute 732 descargar y cargar 105 explorar 94 ocultar 109 organizar 71 sincronizar sitios local y remoto 108 texto 128 tipos compatibles 210 ver en el panel Sitio 92 archivos compatibles, tipos 210 archivos de configuracin compartidos en sitios de Contribute 733 archivos de correo electrnico 128 archivos de texto abrir 128 Archivos del sitio 92 archivos dependientes colocar 107 mostrar y ocultar 99 obtener 106 archivos hurfanos 514 Archivos locales, opcin 90 archivos ocultos, mostrar y ocultar 99 Archivos remotos, opcin 90 Arrastrar capa, accin 391 ASP 149 conexiones de base de datos 169 aspectos bsicos de Dreamweaver 35 ASP.NET 148 conexiones de base de datos 163 Cuadrcula datos 591, 592 Botones Editar, Actualizar, Cancelar 592 Botones Eliminar 592 Campo de datos sencillo 592 Formato libre 592 Hipervnculo 592 DataSet, etiqueta personalizada 763 Delete, etiqueta personalizada 768 elementos de formulario dinmicos 649 escritura de SQL para 557 etiquetas personalizadas de Macromedia 763 If, etiqueta personalizada 766 importar etiquetas 204

774 ndice alfabtico

Insert, etiqueta personalizada 766 Lista de datos 591 Parameter, etiqueta 769 Parameters, etiqueta 769 Update, etiqueta personalizada 767 atributos buscar 217 convertir en dinmicos 575 Vase tambin etiquetas atributos de etiqueta editables (plantillas) 482, 492 atributos HTML, convertir en contenido dinmico 575 audiencia 70 audiencia destino 70 audio. Consulte sonido autoampliar (vista Disposicin) 275 automatizar tareas 136 ayuda 28
B

barra de estado 49 establecer texto (comportamiento) 402 men emergente Tamao de ventana 50 preferencias 51 barra de herramientas cambiar ttulos de documentos 129 barra de navegacin aadir imgenes a 458 crear 457 estados de imagen 457 modificar elementos 459 Barra de navegacin por juego de registros, objeto Live 582 barra de navegacin por registros crear 582 ocultar 585 barra del lanzador 48, 52 personalizar 60 basados en texto, editores de HTML. Consulte editores externos base de datos almacenamiento de contenido 541 conexiones, introduccin 744 disear 738 registros 737 tablas, introduccin 737 bases de datos esquemas y catlogos 530 introduccin 737 MySQL 189

bibliotecas de etiquetas 200 Bienvenido, ventana 48 blockquote aplicar 303 bloqueadas, regiones hacer clic en 485 bloques de cdigo escribir 613 marcadores de parmetro 624 reglas de codificacin 622 situar 622 body, etiqueta 135 Borrar estilo de la seleccin, opcin 308 Borrar estilo del prrafo, opcin 308 Borrar registro, comportamiento 691 Botn Flash, cuadro de dilogo 354 botn Flash, objetos 354 modificar 356 vista previa 357 botones botones Ir 396 crear botones de formulario 645 Enviar, botones grficos 646 botones de opcin 639 botones de opcin dinmicos 652 Botones de opcin dinmicos, cuadro de dilogo 652 Bucle, opcin 428 buscar archivos 322 ayuda 28 buscar y reemplazar 322 etiquetas y atributos 217 expresiones regulares 220 guardar modelos de bsqueda 219 texto en archivos 322 texto en cdigo HTML 217 texto entre etiquetas especficas 218 Buscar en, opcin 322 buscar y reemplazar. Consulte buscar Buscar, opciones 322 bsqueda, pginas de 666
C

cabezal de reproduccin 428 cadenas de conexin 174 Cambiar el tamao de una imagen 329 Cambiar nombre de grupo de paneles, comando 59 Cambiar propiedad, accin 388 cambiar tamao capas 420 celdas de tabla 256

ndice alfabtico 775

celdas y tablas de disp. 273 manejadores 330 Cambiar vnculo en todo el sitio, comando 454 campos campos de archivo 638 cargar archivos a un servidor 638 crear campos de texto 634 crear campos ocultos 639 campos de texto, establecer texto con comportamientos 402 capas 435 ajustar a cuadrcula 422 alinear 421 anidar 419 cambiar orden de apilamiento 424 cambiar tamao 420 cambiar visibilidad con comportamientos 403 cambiar visibilidad con el panel Capas 424 convertir en tablas 426 convertir para navegadores 3.0 427 crear 417 desplazables 393 dibujar mltiples 417 en diseo de tablas 426 evitar solapamiento 426 insertar 417 manipular 419 marcadores, ver 417 mover 421 preferencias 418 propiedades 422 propiedades para mltiples 423 seleccionar 420 seleccionar mltiples 423 situar 422 visibilidad 424 Capas, panel 417 caracteres especiales insertar 305 salto de lnea 299 caractersticas de fuente cambiar 300 Carga previa de imgenes, accin 399 cargar archivo annimo 638 cargar archivos 105, 107 carpeta local 151 carpeta remota 77, 151 solucionar problemas 79 carpetas buscar 322

buscar texto 322 Favoritos 475 carpetas Favoritos 475 Casilla de verificacin dinmica, cuadro de dilogo 652 casillas de verificacin 639 casillas de verificacin dinmicas 652 catlogos 530 categoras activos 465 preferencias 63 celdas. Consulte celdas de disposicin, celdas de tabla celdas de disposicin 266 alineamiento 274 aplicar formato 274 borrar altos 272 color de fondo 274 dibujar 267 No aj., opcin 274 preferencias 279 celdas de tabla aplicar formato 254 combinar 259 cortar, copiar y pegar 261 dividir 259 Vase tambin celdas y tablas de disposicin centro de servicio tcnico de Dreamweaver 29 CGI material de referencia 41 CGI (Common Gateway Interface) scripts 648 claves de conexin, exportar 716 codificacin 64 cdigo editar con BBEdit 206 material de referencia 41 preferencias de formato 194 seleccionar en Contribute 718 cdigo fuente actualizar cdigo HTML de Fireworks colocado en Dreamweaver 343 buscar 217 buscar etiquetas 217 conversin de atributos CSS 320 copiar y pegar desde Fireworks a Dreamweaver 343 copiar y pegar, generalidades 215 editar con BBEdit 206 editores ext. 206 escribir y editar 211, 215 estilos de etiquetas 311 formato en doc. existentes 197

776 ndice alfabtico

introduccin a pref. de formato 194 limpiar 223 opciones 194 pref. formato, establecer 195 preferencias de colores 198 preferencias de reescritura 197 referencia 221 seleccionar en la ventana de documento 132 cdigo fuente HTML buscar 322 estilos de etiquetas 311 Cdigo fuente, opcin 217 Cdigo, vista 193 abrir archivos no HTML 199 cambiar a vista Diseo 49 escribir y editar cdigo 211, 215 opciones 194 ver plantillas 485 Coincidir maysculas y minsculas, opcin 323 ColdFusion 148 ColdFusion, variables 565 componentes 595599 Componentes, panel 599 conexiones de base de datos 157 crear fuentes de datos 158 depurador 235 pginas que utilizan componentes 599 UltraDev 4 145 UltraDev 4, conexiones 159 variables de cliente 565 colocar archivos en un servidor remoto 107 colocar y obtener archivos 105 Colocar, comando 107 Color de los vnculos, opcin (Prop. de la pgina) 131 Color del texto, opcin (Prop. de la pgina) 131 Color predeterminado, botn 131 colores como activos. Consulte activos crear activos de color 474 cuentagotas, utilizar 130 elegir 130 fondo de marco 291 fondo de pgina 129 muestras 130 predet. para texto de pgina 131 seguro para la Web 131 texto, cambiar 303, 467 Colores de cdigo, preferencias 198 colores del sistema 131 Colores del sistema, botn 131 columnas, filas y celdas

aadir y quitar 258 aplicar formato 254 Columnas, opcin (Insertar tabla) 250 Comando (procedimiento almacenado), opcin 691 comandos acceso desde men contextual 52, 53 crear a partir de pasos de historial 140 grabar 141 Combinar celdas, comando 259 combinar paneles flotantes 57 comentarios, insertar 216 comenzar 35 Common Gateway Interface (CGI). Consulte CGI 648 compatibilidad con capas de Netscape Navigator 4 418 Componentes de ColdFusion, panel 599 comportamientos 381413 adjuntar 383 cambiar 385 canal en lneas de tiempo 428 compatibilidad con navegadores 387 crear acciones 386 de otros proveedores 386 definicin 381 desencadenar 383 e imgenes 332 eliminar 385 y elementos de biblioteca 480 y formularios 648 y lneas de tiempo 385 y medios 364 y vnculos 461 comportamientos de servidor actualizar registros 687 borrar registros 691 comprobar 626 crear 612 crear cuadros de dilogo para 624 editar comportamientos personalizados 627 editar registros 679 insertar registros 683 instalar adicionales 611 ir a una pgina detalle 661, 672 ir a una pgina relacionada 677 mover a registros 584 mover a un registro concreto 674 ocultar regiones 585 regiones repetidas 586 reglas de codificacin 622 comportamientos del servidor codificacin 211 Comportamientos, panel 382

ndice alfabtico 777

comprobar comportamientos de servidor 626 comprobar la accesibilidad 376 Comprobar navegador, accin 388 Comprobar navegadores de destino, comando 510 Comprobar plug-in, accin 390 comprobar vnculos 513 Comprobar vnculos en todo el sitio, comando 514 conectar con bases de datos 154 Conexin con SQL Server 164 Conexin de base de datos OLE 164 conexiones con sitios de Contribute, solucionar problemas 725 conexiones de base de datos 154 ASP 169 ASP.NET 163 cadenas de conexin 174 ColdFusion 157 JSP 181 OLE DB 175 PHP 189 Configuracin de Live Data, cuadro de dilogo 528 conjunto de resultados de JSP 534 conjuntos de marcos 285294 anidados 287 establecer destino de vnculos en 444 guardar 290 predefinidos, insertar 285 propiedades 292 seleccionar 288 Vase tambin marcos conocer Dreamweaver 35 contador de registros, crear 588 contenido de Flash introduccin 354 contenido dinmico 556 aadir a pginas 571 atributos 575 eliminar 578 eliminar de una pgina 539 formularios 649 imgenes 573 introduccin 553 juego de registros, crear 555 juego de registros, definir 554 objetos 577 reemplazar 578 seleccionar en Contribute 718 texto 572 contenido, aadir a tablas 250

contraseas administradores de Contribute 722 almacenar 702 comprobar durante la conexin 707 permitir que los usuarios elijan 703 Contribute administrar sitios con Dreamweaver 721 archivos especiales, manipular 733 archivos, administrar 727 archivos, desbloquear 732 archivos, transferir 728 compatibilidad, activar 721 configuracin de administracin, cambiar 723 configurar un URL de raz del sitio 715 contenido dinmico 718 contraseas de administrador 722 crear la estructura del sitio 714 estilos CSS 731 exportar definiciones de sitios 716 grupos de permisos, cambiar 724 permisos en servidores 731 plantillas 716, 730 restaurar versiones anteriores de los archivos 729 solucionar problemas 724 Contribute y Dreamweaver, integracin. Consulte integracin de Dreamweaver y Contribute control de fuente 102 Controlador ligero Oracle 183 controladores de base de datos aspectos bsicos 744 ver controladores instalados 747 Controlar Shockwave o Flash, accin 391 controles ActiveX insertar 363 introduccin 363 controles deslizantes, crear 391 convenciones 37 Convertir capas en tablas, comando 426 convertir en dinmicos objetos de lista/men 650 convertir estilos a HTML estilos CSS a etiquetas HTML 320 Convertir tablas a capas, comando 427 copiar pasos de historial 139 copiar y pegar HTML de Fireworks 343 juegos de registros 569 Creador de comportamientos de servidor 612

778 ndice alfabtico

crear 450 colores y URL 474 un estilo HTML 308 un nuevo estilo CSS 314 una imagen de sustitucin 330 vnculos 443 Crear lbum de fotos Web, comando 344 crear bucles de lneas de tiempo 431 crear un cach de fuentes de datos 568 crear vnculos y navegacin 439 CSS, estilos 126 aplicar estilos personalizados 315 aplicar personalizados (clase) 315 atributos, convertir a HTML 320 class, atributo 314 crear 314 eliminar 314 eliminar estilo de una seleccin 316 exportar 319 navegadores y 320 utilizar con XHTML 228 cuadrcula ajustar a 270 ajustar capas a 422 como gua 134 espaciado 270 mostrar 270, 422 cuadro de color, opcin 130 cuadros clave crear 429 introduccin 428 Cubos de color, paleta de colores 131 cuentagotas 130 cursiva 300
D

DataSet, etiqueta personalizada (ASP.NET) 763 datos de tabla, importar 251 Datos dinmicos, cuadro de dilogo 576 Definicin de tipo de documento 204 definir fuentes, cambiar caractersticas 300 propiedades del documento 129 puntos de corte 232 Definir combinacin de colores, comando 131 Definir estilo HTML, cuadro de dilogo 307 Definir Imagen de barra de navegacin, accin 399 definir sitios 150 Definir texto de barra de estado, accin 402 Definir texto de campo de texto, accin 402 Definir texto de capa, accin 401

Definir texto de marco, accin 400 Delete, etiqueta personalizada (ASP.NET) 768 depurar pginas de ColdFusion 235 Derecha, alineamiento (inspector de propiedades de imagen) 329 desacoplar paneles y grupos de paneles 57 descargar comportamientos 386 estimaciones de tamao y tiempo 516 descargar archivos 105 desconectar usuarios 710 Design Notes aadir opciones de estado 116 configurar 113 guardar informacin sobre archivos 113, 114 informes 117 introduccin 113 para archivos Fireworks 116 para documentos y objetos 114 para objetos multimedia 353 Desproteger 87 desproteger y proteger archivos deshacer una proteccin 105 introduccin 103 desproteger/proteger 102 Desproteger/proteger, informes 117 Detener lnea de tiempo, accin 411 dibujar capas 417 celdas y tablas de disposicin 267 diccionario ortogrfico personal 321 Director, crear pelculas Shockwave con 359 directorio principal 153 directorio virtual 153 disear 69 diseo archivos 125 marcos 283 diseo Web, niveles de experiencia 35 Diseo, vista cambiar a vista Cdigo 49 ver plantillas 484 Disp., vista aplicar formato a tablas de disp. 274 Borrar alto, atributo 274 cambiar a 265 cambiar tamao de celdas y tablas de disp. 273 espaciado de celdas 274 Igualar ancho de celdas, opcin 274 intr. 265

ndice alfabtico 779

mover celdas y tablas de disp. 273 Quitar anidacin, opcin 274 Quitar todos los espaciadores, opcin 274 relleno de celdas 274 seleccionar celdas y tablas de disp. 273 disposicin, planificar. Consulte vista Disp., plantillas Disposicin, vista 265 aadir contenido a 271 ancho fijo 275 aplicar formato a celdas de disposicin 274 autoampliar 275 borrar altos de celdas 272 celdas y tablas de disposicin 266 cuadrcula 270 dibujar celdas y tablas de disposicin 267 establecer ancho 275 imagen de espaciador, preferencias 277 imgenes de espaciador, preferencias 277 men de encabezado de columna 276 preferencias 279 tablas de disposicin anidadas 269 Dividir celda, comando 260 Dividir marco, comandos 285 documentacin de Ampliacin de Dreamweaver MX 29 Documento, barra de herramientas 48 documentos abrir 128 abrir nuevo. Consulte documentos 125 aplicar una plantilla 503 buscar 322 comprobar vnculos 513 configurar propiedades 129 crear 123 Design Notes 113 guardar 127 guardar como plantilla 487 plantillas, separar de 503 tamao y tiempo de descarga 516 ttulo de pgina 129 vista previa en navegadores 512 documentos vinculados, abrir 516 Dreamweaver, ayuda 28 DSN 170 DSN, conexiones sin 173 DTD, archivos 204

edicin de registros, comportamientos 679 editar activos 469 botn Flash, objetos 356 cdigo (vista Cdigo o Inspector de cdigo) 211, 215 comportamientos de servidor 627 fuentes de datos 568 hoja de estilos CSS 318 hojas de estilos externas 317 juegos de registros 568 mtodos abreviados de teclado 64 un estilo HTML 310 una hoja de estilos CSS 318 Editar con BBEdit, comando 206 Editar con HomeSite, comando 206 Editar contenido sin marcos, comando 293 Editar hoja de estilos, cuadro de dilogo 318 Editar lista de formatos, cuadro de dilogo 581 Editar lista de fuentes, comando 301 Editor de la biblioteca de etiquetas 200 editor de mtodos abreviados de teclado 64 editores. Consulte editores externos editores de etiquetas 214, 238 editores de texto archivos creados con 128 editores de texto. Consulte editores externos editores ext. HTML, intr. 206 texto, intr. 206 editores externos BBEdit (slo Macintosh), integracin con 206 elementos multimedia 352 imgenes 331 Ejecutable (procedimiento almacenado), opcin 691 ejecutar el validador de etiquetas 225 Ejecutar y editar, preferencias 338 elementos alinear 329 Elementos de base de datos, rbol 558 elementos de biblioteca 476 aadir a pginas 469, 477 como activos. Consulte activos convertir en editables en documentos 479 crear 476 editar 470, 477 editar comportamientos en 480 eliminar 479 introduccin 476

780 ndice alfabtico

elementos de formulario dinmicos ASP.NET 649 elementos invisibles comentarios 216 mostrar y ocultar 133 scripts 242 seleccionar 132 elementos multimedia insertar 351 eliminar archivos de un sitio de Contribute 727 contenido dinmico 539, 578 filas y columnas 258 un juego de registros 568 una fuente de datos 568 eliminar fotogramas de lnea de tiempo 431 entorno de codificacin 209 entornos de trabajo Live Data, ventana 526 Enviar, botones 646 equilibrar llaves 224 errores de lgica en el cdigo JavaScript 232 errores de sintaxis 231 errores en cdigo JavaScript 232 Escala de grises, paleta de colores 131 escribir bloques de cdigo 613 escribir cdigo (vista Cdigo o Inspector de cdigo) 211, 215 escritura, permisos en servidores 731 espaciado, insertar espacio indivisible 299 espacio de trabajo 43 disposicin 44 disposicin flotante 47 introduccin 45 Espacio entre celdas, opcin (Insertar tabla) 250 espacio indivisible, insertar 299 esquemas 530 Establecer como pgina principal, comando 99 establecer destino de vnculos abrir un documento en una ventana nueva 445 en documentos 444 establecer marcos como destino _blank 293 _parent 293 _self 293 _top 293 establecer navegadores de destino convertir archivo para compatibilidad con 3.0 427 establecimiento de disposicin de pg. Consulte Disp., vista, plantillas

Estado de navegacin por juego de registros, objeto Live 589 Estndar, barra de herramientas 48, 53 Estndar, vista del inspector de propiedades 576 estilo HTML editar un estilo existente 310 Estilo, submen 300 estilos 311 aplicar estilos personalizados 315 convertir a HTML 320 en conflicto 319 estilos en conflicto 319 HTML 306 tabla de conversin de CSS a formato HTML 320 Vase tambin hojas de estilos Estilos en cascada Vase tambin hojas de estilos estilos CSS actualizar en un sitio de Contribute 731 Estilos CSS, panel 312 estilos HTML aplicar 307, 310 borrar 308 crear 308, 309 eliminar 308 eliminar del panel 308 modificar 310 Nuevo estilo, icono 308 usar en otros sitios 311 ver 307 estilos personalizados. Consulte hojas de estilos estructura de directorios, sitio. Consulte sitios etiqueta encabezado, aplicar 302 prrafo, aplicar 302 etiquetas body 135 buscar 217 no vlidas 210 seleccionar 132 solapadas 210 etiquetas personalizadas, importar 203 etiquetas, importar 203 eventos cambiar en comportamientos 385 definicin 381 desencadenar acciones 383 disponibles para distintos navegadores y objetos 382 Evitar solapamiento de capas, comando 426 Excel. Consulte Microsoft Excel, importar archivos

ndice alfabtico

781

explorador de archivos 94 exportar claves de conexin para Contribute 716 sitios 101 XML, notaciones de etiquetas para 506 exportar datos de tabla 262 exportar estilos 319 para crear una hoja de estilos CSS 319 Exportar tabla, comando 263 expresiones regulares 220 extensibilidad comportamientos de otros proveedores 386 Extension Manager 67 extensiones 67 crear 612 instalar 611
F

fechas insertar 304 Filas, opcin (Insertar tabla) 250 Fireworks Design Notes 116 Flash, convertir en dinmico 577 Flash, pelculas como activos. Consulte activos controlar 391 flujo de trabajo para pginas dinmicas 533539 Flujo de trabajo, informes 117 fondo imagen y color de pgina 129 transparencia en 129 format. cod. fuente HTML preferencias 194 Formatear tabla, comando 255 Formato, columna 580 formatos de archivos, imagen 325 formatos de datos aplicar 580 crear 581 editar 581 Formulario de actualizacin de registros, objeto Live 685 Formulario de insercin de registro, objeto Live 680 formularios aadir a un documento 631 botones 645 botones de opcin dinmicos 652 campo de contrasea 634 campos de texto, crear 634

campos, validar 412 casillas de verificacin dinmicas 652 comportamientos, utilizar con 648 convertir campos de imgenes en dinmicos 651 convertir campos de texto en dinmicos 650 convertir en dinmicos objetos de lista/men 650 crear 631 crear campos de archivo 638 Enviar, botones 646 grupos de botones de opcin 641 insertar tablas 647 introduccin 629 listas de desplazamiento 642 men emergente 644 mens de salto, crear 455 scripts del lado del cliente 647 scripts del lado del servidor 648 utilizar para recoger datos 666 foros en lnea 29 fotografas 325 fotogramas por segundo (fps) 428 fps (fotogramas por segundo) 428 fragmentos de cdigo 212 Fragmentos, panel 212 FTP 78 obtener y colocar 105 registro 106 solucionar problemas 79 fuente de datos, configurar nombre 759 fuentes cambiar caractersticas 300 cambiar combinaciones 301 codificacin, configurar fuentes para 64 fuentes de datos ColdFusion, variables 565 crear un cach 568 editar o eliminar 568 eliminar 568 enviadas por usuarios 542 introduccin 553 JavaBeans 566 juegos de registros, crear (sencillos) 555 juegos de registros, introduccin 554 parmetros de formulario, introduccin 543 parmetros de URL, introduccin 544 variables de aplicacin 563 variables de sesin 561 variables de sesin, introduccin 546 variables JSP 566 Fuentes/codificacin, preferencias 64 funciones nuevas en Dreamweaver 37

782 ndice alfabtico

generales, preferencias 63 Generator, convertir en dinmico 577 GIF, imgenes como imgenes de rastreo 134 usos para 325 grabar comandos 141 grficos. Consulte imgenes grupo de debate sobre Dreamweaver 29 Grupo de opciones, cuadro de dilogo 641 grupos de paneles 48 grupos de permisos en Contribute 724 guardar archivos en marcos y conjuntos de marcos 290 buscar 219 documentos 127 Guardar conjunto de marcos como, comando 290 Guardar conjunto de marcos, comando 290 Guardar marco como, comando 290 Guardar marco, comando 290 Guardar todo, comando 291 Guardar, comando 127 gua introductoria (por dnde empezar) 35 guas visuales imagen de rastreo 134 introduccin 133 reglas 134
H

HomeSite 206 HTML aplicar formato 297 buscar 322 espacio indivisible 299 estilos de etiquetas 311 insertar 297 HTML, archivos importar 128 HTML, formularios. Vase formularios
I

head, editar contenido de la seccin 135 Hipervnculo, cuadro de dilogo 449 Historial, panel automatizar tareas con 136 borrar la lista de historial 62 copiar y pegar pasos 139 crear comandos a partir de pasos de historial 140 introduccin 61 nmero mximo de pasos, configurar 62 pasos, aplicar a otros objetos 138 repetir pasos 137 hojas de estilos editar 317 Editar hoja de estilos, cuadro de dilogo 318 editar hojas de estilos externas 317 externas 316 introduccin 311 Vase tambin estilos hojas de estilos externas crear 316 editar 317 vincular con 316

IBM WebSphere 149 If, etiqueta personalizada (ASP.NET) 766 imagen de rastreo 134 Imagen de sustitucin, campo de texto 331 imgenes acerca de 325 alinear 302 aplicar comportamientos a 332 cambiar archivo de origen con lneas de tiempo 432 carga previa (comportamiento) 399 como activos. Consulte activos convertir en dinmicas 573 editar 331 editores de imgenes externos 331 escalabilidad 330 formatos admitidos 325 insertar 326 insertar en vista Disposicin 271 intercambiar (comportamiento) 409 mapas de imagen 459 restaurar intercambiadas (comportamiento) 410 imgenes de espaciador preferencias 277 imgenes de sustitucin 330 crear 331 crear un vnculo 331 importar archivos HTML de Word 128 datos de tabla 298 hoja de estilos CSS externa 317 sitios 101 texto desde otros documentos 298 Importar datos de tabla, comando 251 importar etiquetas JSP 204 importar etiquetas personalizadas 203 Importar HTML de Word, comando 128 ndice de la Ayuda 28 ndice Z, opcin (para capas) cambiar orden de apilamiento 424

ndice alfabtico 783

Inferior absoluta, alineamiento (inspector de propiedades de imagen) 329 Inferior, alineamiento (inspector de propiedades de imagen) 329 informes 117 flujo de trabajo 117 Protegido por 117 Informes, comando 517 Inicio de un editor de imgenes externo 332 Insercin de un marcador de posicin de imagen 327 Insert, etiqueta personalizada (ASP.NET) 766 insertar activos 467 applets de Java 364 botn Flash, objetos 354 caracteres especiales 305 controles ActiveX 363 elementos multimedia 351 fechas 304 imgenes 326 imgenes de Fireworks en Dreamweaver 338 imgenes de sustitucin 331 Pelculas Flash 359 Pelculas Shockwave 359 server-side includes 244 texto Flash, objetos 357 insertar activos. Consulte activos Insertar barra de navegacin, cuadro de dilogo 458 Insertar campo de imagen, comando 646 Insertar datos de tabla, comando 251 Insertar men de salto, cuadro de dilogo 455 Insertar punto de fijacin con nombre, cuadro de dilogo 447 Insertar registro, comportamiento 683 Insertar vnculo de correo electrnico, cuadro de dilogo 449 Insertar, barra 48, 213 acoplar 57 categoras 55 introduccin 54 preferencias 56 Inspector de cdigo 193 inspector de etiquetas 215 inspector de imagen 459 Inspector de propiedades mostrar 57 inspector de propiedades 48, 237 ampliar 57 convertir atributos HTML en contenido dinmico 575

editar un juego de registros 539, 578 reparar vnculos rotos 516 vista Estndar 576 vista Lista 576 inspectores abrir y cerrar con la barra del lanzador 52 inspector de imagen 459 inspector de propiedades 57 Vase tambin paneles integracin con BBEdit (slo Macintosh) 206 integracin de Dreamweaver y Contribute 713 Integracin de Dreamweaver y Fireworks actualizar HTML de Fireworks 343 crear lbumes de fotos Web 344 ejecutar y editar imgenes en Fireworks 340, 347 Ejecutar y editar, preferencias 338 ejecutar y optimizar imgenes en Fireworks 341 insertar archivos de Fireworks 338 Optimizar imagen en Fireworks, comando 341 Integracin de Fireworks y Dreamweaver. ConsulteIntegracin de Dreamweaver y Fireworks integrar Dreamweaver con otras aplicaciones 62 interactividad 32 Intercambiar imagen, accin 409 introduccin a Dreamweaver 27 ir a una pgina detalle 672 a una pgina relacionada 676 Ir a pgina Detalle, comportamiento 661, 672 Ir a pgina Relacionada, comportamiento 677 Ir a un fotograma en la lnea de tiempo, accin 410 ir a una pgina detalle 672 Ir a URL, accin 395 Ir, asociar botn a un men de salto 396 ISP 176 Izquierda, alineamiento (inspector de propiedades de imagen) 329
J

Jakarta Tomcat 149 jar, archivos 204 JavaScript acciones 382 alertas 398 archivos 128 comportamientos 381 ejecutar 387 insertar scripts 242

784 ndice alfabtico

JavaScript, depurador 229 cuadro de advertencia 230 entrar, salir, pasar 233 errores de lgica 232 errores de sintaxis 231 establecer puntos de corte 232 lista de variables 234 ventana 232 ver variables 234 JavaServer, pginas conjunto de resultados, definicin 534 JavaBeans 566 variables JSP 566 JDBC controladores 182 parmetros de conexin 183 JDBC-ODBC de Sun, controlador puente 185 JPEG, imgenes como imgenes de rastreo 134 usos para 325 JRun 149, 205 JSP 149 conexiones de base de datos 181 importar etiquetas 204 Juego de pginas Maestro/Detalle, objeto Live 659 juego de registros columnas, definir (SQL) 752 copiar y pegar 569 crear un cach 568 definir sin SQL 555 editar o eliminar 568 Elementos de base de datos, rbol 558 en una pgina de resultados 667 en una pgina detalle 662 escribir SQL 751 filtrar registros (SQL) 753, 756 introduccin 554 Juego de registros, cuadro de dilogo (sencillo) 556 limitar los registros devueltos (SQL) 753 unir tablas (SQL) 757 Juego de registros, cuadro de dilogo avanzado 556 sencillo 556 juegos de registros sencillos, crear 555 SQL, escribir declaraciones personalizadas 556

lector de pantalla Window Eyes 366 lectores de pantalla JAWS for Windows 366 lectura, permisos en servidores 731 Limpiar HTML, comando 223 Lnea de base, alineamiento (inspector de propiedades de imagen) 329 lneas de tiempo adjuntar un comportamiento 385 aadir objetos a 429 aadir y eliminar fotogramas 431 cabezal de reproduccin 428 cambiar archivo de origen de imagen 432 cambiar nombre 434 cambiar propiedades de capa 432 controlar con comportamientos 435 crear 429 crear bucles 431 cuadros clave 429 modificar 431 mltiples 432 reproducir automticamente 431 reproducir y detener con comportamientos 411 rutas complejas 430 sugerencias de animacin 434 Lneas de tiempo, panel 428 lista de variables 234 lista del sitio, actualizar 466 Lista, vista del inspector de propiedades 576 Lista/men dinmico, cuadro de dilogo 650 listas crear 304 listas de desplazamiento 642 Live Data, ventana Actualizar automticamente 529 archivos no presentes 527 descripcin 526 introduccin 538 parmetros de URL de la barra de herramientas 528, 538 proporcionar parmetros esperados 528 Llamar JavaScript, accin 387 llaves, equilibrar 224 localhost 154 localizar un registro especificado 674

ndice alfabtico 785

Mac OS, paleta de colores 131 Macromedia Director, crear pelculas Shockwave con 359 Macromedia Exchange 67, 611 Macromedia HomeSite 206 Macromedia JRun 149, 205 macros (crear comandos) 140 manejadores de eventos. Consulte eventos mantener informacin de estado 676 map, etiqueta 460 mapas de bits, cambiar tamao 330 Vase tambin imgenes mapas de imagen crear del lado del cliente 460 introduccin 459 seleccionar mltiples zonas interactivas 460 zonas interactivas 460 mapas de imagen del lado del servidor 459 mapas del sitio 94 aadir archivos a un sitio 98 cambiar vnculos en 453 eliminar vnculos en 453 guardar como archivo de imagen 100 mostrar archivos dependientes en 100 ver una rama de 100 Vincular a nuevo archivo, comando 98 vnculos 453 marcadores de parmetro 624 marcadores para elementos invisibles 133 marcos 281294 anidados 287 cambiar contenido 293 cambiar el color de fondo 291 compatibilidad con navegadores 293 comportamientos, utilizar con 294 crear 285, 286 definicin 282 eliminar 287 establecer destino 293 guardar 290 introduccin 281 panel 288 pasos para crear 285 propiedades 291 seleccionar 288 utilizar vnculos 293 Marcos, panel 288 material de referencia 41

Medio absoluta, alineamiento (inspector de propiedades de imagen) 329 Medio, alineamiento (inspector de propiedades de imagen) 329 Mensaje emergente, accin 398 men de encabezado de columna 276 Men de salto Ir, accin 396 Men de salto, accin 395 men emergente crear 644 mens contextuales 52, 53 mens de acceso directo Consulte mens contextuales mtodos abreviados, editar 64 Microsoft Excel, importar archivos 251 Microsoft Word abrir archivos 128 modificar bases de datos, utilizar procedimientos almacenados 691 propiedades de pgina 129 mostrar capas 424 imagen de rastreo 134 mltiples registros 586 Mostrar archivos dependientes, opcin 100 mostrar elementos invisibles 133 Mostrar etiquetas de tabla de disposicin, opcin 267 Mostrar Lanzador en barra de estado, opcin 60 Mostrar regin, comportamiento 585 Mostrar-Ocultar capas, accin 403 Mover a registro, comportamiento 584 Mover a un registro concreto, comportamiento 674 MPEG, pelculas como activos. Consulte activos muestras de color 130 multimedia. Consulte elementos multimedia multiusuario, sistemas 68 MySQL 189
N

navegadores archivos compatibles con 3.0 427 colores seguros 131 compatibilidad, planificar 70 comprobar compatibilidad 510 comprobar versiones 388 establecer destino 510 principal, definir 513 vista previa en 512 y estilos CSS 320 negrita 300 .NET Framework 148

786 ndice alfabtico

niveles de autorizacin 708 no vlidas, etiquetas mostrar 210 nombres de usuario almacenar 702 comprobar durante la conexin 707 comprobar exclusividad 704 permitir que los usuarios elijan 703 nuevas funciones de Dreamweaver 37 Nuevo desde plantilla, comando 127, 496 Nuevo documento, cuadro de dilogo 123
O

ortografa comprobar 321 diccionarios 321 Ortografa, comando 321

P

objetos aadir Design Notes 115 casillas de verificacin y botones de opcin 639 convertir en dinmicos 577 insertar con la barra Insertar 54 objetos de servidor ColdFusion, variables 565 objetos de aplicacin 563 objetos de sesin 561 objetos Live Barra de navegacin por juego de registros 582 Estado de navegacin por juego de registros 589 Formulario de actualizacin de registros 685 Formulario de insercin de registro 680 Juego de pginas Maestro/Detalle 659 Obtener ms comportamientos, comando 386 obtener y colocar archivos 105 Obtener, comando 105 ocultar 109 vnculos 585 ocultar elementos invisibles 133 Ocultar men emergente 408 ODBC ver controladores instalados 747 OLE DB 175 OLE DB, cadena de conexin 165 OLE DB, parmetros de conexin 165 OLE DB, proveedores 164 Omitir diferencias de espacios en blanco, opcin 323 onBlur, evento 412 opciones de acceso 77 opciones de visualizacin fuentes 64 paneles flotantes 60 Optimizar imagen en Fireworks, comando 341 orden de apilamiento cambiar con lneas de tiempo 432 capas 424

pgina de actualizacin, crear 683 pgina de borrado, crear 688 pgina de insercin, crear 680 pgina de registro 701 pgina principal, establecer 99 pginas actualizar 683 bsqueda 666 cambiar el ttulo 129 cambiar su tamao para que quepan en el monitor 50 color 129 colores predet. de texto 131 conexin 705 de borrado 688 de muestra 72 Design Notes 113 detalle 672 imagen de fondo 129 insertar 680 registro de usuarios 701 relacionadas 676 restringir el acceso 708 resultados 667 tamao 516 tiempo de descarga estimado 516 vista previa en navegadores 512 pginas de conexin 705 pginas de muestra 72 pginas de resultados ir a una pgina detalle 672 utilizar un juego de registros avanzado 669 utilizar un juego de registros simple 667 pginas detalle crear un vnculo con 672 localizar un registro especificado 662, 674 pginas Maestro/Detalle 672 pginas relacionadas 676 paletas de colores 130 panel Sitio, Consulte Sitio, panel 84 panel Vinculaciones borrar fuentes de datos 568 paneles abrir y cerrar con la barra del lanzador 52 acoplar 57

ndice alfabtico 787

Activos, categora Plantillas del panel 470 Activos, panel 469 barra del lanzador 52 configurar preferencias de paneles flotantes 60 Historial, panel 61 panel Comportamientos 382 Respuestas 62 Parameter, etiqueta (ASP.NET) 769 Parameters, etiqueta (ASP.NET) 769 parmetros (plantillas) 483 parmetros de conexin 183 Parmetros, cuadro de dilogo 577 prrafo 299 salto de lnea 299 prrafos aplicar formato 302 pegar pasos de historial 139 Pelculas Flash insertar 359 introduccin 354 pelculas QuickTime insertar 362 Pelculas Shockwave insertar 359 introduccin 359 pelculas, insertar 351 permisos en servidores 731 personalizar barra del lanzador 60 Dreamweaver aspectos bsicos 63 PHP 150 conexiones de base de datos 189 Mac OS X 146 pxeles transparentes en el fondo 129 planificar 69 activos 73 marcos 283 planificar la navegacin de un sitio 73 plantilla, parmetros de 483 plantillas 127, 506 Activos, panel 470 actualizar documentos 504 actualizar Dreamweaver 4 504 actualizar sitios de Contribute 730 anidar 500 aplicar a documento 471 aplicar a un documento existente 503 atributos de etiqueta editables 482, 492

cambiar nombre 471 como activos. Consulte activos comprobar sintaxis 505 convertir una regin en no editable 489 crear 486 crear documentos nuevos con 127, 496 crear para sitios de Contribute 716 crear regiones editables 488 editar 470 editar cdigo fuera de las etiquetas HTML 483 editar scripts de servidor en documentos 483 hacer clic en regiones bloqueadas 485 introduccin 481 localizar regiones editables 497 modificar propiedades 497 regin opcional 482, 494 regin repetida 482, 489 regiones editables 482 regiones editables y bloqueadas 482 separar documento de 503 vnculos 483 XML 505 plantillas anidadas 500 plug-ins comprobar 390 convertir en dinmicos 577 reproducir en la ventana de documento 362 solucionar problemas 363 plug-ins de Netscape Navigator reproducir en la ventana de documento 362 solucionar problemas 363 PNG, imgenes como imgenes de rastreo 134 usos para 325 Predeterminado (Predeterminado por el navegador), alineamiento (inspector de propiedades de imagen) 329 preferencias actualizar vnculos 451 barra de estado 51 barra Insertar 56 capas 418 Colores de cdigo 198 diccionario ortogrfico 321 Disposicin, vista 279 editores externos 352 Ejecutar y editar 338 Formato de cdigo 195 Fuentes/codificacin 64 generales 63

788 ndice alfabtico

introduccin 63 Paneles 60 paneles flotantes 60 Reescritura de cdigo 197 Sitio 87 Sugerencias para el cdigo 197 Tipos de archivo/editores 352, 353 Validador 199 Vista previa usando el servidor local (vnculos relativos a la raz) 443 prefijo de URL 153 Primeros pasos introduccin 28 privilegios de acceso almacenar en una base de datos 709 aadir a pginas 709 ejemplo 708 Procedimiento almacenado (ColdFusion), opcin 691 procedimientos almacenados crear un objeto de procedimiento almacenado 691 modificar bases de datos 691 procesadores de texto, archivos creados con 128 propiedades cambiar con comportamientos 388 capas 422 celda de disposicin 274 columna, fila y celda 254 conjunto de marcos 292 de documento, configurar 129 marco 291 mostrar 57 mltiples capas 423 tabla 254 tablas de disp. 274 propiedades de pgina cambiar ttulos 129 Propiedades de plantilla, cuadro de dilogo 499 Propiedades del vnculo de datos 165 proporcin, mantener 330 Proteger archivo(s) 86 Punto de fijacin con nombre, comando 447 Punto de fijacin, objeto (barra Insertar) 447 puntos de corte en el depurador JavaScript 232 puntos de fijacin con nombre 447 crear 447

Quick Tag Editor 238 QuickTime, pelculas como activos. Consulte activos quitar filas y columnas 258 Quitar fotograma, comando 429 Quitar la marca de regin editable, comando 489 Quitar lnea de tiempo, comando 432
R

recoger datos de los usuarios 666 recuperar versiones anteriores de los archivos 729 recursos informativos sobre tecnologas Web 41 Referencia, panel 221 regin opcional (plantillas) 482, 494 regin repetida aadir entrada 499 editar regin 499 eliminar entrada 499 regin repetida (plantillas) 482, 489 alternar colores 491 crear 490 regiones ocultar 585 regiones bloqueadas hacer clic en 485 regiones editables crear 488 eliminar 489 regiones editables (plantillas) 482 Registrar ruta de capa, comando 430 registros actualizar 683 crear un contador 588 eliminar 688 insertar 680 mostrar varios 586 vnculos de navegacin 582 reglas 134 reglas de codificacin 622 reglas horizontales, insertar y modificar 305 relativas a la raz del sitio, rutas. Consulte rutas relativas a la raz relativas a la raz, rutas definir 444 introduccin 442 Vista previa usando el servidor local, preferencia 443

ndice alfabtico 789

relativas al documento, rutas definir 444 introduccin 440 Relleno de celda, opcin (Insertar tabla) 250 Rep. autom., opcin 428 Rep. Autom., opcin (panel Lneas de tiempo) 429 repetir pasos 136 Repetir regin, comportamiento 586 Reproducir lnea de tiempo, accin 411 reproducir objetos Flash 357 Reproducir sonido, accin 398 Reproducir, botn 137 requisitos aplicaciones Web 146 Respuestas, panel 62 Restablecer origen, comando 134 Restablecer posicin, comando 135 restaurar archivos en sitios de Contribute 729 Restaurar imagen intercambiada, accin 410 restringir el acceso al sitio 701 restringir tablas 530 retorno 299 reutilizar buscar 219 elementos de biblioteca 477 revisar paso a paso el cdigo 233 revisin de la ortografa 321 Roundtrip HTML 210 Rueda de color (Colores del sistema), botn 131 ruta fsica 176 ruta virtual 176 rutas absolutas 440 relativas a la raz 442 relativas al documento 440
S

salto, mens de aadir mens de salto 455 botones Ir 396 cambiar elementos de men 456 crear un mensaje de seleccin para 455 editar 395 Ir, aadir automticamente botones 455 scripts como activos. Consulte activos editar externos 242 introducir 242 llaves equilibradas 224 ver funciones 216

Secure Shell 78 seguridad 701 seleccionar capas 420 celdas y tablas de disp. 273 marcos y conjuntos de marcos 288 objetos en la ventana de documento 132 Seleccionar remoto ms reciente, comando 108 selector de color Dreamweaver 130 sistema 131 Selector de etiquetas 214 selector de etiquetas 48, 241 Separar de plantilla, comando 503 Separar del original, opcin 479 server-side includes 243 editar 245 insertar 244 servicios de alojamiento Web 176 servicios Web aadir a una pgina 608 directorios UDDI 602 flujo de trabajo 603 generador proxy AXIS 604 generadores proxy, adicionales 604 generadores proxy, configurar 605 generadores proxy, instalar 604 introduccin 601 lista de sitios UDDI, editar 610 SOAP 603 servidor de aplicaciones configurar 147 elegir 147 servidor de prueba 152 configurar 147 servidor HTTP 147 servidor Web configurar 147 servidores definir sitios remotos 77 opciones de acceso 77 solucionar problemas de configuracin 79 servidores de aplicaciones solucionar problemas de errores 154 Shockwave, convertir en dinmico 577 Shockwave, pelculas como activos. Consulte activos controlar 391 sincronizar sitios local y remoto 108 sistemas operativos, multiusuario 68

790 ndice alfabtico

Sitespring 118 sitio de Dreamweaver 150 Sitio, panel 48, 84 Archivos del sitio 85 buscar archivos 93 buscar texto y/o HTML dentro de los documentos 322 cambiar visualizacin 90 Colocar, comando 107 columnas 88 explorar archivos 94 mapas del sitio 94 Obtener, comando 105 opciones de la barra de herramientas 85 ver sitios 89 vista Mapa del sitio 85 Sitio, preferencias 87 Sitio, ventana buscar texto 322 sitios activos grandes en 473 aadir archivos y carpetas 92 archivo de cach 452 buscar archivos 93 buscar archivos en 322 cach 451 cambiar vnculos en todo el sitio 454 cambiar visualizacin 90 compatibilidad con navegadores 70, 510 comprobar 509 comprobar vnculos 513 definir un sitio dinmico 150 Design Notes 113 desproteger y proteger archivos 103 disear y planificar 69 editar 80 ejecutar informes 117 estructura y navegacin 83 importar y exportar 101 locales y remotos 74 locales, crear, configurar 74 material de referencia 41 obtener informes 517 ocultar archivos 109 planificar la estructura 71 planificar la navegacin 73 quitar de la lista de sitios 101 remotos 77 remotos, buscar archivos en 93 remotos, opciones de acceso 77

remotos, solucionar problemas de configuracin 79 reparar vnculos rotos 515 seguridad 701 seleccionar archivos actualizados 92 vnculos 439 vista previa en navegadores 512 sitios locales Consulte sitios 74 sitios, disear 69 situar bloques de cdigo 622 SO Windows, paleta de colores 131 SOAP y servicios Web 603 solapadas, etiquetas 210 solucionar problemas archivos bloqueados en sitios de Contribute 732 compatibilidad con Contribute, activar 722 Contribute 724, 732 desproteger y proteger en sitios de Contribute 732 errores de servidor 154 estilos que no aparecen correctamente en Contribute 731 hacer clic en regiones bloqueadas 485 plug-ins de Navigator 363 transferir archivos 107 vnculos rotos en Contribute 732 sonido 360362 aadir a una pgina 360 reproducir 398 SQL 751 ASP.NET 557 columnas, definir 752 DELETE 751 Elementos de base de datos, rbol 558 filtrar registros 753, 756 FROM 752 GROUP BY 752 INSERT 751 juego de registros, definir con SQL 556 limitar registros 753 operadores 752 ORDER BY 752 SELECT, declaracin 751 unir tablas 757 UPDATE 751 WHERE 752 SSH 78 subrayado 300 Sugerencias para el cdigo 211 preferencias 197

ndice alfabtico

791

Superior, alineamiento (inspector de propiedades de imagen) 329 Sustitucin de un marcador de posicin de imagen 328
T

tabla de repeticin (plantillas) 491 tablas 647 ajustar filas y columnas 256 aadir contenido a 250 aadir y quitar filas y columnas 258 anidar 260 aplicar formato 253 borrar ancho y alto de celda 257 cambiar ancho de columna 257 cambiar tamao 256 celdas, dividir 260 columnas, filas y celdas 254 combinar celdas 259 convertir capas 426 crear 250 datos de tabla, importar 298 diseos predefinidos para 255 exportar datos 262 importar 251 introduccin 249 ordenar 262 propiedades 254 restringir 530 seleccionar elementos 251 Vase tambin columnas, filas y celdas tablas de disp. alineamiento 274 aplicar formato 274 color de fondo 274 espaciado de celdas 274 relleno de celdas 274 tablas de disposicin 266 anidadas 269 borrar altos 274 dibujar 267 Igualar ancho de celdas, opcin 274 preferencias 279 Quitar anidacin, opcin 274 Quitar todos los espaciadores, opcin 274 Tachar (Color predeterminado), botn 131 Tamao de ventana, men emergente 50 tamao del monitor, cambiar tamao de pginas para ajustar 50 Tamaos de ventana, opcin 51

texto alineamiento 302 aadir a un documento 298 anular sangra 303 aplicar formato 297, 299 aplicar formato con estilos HTML 306 buscar en documentos 322 cambiar color de 303, 467 cambiar combinaciones de fuentes 301 colores predet. en pginas 131 convertir en dinmico 572 editores externos. Consulte editores externos espacio indivisible 299 importar desde otros documentos 298 insertar 297 sangrar 303 Texto Flash, cuadro de dilogo 357 texto Flash, objetos insertar 357 vista previa 357 Texto Superior, alineamiento (inspector de propiedades de imagen) 329 tiempo de descarga 50 tipogrficas, convenciones 37 tipos de archivo Archivos Flash 354 Tipos de archivo/editores, preferencias 207, 353 ttulos cambiar 129 tld, archivos 204 Tono continuo, paleta de colores 131 transferir archivos desde y hacia sitios de Contribute 728 transferir archivos, solucionar problemas 107 transparentes, pxeles en el fondo 129
U

UDDI directorios pblicos 602 lista de sitios, editar 610 UltraDev 4 145 UltraDev 4 ColdFusion, conexin 159 Update, etiqueta personalizada (ASP.NET) 767 URL aplicar a seleccin 468, 469 como activos. Consulte activos crear activos de URL 474 URL. Consulte rutas URL de raz del sitio, opcin 715 Usar expresiones regulares, opcin 323 usemap, atributo 460

792 ndice alfabtico

Uso de sus estilos HTML en otros sitios 311 Utilizacin de hojas de estilos de tiempo de diseo 318 Utilizacin de un editor de imgenes externo 331 Utilizacin del panel Estilos CSS 312 utilizar informes para comprobar un sitio 517
V

Validador 225 preferencias 199 Validar formulario, accin 412 variables de aplicacin 563 variables de sesin 561 datos, almacenar 549 datos, recuperar 551 introduccin 546 y parmetros de formulario 549 y parmetros de URL 548 VBScript 242 Velocidad de conexin, opcin 51 ventana de documento 48 abrir documentos nuevos 125 aspectos bsicos 49 barra de estado 49 barra de ttulo 49 buscar texto 322 cambiar tamao 50 documentos existentes, abrir 128 marcos en 290 men emergente Tamao de ventana 50 reproducir plug-ins de Navigator 362 seleccionar elementos 132 selector de etiquetas 50 tamao del documento y tiempo de descarga 50 ver cdigo 49 ventanas Vase tambin inspectores, paneles ver contenido de head 135 elementos invisibles 133 plantillas en la vista Diseo 484 plantillas en vista Cdigo 485 regiones de plantilla en vista Cdigo 486 Verificador de vnculos, cuadro de dilogo 515 Vinculaciones, panel aadir texto dinmico 572 columna Formato 580 convertir atributos HTML en contenido dinmico 575 crear un contador de registros 590 formularios dinmicos 649

vincular a hoja de estilos CSS externa 317 con punto de fijacin con nombre mediante icono de sealizacin de archivo 448 con un documento mediante el icono de sealizacin de archivo 445 documentos 444 puntos de fijacin 447 Vincular a archivo existente, comando 98 Vincular a nuevo archivo, comando 98 Vincular hoja de estilos externa, cuadro de dilogo 317 vnculo 443 vnculo href 317 vnculos abrir origen 453 actualizar 451 aplicar a seleccin 468, 469 archivo de cach 451 cambiar en todo el sitio 454 cambiar marcos con 293 comprobar 513 con documentos 443 con hojas de estilos 316 con puntos de fijacin 447 eliminar 453 en plantillas 483 establecer destino 443 mapa del sitio 453 ocultar 585 Relativa a la raz del sitio, opcin 444 Relativa al documento, opcin 444 reparar 515 Vnculos activos, opcin de color (Prop. de la pgina) 131 vnculos de correo electrnico cambiar 454 crear 449 vnculos de hipertexto 443 vnculos de navegacin por registros 582 vnculos de script cambiar 454 crear 450 vnculos externos 514 vnculos nulos cambiar 454 crear 450 vnculos rotos 514 Vnculos visitados, opcin de color (Prop. de la pgina) 131 Vista previa en el navegador, comando 512

ndice alfabtico 793

vista previa en navegadores introduccin 512 Vista previa usando el servidor local, comando 443
W

web.xml 205
X

XHTML, hacer pginas compatibles 225 XML 226, 505 en plantillas 505 introduccin 505 notaciones de etiquetas al exportar 506 XML DTD, archivos 204
Z

zonas interactivas aplicar comportamientos a 332 cambiar tamao 461 en mapas de imagen 460 seleccionar mltiples en un mapa de imagen 460

794 ndice alfabtico