macromedia

DREAMWEAVER 2

Usando Dreamweaver

macromedia

Marcas comerciales Macromedia, el logotipo de Macromedia, el logotipo Made With Macromedia, Authorware, Backstage, Director, Extreme 3D y Fontographer son marcas registradas y Afterburner, AppletAce, Authorware Interactive Studio, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, DECK II, Director Multimedia Studio, Doc Around the Clock, Extreme 3D, Flash, FreeHand, FreeHand Graphics Studio, Lingo, Macromedia xRes, MAGIC, Power Applets, Priority Access, SoundEdit, Shockwave, Showcase, Tools to Power Your Ideas y Xtra son marcas comerciales de Macromedia, Inc. Los nombres de otros productos, logotipos, diseos, ttulos, palabras o frases mencionados en esta publicacin pueden ser marcas comerciales, marcas de servicio o marcas registradas de Macromedia, Inc. o de otras entidades que podran estar registradas en determinadas jurisdicciones. Descargos de Apple APPLE COMPUTER, INC. NO OFRECE NINGUNA GARANTA, YA SEA EXPRESA O IMPLCITA, PARA EL PAQUETE DE SOFTWARE DE ORDENADOR ADJUNTO NI EN LO QUE SE REFIERE A SU COMERCIABILIDAD O ADECUACIN PARA FINES CONCRETOS. LA EXCLUSIN DE GARANTAS IMPLCITAS NO EST PERMITIDA EN ALGUNOS ESTADOS, POR LO QUE LA ANTEDICHA EXCLUSIN PODRA NO RESULTAR APLICABLE. ESTA GARANTA LE OTORGA DERECHOS LEGALES ESPECFICOS, AUNQUE PUEDE QUE TAMBIN DISFRUTE DE OTROS DERECHOS EN FUNCIN DEL ESTADO EN QUE RESIDA. Copyright 1999 Macromedia, Inc. Todos los derechos reservados. Este manual no puede copiarse, fotocopiarse, reproducirse, traducirse ni convertirse a ningn formato electrnico legible mediante mquina, ya sea en su totalidad o parcialmente, sin el permito previo y por escrito de Macromedia, Inc. Nmero de pieza ZDW20M100SP Crditos Jefa del proyecto y responsable de la arquitectura de contenidos: Sheila McGinn Redaccin: Lori Hylan, Corinne Chandel, Denise Lee, Erica Edmonds y Sheila McGinn Diseo multimedia: James Khazar Produccin multimedia: John Zippy Lehnus y Pat Knoff Ingeniera de la ayuda: Lori Hylan Diseo del sitio del curso prctico: Akimbo Design Ingeniera Java: Eric Harshbarger Edicin: Judy Walthers von Alten y Judy Ziajka Jefa de produccin: Gemma Londono Diseo de impresin y ayuda: Noah Zilberberg Produccin: Noah Zilberberg y Paul Benkman Localizacin: Kristin Conradi Nuestro agradecimiento especial para Margaret Dumas, Paul Madar, Heidi Bauer, nj, Mike Sundermeyer, Jean Fitzgerald, David George, Karen Olsen-Dunn, Peter Fenczik, Ben Melnick, Karen Catlin, Scott Richards, Raymond Lim, Peter von dem Hagen, Mara Tuttle, Zena Harvill, Jordi Masfarne, Andres Gibson, Linda Page, Janice Pearce, Sami Kaied, Richard Verdoni y Rubric Inc.

Primera edicin: diciembre de 1998 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

CONTENIDO

CAPTULO 1 Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Novedades de Dreamweaver 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Requisitos del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Instalar Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Introduccin a los materiales de aprendizaje . . . . . . . . . . . . . . . . . . . . .13 CAPTULO 2 Curso prctico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Introduccin al curso prctico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 Denir un sitio local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 Editar la pgina principal de Olivebranch . . . . . . . . . . . . . . . . . . . . . . .23 Crear un diseo de pgina complejo . . . . . . . . . . . . . . . . . . . . . . . . . . .34 Editar una tabla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Formatear texto usando estilos personalizados . . . . . . . . . . . . . . . . . . . .51 Aplicar una plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53 Adjuntar comportamientos a los elementos de una pgina. . . . . . . . . . .64 Agregar una pelcula Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67 Comprobar el sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 CAPTULO 3 Para comenzar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Introduccin al uso del programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71 Congurar preferencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 Usar Dreamweaver con otras aplicaciones . . . . . . . . . . . . . . . . . . . . . . .79

CAPTULO 4 Crear documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Introduccin a la creacin de documentos . . . . . . . . . . . . . . . . . . . . . .81 Crear documentos HTML nuevos . . . . . . . . . . . . . . . . . . . . . . . . . . . .82 Usar guas visuales en el proceso de diseo . . . . . . . . . . . . . . . . . . . . . .83 Agregar texto e insertar objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86 Seleccionar elementos en la ventana de documento . . . . . . . . . . . . . . .88 Congurar documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 Elegir colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92 Ver y editar el contenido de HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . .93 CAPTULO 5 Usar plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95 Introduccin a las plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95 Crear plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96 Denir las regiones editables de una plantilla . . . . . . . . . . . . . . . . . . . .97 Crear documentos basados en plantillas . . . . . . . . . . . . . . . . . . . . . . .103 Modicar plantillas y actualizar el sitio . . . . . . . . . . . . . . . . . . . . . . . .104 Importar y exportar contenido XML. . . . . . . . . . . . . . . . . . . . . . . . . .105 CAPTULO 6 Planificar sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Introduccin a la planicacin de sitios . . . . . . . . . . . . . . . . . . . . . . .107 Crear un sitio local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 Crear vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109 Ver archivos en la ventana Sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118 Trabajar con archivos del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 Crear mapas de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 CAPTULO 7 Administrar sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Introduccin a la administracin de sitios . . . . . . . . . . . . . . . . . . . . .129 Denir un sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130 Opciones de la ventana Sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132 Usar el sistema de desproteccin/proteccin . . . . . . . . . . . . . . . . . . . .134 Buscar y reemplazar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138 Administrar vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146 Comprobar el sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149

Contenido

CAPTULO 8 Usar Roundtrip HTML. . . . . . . . . . . . . . . . . . . . . . . . . 155 Introduccin a Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . .155 Inspector de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157 Congurar los controles de formato del cdigo fuente HTML . . . . . .157 Limpiar cdigo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161 Corregir cdigo no vlido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162 Usar otros editores HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162 Insertar secuencias de comandos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165 Insertar comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 CAPTULO 9 Formatear texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Introduccin a las opciones de formato de texto . . . . . . . . . . . . . . . . .167 Aplicar formato al texto con hojas de estilo . . . . . . . . . . . . . . . . . . . .168 Crear listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173 Aplicar formato al texto con hojas de estilo . . . . . . . . . . . . . . . . . . . .174 Convertir estilos CSS a formato HTML . . . . . . . . . . . . . . . . . . . . . . .182 Comprobar la ortografa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184 CAPTULO 10 Insertar imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Introduccin a la insercin de imgenes . . . . . . . . . . . . . . . . . . . . . . .185 Insertar una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186 Crear una imagen dinmica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187 Congurar propiedades de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . .188 Usar un editor de imgenes externo . . . . . . . . . . . . . . . . . . . . . . . . . .192 Crear mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193 CAPTULO 11 Crear tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Introduccin a las tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195 Crear tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196 Aplicar formato a tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199 Ordenar tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205 Cambiar el tamao de tablas y celdas . . . . . . . . . . . . . . . . . . . . . . . . .206 Agregar y eliminar las y columnas . . . . . . . . . . . . . . . . . . . . . . . . . .207 Copiar y pegar celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210

Contenido

CAPTULO 12 Usar capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Introduccin al uso de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213 Crear capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214 Usar la paleta de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220 Trabajar con capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220 Mover capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 Cambiar el orden de apilamiento de las capas . . . . . . . . . . . . . . . . . . .225 Cambiar la visibilidad de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . .225 Usar capas para disear tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Convertir entre exploradores 3.0 y 4.0 . . . . . . . . . . . . . . . . . . . . . . . .228 CAPTULO 13 Usar marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Introduccin al uso de marcos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231 Crear marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232 Seleccionar un marco o un conjunto de marcos . . . . . . . . . . . . . . . . .233 Propiedades de marco y conjunto de marcos . . . . . . . . . . . . . . . . . . .235 Controlar el contenido con vnculos del marco . . . . . . . . . . . . . . . . .240 Crear contenido sin marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .241 CAPTULO 14 Crear formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Introduccin a la creacin de formularios . . . . . . . . . . . . . . . . . . . . . .243 Crear un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244 Agregar un objeto a un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . .245 Procesar formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 CAPTULO 15 Reutilizar elementos de pgina . . . . . . . . . . . . . . . . 249 Introduccin a la reutilizacin de elementos de pgina . . . . . . . . . . . .249 Usar elementos de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250 Usar Server-Side Includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256 CAPTULO 16 Agregar interactividad y animacin . . . . . . . . . . . . 259 Introduccin a la interactividad y la animacin . . . . . . . . . . . . . . . . .259 Introduccin a los comportamientos . . . . . . . . . . . . . . . . . . . . . . . . .260 Usar las acciones de comportamiento incluidas con Dreamweaver . . .264 Animar con HTML dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288 Agregar pelculas, applets y otros elementos multimedia . . . . . . . . . . .299

Contenido

CAPTULO 17 Personalizar Dreamweaver . . . . . . . . . . . . . . . . . . . 309 Introduccin a la personalizacin de Dreamweaver . . . . . . . . . . . . . .309 Cambiar la paleta de objetos y el men Insertar . . . . . . . . . . . . . . . . .310 Editar el perl de formato del cdigo fuente HTML . . . . . . . . . . . . .312 Crear y editar perles de explorador . . . . . . . . . . . . . . . . . . . . . . . . . .313 APNDICE A Mtodos abreviados de teclado . . . . . . . . . . . . . . . 317 Men Archivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317 Men Edicin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318 Editar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318 Formatear texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319 Buscar y reemplazar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320 Trabajar con tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320 Trabajar con marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .321 Trabajar con capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .321 Trabajar con lneas de tiempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322 Trabajar con imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323 Administrar hipervnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323 Establecer destino y obtener vista previa en exploradores . . . . . . . . . .324 Administracin de sitio y FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324 Mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325 Reproducir plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325 Ver elementos de pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 Trabajar con plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 Insertar objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 Abrir y cerrar ventanas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327 Obtener ayuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327 NDICE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

Contenido

Contenido

CAPTULO 1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Introduccin

Dreamweaver es un editor visual profesional para la creacin y administracin de pginas Web. Con Dreamweaver resulta fcil crear pginas compatibles con cualquier explorador y cualquier plataforma. La tecnologa Roundtrip HTML de Macromedia importa documentos HTML sin necesidad de cambiar el formato del cdigo. Dreamweaver tambin permite usar funciones de HTML dinmico, como son las capas y comportamientos animados, sin necesidad de escribir ni una sola lnea de cdigo. El establecimiento de destino de exploradores comprueba el trabajo para averiguar si hay problemas potenciales en las plataformas y los exploradores ms habituales.

Novedades de Dreamweaver 2
Dreamweaver 2 incluye varias funciones nuevas que le permitirn mejorar su productividad durante el desarrollo de sitios Web.
Publicacin de contenido dinmico

Facilita y acelera la publicacin en la Web del

contenido del sitio. Utilice plantillas para separar el contenido del diseo, lo que permitir que el sitio se encuentre disponible en la Web ms rpidamente. Consulte Introduccin a las plantillas en la pgina 95. Vea Server-Side Includes (inclusiones de la parte del servidor) directamente en la ventana de documento. Consulte Usar Server-Side Includes en la pgina 256.
Edicin global del sitio

Permite administrar sitios de gran tamao.

Cree un mapa del sitio visual y jerrquico; le ser de utilidad para presentar su proyecto a los clientes, as como para administrar la estructura del sitio. Consulte Crear mapas de sitios en la pgina 122. Arrastre y suelte archivos o, sencillamente, seale a archivos para crear vnculos. Consulte Crear vnculos en la pgina 109. Use las herramientas de administracin de vnculos para mantenerlos actualizados despus de mover, eliminar o cambiar el nombre de los archivos. Consulte Administrar vnculos en la pgina 146. Use las funciones de bsqueda y sustitucin en mltiples archivos de todo el sitio para realizar cambios globales en el sitio. Aproveche las ventajas que ofrece la funcin de bsqueda y sustitucin apta para HTML que permite localizar etiquetas y atributos HTML. Tambin puede usar expresiones regulares para que las bsquedas sean an ms ecaces. Consulte Buscar y reemplazar en la pgina 138.
Herramientas para creadores grficos

Permite a sus diseadores participar en el

proceso de desarrollo. Use capas para lograr diseos de pginas complejos con la precisin que ofrece la manipulacin de pxeles; puede incluso convertir las capas en tablas para crear pginas compatibles con todos los exploradores. Consulte Usar capas para disear tablas en la pgina 226. Elija un color de cualquier elemento del escritorio y ajstelo al color seguro para la Web ms parecido mediante el cuentagotas seguro para la Web. Consulte Elegir colores en la pgina 92. Use una imagen de rastreo para crear pginas rpidamente a partir del trabajo realizado por un diseador. Consulte Usar una imagen de rastreo en la pgina 85.

10

Captulo 1

Edicin de tablas mejorada

Facilita la creacin de tablas impactantes en HTML.

Corte, copie y pegue fcilmente mltiples celdas, las y columnas. Consulte Copiar y pegar celdas en la pgina 210. Seleccione fcilmente mltiples celdas de una tabla y modique sus propiedades. Consulte Seleccionar elementos de tabla en la pgina 198. Divida cualquier celda de una tabla en mltiples celdas. Consulte Dividir y combinar celdas en la pgina 208. Aplique rpidamente formato a las tablas con diseos predenidos. Consulte Aplicar formato a una tabla con un diseo predenido en la pgina 204. Clasique las tablas numrica o alfabticamente por las o columnas. Consulte Ordenar tablas en la pgina 205.
Funciones de productividad mejorada

Le permite trabajar con mayor rapidez y

ecacia. Personalice el espacio de trabajo combinando las paletas e inspectores en una nica ventana de paleta con chas. Consulte Paletas otantes acoplables en la pgina 76. Cambie instantneamente el tamao de la ventana de documento a las dimensiones predenidas o personalizadas. Consulte Cambiar el tamao de la ventana de documento en la pgina 84. Use los mens de acceso directo para acceder a los comandos que emplee con mayor frecuencia. Consulte Mens de acceso directo en la pgina 75. Vea y manipule el contenido de la seccin HEAD (encabezado) en la ventana de documento. Consulte Ver y editar el contenido de HEAD en la pgina 93. Reproduzca plug-ins directamente en la ventana de documento de Dreamweaver. Consulte Reproducir plug-ins en la ventana de documento en la pgina 305.
Un entorno ampliable Le ofrece la posibilidad de personalizar y ampliar Dreamweaver para adaptarlo a su forma de trabajar. Consulte Introduccin a la ampliacin de Dreamweaver.

Use comandos para editar el documento actual, por ejemplo, para ordenar una tabla o limpiar el cdigo fuente HTML. Escriba sus propios comandos del mismo modo que cualquier objeto o accin de comportamiento. Asigne una representacin visual a las etiquetas personalizadas en la ventana de documento y cree inspectores de propiedades para ellas que permitan congurar sus propiedades fcilmente. Escriba sus propios traductores de datos para ver los resultados del proceso del servidor en la ventana de documento.

Introduccin

11

Requisitos del sistema

Para ejecutar Dreamweaver es preciso disponer del hardware y el software siguientes.
Para Microsoft Windows:

Un procesador Intel Pentium 90 o equivalente que ejecute Windows 95, Windows 98 o Windows NT versin 4.0 o posterior. 16 MB de memoria de acceso aleatorio (RAM), adems de 20 MB de espacio libre en el disco duro. Un monitor en color con capacidad para mostrar una resolucin de 800 x 600 pxeles. Una unidad de CD-ROM.
Para Macintosh :

Un Power Macintosh con System 7.5.5 o posterior. 24 MB de RAM, adems de 20 MB de espacio libre en el disco duro. Un monitor en color con capacidad para mostrar una resolucin de 800 x 600 pxeles. Una unidad de CD-ROM.

Instalar Dreamweaver
Siga estos pasos para instalar Dreamweaver en un sistema Windows o Macintosh.
Para instalar Dreamweaver: 1 2

Introduzca el CD de Dreamweaver en la unidad de CD-ROM del ordenador. Elija las siguientes opciones: En Windows, elija Inicio > Ejecutar. Haga clic en Examinar y elija el archivo Setup.exe del CD de Dreamweaver. Haga clic en Aceptar en el cuadro de dilogo Ejecutar para comenzar la instalacin. En Macintosh, haga doble clic en el icono del instalador de Dreamweaver.

3 4

Siga las instrucciones que aparecen en pantalla. Si el sistema lo solicita, reinicie el ordenador.

12

Captulo 1

Introduccin a los materiales de aprendizaje

El paquete de Dreamweaver contiene diversos materiales que le ayudarn a conocer el programa rpidamente y lograr un buen manejo de ste para crear sus propias pginas Web (entre dichos materiales guran las pginas de ayuda HTML en lnea que aparecen en el explorador, las pelculas Show Me, un curso prctico, un manual impreso y un sitio Web que se actualiza de forma regular. Curso prctico de Dreamweaver El curso prctico (Tutorial) de Dreamweaver es el punto de comienzo ms indicado para aquellas personas que no tengan mucha experiencia en el desarrollo de sitios Web. El curso prctico muestra cmo editar un sitio Web de ejemplo con algunas de las funciones ms tiles y potentes de Dreamweaver. El curso prctico se incluye tanto en la Ayuda de Dreamweaver Help como en el Manual Dreamweaver impreso. Visita guiada y pelculas Show Me La visita guiada (Guided Tour) y las pelculas Show Me de Help Pages de Dreamweaver proporcionan una introduccin con animacin a las funciones principales de Dreamweaver. La visita guiada incluye todas las pelculas Show Me por orden. Tambin puede ver pelculas Show Me concretas en sus correspondientes secciones introductorias. Este icono indica que un tema contiene una pelcula Show Me.

Las pelculas Show Me requieren el plug-in Shockwave Director, que se proporciona en el CD de Dreamweaver. Si adquiri su copia de Dreamweaver electrnicamente, puede descargar el plug-in Shockwave ms reciente del sitio Web de Macromedia, en la direccin http://www.macromedia.com/shockwave/ download/. HTML Help Pages de Dreamweaver HTML Help Pages (pginas de ayuda HTML) de Dreamweaver proporcionan informacin completa sobre todas las funciones de Dreamweaver. Para obtener un resultado ptimo, recomendamos el uso de uno de los siguientes exploradores: Para Windows, recomendamos Netscape Navigator 4.0 o superior o Microsoft Internet Explorer 4.0 o superior. Para Macintosh, recomendamos Netscape Navigator 4.0 o superior. (No recomendamos el uso de Internet Explorer para Macintosh debido a que no permite reproducir las pelculas Show Me.)

Introduccin

13

Si utiliza un explorador 3.0, todo el contenido continuar estando accesible, pero no se encontrarn disponibles algunas funciones (como la funcin Buscar, por ejemplo). Las pginas de ayuda HTML Help Pages de Dreamweaver hacen un uso extensivo de JavaScript. Asegrese de que JavaScript est activado en su explorador. Si tiene intencin de usar la funcin Buscar, asegrese de que tambin est activado Java. Utilice la tabla de contenidos para ver toda la informacin organizada por temas. Haga clic en las entradas de nivel superior para ver otros temas subordinados.
Contenido ndice

Use el ndice de igual forma que un ndice impreso para localizar trminos importantes o acceder a temas relacionados.

Buscar Use la funcin Buscar para localizar cualquier cadena de caracteres en todos los temas. La funcin Buscar requiere un explorador 4.0 con Java activado.

Para buscar una frase, sencillamente escrbala en el cuadro de introduccin de texto.

Para buscar archivos que contengan dos palabras clave (por ejemplo, capas y estilos), separe los trminos de la bsqueda con un signo ms (+).

Vnculos contextuales Haga clic en el botn Ayuda de cualquier cuadro de dilogo

o en el icono de signo de interrogacin de los inspectores, las ventas y las paletas para abrir un tema de ayuda pertinente.
Haga clic aqu para abrir la Ayuda

14

Captulo 1

Barar de exploracin

Use los botones de la barra de exploracin para desplazarse

de un tema a otro. Atrs y Adelante funcionan igual que los botones Atrs y Adelante de un explorador, es decir, le llevan a los temas que acaba de ver.

Anterior y Siguiente permiten acceder al tema anterior o siguiente de una seccin (siguiendo el orden de los temas establecido en el contenido).

Novedades est vinculado a la seccin Dreamweaver Developers Center del sitio Web de Macromedia.

Dreamweaver Developers Center El sitio Web http://www.macromedia.com/support/dreamweaver/Dreamweaver Developers Center se actualiza de forma regular con la informacin ms reciente sobre Dreamweaver, as como con sugerencias de usuarios expertos, informacin sobre temas avanzados, ejemplos, trucos y actualizaciones. Visite este sitio Web con frecuencia para conocer las ltimas noticias sobre Dreamweaver y aprender a sacarle el mximo provecho del programa. Manual de Dreamweaver El libro titulado Manual de Dreamweaver sirve de introduccin al programa Dreamweaver y contiene una versin condensada de la Ayuda de Dreamweaver que omite alguna informacin de referencia sobre opciones del programa.

Introduccin

15

16

Captulo 1

CAPTULO 2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Curso prctico

Introduccin al curso prctico

En este curso prctico se muestra cmo utilizar Dreamweaver para editar y actualizar un sitio Web. Al realizar este curso prctico, editar un sitio Web de una empresa cticia, Olivebranch Gourmet Foods, una granja dedicada a la venta de productos para gourmets. Al visitar el sitio Web de Olivebranch, los clientes tendrn oportunidad de leer la especialidad del da, adems de examinar las ofertas de vinos, quesos, mostazas y aceites que guran en el catlogo en lnea. Los clientes tambin tendrn oportunidad de conocer ms detalles sobre Olivebranch y sobre los eventos que Olivebranch patrocina.

17

A lo largo del curso, aprender a: Obtener una vista previa en un explorador. Denir un sitio local Elegir propiedades de las pginas, como los colores del fondo y de los vnculos. Crear un mapa del sitio Crear vnculos Crear un diseo con capas y convertir las capas en tablas. Usar una imagen de rastreo. Editar una tabla Formatear texto con estilos. Aplicar una plantilla Adjuntar comportamientos. Insertar una pelcula Flash.
Nota: En este curso prctico se demuestran algunas funciones que slo son compatibles con exploradores de versiones 4.0 o superiores.

Visita guiada a Dreamweaver Antes de comenzar, vea las pelculas de la visita guiada (Guided Tour) de Dreamweaver Help Pages para familiarizarse con las funciones de Dreamweaver.
Para ver las pelculas: 1 2

En Dreamweaver, elija Ayuda > Dreamweaver Help Pages. En la lista Contenido del cuadro situado a la izquierda, haga clic en Introduccin y luego en Visita guiada a Dreamweaver. Haga clic en Show Me para ver la visita guiada. Cierre el explorador cuando haya terminado.

3 4

18

Captulo 2

Obtenga una vista previa del sitio Web finalizado. Para ver el sitio de Olivebranch terminado.
Para ver el sitio de Olivebranch finalizado: 1

Para ver el sitio de Olivebranch terminado > Abrir. Acceda a la carpeta de la aplicacin Dreamweaver, abra la carpeta Tutorial y luego la carpeta Olivebranch_site. En la carpeta Olivebranch_site, seleccione index.htm para abrir la pgina principal de Olivebranch en la ventana de documento. No edite esta pgina, ya que est totalmente nalizada. Usted editar una versin alternativa de esta pgina.

Elija Archivo > Vista previa en el explorador y luego seleccione el explorador con el que desea ver la pgina principal de Olivebranch. (Utilice un explorador de la versin 4.0 o superior para ver este sitio.)

Nota: Debe tener Flash Player instalado en su explorador predeterminado para ver las especialidades semanales de la pgina principal de Olivebranch. Si no dispone de Flash Player, localice el instalador en la carpeta Flash del CD de Dreamweaver o descrguelo de http://www.macromedia.com/shockwave/download/. 4

Pase el ratn por encima de los cuatro elementos del lado izquierdo de la pgina (about, events, etc.) y observe que los elementos se resaltan para indicar que son vnculos activos. Haga clic en cualquier de estos elemento para explorar las correspondientes pginas.
Nota: La seccin gift basket del sitio no se utiliza.

Cierre el explorador cuando termine de ver el sitio.

Curso prctico

19

Organizacin de los archivos del Curso prctico Los archivos HTML ya acabados y los parcialmente realizados que se utilizan en este curso prctico se encuentran en la carpeta Olivebranch_site de la carpeta Tutorial. Las imgenes y dems archivos relacionados con la creacin del sitio se encuentran en subcarpetas de Olivebranch_site. (La ruta completa a la carpeta Olivebranch_site puede variar dependiendo del lugar en el que haya instalado Dreamweaver 2.0.) Cada archivo tiene un nombre signicativo; por ejemplo, el archivo HTML para la pgina de eventos patrocinados por Olivebranch se llama events_main.htm. Los archivos parcialmente realizados sobre los que deber trabajar tienen nombres idnticos a los de sus equivalentes del sitio ya acabado, con la diferencia de que comienzan por DW2_; la versin parcialmente realizada de events_main.htm, por ejemplo, se denomina DW2_events_main.htm.

Definir un sitio local

Para comenzar a trabajar con Dreamweaver, deber crear un sitio local. Este sitio dene la estructura de las pginas que va a crear. Un sitio es un lugar de almacenamiento para todos los documentos y archivos pertenecientes a un sitio Web. Un sitio local debe contar con un nombre y una carpeta raz local que indique a Dreamweaver el lugar en el que tiene intencin de almacenar todos los archivos del sitio. Debe crear un sitio local por cada sitio Web con el que trabaje. Para este curso prctico, deber especicar la carpeta Olivebranch_site como carpeta del sitio local.

20

Captulo 2

Para crear un sitio local: 1

Abra el cuadro de dilogo Denicin de sitio en Dreamweaver del siguiente modo: En Macintosh, elija Sitio > Nuevo sitio. En Windows, elija Archivo > Nuevo sitio.

En el cuadro de dilogo Denicin de sitio, asegrese de que Datos locales est seleccionado en la lista Categora. Asigne al sitio el nombre My_Tutorial escribindolo en el campo Nombre del sitio. El nombre del sitio local es en realidad un sobrenombre que lleva directamente a la carpeta que ha denido como sitio local.

Haga clic en la carpeta de archivos situada a la derecha del campo Carpeta raz local, acceda a la carpeta Olivebranch_site y haga clic en Seleccionar.

Nota: La ruta completa a la carpeta Olivebranch_site puede variar dependiendo del lugar en el que haya instalado Dreamweaver 2.0.

Curso prctico

21

Haga clic en Aceptar y luego en Crear cuando se le pregunte si desea crear un archivo de cach para el sitio.

El cach de los archivos en la carpeta Olivebranch_site crea un registro de los archivos existentes para que Dreamweaver pueda actualizar rpidamente los vnculos al mover, cambiar el nombre o eliminar un archivo. La ventana Sitio mostrar a continuacin una lista de todas las carpetas y archivos contenidos en el sitio local My_Tutorial. La lista tambin acta como administrador de archivos, lo que permite copiar, pegar, eliminar, mover y abrir archivos del mismo modo que en el explorador del ordenador.

Cierre la ventana de documento para index.htm, pero deje abierta la ventana Sitio.

22

Captulo 2

Editar la pgina principal de Olivebranch

Ahora que ya ha congurado una estructura para el sitio Olivebranch que est creando, abra la versin incompleta de la pgina principal. Deber crear vnculos y elegir un color de fondo, una imagen de fondo y un ttulo para la pgina siguiendo el modelo de la pgina principal de Olivebranch de la versin terminada.
Para abrir en Dreamweaver la pgina principal de Olivebranch ya terminada. 1

Desde la ventana Sitio, haga doble clic en DW2_index.htm.

Cierre la ventana Sitio.

Curso prctico

23

Definir el color y la imagen de fondo Si utiliza una imagen y un color de fondo, el color aparecer mientras se carga la imagen, lo que crea un fondo ms atractivo para los usuarios mientras esperan a que se cargue la imagen. Si la imagen de fondo tiene pxeles transparentes, el color de fondo se ver a travs de ellos.
Para definir un color de fondo para la pgina: 1

Elija Modicar > Propiedades de la pgina para abrir el cuadro de dilogo Propiedades de la pgina. Cambie el color de fondo predeterminado escribiendo #FFFFCC en el campo Fondo. En este caso, usted ya conoce el color de fondo deseado. Tambin puede elegir un color de la paleta o utilizar el cuentagotas para elegir el color de un objeto de la pgina.

Haga clic en Aplicar para aplicar el color de fondo. Inmediatamente despus de hacer clic en Aplicar en el cuadro de dilogo Propiedades de la pgina, la pgina se actualizar en la ventana de documento.

24

Captulo 2

A continuacin, especique una imagen de fondo para la pgina.

Para definir una imagen de fondo para la pgina: 1

Haga clic en el botn Examinar (Windows) o Seleccionar (Macintosh) situado junto al campo Imagen de fondo. Seleccione home_bg.jpg de la carpeta Assets, dentro de la carpeta Olivebranch_site.

Haga clic en Aplicar para agregar la imagen de fondo a la pgina.

Curso prctico

25

Deje abierto por ahora el cuadro de dilogo Propiedades de la pgina. Con el color y la imagen de fondo ya denidos, la pgina principal debe tener ahora esta apariencia:

Definir el ttulo de la pgina El ttulo de una pgina HTML ayuda a los usuarios a conocer lo que estn viendo mientras exploran; tambin identica a la pgina en listas de historial y de marcadores. Si no asigna ningn nombre a una pgina, sta aparecer en la ventana del explorador, as como en las listas de marcadores y de historial como Documento sin ttulo.

26

Captulo 2

Para definir el ttulo de una pgina: 1

En el campo Ttulo del cuadro de dilogo Propiedades de la pgina, escriba Olivebranch Gourmet Foods como nombre de la pgina principal y luego haga clic en Aceptar.

La barra de ttulo se actualiza para reejar el nombre asignado al archivo.

2

Elija Archivo > Guardar para guardar los cambios realizados.

Crear un mapa del sitio El mapa de un sitio proporciona una representacin visual de alto nivel de la estructura de un sitio local. Tambin puede utilizar el mapa del sitio para agregar nuevos archivos al sitio, para agregar, eliminar y cambiar vnculos y para crear una imagen BMP o PICT del sitio que podr exportar e imprimir desde una aplicacin de edicin de imgenes. La pgina principal de un sitio siempre aparece en la parte superior del mapa del sitio; bajo la pgina principal aparecen los archivos con los que sta tiene vnculos. Si la carpeta que dene como raz del sitio contiene un archivo denominado index.htm, Dreamweaver lo utilizar automticamente como pgina principal del mapa del sitio; dado que la pgina principal del sitio My_Tutorial se denomina en realidad DW2_index.htm, redenir la pgina principal al personalizar la apariencia del mapa del sitio.

Curso prctico

27

Para crear un mapa del sitio:

En la ventana Sitio, pulse y mantenga pulsado el icono Mapa del sitio, situado en la esquina superior izquierda, y elija Mapa y archivos del men emergente.

Aparecer la ventana Sitio con dos vistas del sitio local: a la izquierda aparece un rbol del mapa del sitio que representa la estructura del sitio Olivebranch ya acabado (con index.htm como pgina principal), mientras que a la derecha aparece la lista de archivos que utiliz previamente.

Redena ahora la pgina principal para el sitio de manera que utilice la versin de la pgina principal del curso prctico en lugar de la versin acabada.

28

Captulo 2

Para redefinir la pgina principal y personalizar la apariencia del mapa del sitio: 1

Abra el cuadro de dilogo Denicin de sitio del siguiente modo: En Windows, elija Ver > Diseo de la barra de mens de la ventana Sitio. En Macintosh, elija Sitio > Ver mapa del sitio > Diseo.

Seleccione Diseo de mapa del sitio de la lista Categora del cuadro de dilogo Denicin de sitio. Especique la nueva pgina principal del sitio haciendo clic en la carpeta de archivos situada junto al campo Pgina principal y accediendo al archivo DW2_index.htm de la carpeta Olivebranch_site, incluida a su vez en la carpeta Tutorial. Dena Nmero de columnas con el valor 3.

Curso prctico

29

Haga clic en Aceptar para cerrar el cuadro de dilogo Denicin de sitio y regresar a la ventana Sitio. El Mapa del sitio se actualizar para reejar el cambio, ahora con la versin de la pgina principal del curso prctico como ncleo del mapa del sitio.

En estos momentos, la versin de la pgina principal del curso prctico contiene tan slo un vnculo. En unos instantes deber agregar ms vnculos a la pgina principal del curso prctico.
6

Deje abierta por el momento la ventana Sitio para poder observar cmo se actualiza al agregar vnculos a la pgina principal.

30

Captulo 2

Crear vnculos Las imgenes de la columna izquierda de la pgina principal guan a los visitantes por las pginas del sitio de Olivebranch. La imagen superior, en la que puede leerse about, ya est vinculada con la pgina correspondiente del sitio. Deber agregar vnculos a otros dos grcos, events y catalog, de manera que tambin estn vinculados con otras pginas del sitio. (En ningn momento tendr que manipular la imagen gift basket.) En primer lugar, agregue un vnculo del grco events a la pgina Events utilizando el inspector de propiedades.
Para crear un vnculo mediante el inspector de propiedades: 1

Haga clic en la barra de ttulo de la ventana de documento que contiene DW2_index.htm para activarla o seleccione el nombre del archivo del men Ventana. Haga clic en la etiqueta events para seleccionarla en la ventana de documento.

Nota: No haga doble clic en la imagen, ya que, si lo hace, Dreamweaver le pedir que elija otro archivo con el que reemplazar la imagen. 3

Elija Ventana > Propiedades para abrir el inspector de propiedades si es que no est ya abierto. El inspector de propiedades muestra informacin acerca de la imagen seleccionada.

En el inspector de propiedades, haga clic en la carpeta de archivos situada junto al campo Vnculo vaco. En el cuadro de dilogo Seleccionar archivo HTML, acceda a la carpeta Olivebranch_site, elija DW2_events_main.htm y haga clic en Seleccionar. El archivo con el que est creando el vnculo aparecer en el campo Vnculo del inspector de propiedades.

Curso prctico

31

A continuacin agregar un vnculo al grco catalog mediante el inspector de propiedades y la ventana Sitio.
Para crear un vnculo mediante el inspector de propiedades y la ventana Sitio: 1

Haga clic en la barra de ttulo de la ventana Sitio para activarla, o bien elija Ventana > Archivos del sitio. Si es preciso, cambie el tamao de la ventana de documento para que pueda colocar el lado izquierdo de la ventana de documento y la ventana Sitio uno junto al otro.

Haga clic en la etiqueta catalog para seleccionarla en la ventana de documento.

32

Captulo 2

En el inspector de propiedades, arrastre el icono de sealizacin de archivo (situado junto al campo Vnculo) hasta la ventana Sitio y seale al archivo DW2_cat_main_index.htm. Aparecer la ruta completa al archivo en el campo Vnculo del inspector de propiedades para la imagen catalog.

Inmediatamente despus de soltar el botn del ratn, se actualizar el mapa del sitio para reejar el vnculo que acaba de agregar.

Un signo ms (Windows) o una echa de ampliacin (Macintosh) situada junto a cualquier elemento del mapa del sitio indica que hay ms elementos asociados a dicho elemento. Haga clic en el signo ms o en la echa de ampliacin para ampliar el rbol de forma que muestre los elementos asociados; haga clic en el signo menos (-) o en la echa de ampliacin para reducir la vista del mapa del sitio.
5

Cierre el inspector de propiedades, pero deje abierta por el momento la ventana Sitio.

Curso prctico

33

Elija Archivo > Guardar para guardar todos los cambios realizados en la pgina principal. Seleccione Archivo > Cerrar para cerrar la pgina.

Crear un diseo de pgina complejo

Al igual que ocurre con la pgina principal de Olivebranch, la pgina About Us tiene un archivo relacionado con el curso prctico que ya se ha iniciado automticamente. Deber terminar de rellenar la pgina About Us del curso prctico de forma que coincida con la versin ya acabada. Deber comenzar abriendo la versin ya acabada de la pgina About Us en un explorador para poder consultarla mientras trabaja.
Para obtener una vista previa de la pgina About Us ya acabada en un explorador: 1

Elija Archivo > Abrir y seleccione about_main.htm de la carpeta Olivebranch_site, incluida a su vez en la carpeta Tutorial. No edite esta pgina, ya que pertenece al sitio ya acabado. Elija Archivo > Vista previa en el explorador y seleccione un explorador de la versin 4.0.

Deje la ventana del explorador abierta en segundo plano para consultarla posteriormente.
3

En Dreamweaver, elija Archivo > Cerrar para cerrar la ventana de documento que contiene la pgina About Us ya acabada.

34

Captulo 2

Seguidamente, abra el archivo parcialmente realizado de About Us, correspondiente al curso prctico, para editarlo en Dreamweaver.
Para abrir en Dreamweaver el archivo About Us parcialmente realizado.

En la ventana Sitio de Dreamweaver, haga doble clic en el archivo DW2_about_main.htm.

Convertir una tabla en capas Las tablas son de gran utilidad para crear diseos de pgina complejos y adems son compatibles con los exploradores de las versiones 3.0 y 4.0. Las capas son incluso ms tiles para crear diseos de pgina complejos, ya que es fcil cambiar de posicin los elementos de la pgina arrastrndolos cuando se han colocado en capas. No obstante, los exploradores de la versin 3.0 no admiten capas. Con Dreamweaver podr aprovechar las ventajas de las tablas y las capas alternando rpidamente entre ellas hasta que el diseo de la pgina sea satisfactorio. La pgina resultante, en formato de tabla, tendr la misma apariencia en los exploradores de las versiones 3.0 y 4.0.

Curso prctico

35

La pgina About Us (acerca de nosotros) se ha iniciado usando una tabla para el formato. Comience convirtiendo las celdas de tabla existentes en capas.
Para convertir las celdas de tabla existentes en capas: 1 2

Elija Modicar > Diseo > Reubicar contenido usando capas. En el cuadro de dilogo que aparece a continuacin, anule la seleccin de las opciones Mostrar cuadrcula y Ajustar a cuadrcula, pero deje seleccionadas las dems opciones. La opcin Ajustar a cuadrcula hace que las capas se ajusten a la ubicacin de cuadrcula ms cercana al crearlas o modicarlas. Aunque esto puede ayudarle a alinear las capas, en este caso le impedira mover las capas libremente por la pgina, que es justamente lo que deber hacer.

Haga clic en Aceptar para cerrar el cuadro de dilogo y convertir las celdas de tabla en capas. Las celdas de tabla se convertirn en capas y aparecer la paleta de capas para ayudarle a controlar todas las capas de la pgina actual.

36

Captulo 2

Agregar una imagen de rastreo como gua de diseo Puede utilizar una imagen de rastreo JPG, GIF o PNG previamente diseada en una aplicacin grca como gua para la creacin de una pgina Web. La imagen de rastreo acta como gua de fondo al disear una pgina en la ventana de documento. Utilizar la imagen de rastreo para colocar capas en el documento About Us de forma que el diseo de la pgina coincida con la imagen de rastreo situada debajo.
Para cargar una imagen de rastreo: 1 2 3

Seleccione Ver > Imagen de rastreo > Cargar. Seleccione about_us_comp.gif en la carpeta Assets y haga clic en Seleccionar. En el cuadro de dilogo Propiedades de la pgina, utilice el control deslizante Transparencia imagen para denir la opacidad de la imagen de rastreo en el 50%.

La conguracin del nivel de transparencia en el 50% hace que la imagen de rastreo se muestre atenuada en la ventana de documento, lo que facilita la distincin entre la imagen de rastreo y los elementos editables de la pgina.

Curso prctico

37

Haga clic en Aceptar para agregar la imagen de rastreo y cerrar el cuadro de dilogo. Aparecer una imagen de rastreo en el espacio de trabajo con las capas ya existentes sobre ella, aunque an sin alinear con la imagen de rastreo. (Si no aparece ninguna imagen de rastreo, asegrese de que hay una marca junto a Mostrar al seleccionar Ver > Imagen de rastreo > Mostrar.)

Al cargar una imagen de rastreo, la imagen y el color de fondo del documento no se encuentran visibles en la ventana de documento, aunque s aparecern cuando vea la pgina en un explorador. La imagen de rastreo en s se encuentra visible slo al editar la pgina en la ventana de documento, mientras que no aparece nunca al cargar la pgina en un explorador.

38

Captulo 2

Colocar las capas A continuacin mueva las capas creadas a partir de la tabla para que coincidan con los elementos de la imagen de rastreo y repita el diseo.
Para colocar las capas en la pgina: 1

Haga clic en el borde de la capa que contiene el texto sobre Olivebranch para seleccionarla. Una capa seleccionada tiene la siguiente apariencia:

Seleccione el manejador de la capa y arrstrelo (o utilice las teclas de echa) para llevarlo hasta el texto de la imagen de rastreo, cambiando el tamao de la capa si es preciso para que coincida con el del rea del bloque de texto de la imagen de rastreo. Dado que los dos bloques contienen textos diferentes, las palabras no se alinearn perfectamente sobre la imagen de rastreo en el espacio de trabajo, pero, ya que la imagen de rastreo slo aparece en el espacio de trabajo, el texto de la capa del documento aparecer de forma normal en un explorador.

Curso prctico

39

Siga los mismos pasos con la capa que contiene la letra O para llevarla hasta la letra O de la imagen de rastreo.

40

Captulo 2

Agregar nuevas capas A continuacin agregue capas para que coincidan con las partes de la imagen de rastreo que an no aparecen en la pgina.
Para agregar nuevas capas a una pgina: 1

Haga clic en un rea vaca de la ventana de documento. Asegrese de que el cursor no est dentro de la capa existente, ya que, de ser as, creara capas anidadas, lo que posteriormente le impedira convertir de nuevo las capas en una tabla.

2 3

Seleccione Insertar > Capa para agregar una nueva capa a la pgina. Mueva la capa hasta el rea cuadrada de la imagen de rastreo en la que pone "Diana close-up photo. Dado que est seleccionada la opcin Evitar solapamiento en la paleta de capa, no podr colocar las capas unas encima de otras. Es posible que tenga que cambiar el tamao de la capa para poder arrastrarla a un lugar en el que no se solape con ninguna otra.

Seleccione la capa y cambie su tamao, si es preciso, para que coincida con el del rea de la imagen de rastreo.

Repita los mismos pasos para agregar otras capas a la pgina sobre las reas de la imagen de rastreo en las que puede leerse "Farm photo (with daughter)" y "Tree photo.

Curso prctico

41

Agregar imgenes A continuacin inserte grcos en cada una de las capas y, seguidamente, alinee los grcos con la imagen de rastreo.
Para insertar grficos en las capas y alinearlos sobre la imagen de rastreo: 1

Haga clic una sola vez en el interior de la capa "Diana close-up photo" para colocar el cursor dentro de ella sin seleccionarla. Una capa activa con el cursor en su interior presenta esta apariencia:

Seleccione Insertar > Imagen y seleccione about_diana.jpg de la carpeta Assets para agregar la imagen a la capa.

42

Captulo 2

Una vez que aparezca la imagen en la capa, haga clic en el borde de la capa para seleccionar la capa entera y luego utilice las teclas de echa arriba, abajo, izquierda y derecha para alinear el grco con la imagen de rastreo. (Si es preciso, cambie el tamao de la capa de nuevo para que se ajuste mejor al del rea de la imagen de rastreo.)

Antes

Despus

Curso prctico

43

Repita estos pasos para aadir la imagen about_daughter.jpg de la carpeta Assets a la capa "Farm photo (with daughter)" y la imagen about_tree.jpg, tambin de la carpeta Assets, a la capa "Tree photo.

Cierre la paleta de capa.

44

Captulo 2

Convertir capas de nuevo en una tabla Ahora que ya ha dispuesto el formato de la pgina exactamente del modo deseado, convierta las capas en una tabla para que la pgina se muestre correctamente tanto en exploradores de la versin 3.0 como de la versin 4.0.
Para convertir todas las capas de nuevo en una sola tabla: 1 2

Elija Modicar > Diseo > Convertir capas en tabla. Haga clic en Aceptar para aceptar las opciones predeterminadas del cuadro de dilogo Convertir capas en tabla. Dreamweaver no puede crear una tabla a partir de capas solapadas, razn por la cual utiliz la opcin Evitar solapamientos para restringir la colocacin de las capas al crearlas a partir de la tabla original.

Curso prctico

45

Obtenga una vista previa de la pgina en un explorador. Ahora obtenga una vista previa de la pgina About Us que acaba de editar.
Para obtener una vista previa de la pgina en un explorador: 1

Pulse F12 para ver el documento en el explorador de la Web predeterminado. No es preciso que guarde un documento antes de obtener su vista previa. Todas las funciones relacionadas con el explorador funcionan al obtener una vista previa de un documento.

Compare el archivo en el que acaba de trabajar con la pgina About Us terminada que abri anteriormente en un explorador. Cuando termine de ver el archivo, cierre ambas ventanas del explorador. Regrese a Dreamweaver y elija Archivo > Guardar para guardar los cambios realizados en la pgina About Us. Seleccione Archivo > Cerrar para cerrar la pgina.

3 4

46

Captulo 2

Editar una tabla

En la pgina Events (eventos) de Olivebranch se enumeran conciertos, exposiciones y festivales patrocinados por la granja Olivebranch. Los eventos de Olivebranch se muestran en una tabla en la que se indica el lugar (where), la fecha (when) y la naturaleza de cada evento (what). El archivo del curso prctico para la pgina Events contiene una tabla completa de eventos. Deber editar esta tabla moviendo las columnas y ordenando la informacin contenida en las celdas.
Para abrir la pgina Events del curso prctico: 1

En la ventana Sitio, haga doble clic en DW2_events_main.htm en la lista. Si no ve la ventana Sitio, elija Ventana > Archivos del sitio para abrirla o activarla. La tabla de la pgina tiene esta apariencia:

Deje abierta la ventana Sitio, pero envela al fondo.

Curso prctico

47

Formatear la tabla Mueva la columna Where del lado derecho de la tabla al izquierdo para convertirla en la primera columna de la tabla.
Para mover columnas dentro de una tabla: 1

Haga clic en la celda Where de la parte superior de la columna y arrastre el puntero del ratn hasta la ltima celda de la columna para seleccionar la columna entera. Tambin puede seleccionar una columna dejando el puntero del ratn exactamente sobre el borde superior de la columna, sin hacer clic, hasta que aparezca la echa de seleccin; despus haga clic una vez para seleccionar la columna completa. (Si coloca el puntero del ratn sobre el borde de la tabla, seleccionar toda la tabla.)

2 3 4

Elija Edicin > Cortar. Haga clic en el interior de la celda When. (No seleccione la celda.) Elija Edicin > Pegar. La columna Where se convertir en la primera columna de la tabla.

48

Captulo 2

Ordenar la tabla A continuacin, ordene las celdas de la tabla alfabticamente por lugar (where).
Para ordenar las celdas de la tabla: 1

Haga clic en cualquier lugar del interior de la tabla y elija Comandos > Ordenar tabla. En el cuadro de dilogo Ordenar tabla, especique las siguientes opciones: Ordenar por: Columna 1 Orden: Alfabtico ascendente Luego por: Columna 2 Orden: Numrico ascendente

El primer orden (Ordenar por) ordena la tabla alfabticamente por el contenido de la primer columna. El segundo orden (Luego por) ordena la tabla numricamente por el contenido de la segunda columna.

Curso prctico

49

Haga clic en Aceptar para ordenar la tabla.

A continuacin dar formato a la tabla centrando el contenido de las celdas de la columna When (cundo).
Para centrar el contenido de las celdas de la tabla: 1

Haga clic en la primera celda situada debajo del encabezado de tabla When y arrastre el puntero del ratn hasta el nal de la tabla para seleccionar todas las celdas situadas bajo la columna When. Elija Modicar > Propiedades de la seleccin para abrir el inspector de propiedades. Si no ve el men Horiz en el inspector de propiedades, haga clic en la echa de ampliacin situada en la esquina inferior derecha para ver la lista completa de propiedades.

50

Captulo 2

Elija Centro del men Horiz. Se centrar el contenido de todas las celdas de la columna When.

Formatear texto usando estilos personalizados

Un estilo es un grupo de atributos de formato que controla la apariencia de un bloque o un rango de texto. Una hoja de estilos incluye todos los estilos de un documento. Cree un estilo personalizado para formatear los encabezados de la tabla de la pgina Events.
Para crear un estilo personalizado: 1 2

Elija Ventana > Estilos para abrir la paleta de estilos. Haga clic en Hoja de estilos para abrir el cuadro de dilogo Editar hoja de estilos.

Curso prctico

51

3 4 5

Haga clic en Nuevo en el cuadro de dilogo Editar hoja de estilos. Asegrese de que la seleccin de Tipo es Crear estilo person. (clase). Escriba .tablehead como nombre del nuevo estilo y haga clic en Aceptar.

Con Tipo seleccionado en la lista de la izquierda del cuadro de dilogo Denicin de estilo, elija la siguiente conguracin de formato para el nuevo estilo: Fuente: Arial, Helvetica, sans-serif Tamao: 18 puntos Estilo: normal

7 8

Haga clic en Aceptar para cerrar el cuadro de dilogo Denicin de estilo. Haga clic en Listo para cerrar el cuadro de dilogo Editar hoja de estilos, que ahora muestra el estilo .tablehead.

A continuacin, utilizar la paleta de estilos para aplicar el estilo .tablehead a los encabezados de la tabla de la pgina Events.

52

Captulo 2

Para aplicar un estilo personalizado: 1

En la ventana de documento, seleccione las tres celdas de encabezado de la tabla pulsando la tecla Control (Windows) o Comando (Macintosh) y haciendo clic una sola vez en cada celda. Haga clic en .tablehead de la paleta de estilo.

La celda mostrar el nuevo estilo en el documento.

3 4

Cierre la paleta de estilo. Guarde los cambios realizados en la pgina Events seleccionando Archivo > Guardar. Seleccione Archivo > Cerrar para cerrar la pgina.

Aplicar una plantilla

Puede utilizar plantillas para crear documentos para el sitio que tengan una estructura y una apariencia comunes. Las plantillas son tiles si desea asegurarse de que todas las pginas del sitio comparten determinadas caractersticas. Una vez que aplique una nica plantilla a un grupo de pginas, podr editar la informacin de todas estas pginas editando la plantilla y, seguidamente, aplicndola de nuevo a dichas pginas. Mientras que los elementos exclusivos de cada pgina (como el texto que describe el artculo a la venta) permanece sin cambios, los elementos comunes de la plantilla (como las barras de desplazamiento) se actualizan en todas las pginas que comparten dicha plantilla. La pgina de catlogo (Catalog) de Olivebranch tiene vnculos con diversas pginas de productos en las que se describen los productos que la empresa tiene a la venta. Dado que todas las pginas de productos utilizan un mismo diseo y formato, stas se crean mediante una nica plantilla.

Curso prctico

53

En esta seccin modicar una plantilla existente para cambiar las pginas de productos a las que ya ha aplicado la plantilla. Seguidamente, aplicar una plantilla distinta a dichas pginas de productos para cambiar el formato sin alterar su contenido exclusivo. Ver pginas de productos Comience viendo las pginas del catlogo ya acabado en un explorador.
Para abrir la pgina Catalog de Olivebranch terminada: 1 2

Elija Archivo > Abrir y seleccione cat_main_index.htm. Seleccione Archivo > Vista previa en el explorador para abrir la pgina en una ventana del explorador.

Haga clic en los vnculos correspondientes a los vinos (wines), quesos (cheeses), mostazas (mustards) y aceites (oils) para ver muestras de pginas de productos. Observe que todas las pginas de productos comparten la misma barra de exploracin en la parte superior de la pgina. Adems de contener vnculos con otras pginas de productos, la barra de exploracin incluye un vnculo con la pgina Catalog principal y un vnculo de regreso a la pgina principal de Olivebranch (en el grco del extremo derecho de la barra).

Cierre el explorador cuando termine de ver la pgina Catalog principal y las pginas de productos vinculadas a ella. Regrese a Dreamweaver y elija Archivo > Cerrar para cerrar la pgina Catalog terminada.

54

Captulo 2

A continuacin, abra las pginas del catlogo parcialmente realizadas en un explorador.

Para abrir la versin del curso prctico de la pgina Catalog: 1

Convierta la ventana Sitio en la ventana activa seleccionando Ventana > Archivos del sitio. Localice el archivo DW2_cat_main_index.htm en la lista y haga doble clic en l para abrirlo en la ventana de documento.

3 4

Pulse F12 para obtener una vista previa de la pgina Catalog en un explorador. Haga clic en los vnculos correspondientes a los vinos, quesos, mostazas y aceites para ver las pginas de productos con las que va a trabajar. Al igual que en el caso del sitio nalizado, todas las pginas de productos utilizan la misma plantilla, por lo que presentan una apariencia muy similar. En este caso, no obstante, falta en todas las pginas el vnculo con la pgina principal del catlogo y el grco de la parte superior derecha vinculado a la pgina principal de Olivebranch.

Despus de explorar los vnculos con las pginas de productos, cierre la ventana del explorador. Regrese a Dreamweaver y elija Archivo > Cerrar para cerrar la pgina Catalog principal.

Curso prctico

55

Editar la plantilla A continuacin modicar la plantilla de las pginas de productos para reparar la barra de navegacin partida. Una vez que haya reparado la barra de navegacin en la plantilla, deber volver a aplicar la plantilla a las pginas de productos para que la barra de navegacin se actualice en todas las pginas que usan la plantilla.
Para abrir el archivo de plantilla en la ventana de documento:

En la ventana Sitio, haga doble clic en DW2_cat_product.dwt en la carpeta Templates de la carpeta Olivebranch_site. Cada plantilla contiene regiones bloqueadas y editables. Las regiones bloqueadas slo pueden editarse desde la propia plantilla; stas aparecen en un color de resaltado en todas las pginas a las que se ha aplicado la plantilla. Las regiones editables son marcadores de posicin para el contenido exclusivo de cada pgina a la que se ha aplicado la plantilla. En una plantilla, las regiones editables se encuentran resaltadas.

En esta plantilla, la barra de exploracin se encuentra en una regin bloqueada, mientras que las reas de texto y fotografas de productos son editables en cada pgina de producto correspondiente.

56

Captulo 2

A continuacin, edite el archivo de plantilla. En primer lugar, agregue un vnculo con el grco del catlogo.
Para agregar un vnculo del grfico del catlogo con la pgina Catalog principal: 1 2 3

Haga clic una sola vez en el grco del catlogo. Elija Ventana > Propiedades para abrir el inspector de propiedades. En el inspector de propiedades, haga clic en la carpeta de archivos situada junto al campo Vnculo y seleccione el archivo DW2_cat_main_index.htm de la carpeta Olivebranch_site. Deje abierto el inspector de propiedades.

A continuacin, agregue un grco en la esquina superior derecha de la pgina y vinclelo con la pgina principal de Olivebranch.
Para agregar un grfico que sirva de vnculo con la pgina principal de Olivebranch. 1

Haga clic en el interior de la celda vaca situada a la derecha de la imagen del catlogo. Elija Insertar > Imagen y seleccione cat_nav_photos.jpg de la carpeta Assets. El grco aparecer en la celda.

Asegrese de que el grco que acaba de agregar a la celda est an seleccionado. (Si no lo est, haga clic una vez para seleccionarlo.) En el inspector de propiedades, haga clic en la carpeta de archivos situada junto al campo Vnculo y seleccione el archivo DW2_index.htm de la carpeta Olivebranch_site. Cierre el inspector de propiedades.

Curso prctico

57

Ahora que ya ha editado la plantilla, vuelva a aplicarla a las pginas de productos.

Para volver a aplicar la plantilla a las pginas de productos del catlogo: 1 2

Elija Archivo > Guardar para guardar los cambios. Cuando se le pregunte si desea actualizar todos los documentos del sitio local que utilizan la plantilla, haga clic en S.

Aparecer el cuadro de dilogo Actualizar pginas para mostrar el estado de las pginas del sitio conforme se vuelve a aplicar la plantilla.

Una vez que se hayan actualizado todos los archivos del sitio, cierre el cuadro de dilogo Actualizar pginas.

58

Captulo 2

Dado que la pgina principal del catlogo contiene vnculos con cada una de las pginas de productos del sitio, puede utilizarla para obtener rpidamente una vista preliminar de todas las pginas de productos a las que ha vuelto a aplicar la plantilla. Abra la pgina principal del catlogo en un explorador y haga clic en los vnculos de las pginas de productos.
Para ver las pginas de productos actualizadas: 1

Haga doble clic en el archivo DW2_cat_main_index.htm de la ventana Sitio para abrirlo de nuevo en la ventana de documento. Pulse F12 para obtener una vista previa de esta pgina en el explorador principal o elija Archivo > Vista previa en el explorador para seleccionar un explorador distinto. Haga clic en los vnculos correspondientes a los vinos, quesos, mostazas y aceites para acceder a las distintas pginas de productos. En cada pgina de producto, haga clic en los vnculos con el catlogo y con la pagina principal de Olivebranch que agreg a la barra de exploracin para observar cmo se han aplicado a las pginas los cambios realizados en la plantilla. Cierre el explorador cuando termine de probar los vnculos de la barra de navegacin de las pginas de productos. Regrese a Dreamweaver y elija Archivo > Cerrar.

Aplicar una plantilla diferente a una pgina Puede aplicar una nueva plantilla a una pgina aunque dicha pgina utilice ya una plantilla. El contenido de la pgina permanecer sin cambios siempre y cuando la nueva plantilla contenga los mismos nombres de regiones editables que la plantilla anteriormente adjuntada al documento. Esta tcnica es til cuando se desea cambiar la apariencia de un grupo de pginas sin alterar el contenido exclusivo de cada una de ellas. Por ejemplo, un catlogo puede tener versiones de verano e invierno. Puede crear un diseo completamente nuevo sin editar el contenido mediante el uso de una plantilla distinta para cambiar las imgenes y los colores del fondo de la pgina, o bien mediante la reorganizacin de las posiciones de las regiones editables.

Curso prctico

59

Aqu aplicar una plantilla de invierno a una pgina de producto para actualizar su apariencia para una nueva estacin.
Para aplicar una nueva plantilla a una pgina existente: 1

En la ventana Sitio, haga doble clic en el archivo DW2_cat_wines.c.htm para abrir la pgina de producto correspondiente a los vinos en la ventana de documento.

Las secciones de la pgina que estn resaltadas en un color distinto identican a las regiones bloqueadas que slo pueden editarse en la plantilla utilizada para esta pgina. (Si no ve ninguna diferencia de color entre las distintas regiones de la pgina, elija Edicin > Preferencias, seleccione Resalto de la lista Categoras y elija la opcin Mostrar situada junto a Regiones bloqueadas. Si contina sin ver el color de resaltado, elija Ver > Elementos invisibles.)

60

Captulo 2

Elija Ventana > Plantillas para abrir la paleta de plantillas. La paleta de plantillas contiene la lista de todos los archivos de plantillas del sitio local, ubicadas en la carpeta Templates de la carpeta Olivebranch_site.

En la paleta de plantillas, haga clic en el archivo cat_product_winter.dwt para resaltarlo en la lista.

Curso prctico

61

Cambie el tamao de la paleta de plantillas para obtener una vista previa de la plantilla de invierno en el interior de la paleta. La plantilla de invierno tiene un diseo diferente al de la plantilla actualmente aplicada a la pginas de productos, sin embargo, al contener las mismas regiones editables que la plantilla actual, puede aplicarla a la pgina sin que se produzca ningn problema.

Haga clic en Aplicar a pgina para aplicar la plantilla de invierno a la pgina de producto correspondiente a los vinos. Cierre la paleta de plantillas.

62

Captulo 2

Pulse F12 para obtener una vista previa de la nueva pgina de producto para los vinos en una ventana del explorador.

Cuando termine de verla, cierre la ventana del explorador y regrese a Dreamweaver. Si lo desea, puede elegir Archivo > Guardar para guardar los cambios que acaba de realizar en la pgina de vinos; los vnculos del sitio funcionarn independientemente de cul sea la plantilla aplicada a la pgina. Seleccione Archivo > Cerrar para cerrar la pgina.

10

Curso prctico

63

Adjuntar comportamientos a los elementos de una pgina

Un comportamiento es una combinacin de un evento y una accin. Los eventos son situaciones que activan acciones. Por ejemplo, un evento denominado onClick puede producirse cuando el usuario hace clic en un botn, al tiempo que un evento denominado onMouseOver puede ocurrir cuando el puntero del ratn pasa por encima de un objeto. Las acciones son fragmentos de cdigo JavaScript ya denidos que realizan tareas especcas, como abrir la ventana de un explorador, reproducir un sonido o detener una pelcula Shockwave. Al adjuntar un comportamiento a un elemento de una pgina, debe especicar tanto la accin como el evento que la activa. Dreamweaver ofrece diversas acciones predenidas que puede agregar a los elementos de la pgina. A continuacin aplicar acciones Intercambiar imagen a los grcos about, events y catalog para que parezca que las imgenes se iluminan al pasar el ratn sobre ellas (es decir, cuando se produzca el evento onMouseOver). Por ejemplo, cuando la imagen about aparezca en la pgina normalmente, tendr esta apariencia:

Una vez que haya denido un comportamiento que incluya la accin Intercambiar imagen durante el evento onMouseOver, la imagen about tendr esta apariencia (una versin resaltada de la imagen original) al pasar el ratn sobre ella:

Comenzaremos por abrir de nuevo el archivo de la pgina principal editado anteriormente en este curso prctico y adjuntando despus comportamientos a los elementos grcos concretos de cada pgina.
Para abrir de nuevo la pgina en Dreamweaver: 1

Convierta la ventana Sitio en la ventana activa seleccionando Ventana > Archivos del sitio. Haga doble clic en el archivo de pgina principal DW2_index.htm en la lista para abrirlo de nuevo en la ventana de documento.

64

Captulo 2

Para adjuntar un comportamiento a un elemento grfico de la pgina: 1 2

Haga clic para seleccionar la imagen about en la ventana de documento. Seleccione Ventana > Comportamientos para abrir el inspector de comportamientos, en el que se enumeran todos los comportamientos denidos para el elemento seleccionado (no debera haber ninguno todava). Agregue una nueva accin a la lista haciendo clic en el botn ms (+) y eligiendo Intercambiar imagen del men emergente. Aparecer el cuadro de dilogo Intercambiar imagen con una lista de todas las imgenes de la pgina.

En el cuadro de dilogo Intercambiar imagen, seleccione la imagen about de la lista Imgenes. Esta es la imagen original, que ser sustituida por una imagen resaltada cuando el puntero del ratn pase por encima de ella.

Haga clic en Examinar junto al campo Denir origen como y acceda a la imagen nav_about_roll.gif de la carpeta Assets. Esta imagen sustituye a la imagen original durante el evento onMouseOver.

Curso prctico

65

Acepte las opciones predeterminadas situadas debajo del campo Denir origen como. La opcin Carga previa de imgenes carga la imagen intercambiada en el cach del explorador conforme se carga la imagen, de manera que no se produce ninguna demora apreciable antes de que aparezca la imagen resaltada cuando el usuario pase el puntero del ratn por encima de la imagen about. La opcin Restaurar imgenes onMouseOut asigna automticamente la accin Restaurar imagen intercambiada al evento onMouseOut para esta imagen. Esto devuelve el botn a su estado original cuando el usuario aparta del botn el puntero del ratn.

Haga clic en Aceptar para cerrar el cuadro de dilogo Intercambiar imagen y aplicar los campos que acaba de realizar. El inspector de comportamientos incluye ahora los eventos y las acciones que acaba de denir para la imagen. El evento onMouseOver aparece con la accin Intercambiar imagen; por encima de l se encuentra el evento onMouseOut con la accin Restaurar imagen intercambiada, que se deni automticamente al aceptar las opciones predeterminadas durante la conguracin de la accin Intercambiar imagen.

Repita estos pasos para adjuntar las acciones Intercambiar imagen y los eventos onMouseOver a las imgenes events y catalog : Sustituya la imagen events por la imagen de intercambio nav_events_roll.gif. Sustituya la imagen catalog por la imagen de intercambio nav_catalog_roll.gif.

Cierre el inspector de comportamientos.

Ahora, observe cmo actan los comportamientos mediante una vista previa de la pgina en un explorador.

66

Captulo 2

Para obtener una vista previa de la pgina en un explorador: 1

Pulse F12 para obtener una vista previa de la pgina principal en un explorador. Pase el puntero del ratn por encima de las imgenes about, events y catalog para observar cmo cambian. Cierre el explorador cuando termine de ver la pgina. Regrese a Dreamweaver y guarde los cambios seleccionando Archivo > Guardar.

Agregar una pelcula Flash

La pgina principal terminada de Olivebranch incluye una seccin sobre las especialidades de la semana (weekly specials) en la que diversos artculos a la venta aparecen y desaparecen en la parte derecha de la pgina. La seccin specials contiene en realidad dos capas: la primera de ellas contiene la imagen esttica this weeks specials , mientras que la segunda (que se solapa con la primera) contiene una pelcula Flash en la que los artculos aparecen y desaparecen. Hasta el momento, su versin de la pgina principal incluye tan slo la capa con la imagen esttica; a continuacin agregar la pelcula Flash en una capa sobre la capa de imagen para recrear la seccin "specials" tal y como aparece en la pgina principal de la versin terminada. Dado que la pelcula Flash se encontrar en una capa situada exactamente encima de la capa de la imagen this weeks special , deber desactivar la opcin Evitar superpos. capas.
Para lograr que las capas se solapen: 1 2

Elija Ventana > Capas para abrir de nuevo la paleta de capas. Anule la seleccin de la opcin Evitar solapamientos.

Ahora deber crear una nueva capa que contenga la pelcula Flash.

Curso prctico

67

Para agregar una nueva capa que contenga una pelcula Flash: 1 2 3

Elija Insertar > Capa. Haga clic una sola vez para colocar el cursor en el interior de la nueva capa. Elija Insertar > Flash y seleccione home_ticker.swf de la carpeta Assets. La capa se ampliar hasta alcanzar el tamao de la pelcula Flash, que se representa mediante un rectngulo gris.

Seguidamente, reproduzca la pelcula Flash en una ventana de documento y alinela sobre la capa this weeks specials.
Para reproducir la pelcula Flash dentro de la ventana de documento:

Elija Ver > Plug-ins > Reproducir todo.

68

Captulo 2

Para alinear la capa de la pelcula Flash sobre la capa de "this week's specials: 1

Haga clic en el borde de la capa para seleccionar la capa completa y arrstrela por el manejador hasta alinearla sobre la capa this weeks specials. La pelcula Flash contiene bloques de color y una lnea horizontal que coinciden con el grco de this weeks special. Utilice estas referencias como gua para colocar la capa de la pelcula Flash sobre la capa de la imagen.
Nota: La pelcula Flash puede no presentar la misma apariencia con distintas resoluciones de monitor. Si la capa de la pelcula Flash no parece alinearse sobre la capa de this weeks specials elija Ventana > Propiedades para abrir el inspector de propiedades y restaurar las dimensiones de la pelcula Flash con 329 de ancho y 94 de alto.

Las dos capas superpuestas debern tener esta apariencia:

Elija Archivo > Guardar para guardar los cambios que acaba de realizar.

Comprobar el sitio
Ahora que ya ha realizado todos los trabajos de edicin necesarios en los archivos parcialmente realizados, revise el sitio completo en un explorador para comprobar su apariencia.
Para obtener una vista previa del sitio en un explorador: 1

Con la pgina principal an abierta, pulse F12 para abrir la pgina en un explorador. Observe la pelcula Flash y, seguidamente, haga clic en las imgenes about, events y catalog para ver el resto de pginas del sitio que ha editado. Cuando termine de ver el sitio que ha creado, cierre la ventana del explorador, regrese a Dreamweaver y elija Archivo > Cerrar para cerrar la pgina principal.

Curso prctico

69

70

Captulo 2

CAPTULO 3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Para comenzar

Introduccin al uso del programa

Comenzar a utilizar Dreamweaver es tan fcil como abrir un documento HTML o crear uno nuevo. Pero para sacar el mximo provecho de Dreamweaver, es conveniente conocer cules son los conceptos que subyacen al espacio de trabajo de Dreamweaver y cmo seleccionar las opciones que mejor se adapten a su forma de trabajar. El espacio de trabajo de Dreamweaver El espacio de trabajo de Dreamweaver es exible, lo que le permite adaptarse a distintas formas de trabajar y a diversos niveles de experiencia. Existen una serie de componentes del espacio de trabajo de Dreamweaver que utilizar constantemente: La ventana de documento muestra el documento actual aproximadamente igual a como aparecer en un explorador de la Web. El lanzador incluye botones para abrir y cerrar los inspectores y las paletas utilizados con mayor frecuencia. Los iconos del lanzador se incluyen tambin en el minilanzador, situado en la parte inferior de la ventana de documento, lo que facilita el acceso a stos cuando el lanzador est cerrado. La paleta de objetos contiene botones para la creacin de diversos tipos de objetos, como imgenes, tablas, capas, etc. El inspector de propiedades muestra las propiedades del objeto seleccionado. Los mens de acceso directo permiten acceder rpidamente a comandos tiles pertinentes para la seleccin o rea actual. Las paletas otantes acoplables permiten combinar ventanas, inspectores y paletas otantes en una o varias ventanas con chas de seleccin.

71

La ventana de documento La ventana de documento muestra el documento actual aproximadamente igual a como aparecer en un explorador de la Web. La barra de ttulo de la ventana de documento muestra el ttulo de la pgina y, entre parntesis, el nombre del archivo y un asterisco si el archivo contiene cambios no guardados. Las etiquetas que controlan el texto u objeto seleccionado aparece en el selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento. Haga clic en estas etiquetas para seleccionar una etiqueta HTML concreta y su contenido. Haga clic en <body> para seleccionar todo el cuerpo del documento. A la izquierda del minilanzador aparecen el tamao de la pgina y el tiempo de descarga estimados, incluidos los elementos vinculados, como las imgenes y las pelculas Shockwave. Consulte Comprobar el tiempo y el tamao de descarga en la pgina 154. El conjunto de botones situado en la parte inferior derecha de la ventana de documento se denomina minilanzador, ya que se trata de una versin reducida del lanzador. Los botones del minilanzador permiten abrir la ventana Sitio, la paleta de bibliotecas, la paleta de estilos, el inspector de comportamientos, el inspector de lnea de tiempo y el inspector de HTML. La ventana emergente Tamao de ventana permite cambiar el tamao de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. Consulte Cambiar el tamao de la ventana de documento en la pgina 84.

Tamao del documento y tiempo de descarga Selector de etiquetas El men emergente Tamao de ventana Minilanzador

72

Captulo 3

Usar el inspector de propiedades El inspector de propiedades muestra las propiedades del objeto seleccionado.

Cualquier cambio que realice en una propiedad se reeja inmediatamente en la ventana de documento. Las propiedades que aparecen dependen del objeto seleccionado. Para obtener informacin sobre opciones concretas, seleccione un objeto y haga clic en el icono Ayuda, situado en la esquina superior derecha del inspector de propiedades. El inspector de propiedades muestra inicialmente las propiedades utilizadas con mayor frecuencia. Haga clic en la echa de ampliacin, situada en el ngulo inferior derecho, para ver todas las propiedades. Usar el lanzador El lanzador incluye botones que permiten abrir y cerrar diversos inspectores, paletas y ventanas.

Consulte Opciones de la ventana Sitio en la pgina 132, Usar la paleta de bibliotecas en la pgina 255, Usar la paleta de estilos en la pgina 181, Inspector de comportamientos en la pgina 262, Usar el inspector de lneas de tiempo en la pgina 289o Inspector de HTML en la pgina 157.

Para comenzar

73

Usar la paleta de objetos La paleta de objetos contiene botones para la insercin de diversos tipos de objetos, como tablas, capas e imgenes. Haga clic en cualquier botn o arrastre el objeto hasta la ventana de documento para crear el objeto especicado. Dreamweaver cuenta con cuatro paneles en la paleta de objetos: Comn, Formularios, Head e Invisibles. Utilice el men emergente para cambiar de panel. Puede modicar cualquier objeto de la paleta o crear sus propios objetos. Consulte Cambiar la paleta de objetos y el men Insertar en la pgina 310. Cambiar la paleta de objetos y el men Insertar.

El panel Comn contiene los objetos ms utilizados, como las imgenes, las tablas y las capas. El panel Formularios contiene botones que permiten crear formularios y elementos de formularios. El panel Head contiene objetos que permiten agregar diversos elementos HEAD , como las etiquetas META, TITLE y BASE . El panel Invisibles contiene botones que permiten crear objetos no visibles en la ventana de documento, como los puntos de jacin con nombre. Elija Ver > Elementos invisibles para ver los iconos que marcan la posicin de estos objetos. Haga clic en los iconos para seleccionar los objetos y cambiar sus propiedades. Consulte Elementos invisibles en la pgina 89. Varios de los parmetros de preferencias generales afectan a la paleta de objetos. Para cambiar estas preferencias, elija Edicin > Preferencias y seleccione General.

74

Captulo 3

Cuando inserte objetos tales como tablas, secuencias de comandos y elementos HEAD aparecer un cuadro de dilogo solicitando informacin adicional. Puede suprimir estos cuadros de dilogo desactivando la opcin Mostrar dilogo al insertar objetos. Utilice el inspector de propiedades para cambiar las propiedades de los objetos despus de insertarlos. Las preferencias de paleta de objetos permiten visualizar el contenido de la paleta de objetos como Slo texto, Slo iconos o Iconos y texto. Mens de acceso directo Dreamweaver emplea de forma extensiva los mens de acceso directo, ya que proporcionan un mtodo para acceder rpidamente a los comandos y las propiedades ms tiles relacionados con la ventana o el objeto con el que est trabajando. En los mens de acceso directo slo aparecen los comandos pertinentes para la seleccin actual.
Para utilizar los mens de acceso directo: 1

Abra el men de acceso directo. En Windows, haga clic con el botn derecho del ratn en el objeto o la ventana. En Macintosh, pulse Control y haga clic en el objeto o la ventana.

Seleccione el comando del men de acceso directo y suelte el botn del ratn.

Para comenzar

75

Paletas flotantes acoplables La mayora de las paletas e inspectores de Dreamweaver pueden combinarse en una nica paleta con chas de seleccin. Esto facilita el acceso a la informacin sin saturar el espacio de trabajo. (El lanzador, el inspector de propiedades, la ventana Sitio y el inspector de HTML no pueden acoplarse de esta forma.)
Para combinar dos o ms paletas y crear una paleta con fichas de seleccin: 1

Arrastre una paleta otante y colquela sobre otra paleta otante. Cuando vea aparecer un borde resaltado en la paleta de destino, suelte el ratn. Haga clic en cualquiera de las chas de la ventana para traerla a primer plano.

Para evitar que una paleta se una a la paleta con fichas de seleccin:

Pulse la tecla Mays mientras arrastra la paleta.

Para eliminar una ventana de la paleta con fichas de seleccin:

Arrastre esta cha hacia el exterior de la ventana.

Configurar preferencias
Dreamweaver incluye parmetros de conguracin de preferencias que determinan la apariencia general del interfaz de usuario de Dreamweaver, as como las opciones relacionadas con funciones concretas, como capas, hojas de estilos, HTML, editores externos y vista previa de pginas en un explorador. En este sistema de ayuda se facilita informacin sobre opciones de preferencias concretas relacionadas con el correspondiente tema de la funcin de que se trate. Consulte los siguientes temas para obtener informacin sobre las diversas opciones de preferencias. Configurar preferencias generales Use las preferencias generales para introducir parmetros de conguracin que determinen la apariencia general del interfaz de usuario de Dreamweaver. Para cambiar estas preferencias, elija Edicin > Preferencias y haga clic en General.

76

Captulo 3

Configurar preferencias de fuentes/codificacin Utilice las preferencias de fuentes/codicacin para denir las fuentes y la codicacin de fuentes predeterminadas para Dreamweaver. Al igual que ocurre con las preferencias de fuentes de un explorador, estos parmetros permiten manipular texto con la fuente y el tamao deseados sin que ello afecte a la apariencia del documento cuando otros usuarios lo vean en un explorador. Para cambiar las preferencias de fuentes/codicacin, elija Edicin > Preferencias, haga clic en Fuentes/codicacin y elija las opciones deseadas. Determina el juego de fuentes utilizadas para documentos codicados con cada una de las codicaciones de conguracin de fuentes. Los diversos juegos de fuentes deben estar instalados en el sistema para que las fuentes aparezcan como opciones al seleccionar Fuente proporcional, Fuente ja o Inspector de HTML.
Config. fuentes

Es la fuente utilizada para todo el texto que aparece en el Inspector de HTML. El valor predeterminado depende de las fuentes que estn instaladas en el sistema.
Inspector de HTML

Configurar preferencias de barra de estado Utilice las preferencias de barra de estado para denir opciones para la barra de estado, situada en la parte inferior de la ventana de documento. Permite personalizar los tamaos de las ventanas que aparecen en el men emergente de la barra de estado. Consulte Cambiar el tamao de la ventana de documento en la pgina 84.
Tamaos de ventana

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. El tamao de descarga de las imgenes se muestra en el inspector de propiedades cuando se selecciona una imagen.
Velocidad de conexin Mostrar minilanzador en barra de estado

Hace que Dreamweaver muestre el minilanzador en la parte inferior de la ventana de documento. Los botones del minilanzador permiten abrir ventanas, paletas e inspectores.

Para comenzar

77

Configurar preferencias de paletas flotantes Utilice las preferencias de Paletas otantes para determinar las ventanas, paletas e inspectores que siempre deben aparecer sobre la ventana de documento.
Para especificar las preferencias de Paletas flotantes:

Elija Edicin > Preferencias y despus seleccione Paletas otantes. De forma predeterminada, todas las ventanas, paletas e inspectores estn congurados para que aparezcan encima de la ventana de documento. Por ejemplo, si desea que el Inspector de HTML quede debajo de la ventana de documento mientras no se utiliza, anule la seleccin de la opcin HTML. El Inspector de HTML aparecer sobre la ventana de documento slo cuando se encuentre activo. Configurar preferencias de resaltado Las preferencias de resaltado permiten personalizar los colores empleados para identicar las regiones de la plantilla y los elementos de biblioteca en la ventana de documento. Para obtener ms informacin, seleccione uno de los temas siguientes: Para personalizar los colores de resaltado de la plantilla, consulte Preferencias de plantilla en la pgina 98. Para especicar el color de resaltado de los elementos de biblioteca, consulte Congurar preferencias de biblioteca en la pgina 251. Tambin puede especicar un color para etiquetas de terceros para facilitar su distincin de las etiquetas de Dreamweaver.

78

Captulo 3

Usar 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 exploradores, 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 Usar otros editores HTML en la pgina 162. Puede especicar sus exploradores preferidos para la obtencin de una vista previa del sitio. Consulte Vista previa en exploradores en la pgina 153. Puede lanzar un editor de imgenes externo, como Macromedia Fireworks, desde Dreamweaver. Consulte Usar un editor de imgenes externo en la pgina 192. Para obtener informacin acerca de cmo agregar animacin al sitio mediante pelculas de Flash Player, consulte Insertar pelculas de Flash Player en la pgina 301. Para aprender a agregar interaccin al sitio mediante pelculas Shockwave, consulte Insertar pelculas Shockwave en la pgina 299.

Para comenzar

79

80

Captulo 3

CAPTULO 4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Crear documentos

Introduccin a la creacin de documentos

Los documentos son las pginas que los usuarios ven cuando visitan un sitio Web. Los documentos contienen texto e imgenes, adems de otros elementos ms sosticados, como sonido, animacin y vnculos con otros documentos. Conforme cree y trabaje con los documentos, Dreamweaver generar automticamente el cdigo HTML subyacente. Use el inspector de HTML para examinar o editar el cdigo fuente HTML. Los documentos se crean en Dreamweaver mediante pginas HTML en blanco o mediante plantillas. Tambin puede abrir y modicar documentos HTML creados en otras aplicaciones. Consulte Crear documentos HTML nuevos en la pgina 82. Cuando edite un documento, podr colocar el contenido en una pgina usando guas visuales, como las cuadrculas y las reglas, o la funcin de ajuste. Las imgenes de rastreo permiten imitar diseos de pgina. Consulte Usar guas visuales en el proceso de diseo en la pgina 83. El texto se agrega a los documentos escribiendo en la ventana de documento o pegando texto procedente de otros orgenes. Las imgenes, las reglas horizontales y otros objetos se agregan utilizando la paleta de objetos o los comandos del men Insertar. Consulte Agregar texto e insertar objetos en la pgina 86. Conforme agregue contenido, podr seleccionar y modicar objetos directamente en la ventana de documento. En algunos casos, es posible que tenga que seleccionar los marcadores que representan a los elementos de la pgina que no estn visibles en la ventana de documento. Consulte Seleccionar elementos en la ventana de documento en la pgina 88.

81

Use el cuadro de dilogo Propiedades de la pgina para congurar un documento y denir los elementos bsicos de la pgina. El ttulo de la pgina identica al documento ante el usuario. Las imgenes de fondo, los colores de fondo y los colores del texto y los vnculos personalizan la pgina y permiten distinguir el texto normal del hipertexto. Consulte Congurar documentos en la pgina 90. Al elegir los colores, puede seleccionar un color del escritorio o la paleta de colores y especicar que desea limitar la seleccin a los colores seguros para la Web o que desea hacer coincidir los colores de forma exacta. Consulte Elegir colores en la pgina 92. Dreamweaver proporciona una forma sencilla de ver y editar el contenido de la seccin HEAD (encabezado) sin necesidad de editar directamente el cdigo fuente HTML. Consulte Ver y editar el contenido de HEAD en la pgina 93.

Crear documentos HTML nuevos

Puede crear documentos HTML nuevos y vacos en Dreamweaver o basar un documento nuevo en una plantilla. Tambin puede abrir un documento HTML existente independientemente de cmo se haya creado. Generalmente, los documentos HTML se crean para un sitio Web concreto. Para aprender a crear o editar un sitio, consulte Crear un sitio local en la pgina 108.
Para abrir archivos HTML existentes:

Seleccione Archivo > Abrir.

Para crear un documento HTML vaco:

Seleccione Archivo > Nuevo. Si abre el inspector de HTML (seleccione Ventana HTML, HEAD y BODY para que pueda comenzar a trabajar. Mientras escriba en la ventana de documento o inserte objetos tales como tablas e imgenes, podr dejar abierto el inspector de HTML y observar cmo se crea el cdigo fuente HTML.
Nota: Cuando guarde un archivo nuevo, no utilice caracteres ASCII altos (por ejemplo, , , ) en el nombre de archivo si pretende colocar el archivo en un servidor remoto. Muchos servidores codican estos caracteres al cargarlos y provocan la ruptura de los vnculos existentes con el archivo.

82

Captulo 4

Para crear un nuevo documento basado en una plantilla: 1

Elija Archivo > Nueva desde plantilla. Aparecer un cuadro de dilogo con las plantillas disponibles para el sitio actual. Cuando utilice una plantilla, algunas partes del documento quedarn bloqueadas para que no puedan modicarse. Esto garantiza la coherencia cuando utilice una plantilla para mltiples documentos de un mismo sitio.

Seleccione una plantilla y haga clic en Seleccionar. Para modicar las partes editables de la plantilla, seleccione el contenido del marcador de posicin y escriba para reemplazarlo. Las partes no editables de la plantilla se identican mediante un color de resaltado. Para personalizar los colores de resaltado, consulte Preferencias de plantilla en la pgina 98.

Para conocer ms detalles sobre el diseo y la manipulacin de plantillas, consulte Introduccin a las plantillas en la pgina 95.

Usar guas visuales en el proceso de diseo

Dreamweaver cuenta con numerosas funciones para ayudarle a disear documentos y predecir la apariencia nal que tendrn en los exploradores. Puede: Ajustar instantneamente el tamao deseado para la ventana de documento y comprobar si caben los elementos en la pgina. Usar reglas que sirvan de pista visual para la colocacin y el cambio de tamao de las capas o las tablas. Usar una imagen de rastreo como fondo de la pgina para ayudarle a imitar un diseo creado en una aplicacin de edicin de ilustraciones o imgenes. Usar la cuadrcula para lograr una mayor precisin en la colocacin de las capas. Las marcas de cuadrcula en la pgina le ayudan a alinear las capas y, cuando est activada la funcin de ajuste, a alinear las capas automticamente con la cuadrcula al crearlas o moverlas. (Los dems objetos, como las tablas, las imgenes y los prrafos, no se ajustan a la cuadrcula.)

Crear documentos

83

Cambiar el tamao de la ventana de documento Las dimensiones actuales (en pxeles) de la ventana de documento, as como varios de los tamaos de monitores ms comunes, aparecen en el men emergente Tamao de ventana de la barra de estado de la ventana. Para lograr un diseo de pgina que tenga una apariencia adecuada en una resolucin concreta (o en varias resoluciones distintas), puede ajustar la ventana de documento con cualquiera de los tamaos enumerados en el men emergente.
Para cambiar los valores que aparecen en el men emergente Tamao de ventana: 1 2

Elija Edicin > Preferencias y seleccione Barra de estado. Haga clic en cualquiera de los valores de Ancho o Alto de la lista de tamaos de ventana y escriba un nuevo valor. Para conseguir que la ventana de documento se ajuste slo a un ancho especco (sin modicar el alto), seleccione un valor de altura y elimnelo.

Haga clic en el campo Descripcin para introducir el texto descriptivo sobre un tamao especco. Por ejemplo, puede escribir SVGA o average PC junto a la entrada para un monitor de 800 x 600 pxeles, y "Mac 17 pulg." junto a la entrada para un monitor de 832 x 624 pxeles.

Para agregar un valor al men emergente Tamao de ventana: 1 2

Elija Edicin > Preferencias > Barra de estado. Haga clic en el ltimo valor de la lista y pulse Tab tres veces para crear una nueva la. Introduzca valores para Ancho, Alto y Descripcin.

Mostrar reglas Las reglas pueden mostrarse en los bordes izquierdo y superior de la pgina en pxeles, pulgadas o centmetros.
Para cambiar la configuracin de la regla, elija una de las siguientes opciones:

Para activar y desactivar las reglas, elija Ver > Reglas > Mostrar. Para cambiar el origen, arrastre el punto cero hasta la pgina. Para restaurar el origen a su posicin predeterminada, elija Ver > Reglas > Restablecer origen. Para cambiar la unidad de medida, elija Ver > Reglas y seleccione Pxeles, Pulgadas o Centmetros.

84

Captulo 4

Usar una imagen de rastreo Use una imagen de rastreo como gua para la recreacin del diseo de una pgina diseada en una aplicacin grca. Una imagen de rastreo es una imagen JPG, GIF o PNG que se sita en el fondo de la ventana de documento. Puede ocultar la imagen, congurar 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 explorador. Cuando est visible la imagen de rastreo, la imagen y el color de fondo no estn visibles en la ventana de documento; no obstante, se encontrarn visibles cuando la pgina se muestre en un explorador.
Para colocar una imagen de rastreo en la ventana de documento: 1 2

Seleccione Ver > Imagen de rastreo > Cargar. En el cuadro de dilogo que aparece a continuacin, seleccione una imagen y haga clic en Aceptar. Aparecer el cuadro de dilogo Propiedades de la pgina. Especique la transparencia para la imagen arrastrando el control deslizante Transparencia imagen. Tambin puede elegir una imagen de rastreo o cambiar la transparencia de la imagen de rastreo actual en cualquier momento desde el cuadro de dilogo Propiedades de la pgina seleccionando Modicar > Propiedades de la pgina.

Para mostrar u ocultar la imagen de rastreo:

Seleccione Ver > Imagen de rastreo > Mostrar. Cuando est visible la imagen de rastreo, la imagen y el color de fondo no estarn visibles.
Para cambiar la posicin de una imagen de rastreo, lleve a cabo una de estas operaciones:

Para especicar la posicin de la imagen de rastreo, elija Ver > Imagen de rastreo > Ajustar posicin y despus introduzca los valores de coordenadas X e Y. Para mover la imagen de pxel en pxel, utilice las teclas de echa. Para mover la imagen de 5 en 5 pxeles, pulse Mays y las teclas de echa. Para mover de nuevo la imagen de rastreo hasta la esquina superior izquierda de la ventana de documento (0,0), elija Ver > Imagen de rastreo > Restablecer posicin.

Crear documentos

85

Para alinear la imagen de rastreo con un objeto seleccionado: 1 2

Seleccione un objeto 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 objeto seleccionado.

Usar la cuadrcula Use la cuadrcula como gua visual para colocar y cambiar el tamao de las capas. Si est activado el ajuste, las capas se ajustarn automticamente al punto de cuadrcula ms cercano al moverlas o cambiar su tamao. El ajuste funciona independientemente de si la cuadrcula se encuentra o no visible. Consulte Ajustar capas a la cuadrcula en la pgina 223.

Agregar texto e insertar objetos

Agregue contenido a sus pginas escribiendo o pegando texto e insertando objetos tales como imgenes, tablas y capas.
Para agregar texto al documento, lleve a cabo una de las siguientes operaciones:

Escriba texto directamente en la ventana de documento. Copie texto de otra aplicacin, coloque el cursor en la ventana de documento y elija Edicin > Pegar como texto. El formato de texto aplicado en la otra aplicacin no se conserva, pero s los saltos de lnea. Para obtener ms informacin acerca de cmo aplicar formato al texto, consulte Introduccin a las opciones de formato de texto en la pgina 167.
Para insertar tablas, imgenes y otros objetos en el documento, lleve a cabo una de las siguientes operaciones:

Use los comandos del men Insertar para insertar los objetos especicados en la posicin actual del cursor en el documento. Elija Ventana > Objetos para abrir la paleta de objetos. Localice el tipo de objeto que desea y haga clic en el objeto o arrstrelo para insertarlo en la ventana de documento. Para la mayora de los objetos, aparece un cuadro de dilogo en el que se le solicita que seleccione opciones o el archivo deseado. Para ocultar el cuadro de dilogo, elija Edicin > Preferencias, seleccione General y anule la seleccin de la opcin Mostrar dilogo al insertar objetos.

86

Captulo 4

Reglas horizontales Las reglas horizontales son tiles para organizar la informacin. En una pgina, el texto y los objetos pueden estar visualmente separados mediante una o varias reglas. Las reglas horizontales tambin pueden usarse para subrayar o destacar ttulos u otros elementos.
Para crear una regla horizontal: 1

En la ventana de documento, coloque el cursor en el lugar en el que desee insertar una regla horizontal. Lleve a cabo una de estas operaciones: Elija Insertar > Regla horizontal. Elija Ventana > Objetos para abrir la paleta de objetos y, seguidamente, haga clic en el botn Regla horizontal.

Para modificar una regla horizontal: 1 2 3

En la ventana de documento, seleccione la regla horizontal. Elija Ventana > Propiedades para abrir el inspector de propiedades. Modique la regla horizontal cambiando cualquiera de las siguientes propiedades:
W y H Especican la anchura y la altura de la regla en pxeles o como porcentaje del tamao de la pgina.

Especica la alineacin de la regla (Predeterminada, Izquierda, Centro o Derecha). Esta conguracin slo es aplicable si la anchura de la regla es inferior a la anchura de la ventana del explorador.
Alinear

Especica si la regla debe trazarse con sombreado. Anule la seleccin de esta opcin para dibujar la regla con color slido.
Sombreado

Crear documentos

87

Seleccionar elementos en la ventana de documento

Normalmente, para seleccionar un elemento slo es necesario hacer clic en l. Si un elemento es invisible, es posible que tenga que convertirlo en visible para poder seleccionarlo. Utilice estas tcnicas para seleccionar elementos: Para seleccionar un elemento de la ventana de documento, arrastre el puntero hasta el elemento y haga clic en l. Para seleccionar un elemento invisible, elija Ver > Elementos invisibles y haga clic en el marcador del elemento. Consulte Elementos invisibles en la pgina 89. 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 dene a la capa se encuentra en un lugar jo. Dreamweaver muestra marcadores para indicar la posicin del cdigo correspondiente a los elementos invisibles. Para ver el cdigo HTML asociado al texto u objeto seleccionado, elija Ventana > HTML para abrir el inspector de HTML. Para seleccionar cdigo HTML sin abrir el inspector de HTML, haga clic en una etiqueta del selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento. El selector de etiquetas siempre muestra las etiquetas que controlan la seleccin o la posicin actual del cursor. Por ejemplo, si ha denido un vnculo para una imagen, el cdigo HTML tendr una apariencia semejante a sta:
<a href=http://www.macromedia.com><img src="agraphic.gif" ></a>

Al hacer clic en la imagen de la ventana de documento, se selecciona <img

src="agraphic.gif">.

Para seleccionar el vnculo, haga clic en la imagen de la ventana de documento y luego haga clic en la <a> que aparece en el selector de etiquetas.

88

Captulo 4

Elementos invisibles Elija Ver > Elementos invisibles para mostrar u ocultar en la ventana de documento los marcadores que representan a los elementos invisibles, como son los formularios, los puntos de jacin con nombre, los comentarios y las secuencias de comandos. Al mostrar los elementos invisibles, podr seleccionarlos, verlos y cambiar sus propiedades en el inspector de propiedades. Los marcadores de elementos que aparecen al elegir Ver > Elementos invisibles dependen de la conguracin del panel Elementos invisibles del cuadro de dilogo Preferencias. Por ejemplo, puede especicar que los puntos de jacin con nombre sean visibles, pero no los saltos de lnea. Consulte Preferencias de elementos invisibles en la pgina 89. Determinados elementos invisibles (como los comentarios, los puntos de jacin con nombre y las secuencias de comandos) pueden crearse mediante los botones del panel Invisibles de la paleta de objetos y modicarse mediante el inspector de propiedades. Consulte Usar la paleta de objetos en la pgina 74. Preferencias de elementos invisibles Utilice las preferencias de elementos invisibles para mostrar u ocultar los marcadores que representan a elementos que no son visibles desde la ventana de documento, como las secuencias de comandos, los comentarios y los puntos de jacin con nombre. Al mostrar los elementos invisibles, podr seleccionarlos, verlos y cambiar sus propiedades en el inspector de propiedades. Para cambiar estas preferencias, elija Edicin > Preferencias, haga clic en Elementos invisibles y elija los elementos que desee convertir en visibles o invisibles. Una marca de vericacin junto al nombre del elemento en el cuadro de dilogo indica que el elemento se encontrar visible. Deber seleccionar Ver > Elementos invisibles para que los marcadores que representan a los elementos invisibles aparezcan en la ventana de documento . Para obtener una descripcin de cada una de las preferencias de Elementos invisibles, consulte la Ayuda de Dreamweaver.

Crear documentos

89

Configurar documentos
Los ttulos de pgina, las imgenes y colores de fondo y los colores del texto y los vnculos son propiedades bsicas de los documentos HTML. Los ttulos de pgina identican y dan nombre a los documentos. Las imgenes y los colores de fondo denen la apariencia global del documento. Los colores del texto ayudan a los usuarios a distinguir entre el texto normal y el hipertexto, as como a reconocer qu vnculos han visitado y cules no. Cambiar el ttulo de una pgina El ttulo de una pgina HTML es de vital importancia. Ayuda a los usuarios a conocer lo que estn viendo mientras exploran, al tiempo que identica a la pgina en listas de historial y de marcadores. Si no asigna ningn ttulo a una pgina, sta aparecer en la ventana del explorador, as como en las listas de marcadores y de historial como Documento sin ttulo.
Para cambiar el ttulo de una pgina: 1

Lleve a cabo una de estas operaciones: Elija Modicar > Propiedades de la pgina. Elija Propiedades de la pgina del men de acceso directo haciendo clic con el botn derecho del ratn en la ventana de documento (Windows) o pulsando Control mientras hace clic en la ventana de documento (Macintosh). Elija Ver > Contenido de Head y haga clic en el botn Ttulo.

Introduzca el ttulo para la pgina en el campo Ttulo y haga clic en Aceptar. El ttulo aparecer en la barra de estado de la ventana de documento. El nombre del archivo de la pgina y la carpeta en la que est guardado el archivo aparecen entre parntesis junto al ttulo.

90

Captulo 4

Definir una imagen de fondo o un color de pgina Utilice el cuadro de dilogo Propiedades de la pgina para denir una imagen o un color para el fondo de la pgina. Si utiliza tanto una imagen como un color de fondo, el color aparecer mientras se descarga la imagen. Si la imagen de fondo tiene pxeles transparentes, el color de fondo se ver a travs de ellos.
Para definir una imagen o un color de fondo: 1

Elija Modicar > Propiedades de la pgina o seleccione Propiedades de la pgina del men de acceso directo. Introduzca la ruta de acceso a la imagen de fondo en el cuadro Imagen de fondo o haga clic en el icono de carpeta para localizar y seleccionar la imagen. Dreamweaver forma un mosaico con la imagen de fondo (la repite) si sta no ocupa toda la ventana del explorador.

Utilice un color de fondo del cuadro Color de fondo. Consulte Elegir colores en la pgina 92.

Definir colores predeterminados de texto Dena 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 denir los colores del fondo de la pgina y del texto. Consulte Elegir colores en la pgina 92.
Para definir los colores predeterminados del texto, lleve a cabo una de las siguientes operaciones:

Elija Modicar > Propiedades de la pgina y, seguidamente, seleccione un color para las opciones Color del texto, Color de los vnculos, Vnculos visitados y Vnculos activos. Elija Comandos > Denir 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 explorador.

Crear documentos

91

Elegir colores
Muchos de los cuadros de dilogo e inspectores de propiedades de Dreamweaver incluyen un cuadro de color que permite abrir la paleta de colores. Utilice la paleta de colores para elegir un color para un elemento.
Para elegir un color en Dreamweaver: 1

Elija un cuadro de color de cualquier cuadro de dilogo o inspector de propiedades.

Cuadro de

Para elegir un color, lleve a cabo una de las siguientes operaciones: Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de la paleta son seguros para la Web. Use el cuentagotas para copiar el color de cualquier elemento del escritorio. Haga clic en el botn de cuentagotas seguro para la Web para limitar la seleccin a los colores seguros para la Web. Cuando esta opcin est activada, el color seleccionado se ajusta al color seguro para la Web ms cercano.

Haga clic en el botn de borrador para eliminar el color actual sin elegir otro diferente. Haga clic en el botn de paleta para abrir el selector de colores del sistema. Estos colores no estn limitados a los colores seguros para la Web.

92

Captulo 4

Colores seguros para la Web En HTML, los colores se expresan como valores hexadecimales (por ejemplo, #FF0000) o como nombres de colores (red). Los colores comunes a Netscape Navigator y Microsoft Internet Explorer en los sistemas Windows y Macintosh cuando se ejecutan en el modo de 256 colores se denominan colores seguros para la Web. 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. 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). Todos los selectores de colores de Dreamweaver utilizan la paleta de 212 colores seguros para la Web; al seleccionar un color de la paleta, se muestra el valor hexadecimal correspondiente al color. Aunque los cuatro colores mencionados anteriormente no estn incluidos en la paleta de colores seguros para la Web de Dreamweaver, puede editar los valores hexadecimales de cualquier campo de color manualmente si desea utilizarlos. Para elegir un color no incluido en la gama segura para la Web, haga clic en el botn de paleta, situado en la esquina inferior derecha, para abrir el selector de colores del sistema. Las versiones de 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 equipos 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. Determina la codicacin HTML de los caracteres y las fuentes usadas para mostrar el documento.

Ver y editar el contenido de HEAD

Los archivos HTML constan de dos secciones principales: el encabezado (HEAD) y el cuerpo (BODY). BODY es la parte del documento que se encuentra visible para el usuario en una ventana de un explorador (adems de en la ventana de documento de Dreamweaver). La seccin HEAD normalmente no est visible, a excepcin del ttulo (TITLE), que aparece en la barra de ttulo del explorador y de la ventana de documento y que se utiliza como etiqueta para los marcadores del documento. La seccin HEAD contiene informacin importante adems del ttulo (TITLE), incluido el tipo de documento, la codicacin de idioma, las funciones y variables JavaScript y VBScript y las palabras clave y los indicadores de contenido para motores de bsqueda. Puede ver los elementos en la seccin HEAD utilizando el men Ver o el inspector de HTML.

Crear documentos

93

Para ver los elementos de la seccin HEAD de un documento:

Elija Ver > Contenido de Head. Por cada elemento de la seccin HEAD, aparece un icono en la parte superior de la ventana de documento.
Para insertar elementos en la seccin HEAD de un documento: 1

Elija Head del men emergente situado en la parte superior de la paleta de objetos. Haga clic en uno de los botones de la paleta de objetos. Introduzca opciones para el elemento en el cuadro de dilogo que aparece a continuacin o en el inspector de propiedades.

2 3

Para editar los elementos de la seccin HEAD de un documento: 1 2

Haga clic en uno de los iconos del rea Head para seleccionarlo. Dena o modique 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: Propiedades META Propiedades de ttulo Propiedades de palabras clave Propiedades de descripcin Propiedades de actualizacin Propiedades de secuencia de comandos Propiedades de base Propiedades de vnculo

94

Captulo 4

CAPTULO 5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Usar plantillas

Introduccin a las plantillas

Use plantillas para crear documentos para el sitio que tengan una estructura y una apariencia comunes. Las plantillas son tiles si desea asegurarse de que todas las pginas del sitio comparten determinadas caractersticas, independientemente de si est creando un nuevo sitio o si est actualizando un sitio existente. En lugar de congurar las propiedades correctas para cada nueva pgina o realizar cambios en cada una de las pginas, use una plantilla para realizar cambios en varias pginas a la vez. Al crear una plantilla, podr indicar qu elementos de la pgina debern permanecer constantes (no editables) y qu elementos podrn modicarse. Por ejemplo, si desea publicar una revista en lnea, la cabecera probablemente nunca cambie, pero s cambiar el ttulo y el contenido con cada nuevo nmero. Para indicar el estilo y la ubicacin del artculo central, puede utilizar texto marcador de posicin y denirlo como regin editable. Para agregar nuevos artculos, el redactor slo tendr que seleccionar el texto marcador de posicin y escribir el artculo sobre l. Puede modicar una plantilla incluso despus de usarla para crear documentos. Al actualizar documentos que usen una plantilla, las secciones no editables de los documentos se actualizarn con los cambios efectuados en la plantilla.

95

Crear plantillas
Puede crear una plantilla a partir de un documento HTML existente y despus modicarla para que se ajuste a sus necesidades, o bien puede crear una plantilla comenzando de cero a partir de un documento HTML en blanco. Las plantillas se almacenan automticamente en la carpeta Templates de la carpeta raz local para el sitio. Al crear una nueva plantilla, la carpeta Templates se crea si es que no existe an.
Para guardar un documento existente como plantilla: 1 2 3

Elija Archivo > Abrir y seleccione un documento existente. Elija Archivo > Guardar como plantilla. En el cuadro de dilogo que aparece a continuacin, seleccione un sitio e introduzca un nombre para la plantilla en el cuadro Guardar como. Haga clic en Guardar.

Para crear una plantilla nueva en blanco: 1 2

Elija Ventana > Plantillas. En la paleta de plantillas, haga clic en Nueva. Se agregar una nueva plantilla sin ttulo a la lista de plantillas de la paleta. Con la plantilla an seleccionada, introduzca un nombre para ella.

Para editar una plantilla, lleve a cabo una de estas operaciones: 1 2

Elija Ventana > Plantillas. En la paleta de plantillas, haga doble clic en el nombre de la plantilla.

Configurar propiedades de pgina de plantilla Las propiedades de pgina de plantilla controlan todas las opciones del documento excepto el ttulo de la pgina. Los cambios que se realicen en las propiedades de la pgina de un documento que utilice plantilla (excepto el ttulo) sern ignorados. Para cambiar las propiedades de una pgina despus de aplicar una plantilla, modique las propiedades de la pgina para la plantilla y, seguidamente, actualice las pginas que empleen la plantilla. Consulte Modicar plantillas y actualizar el sitio en la pgina 104.

96

Captulo 5

Para definir las propiedades de pgina de la plantilla: 1 2

Abra la plantilla y elija Modicar > Propiedades de la pgina. Especique las opciones deseadas para la pgina y haga clic en Aceptar. Para conocer ms detalles sobre las propiedades de pgina, consulte Propiedades de pgina en la Ayuda de Dreamweaver.

Definir las regiones editables de una plantilla

Una plantilla consta de dos tipos de regiones: editables y bloqueadas (no editables). Las regiones editables son secciones de una plantilla que incluyen contenido cambiante, como el de un artculo, por ejemplo. Las regiones bloqueadas son secciones de una plantilla que incluyen contenido esttico que no cambia, como el logotipo de una empresa o los elementos de navegacin estndar del sitio. De forma predeterminada, las plantillas estn bloqueadas. Puede agregar contenido a la plantilla pero, al guardarla, todo el contenido se marca como no editable. Si crea un documento desde una plantilla de estas caractersticas, Dreamweaver le advertir de que el documento no contendr regiones editables. Para que una plantilla sea til, deber crear regiones editables, marcar el contenido existente como editable o agregar nuevo contenido y marcarlo como editable. Al editar la plantilla en s, podr realizar cambios tanto en las regiones editables como en las bloqueadas. Sin embargo, cuando aplique la plantilla a un documento, slo podr realizar cambios en las regiones editables del documento; no podr modicar las regiones bloqueadas del documento.
Para definir el contenido existente como regin editable: 1 2 3

Seleccione el texto o el contenido que desee convertir en editable. Elija Modicar > Plantillas > Marcar seleccin como editable. En el cuadro de dilogo Nueva regin editable, introduzca un nombre para la regin. El texto o contenido se resaltar en la plantilla. Puede marcar como editable toda una tabla o slo una de sus celdas. Si embargo, no podr marcar varias celdas como editables al mismo tiempo. Las capas y el contenido de las capas son elementos independientes; ambos pueden marcarse como editables. Al marcar una capa como editable, podr cambiar su posicin; al marcar el contenido de una capa como editable, podr cambiar el contenido de la capa.

Usar plantillas

97

Para definir una nueva regin editable: 1 2 3

Coloque el cursor en la posicin en la que desea insertar la regin editable. Elija Modicar > Plantillas > Nueva regin editable. En el cuadro de dilogo Nueva regin editable, introduzca un nombre para la regin. El nombre de la regin, encerrado entre llaves, es decir, {nombre de regin}, se inserta en la plantilla como un marcador de posicin resaltado. Al aplicar la plantilla a un documento, podr sustituir el marcador de posicin por texto, imgenes u otro tipo de contenido.

Nota: Los siguientes caracteres no son vlidos para los nombres de regiones: apstrofes (), comillas (), parntesis angulares (< >) y ampersands (&).

Preferencias de plantilla Puede personalizar los colores de resaltado para las regiones editables y bloqueadas de una plantilla a travs de las preferencias de Resalto. El color de las regiones editables aparece en la propia plantilla. Sin embargo, el color de las regiones bloqueadas aparece en los documentos que utilizan dicha plantilla.
Para cambiar el color de resaltado de la plantilla: 1 2

Elija Edicin > Preferencias y seleccione Resalto. Haga clic en el cuadro de color de Regiones editables y seleccione un color de resaltado. Repita esta operacin para las Regiones bloqueadas. Haga clic en Mostrar para alternar la visualizacin de estos colores en la ventana de documento. Haga clic en Aceptar.

Para ver los colores de resaltado en la ventana de documento:

Elija Ver > Elementos invisibles. Los colores de resaltado slo aparecen en la ventana de documento cuando est activado Ver > Elementos invisibles.

98

Captulo 5

Ver regiones editables y bloqueadas Las regiones editables y bloqueadas aparecen en la ventana de documento como texto y objetos resaltados. Para obtener informacin sobre la conguracin de las preferencias de resaltado, consulte Preferencias de plantilla en la pgina 98. En una plantilla, las regiones editables se encuentran resaltadas. No obstante, puede cambiar tanto el contenido editable como el bloqueado.

Es posible modicar tanto las regiones bloqueadas como las editables.

Las regiones editables estn resaltadas.

Las regiones bloqueadas aparecen resaltadas en los documentos que utilizan plantilla. Slo podr realizar cambios en el contenido editable (no resaltado).

Las regiones bloqueadas estn resaltadas. Slo es posible modicar las regiones editables.

Usar plantillas

99

Ver HTML editable y bloqueado El contenido editable se delimita en HTML mediante los comentarios de Dreamweaver #BeginEditable y #EndEditable. El cdigo HTML para un marcador de posicin editable denominado Edit-Region tendra la siguiente apariencia:
<!-- #BeginEditable "Edit-Region" --> {Editable-Region} <!-- #EndEditable --> El cdigo HTML para una tabla editable denominada Edit-Table tendra la siguiente apariencia: <!-- #BeginEditable "Edit-Table" --> <table width="77%" border="1"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> <!-- #EndEditable -->

Las regiones editables de las plantillas se muestran resaltadas en la ventana HTML. No obstante, puede cambiar tanto el cdigo fuente HTML editable como el bloqueado.

El cdigo HTML editable est resaltado.

Es posible modicar tanto las regiones editables como las bloqueadas.

100

Captulo 5

Las regiones bloqueadas de los documentos que usan plantilla se muestran resaltadas en la ventana HTML. Slo podr realizar cambios en el cdigo fuente HTML editable (no resaltado).

El cdigo HTML bloqueado est resaltado. Slo es posible modicar el cdigo HTML editable.

Quitar la marca de una regin Si marca una regin como editable y despus desea convertirla de nuevo en no editable (bloquearla), utilice el comando Quitar la marca de regin editable.
Para quitar la marca de una regin (convertirla en no editable): 1 2

Elija Modicar > Plantillas > Quitar la marca de regin editable. Seleccione el nombre de la regin de la lista y haga clic en Aceptar. La regin quedar bloqueada.

Usar plantillas

101

Usar estilos, lneas de tiempo y comportamientos en plantillas Las plantillas admiten plenamente los estilos, las lneas de tiempo y los comportamientos personalizados. No obstante, cualquier documento que use una plantilla no podr usar hojas de estilos, lneas de tiempo ni comportamientos propios, sino que deber usar los denidos en la plantilla. Esto se debe a que los estilos, las lneas de tiempo y los comportamientos tienen componentes en la seccin HEAD del documento, que no es editable para los documentos que usan plantilla. Los estilos, las lneas de tiempo y los comportamientos slo pueden aplicarse a las regiones editables de un documento que use plantilla. Si desea ms informacin sobre el uso de estilos, consulte Aplicar formato al texto con hojas de estilo en la pgina 174. Si desea ms informacin sobre lneas de tiempo y comportamientos, consulte Introduccin a la interactividad y la animacin en la Ayuda de Dreamweaver. Usar la paleta de plantillas Use la paleta de plantillas para crear nuevas plantillas y administrar las plantillas existentes.
Para abrir la paleta de plantillas:

Elija Ventana > Plantillas. El panel superior de la paleta de plantillas enumera todas las plantillas disponibles para el sitio. El panel inferior muestra el contenido de la plantilla seleccionada.
Para editar una plantilla:

Seleccione una plantilla de la lista y haga clic en Abrir o haga doble clic en el nombre en la lista.
Para cambiar el nombre de una plantilla:

Haga clic una vez en el nombre de la plantilla seleccionada. Cuando el nombre se convierta en un campo editable, escriba el nuevo nombre. Al cambiar el nombre de una plantilla, las referencias a dicha plantilla no se actualizan automticamente. Para actualizar la referencia, debe volver a aplicar al documento la plantilla con su nuevo nombre. Consulte Crear documentos basados en plantillas en la pgina 103.

102

Captulo 5

Crear documentos basados en plantillas

Puede usar una plantilla como punto de partida para la creacin de un nuevo documento o aplicarla a un documento existente.
Para crear un nuevo documento basado en una plantilla, lleve a cabo una de las siguientes operaciones:

Elija Archivo > Nuevo desde plantilla. En el cuadro de dilogo que aparece a continuacin, seleccione una plantilla y haga clic en Seleccionar. Cree un documento nuevo y, seguidamente, aplquele una plantilla arrastrndola desde la paleta de plantillas.
Para aplicar una plantilla a un documento existente, lleve a cabo una de estas operaciones:

Elija Modicar > Plantillas > Aplicar plantilla a pgina. Elija una plantilla de la lista y haga clic en Seleccionar. Arrastre la plantilla de la paleta de plantillas a la ventana de documento. Seleccione la plantilla en la paleta de plantillas y haga clic en Aplicar a pgina. Al aplicar una plantilla a un documento existente, el contenido de la plantilla se agregar al documento. Si ya se ha aplicado una plantilla al documento, Dreamweaver intentar localizar las regiones editables que tengan el mismo nombre en ambas plantillas e insertar el contenido de las regiones editables en las correspondientes regiones editables de la nueva plantilla. Si hay regiones editables que no coinciden en las dos plantillas, o si una regin editable en la anterior plantilla no cuenta con su correspondiente regin en la nueva plantilla, aparecer un cuadro de dilogo en el que se le pedir conrmacin para eliminar las regiones sobrantes o transferirlas a la nueva plantilla. Si hay ms regiones editables en la nueva plantilla, aparecern en los documentos como contenido marcador de posicin.

Usar plantillas

103

Localizar las regiones editables de un documento Todas las regiones editables del cuerpo de una plantilla se enumeran en la parte inferior del men Modicar > Plantillas. Use esta lista para seleccionar y editar las regiones.
Para localizar una regin editable y seleccionarla en el documento:

Seleccione Modicar > Plantillas y elija el nombre de la regin de la lista. La regin se seleccionar en el documento. Comience a escribir para sustituir el contenido de la regin. Separar un documento de una plantilla Para realizar cambios tanto en las regiones bloqueadas como en las regiones editables de una pgina que usa una plantilla, en primer lugar deber separar la pgina de la plantilla. Una vez separada, podr editar la pgina como si no se le hubiera aplicado ninguna plantilla. No obstante, la pgina ya no se actualizar cuando se actualice la plantilla.
Para separar un documento de una plantilla:

Elija Modicar > Plantillas > Separar de NombrePlantilla.dwt. La pgina se separar de la plantilla y todas las regiones se convertirn en editables.

Modificar plantillas y actualizar el sitio

Al realizar un cambio en una plantilla usada en el sitio actual, Dreamweaver le pedir conrmacin para actualizar las pginas que usan la plantilla. Tambin puede usar los comandos de actualizacin para actualizar manualmente la pgina actual o el sitio completo. Aplicar los comandos de actualizacin es lo mismo que volver a aplicar una plantilla.
Para abrir la plantilla usada para crear el documento actual:

Elija Modicar > Plantillas > Abrir NombrePlantilla.dwt.

Para actualizar el documento actual con la versin ms reciente de una plantilla:

Elija Modicar > Plantillas > Actualizar pgina actual.

104

Captulo 5

Para actualizar el sitio completo o todos los documentos que usen una plantilla concreta: 1

Elija Modicar > Plantillas > Actualizar pginas. Aparecer el cuadro de dilogo Actualizar pginas. Desde la opcin Buscar en, lleve a cabo una de las operaciones siguientes: Seleccione Todo el sitio y elija el nombre del sitio. Se actualizarn todas las pginas del sitio seleccionado con los cambios de sus correspondientes plantillas. Seleccione Archivos que usan y elija el nombre de la plantilla. Se actualizarn todas las pginas del sitio actual que usen la plantilla seleccionada.
Nota: Si ha cambiado el nombre a una plantilla, deber volver a aplicar la plantilla a los documentos que hacen referencia a ella antes de actualizar el sitio completo. Consulte Usar la paleta de plantillas en la pgina 102.

3 4

En la opcin Actualizar, asegrese de que est activada la opcin Plantillas. Haga clic en Iniciar.

Importar y exportar contenido XML

Use las funciones de importacin y exportacin de XML para separar las regiones editables de las bloqueadas en documentos que usen plantilla o para combinar las regiones editables de un documento con una plantilla existente. Esto permite exportar el contenido editable y modicarlo, o bien desarrollar el contenido fuera de Dreamweaver.
Para exportar las regiones editables de un documento como XML: 1

Elija Archivo > Abrir y abra un documento que use una plantilla (y que tenga regiones editables). Elija Archivo > Exportar > Exportar regiones editables como XML. En el cuadro de dilogo XML que aparece a continuacin, seleccione una notacin de etiqueta y haga clic en Aceptar. Para obtener informacin acerca de las notaciones de etiquetas, consulte Notaciones de etiquetas XML en la pgina 106.

2 3

En el cuadro de dilogo que aparece, asigne un nombre al archivo XML y haga clic en Guardar. Al exportar un documento, el archivo XML generado contiene el nombre de la plantilla que usa el documento y todos los nombres de las regiones editables.

Usar plantillas

105

Para importar contenido XML: 1 2

Elija Archivo > Importar XML a plantilla. Seleccione el archivo XML y haga clic en Abrir. Al importar un archivo XML, Dreamweaver combina el contenido XML con la plantilla especicada en el archivo XML y muestra el resultado en una nueva ventana de documento. Si no se encuentra la plantilla especicada, Dreamweaver le pedir que seleccione la plantilla que desea usar.

Notaciones de etiquetas XML Dreamweaver permite exportar contenido mediante dos notaciones de etiquetas distintas: Nombres de regiones editables como etiquetas XML o como etiquetas XML estndar de Dreamweaver. La notacin que use depender de cmo se haya incorporado el contenido XML a su sitio Web. El siguiente cdigo XML se export desde un documento basado en una plantilla denominada newstemplate. El documento incluye una regin editable denominada Edit-Region. Nombres reg. editables como etiquetas XML hace que se usen los nombres de las regiones editables como etiquetas. En este ejemplo, la etiqueta doctitle identica el ttulo de la plantilla y Edit-Region identica la regin editable.
<doctitle> <![CDATA[<title>newstemplate</title>]]> </doctitle> <Edit-Region> <![CDATA[{Edit-Region}]]> </Edit-Region>

Las etiquetas XML estndar de Dreamweaver usan la etiqueta item name. En este ejemplo, las etiquetas item name=doctitle y item name=Edit-Region se usan para identicar el ttulo de la plantilla y la regin editable.
<item name="doctitle"> <![CDATA[ <title>newstemplate</title>]]> </item> <item name="Edit-Region"> <![CDATA[{Edit-Region}]]></item> </item>

106

Captulo 5

CAPTULO 6
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Planicar sitios

Introduccin a la planificacin de sitios

Un sitio es un lugar de almacenamiento para los documentos pertenecientes a un sitio Web. Los sitios pueden residir en servidores locales o remotos. Para comenzar a trabajar con Dreamweaver, deber crear un sitio local. Consulte Crear un sitio local en la pgina 108. Una vez creado el sitio local, use vnculos para conectar con documentos contenidos en el sitio, con documentos de sitios remotos o con direcciones de correo electrnico o secuencias de comandos. Consulte Crear vnculos en la pgina 109 Para ayudarle a gestionar el sitio, Dreamweaver muestra el contenido del sitio como una lista de archivos o como un mapa del sitio. Puede usar el mapa del sitio para crear y ver rpidamente prototipos de su sitio Web. Consulte Trabajar con archivos del sitio en la pgina 121 y Crear mapas de sitios en la pgina 122.

107

Crear un sitio local

Un sitio local requiere un nombre y una carpeta raz local que indica a Dreamweaver dnde tiene proyectado almacenar todos los archivos del sitio. Debe crear un sitio local por cada sitio Web con el que trabaje.. Posteriormente, cuando est listo para publicar y probar el sitio en un servidor remoto, podr agregar informacin adicional sobre el sitio. Para obtener ms informacin sobre los sitios remotos, consulte Denir un sitio en la pgina 130.
Para crear un sitio local: 1 2

Elija Sitio > Nuevo sitio. En el cuadro de dilogo Denicin de sitio para, seleccione Datos locales de la lista Categora. Introduzca las opciones siguientes:
Nombre del sitio

Identica al sitio. El nombre del sitio aparece en la ventana Sitio y en el submen Sitio > Abrir sitio.

Especica la carpeta del disco duro en la que se almacenarn los archivos, las plantillas y los elementos de biblioteca del sitio. Cuando Dreamweaver resuelve vnculos relativos a la raz, lo hace tomando como raz esta carpeta. Introduzca una ruta o haga clic en el icono de la carpeta para examinar y seleccionar la carpeta.
Carpeta raz local

Identica el URL del sitio de forma que puedan vericarse los vnculos contenidos en el sitio que usen URL absolutos. Consulte Comprobar vnculos entre documentos en la pgina 151.
Direccin HTTP

Crea un cach local para acelerar las tareas de gestin de vnculos y sitios. Si no selecciona esta opcin, Dreamweaver volver a preguntarle acerca de la creacin de un cach antes de crear el sitio.
Cach 4

Haga clic en Aceptar.

108

Captulo 6

Crear vnculos
Los vnculos son conexiones con documentos contenidos en el sitio o en otros sitios Web. Puede crear vnculos desde la ventana de documento mediante el inspector de propiedades o el men Modicar. Dreamweaver proporciona varias formas de crear vnculos: Use el icono de sealizacin de archivo para sealar al archivo con el que desee establecer el vnculo. Consulte Crear vnculos con el icono de sealizacin de archivo en la pgina 110. Use el inspector de propiedades para crear vnculos de forma ms tradicional, es decir, escribiendo una ruta a un archivo o localizando el archivo en un disco. Consulte Vincular a un documento en la pgina 113. Use puntos de jacin con nombre para saltar hasta lugares concretos de un documento. Consulte Vincular con un punto de jacin con nombre en la pgina 114. Use vnculos de correo electrnico, nulos y de secuencia de comandos para abrir programas de correo, acceder a eventos JavaScript o ejecutar cdigo JavaScript. Consulte Crear vnculos de correo electrnico, nulos y de secuencia de comandos en la pgina 115. Ver mapa del sitio tambin puede usarse para crear vnculos. Consulte Crear y modicar vnculos en Ver mapa del sitio en la pgina 126. Use la ventana de documento o un explorador para comprobar todos los vnculos. Consulte Comprobar vnculos en la pgina 117. Antes de crear vnculos, asegrese de que comprende la diferencia existente entre las rutas relativas y absolutas y que sabe cmo establecer cada tipo de ruta. Consulte Rutas relativas y absolutas en la pgina 117.

Planificar sitios

109

Crear vnculos con el icono de sealizacin de archivo Cree vnculos mediante el icono de sealizacin de archivo para sealar a otro documento abierto, a un archivo de la ventana Sitio o a un punto de jacin visible en un documento abierto. El icono de sealizacin de archivo se encuentra en el inspector de propiedades y en Ver mapa del sitio cuando se selecciona un archivo. Tambin aparece cuando se pulsa Mays mientras se arrastra una seleccin.
Para establecer un vnculo con un documento mediante el icono de sealizacin de archivo en el inspector de propiedades: 1 2

Seleccione texto o una imagen en la ventana de documento. Arrastre el icono de sealizacin de archivo desde el inspector de propiedades y seale a otro documento abierto, a un punto de jacin visible en un documento abierto o a un archivo de la ventana Sitio. El campo Vnculo se actualizar para mostrar el vnculo. Suelte el ratn para establecer el vnculo.

Cmo arrastrar el icono de sealizacin de archivo desde el inspector de propiedades hasta un archivo de la ventana Sitio.

110

Captulo 6

Para crear un vnculo desde una seleccin en un documento abierto: 1 2

Seleccione texto o una imagen en la ventana de documento. Pulse Mays y, al mismo tiempo, arrastre la seleccin. Conforme arrastre, aparecer el icono de sealizacin de archivo. Seale a otro documento abierto, a un punto de jacin visible en un documento abierto o a un archivo de la ventana Sitio. Suelte el ratn para establecer el vnculo.

Cmo arrastrar el icono de sealizacin de archivo desde una seleccin de un documento (mientras se pulsa Mays) hasta un archivo de la ventana Sitio.

Planificar sitios

111

Para crear un vnculo desde un archivo del mapa del sitio: 1

Seleccione una pgina HTML del mapa del sitio. Aparecer el icono de sealizacin de archivo junto al archivo. Arrastre el icono de sealizacin de archivo y seale a otro documento abierto, a un punto de jacin visible en un documento abierto o a un archivo de la ventana Sitio.

Cmo arrastrar el icono de sealizacin de archivo desde un archivo seleccionado en Ver mapa del sitio hasta un archivo de Ver archivos del sitio en la ventana Sitio. Para obtener informacin acerca de la creacin de un mapa del sitio, consulte Crear mapas de sitios en la pgina 122.

112

Captulo 6

Vincular a un documento Use el inspector de propiedades para vincular una imagen o un rango de texto del documento actual con otro documento.
Para crear vnculos entre documentos: 1 2

Seleccione texto o una imagen en la ventana de documento. Abra el inspector de propiedades (Ventana > Propiedades) y lleve a cabo una de las siguientes operaciones: Escriba una ruta en el cuadro Vnculo. Para establecer un vnculo con un documento del sitio, introduzca una ruta relativa al documento o relativa a la raz. Para establecer un vnculo con un documento externo al sitio, introduzca la ruta absoluta. Haga clic en el icono de carpeta para localizar y seleccionar un archivo. La ruta del archivo aparecer en el campo URL. Use la opcin Relativo a para que la ruta sea relativa al documento o relativa a la raz del sitio. Haga clic en Seleccionar. Arrastre un archivo desde la ventana Sitio hasta el campo Vnculo del inspector de propiedades.

Para que el documento vinculado aparezca en otro lugar distinto a la ventana o marco actual, seleccione un nombre de marco del men emergente Destino o elija uno de los siguientes destinos reservados:
_blank

carga el documento vinculado en una nueva ventana de explorador sin nombre.

carga el documento vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vnculo. Si el marco que contiene al vnculo no est anidado, el documento vinculado se cargar en la ventana completa del explorador.
_parent _self carga el documento vinculado en el mismo marco o la misma ventana que

el vnculo. Este destino est implcito, por lo que normalmente no es preciso especicarlo. carga el documento vinculado en la ventana completa del explorador, eliminando de esta forma todos los marcos.
_top

Planificar sitios

113

Vincular con un punto de fijacin con nombre Los puntos de jacin con nombre marcan posiciones concretas de un documento. Use puntos de jacin con nombre para saltar hasta una posicin marcada del documento actual o para establecer un vnculo con una posicin marcada de un documento distinto.
Para crear un punto de fijacin con nombre: 1

En la ventana de documento, coloque el cursor en el lugar en el que desee insertar el punto de jacin con nombre. Lleve a cabo una de estas operaciones: Elija Insertar > Punto de jacin con nombre. Elija Ventana > Objetos, seleccione Invisibles del men emergente de la parte superior de la paleta de objetos y haga clic en el botn de punto de jacin.

Introduzca un nombre para el punto de jacin en cuadro de dilogo que aparece a continuacin. Si el marcador del punto de jacin no aparece en la posicin del cursor, elija Ver > Elementos invisibles.

Para establecer un vnculo con un punto de fijacin con nombre: 1 2

Seleccione texto o una imagen en la ventana de documento. En el inspector de propiedades, introduzca un signo de nmero (#) y el nombre del punto de jacin en el cuadro Vnculo. Por ejemplo: Para establecer un vnculo con un punto de jacin denominado "dos" del archivo actual, escriba #dos. Para establecer un vnculo con un punto de jacin denominado "dos" de un archivo distinto de la misma carpeta, escriba nombrearchivo.html#dos.

114

Captulo 6

Para establecer un vnculo con un punto de fijacin con nombre mediante el mtodo de sealizacin de archivo: 1 2 3

Elija Ver > Elementos invisibles para convertir en visible el punto de jacin. Seleccione texto o una imagen en la ventana de documento. Lleve a cabo una de estas operaciones: Haga clic en el icono de sealizacin de archivo en el inspector de propiedades y arrstrelo hasta el punto de jacin con el que desee establecer el vnculo: un punto de jacin del mismo documento o un punto de jacin de otro documento abierto. Pulse Mays y, al mismo tiempo, haga clic en la ventana de documento y arrastre hasta el punto de jacin con el que desea establecer el vnculo: un punto de jacin del mismo documento o un punto de jacin de otro documento abierto.

Crear vnculos de correo electrnico, nulos y de secuencia de comandos Los vnculos ms utilizados son los que se establecen con documentos y puntos de jacin con nombre (consulte Vincular a un documento en la pgina 113 y Vincular con un punto de jacin con nombre en la pgina 114, respectivamente), aunque tambin hay otros tipos. Cuando el usuario hace clic en los vnculos de correo electrnico se abren ventanas de mensaje utilizando el programa de correo asociado al explorador del usuario. El campo Para de la ventana de mensaje se rellena automticamente con la direccin especicada en el vnculo.
Para crear un vnculo de correo electrnico: 1 2

Seleccione texto o una imagen en la ventana de documento. En el inspector de propiedades, escriba : mailto: y, a continuacin, una direccin de correo electrnico en el cuadro Vnculo. Pulse la tecla Entrar.

Como su propio nombre indica, los vnculos nulos no establecen ningn vnculo. Este tipo de vnculos sirven para acceder a eventos JavaScript disponibles para vnculos, aunque no para texto o imgenes, sin sacar al usuario de la pgina actual. Por ejemplo, en la mayora de los exploradores, las imgenes no reconocen el evento onMouseOver Por esta razn es necesario establecer en vnculos nulos las imgenes para aplicar resaltos de imgenes dinmicas (el comportamiento Intercambiar imagen de Dreamweaver realiza esta funcin de manera automtica).

Planificar sitios

115

Para crear un vnculo nulo: 1 2

Seleccione texto o una imagen en la ventana de documento. En el cuadro Vnculo del inspector de propiedades escriba el carcter de nmero (#). Pulse la tecla Entrar.

Los vnculos de secuencia de comandos 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 secuencia de comandos tambin pueden emplearse para realizar clculos, validar formularios y otras tareas de procesamiento cuando el usuario hace clic en un elemento especco.
Para crear un vnculo de secuencia de comandos: 1 2

Seleccione texto o una imagen en la ventana de documento. En el cuadro Vnculo del inspector de propiedades, escriba javascript: y, a continuacin, cdigo JavaScript o una llamada de funcin. Por ejemplo, si introduce javascript:alert(`Esta funcin no es vlida') en el cuadro Vnculo, se crear un vnculo que mostrar un cuadro de advertencia JavaScript con el mensaje Esta funcin no es vlida.
Nota: Dado que el cdigo JavaScript aparece entre comillas dobles (como el valor del atributo HREF deber utilizar comillas simples en el cdigo de la secuencia de comandos o anular su valor situando barras invertidas delante de las comillas dobles (por ejemplo, \"Esta funcin no es vlida\).

116

Captulo 6

Comprobar vnculos Los vnculos no estn activos en la ventana de documento (es decir, al hacer clic en ellos no se accede al documento vinculado), ya que para modicar el texto o las imgenes asociados es necesario hacer clic en ellos. Si desea editar un archivo asociado con un vnculo puede abrirlo en Dreamweaver. Sin embargo, para comprobar los vnculos deber utilizar un explorador. Consulte Comprobar el sitio en la pgina 149.
Para comprobar vnculos en un explorador:

Elija Archivo > Vista previa en el explorador.

Para abrir documentos vinculados en Dreamweaver, lleve a cabo una de estas operaciones:

Seleccione el vnculo y elija Modicar > Hipervnculo > Abrir pgina vinculada. Pulse Control (Windows) o Comando (Macintosh) y haga doble clic en el vnculo.
Nota: El documento vinculado debe encontrarse en el disco local.

Rutas relativas y absolutas Hay tres tipos de rutas de documento: rutas absolutas, rutas relativas a la raz y rutas relativas al documento. Las rutas se introducen en el cuadro Vnculo del inspector de propiedades o en el cuadro URL del cuadro de dilogo Seleccionar archivo HTML (que se abre desde el inspector de propiedades). Consulte Vincular a un documento en la pgina 113. Son rutas completas que incluyen el protocolo del servidor (generalmente, http:// para pginas Web). Por ejemplo, http:// www.macromedia.com/dreamweaver/. Las rutas absolutas son vlidas independientemente de la ubicacin del documento de origen, pero el vnculo no se establece correctamente si se mueve el documento de destino. Cuando se crea un vnculo a un archivo externo al sitio actual es necesario usar una ruta absoluta.
Rutas absolutas

Siempre comienzan en la raz del sitio actual. Todos los archivos del sitio visibles para el pblico se encuentran en la raz del sitio. Las rutas relativas a la raz empiezan por una barra que indica al servidor que comience desde la raz. Por ejemplo, la ruta /dreamweaver/intro.htm establece un vnculo a un documento llamado intro.htm en la carpeta dreamweaver, que se encuentra al nivel de la raz del sitio.
Rutas relativas a la raz

Planificar sitios

117

Una ruta relativa a la raz suele ser la mejor forma de vincular archivos en entornos cuyo contenido se debe mover con frecuencia. Si se utilizan rutas relativas a la raz, los vnculos siguen funcionando aunque el documento desde el que se establecen dichos vnculos se mueva a otro lugar del sitio. Las rutas relativas a la raz no son adecuadas para sitios que se van a ver localmente (por ejemplo, presentaciones). En este caso, conviene utilizar rutas relativas al documento. Si trabaja con Dreamweaver en un disco local, dena un sitio local eligiendo una carpeta que acte como el equivalente a la raz de un servidor. Dreamweaver utilizar esta carpeta para ubicar todos los vnculos a archivos locales especicados como URL relativos a la raz. Los vnculos relativos a la raz no funcionarn si no guarda el documento en un sitio local. Para denir un sitio local, elija Sitio > Denir sitios. Consulte Crear un sitio local en la pgina 108.
Nota: El contenido vinculado a rutas relativas a la raz no aparece cuando se realiza localmente una vista previa de documentos en un explorador. Esto se debe a que los exploradores no reconocen races de sitios, mientras que los servidores s. Para realizar una vista de previa de contenido vinculado a rutas relativas a la raz, site el archivo en un servidor remoto y valo desde l. Rutas relativas al documento Son rutas relativas a la carpeta que contiene el documento actual. Por ejemplo, document.htm especica un documento de la carpeta actual; ../document.htm especica un documento de la carpeta situada por encima de la carpeta actual, y htmldocs/document.htm especica un documento de una carpeta llamada htmldocs, que se encuentra dentro de la carpeta actual. Las rutas relativas al documento suelen ser las ms sencillas para establecer vnculos a archivos que siempre van a estar en la misma carpeta que el documento actual. Nota: Siempre deber guardar 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 una ruta absoluta que comenzar por archivo:// hasta que guarde el archivo.

Ver archivos en la ventana Sitio

Use la ventana Sitio para ver sitios locales y remotos, agregar o eliminar documentos del sitio o para ver un mapa del sitio. La ventana Sitio consta de dos paneles, una barra de separacin y una serie de botones de mens. Al ajustar las opciones de la ventana Sitio, Dreamweaver recordar y utilizar la nueva conguracin la siguiente vez que abra la ventana Sitio. Para obtener ms informacin, consulte Opciones de la ventana Sitio en la pgina 132.

118

Captulo 6

Ver sitios locales y remotos La ventana Sitio permite mostrar el contenido de sitios locales y remotos. Los sitios locales se muestran como una lista de archivos, como un mapa visual o de ambas formas. Los sitios remotos slo se muestran como una lista de archivos.
Para ver los archivos del sitio, lleve a cabo una de estas operaciones:

Elija Ventana > Archivos del sitio. En la ventana Sitio, haga clic en el botn Archivos del sitio.

El panel que muestra los archivos de un sitio local est etiquetado como "Carpeta local", mientras que el panel que muestra los archivos de un sitio remoto est etiquetado como "Sitio remoto.
Nota: Si est viendo un sitio local que carece de correspondencia con un sitio remoto, el panel "Sitio remoto" estar vaco. Para ver el mapa del sitio, lleve a cabo una de estas operaciones:

Elija Ventana > Mapa del sitio. En la ventana Sitio, haga clic en el botn Mapa del sitio, o bien haga clic en la echa del botn Mapa del sitio y seleccione Mapa y archivos.

El panel que muestra los archivos del sitio local est etiquetado como "Carpeta local", mientras que el panel que muestra el sitio local como mapa est etiquetado como "Exploracin del sitio.
Para ver slo el mapa del sitio:

Haga clic en la echa del botn del mapa del sitio y seleccione Slo mapa.

Planificar sitios

119

Cambiar visualizaciones del sitio De forma predeterminada, el sitio remoto (o mapa del sitio local) aparece en el panel izquierdo y el sitio local, en el derecho. Puede alternar estas visualizaciones.
Para determinar en qu panel debe aparecer el sitio local y el sitio remoto: 1

Elija Edicin > Preferencias para abrir el cuadro de dilogo Preferencias y seleccione la categora FTP del sitio. Lleve a cabo una de estas operaciones: Seleccione Archivos locales del men Mostrar siempre y especique si los archivos locales deben mostrarse en el panel derecho o en el izquierdo de la ventana Sitio. El sitio local aparecer en el panel seleccionado y el sitio remoto (o el mapa del sitio), en el panel opuesto. Seleccione Archivos remotos del men Mostrar siempre y especique si los archivos remotos deben mostrarse en el panel derecho o en el izquierdo de la ventana Sitio. El sitio remoto aparecer en el panel seleccionado y el sitio local (o el mapa del sitio), en el panel opuesto.

Para cambiar el rea de visualizacin:

Arrastre la barra de separacin para aumentar el rea de visualizacin del panel derecho o izquierdo de la ventana. Use las barras de desplazamiento situadas en la parte inferior de los paneles para desplazar el contenido de los paneles. En el mapa del sitio, haga clic en la echa situada encima de un archivo y arrstrela para cambiar el ancho de columna. Para obtener ms informacin sobre las preferencias de sitios, consulte Preferencias de FTP del sitio en la pgina 133.

120

Captulo 6

Trabajar con archivos del sitio

Use Ver archivos del sitio para ver los sitios local y remoto como listas de archivos, para agregar nuevas carpetas o archivos a un sitio o para actualizar la vista de un sitio despus de realizar cambios.
Para ver los archivos del sitio, lleve a cabo una de estas operaciones:

Elija Ventana > Archivos del sitio para abrir la ventana Sitio en Ver archivos del sitio. En la ventana Sitio, haga clic en el botn Archivos del sitio.
Para agregar una nueva carpeta a un sitio: 1

Elija Archivo > Nueva carpeta (Windows) o Sitio > Ver archivos del sitio > Nueva carpeta (Macintosh). Seleccione la nueva carpeta y asgnele un nombre.

Para agregar un nuevo archivo a un sitio: 1

Elija Archivo > Nuevo archivo (Windows) o Sitio > Ver archivos del sitio > Nuevo archivo (Macintosh). Seleccione el nuevo archivo y asgnele un nombre.

Para actualizar la ventana Ver archivos del sitio despus de realizar cambios:

Elija Ver > Actualizar local (Windows) o Sitio > Ver archivos del sitio > Actualizar local (Macintosh). Elija Ver > Actualizar remoto (Windows) o Sitio > Ver archivos del sitio > Actualizar remoto (Macintosh). Al trabajar con sitios locales y remotos, podr determinar qu archivos se han actualizado. Esto resulta de utilidad si desea cargar todos los archivos que sean ms recientes en el sitio local al sitio remoto, o bien descargar todos los archivos que sean ms recientes en el sitio remoto al sitio local.
Para seleccionar los archivos locales ms recientes:

Elija Ver > Seleccionar local ms reciente (Windows) o Sitio > Ver archivos del sitio > Seleccionar local ms reciente (Macintosh).
Para seleccionar los archivos remotos ms recientes:

Elija Ver > Seleccionar remoto ms reciente (Windows) o Sitio > Ver archivos del sitio > Seleccionar remoto ms reciente (Macintosh). Para obtener ms informacin acerca de la manipulacin de sitios locales y remotos, consulte Usar el sistema de desproteccin/proteccin en la pgina 134.

Planificar sitios

121

Crear mapas de sitios

Use Ver mapa del sitio para ver sitios locales en forma de mapa visual de iconos vinculados, para agregar nuevos archivos a un sitio o para agregar, modicar o eliminar vnculos. La ventana Ver mapa del sitio resulta idnea para obtener una imagen del sitio en forma de mapa. Puede crear rpidamente un prototipo de la estructura completa del sitio y, seguidamente, obtener una imagen impresa del mapa del sitio.
Nota: La ventana Ver mapa del sitio slo es aplicable a los sitios locales. Si desea crear un mapa de un sitio remoto, copie todo su contenido a la unidad local. Para ver el mapa de un sitio, lleve a cabo una de estas operaciones:

Elija Ventana > Mapa del sitio para abrir la ventana Sitio. En la ventana Sitio, haga clic en el botn Mapa del sitio. La pgina principal del sitio es el punto de partida del mapa. Si Dreamweaver no logra determinar qu pgina del sitio actual es la pgina principal, se abrir el cuadro de dilogo Denicin de sitio para el panel Diseo de mapa del sitio en el que se le solicitar que seleccione la pgina correcta. El mapa del sitio muestra los archivos HTML y el resto del contenido de la pgina como iconos. Los vnculos se muestran en el mismo orden en el que se encuentran en el cdigo fuente HTML. El texto que se muestra 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 secuencia de comandos). Una marca de vericacin verde indica que se trata de un archivo protegido por usted. Una marca de vericacin roja indica que se trata de un archivo protegido por otro usuario. Un smbolo de candado indica que un archivo es de slo lectura (Windows) o est bloqueado (Macintosh).

122

Captulo 6

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 (Windows) o la echa de ampliacin (Macintosh) situados junto a una pgina para mostrar u ocultar las pginas vinculadas por debajo del segundo nivel.

De forma predeterminada, los archivos ocultos y los archivos dependientes no se muestran en el mapa del sitio. Los archivos ocultos son archivos HTML marcados como ocultos. Los archivos dependientes son contenido de pgina ajeno al cdigo HTML, como son las imgenes, las plantillas los archivos Shockwave y los archivos Flash. Consulte Modicar el diseo del mapa del sitio en la pgina 123 y Mostrar y ocultar archivos de mapa de un sitio en la pgina 127. Modificar el diseo del mapa del sitio Use las opciones de Diseo de mapa del sitio para personalizar la apariencia del mapa del sitio. Puede especicar la pgina principal, el nmero de columnas que deben mostrarse y si deben mostrarse u ocultarse los archivos ocultos o dependientes.
Para modificar el diseo de mapa del sitio: 1

Abra el cuadro de dilogo Denicin de sitio mediante uno de estos mtodos: Elija Sitio > Denir sitios y haga clic en Editar. Seleccione Diseo de mapa del sitio de la lista Categora situada a la izquierda. Elija Ver > Diseo (Windows) o Sitio > Ver mapa del sitio > Diseo (Macintosh).

Planificar sitios

123

Elija una de las opciones siguientes:

Pgina principal

Especica la pgina principal del mapa del sitio. Si no especica ninguna pgina principal y Dreamweaver no logra localizar ningn archivo denominado index.html o index.htm en la raz, Dreamweaver le pedir que seleccione una pgina principal al abrir el mapa del sitio.

Nmero de columnas Establece el nmero de pginas que deben mostrarse por cada la en el mapa del sitio. Ancho de columna

Establece la anchura de la columna, en pxeles, del mapa

del sitio.
Etiquetas de icono

Determina si deben mostrarse los nombres de los archivos o los ttulos de las pginas bajo los iconos del mapa del sitio. Puede cambiar los nombres de archivo y los ttulos de pgina desde el mapa del sitio.

Muestra los archivos HTML marcados como ocultos en el mapa del sitio. Si hay una pgina oculta, su nombre y los vnculos que contenga se mostrarn en cursiva.
Mostrar archivos marcados como ocultos

Muestra todos los archivos dependientes en la jerarqua del sitio. Un archivo dependiente es una imagen u otro contenido ajeno al cdigo HTML que carga el explorador al cargar la pgina principal.
Mostrar archivos dependientes

Trabajar con pginas en el mapa del sitio Al trabajar en el mapa del sitio, podr seleccionar pginas, abrir una pgina para editarla, agregar nuevas pginas al sitio, crear vnculos entre archivos y cambiar el ttulo de una pgina.
Para seleccionar mltiples pginas, lleve a cabo una de estas operaciones:

Haga clic mientras pulsa la tecla Mays para seleccionar mltiples pginas. Comenzando desde un lugar vaco de la vista, arrastre el puntero alrededor de un grupo de archivos para seleccionarlos. Pulse Mays-Control (Windows) o Mays-Comando (Macintosh) y haga clic para seleccionar pginas no que no sean contiguas.
Para abrir una pgina para editarla, lleve a cabo una de estas operaciones:

Haga doble clic en el archivo. Seleccione el archivo y elija Archivo > Abrir seleccin (Windows) o Sitio > Abrir (Macintosh).

124

Captulo 6

Para agregar 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 sultelo sobre un archivo del mapa del sitio. La pgina se agregar al sitio y se crear un vnculo entre ella y el archivo sobre el que la ha soltado. Seleccione Sitio > Vincular a archivo existente (Windows) o Sitio > Ver mapa del sitio > Vincular a archivo existente (Macintosh). Haga clic en un archivo del mapa del sitio. Aparecer el icono de sealizacin de archivo. Haga clic en el icono y arrstrelo hasta el archivo que desee agregar.
Para crear un nuevo archivo y agregar un vnculo: 1 2

Seleccione un archivo HTML del mapa del sitio. Elija Sitio > Vincular a nuevo archivo (Windows) o Sitio > Ver mapa del sitio > Vincular a nuevo archivo (Macintosh), o bien elija Vincular a nuevo archivo del men de acceso directo. En el cuadro de dilogo que aparece a continuacin, introduzca la siguiente informacin:
Archivo Ttulo

Especica el nombre del archivo.

Especica el ttulo de la pgina.

Especica el texto del vnculo que conecta el archivo seleccionado con el nuevo archivo. El vnculo aparece en el archivo seleccionado.
Texto vnculo 4

Haga clic en Aceptar. El archivo se guardar en la misma carpeta que el archivo seleccionado. Si se agrega un nuevo archivo a una rama oculta, el nuevo archivo tambin se encontrar oculto. Consulte Mostrar y ocultar archivos de mapa de un sitio en la pgina 127.

Para cambiar el ttulo de una pgina: 1

Asegrese de que est seleccionada la opcin Mostrar ttulos de pginas. Elija Ver > Ttulos de pgina (Windows) o Sitio > Ver mapa del sitio > Mostrar ttulos de pginas (Macintosh).

Lleve a cabo una de estas operaciones: Seleccione una pgina y haga clic en su ttulo. Cuando el ttulo se convierta en un campo editable, escriba el nuevo ttulo del documento. Seleccione una pgina y elija Archivo > Cambiar nombre (Windows) o Sitio > Cambiar nombre (Macintosh).

Planificar sitios

125

Para cambiar la pgina principal, lleve a cabo una de estas operaciones:

Elija Sitio > Nueva pgina principal (Windows) o Sitio > Ver mapa del sitio > Nueva pgina principal (Macintosh) para crear una nueva pgina principal. Elija Sitio > Seleccionar pgina principal (Windows) o Sitio > Ver mapa del sitio > Seleccionar pgina principal (Macintosh) para convertir una pgina existente en pgina principal.
Para actualizar la visualizacin del mapa del sitio despus de realizar cambios:

Elija Ver > Actualizar (Windows) o Sitio > Ver mapa del sitio > Actualizar local (Macintosh). Crear y modificar vnculos en Ver mapa del sitio Puede modicar la estructura del sitio en el mapa del sitio agregando, cambiando o eliminando vnculos. El mapa del sitio se actualiza automticamente para mostrar los cambios realizados en el sitio.
Para agregar un vnculo, lleve a cabo una de estas operaciones:

Arrastre una pgina desde el Explorador de Windows o el Finder de Macintosh y sultela sobre una pgina del mapa del sitio. Seleccione una pgina HTML 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 del men de acceso directo. Seleccione una pgina HTML del mapa del sitio. Aparecer el icono de sealizacin de archivo. Haga clic en el icono y arrstrelo hasta el objeto con el que desee establecer el vnculo. un archivo de la vista de archivo, un documento del escritorio o un punto de jacin con nombre de un documento abierto en el escritorio. Consulte Crear vnculos con el icono de sealizacin de archivo en la pgina 110.
Para cambiar un vnculo:

Seleccione la pgina y elija Sitio > Cambiar vnculo (Windows) o Sitio > Ver mapa del sitio > Cambiar vnculo (Macintosh). Localice el archivo o escriba un URL.
Para eliminar un vnculo, lleve a cabo una de estas operaciones:

Seleccione la pgina en el mapa del sitio y elija Sitio > Quitar vnculo (Windows) o Sitio > Ver mapa del sitio > Quitar vnculo (Macintosh). Seleccione la pgina en el mapa del sitio y elija Quitar vnculo del men de acceso directo.

126

Captulo 6

Para abrir el origen de un vnculo: 1 2

Seleccione un archivo en el mapa del sitio. Elija Sitio > Abrir origen del vnculo (Windows) o Sitio > Ver mapa del sitio > Abrir origen del vnculo (Macintosh). Se abrirn el inspector de propiedades y el archivo de origen que contiene el vnculo. El vnculo quedar resaltado.

Mostrar y ocultar archivos de mapa de un sitio Puede modicar el diseo 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 que no destaquen otros materiales menos importantes. Antes de ocultar o mostrar un archivo HTML, deber marcarlo como "oculto". Cuando oculte un archivo marcado como oculto, tambin se ocultarn sus vnculos. Al mostrar un archivo marcado como oculto, el icono y sus vnculos se encontrarn visibles en la vista del mapa del sitio, aunque los nombres aparecern en cursiva.
Para marcar archivos como ocultos: 1 2

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, 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). Seleccione Ver > Diseo (Windows) o Sitio > Ver mapa del sitio > Diseo (Macintosh) para abrir el cuadro de dilogo Denicin de sitio para y active la opcin Mostrar archivos marcados como ocultos. De forma predeterminada, los archivos dependientes estn ocultos. Puede especicar si deben o no mostrarse en el mapa del sitio.

Planificar sitios

127

Para mostrar los archivos dependientes, lleve a cabo una de las siguientes operaciones:

Elija Ver > Mostrar archivos dependientes (Windows) o Sitio > Ver mapa del sitio > Mostrar archivos dependientes(Macintosh). Seleccione Ver > Diseo (Windows) o Sitio > Ver mapa del sitio > Diseo (Macintosh) para abrir el cuadro de dilogo Denicin de sitio para y active la opcin Mostrar archivos dependientes. Ver el sitio desde una rama Puede ver los detalles de una seccin especca de un sitio convirtiendo a una rama en el centro del mapa del sitio.
Para ver una rama distinta:

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 especicada fuera la raz del sitio. El campo Navegacin del sitio, situado encima del mapa del sitio, muestra la ruta desde la pgina principal hasta la pgina especicada. Seleccione cualquier elemento de la ruta para ver el mapa del sitio desde dicho nivel haciendo clic una vez.
Para ampliar y contraer las ramas:

Haga clic en los signos ms y menos (Windows) o en las echas de ampliacin (Macintosh) para ampliar o contraer la rama. Guardar el mapa del sitio Puede guardar el mapa del sitio con formato de imagen para verla (o imprimirla) desde un editor de imgenes.
Para crear un archivo de imagen del mapa del sitio actual: 1

Desde el mapa del sitio, elija Archivo > Guardar mapa del sitio como (Windows) o Sitio > Ver mapa del sitio > Guardar mapa del sitio como (Macintosh). Introduzca un nombre para la imagen en el cuadro de dilogo que aparece a continuacin.

128

Captulo 6

CAPTULO 7
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Administrar sitios

Introduccin a la administracin de sitios

Para facilitar la organizacin de los archivos en el sistema, Dreamweaver recrea la estructura del sitio Web remoto en el sistema local. Los vnculos creados en el sitio local funcionan en el sitio remoto porque la estructura de ambos sitios es idntica. Para crear un sitio local en Dreamweaver, seleccione una carpeta raz local con el comando Denir sitios. Consulte Crear un sitio local en la pgina 108. Para asociar el sitio local a un servidor remoto, seleccione opciones adicionales en el cuadro de dilogo Denir sitios. Consulte Denir un sitio en la pgina 130. Cuando se transeren archivos entre sitios locales y remotos, Dreamweaver mantiene estructuras de directorio idnticas con el n de impedir que se rompan accidentalmente los vnculos y las referencias. Si no hay directorios en el sitio al que se transeren los archivos, Dreamweaver los crea automticamente. Dreamweaver incluye una serie de funciones que permiten estructurar un sitio, explorar documentos y transferir archivos a un servidor remoto. Para facilitar la colaboracin en el sitio Web, puede desproteger y proteger los archivos del servidor remoto y as evitar que otros autores trabajen con esos archivos al mismo tiempo. Dreamweaver no realiza control de versiones ni elimina archivos o carpetas del servidor remoto que han dejado de existir en la carpeta raz local.

129

Definir un sitio
Utilice el comando Denir sitios para agregar o cambiar la informacin del servidor remoto, la carpeta raz local y las preferencias de desproteccin o proteccin de un sitio existente, as como para crear un sitio nuevo.
Para definir un sitio: 1

Elija Denir sitios en el men de la ventana Sitio del sitio actual, o bien, elija Archivo > Nuevo sitio (Windows) o Sitio > Denir sitios (Macintosh).

En el cuadro de dilogo que aparece, elija Nuevo o seleccione un sitio existente y haga clic en Edicin. En el panel Datos locales del cuadro de dilogo Denicin de sitio, introduzca el nombre de un sitio y haga clic en el icono de carpeta para examinar y seleccionar una carpeta raz local (la carpeta que representa el nivel superior del sitio) si an no lo ha hecho. Seleccione la opcin Cach para acelerar las tareas de administracin de vnculos y sitios. Consulte Administrar vnculos en la pgina 146. Introduzca el URL del sitio en el campo Direccin HTTP. Por ejemplo, la direccin HTTP del sitio Web dreamcentral es http:// www.dreamcentral.com. El Vericador de vnculos utiliza este valor para determinar si los vnculos de rutas absolutas hacen referencia a archivos del propio sitio o de sitios externos. Consulte Comprobar vnculos entre documentos en la pgina 151.

6 7

En la lista Categora de la izquierda, haga clic en Datos del servidor Web. Elija una de las siguientes opciones de Acceso al servidor: Utilice Ninguna si slo desea trabajar con el sitio localmente y no tiene previsto cargarlo en un servidor. A continuacin, siga con el paso 13. Utilice Local/red si el servidor Web est montado como unidad de red (Windows) o como servidor NFS (Macintosh), o si lo est ejecutando en el equipo local. Haga clic en el icono de carpeta para examinar y seleccionar la carpeta del servidor donde se almacenan los archivos y, a continuacin, siga con el paso 13. Utilice FTP si conecta al servidor Web a travs de FTP.

130

Captulo 7

Introduzca el nombre del servidor FTP en el que carga los archivos del sitio Web. No utilice ftp:// delante de la direccin. Por ejemplo, el servidor FTP del sitio Web dreamcentral es shell16.ba.best.com.

Introduzca el nombre del directorio servidor del sitio remoto donde se almacenan los documentos visibles para el pblico (tambin denominado raz del sitio). Por ejemplo, el directorio servidor del sitio Web dreamcentral es public_html/. Para otros sitios, el directorio puede tener varios niveles de profundidad (como as www/public/docs/ o public_html/htdoc/) o ser el directorio de conexin (en cuyo caso este campo debera quedar en blanco).

10

Introduzca el nombre de conexin y la contrasea. La contrasea se guardar automticamente. Desactive Guardar si desea que el sistema le solicite la contrasea cada vez que conecte con el servidor remoto.

11

Active la opcin Usar cortafuegos si conecta con el servidor remoto desde el otro lado de un cortafuegos. Consulte Preferencias de FTP del sitio en la pgina 133. En la lista Categora de la izquierda, haga clic en Desproteger/proteger. Active la opcin Permitir desproteger y proteger archivo si trabaja en colaboracin (o si trabaja en solitario con varios sistemas). Esta opcin resulta til para advertir a otros usuarios que usted ha protegido un archivo para editarlo. Tambin puede servir para recordar que ha dejado una versin ms reciente de un archivo en otro equipo. Consulte Usar el sistema de desproteccin/proteccin en la pgina 134. Active la opcin Proteger archivos al abrir si desea proteger automticamente los archivos cuando haga doble clic en ellos para abrirlos desde la ventana Sitio. Introduzca un nombre de proteccin. Este nombre aparecer en la ventana Sitio junto con los archivos protegidos, lo que permitir a otros miembros del equipo localizarle si usted tiene un archivo que necesitan. Si trabaja en solitario con varios sistemas, utilice un nombre de proteccin en cada equipo (por ejemplo, JoseR-MacCasa y JoseR-PCOcina) para saber dnde se encuentra la ltima versin del archivo si olvida volver a desprotegerlo.

12

13

Haga clic en Aceptar.

Administrar sitios

131

Opciones de la ventana Sitio

Utilice la ventana Sitio para llevar a cabo operaciones estndar de mantenimiento de archivos, como crear documentos HTML nuevos, mover archivos, crear carpetas y eliminar elementos; para ver un mapa del sitio (consulte Crear mapas de sitios en la pgina 122); y para transferir archivos entre los sitios local y remoto. De forma predeterminada, el sitio remoto (o mapa del sitio) aparece en el panel izquierdo y el sitio local, en el derecho. Puede cambiar esta conguracin en las preferencias de FTP del sitio. Consulte Preferencias de FTP del sitio en la pgina 133. Para abrir la ventana Sitio, elija Ventana > Archivos del sitio. A continuacin dispondr de las opciones siguientes:
Conectar/desconectar (disponible slo con la configuracin FTP)

Conecta o desconecta del sitio remoto. De forma predeterminada, Dreamweaver desconecta del sitio remoto si permanece inactivo durante ms de 30 minutos. Elija Edicin > Preferencias y seleccione FTP del sitio para cambiar este lmite de tiempo.

Actualiza la lista de directorios remotos. Utilice este botn para hacer que aparezca la lista de directorios remotos cuando se ha montado la unidad que contiene el sitio remoto despus de abrir la ventana Sitio.
Actualizar (disponible slo con la configuracin Local/red)

Copia los archivos seleccionados desde el sitio remoto hasta el sitio local. 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 los protejan. Consulte Obtener archivos de un servidor remoto en la pgina 136. 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. Consulte Obtener archivos de un servidor remoto en la pgina 136.
Obtener

Copia los archivos seleccionados desde el sitio local hasta el sitio remoto sin cambiar su estado de desproteccin o proteccin. Consulte Colocar archivos en un servidor remoto en la pgina 137.
Colocar

Transere una copia del archivo desde el servidor remoto hasta el sitio local y bloquea el archivo en el servidor. Esta opcin no est disponible si est desactivada la opcin Permitir desproteger y proteger archivo para el sitio actual. Consulte Desproteger y proteger archivos en un servidor remoto en la pgina 135.
Proteger Desproteger Transere una copia del archivo local al servidor remoto y permite que otros usuarios lo editen. El archivo local se hace de slo lectura. Esta opcin no est disponible si est desactivada la opcin Permitir desproteger y proteger archivo para el sitio actual. Consulte Desproteger y proteger archivos en un servidor remoto en la pgina 135.

132

Captulo 7

Lista de sitios actuales

Muestra los sitios remotos que se han denido. Para cambiar a otro sitio, seleccinelo en la lista. Para agregar un sitio o editar la informacin de un sitio existente, elija Denir sitios en la parte inferior de la lista (consulte Denir un sitio en la pgina 130). Cambia el panel remoto de la ventana Sitio para mostrar la estructura de archivos del sitio remoto. sta es la vista predeterminada de la ventana Sitio.
Ver archivos del sitio

Cambia el panel remoto de la ventana Sitio para mostrar un mapa visual del sitio basado en los vnculos establecidos entre documentos. Mantenga pulsado el botn para elegir Slo mapa o Mapa y archivos en el men emergente.
Ver mapa del sitio Detener tarea actual Cancela la actividad en curso, incluidas la obtencin y la colocacin de archivos. El botn aparece en forma de X roja en el ngulo inferior derecho.

Preferencias de FTP del sitio Elija Edicin > Preferencias y seleccione FTP del sitio. A continuacin podr congurar las siguientes preferencias de FTP del sitio para controlar las opciones de transferencia de archivos disponibles en la ventana Sitio:
Mostrar siempre Especica si los archivos locales o remotos aparecen siempre en el

panel izquierdo o derecho de la ventana Sitio. El directorio local aparece a la derecha de forma predeterminada.
Archivos dependientes

Muestra un mensaje para transferir archivos dependientes (imgenes y otros archivos, como hojas de estilos externas, que carga el explorador con el archivo HTML). Las opciones Mensaje al obtener/proteger y Mensaje al colocar/desproteger aparecen seleccionadas de forma predeterminada. Seleccione No volver a mostrar cuando aparezca el mensaje Obtener/proteger para desactivar la primera opcin, o cuando aparezca el mensaje Colocar/desproteger para desactivar la segunda.

Nota: Para que aparezca el mensaje Incluir archivos dependientes cuando estas opciones estn desactivadas, pulse Alt (Windows) u Opcin (Macintosh) mientras selecciona Obtener, Colocar, Desproteger o Proteger.

Determina si se interrumpe la conexin al sitio remoto cuando transcurre la cantidad de minutos especicada sin actividad.
Conexin FTP Tiempo de espera FTP

Especica la cantidad de segundos durante la cual Dreamweaver intentar establecer una conexin con el servidor remoto. Si no hay respuesta despus del perodo de tiempo especicado, Dreamweaver mostrar un cuadro de dilogo de advertencia.

Servidor de cortafuegos Especica la direccin del servidor proxy con el que establecer la conexin si se encuentra al otro lado de un cortafuegos. Si no est al otro lado de un cortafuegos, deje este espacio en blanco.

Administrar sitios

133

Puerto de cortafuegos Especica el puerto por el cual se establece la conexin con

el servidor FTP. Si conecta por un puerto distinto del 21 (predeterminado para FTP), introduzca aqu el nmero. Abre el cuadro de dilogo Denir sitios, en el que podr editar un sitio existente o crear uno nuevo. Consulte Denir un sitio en la pgina 130.
Definir sitios

Usar el sistema de desproteccin/proteccin

Si trabaja en colaboracin con otros usuarios, puede desproteger y proteger los archivos para transferirlos entre el servidor remoto y el ordenador local. Consulte Desproteger y proteger archivos en un servidor remoto en la pgina 135. Proteger un archivo equivale a decir: "Estoy trabajando con este archivo. No lo toquen!" Cuando un archivo est protegido, Dreamweaver muestra una marca de vericacin al lado de su icono en la ventana Sitio. Una marca de vericacin verde indica que usted ha protegido el archivo, mientras que una marca roja indica que lo ha protegido otro usuario. El nombre de la persona que ha protegido el archivo tambin aparece en el ventana Sitio. Al desproteger un archivo, ste queda a disposicin de otros miembros del equipo, que podrn protegerlo y editarlo. La versin local se hace de slo lectura para impedir que usted efecte cambios en el archivo mientras otro usuario lo tiene protegido. Dreamweaver realiza un seguimiento de los archivos protegidos creando un archivo de texto con extensin .lck (que contiene el nombre del usuario que ha protegido el archivo) en el servidor remoto y en el sitio local. Los archivos .lck no se muestran en la ventana Sitio. Dreamweaver no convierte los archivos protegidos en archivos de slo lectura en el servidor remoto. Si transere 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 gura al lado del archivo protegido en la jerarqua de archivos para ayudar a evitar errores de ese tipo. Puede activar la desproteccin o la proteccin para algunos sitios y desactivarla para otros. Consulte Denir un sitio en la pgina 130. Para obtener informacin sobre la transferencia de archivos entre sitios locales y remotos sin desprotegerlos ni protegerlos, consulte Obtener archivos de un servidor remoto en la pgina 136 y Colocar archivos en un servidor remoto en la pgina 137.

134

Captulo 7

Desproteger y proteger archivos en un servidor remoto Utilice la ventana Sitio para desproteger y proteger archivos en un servidor remoto. Tambin puede deshacer una proteccin sin transferir el archivo, para que otros miembros del equipo puedan protegerlo.
Para proteger archivos de un servidor remoto: 1

Elija el sitio deseado en el men de sitios actuales de la parte superior de la ventana Sitio. Seleccione uno o varios archivos, haga clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) y elija Proteger en el men de acceso directo o haga clic en el botn Proteger situado en la parte superior de la ventana Sitio. Haga clic en S para descargar los archivos dependientes.

Para desproteger archivos de un servidor remoto: 1

Elija el sitio deseado en el men de sitios actuales de la parte superior de la ventana Sitio. Seleccione uno o varios archivos nuevos o protegidos en el panel local, haga clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) y elija Desproteger en el men de acceso directo o haga clic en el botn Desproteger situado en la parte superior de la ventana Sitio. Los archivos protegidos guran con una marca de vericacin verde. Los archivos nuevos no tienen marcas de vericacin ni smbolos de candado.

Haga clic en S para cargar los archivos dependientes. Conviene cargar los archivos dependientes cuando se desprotege un archivo nuevo.

Para deshacer un archivo protegido:

Seleccione el archivo deseado, haga clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) y elija Deshacer proteger en el men de acceso directo. La copia local del archivo se har de slo lectura y se perdern los cambios realizados.

Administrar sitios

135

Obtener archivos de un servidor remoto Al obtener archivos, stos se copian desde el sitio remoto hasta el sitio local con permiso de slo lectura. Si no trabaja en colaboracin y desea obtener archivos con privilegios de lectura/escritura, desactive la opcin Permitir desproteger y proteger archivo para el sitio. Consulte Denir un sitio en la pgina 130. Consulte tambin Usar el sistema de desproteccin/proteccin en la pgina 134. Dreamweaver registra toda la actividad de transferencia de archivos. Si se produce un error mientras transere un archivo, el registro de FTP del sitio podr ayudarle a determinar el problema. Para mostrar el registro, elija Ventana > Registro FTP en la ventana Sitio (Windows) o Sitio > Registro FTP (Macintosh).
Para obtener archivos de un servidor remoto: 1 2

Elija Ventana > Archivos del sitio para abrir la ventana Sitio. Elija el sitio deseado en el men de sitios de la parte superior de la ventana Sitio. Haga clic en Conectar para abrir una conexin con el servidor remoto. Si ya hay una conexin abierta (el botn Conectar indicar Desconectar), omita este paso.

4 5

Seleccione los archivos deseados en el panel remoto. Haga clic en Obtener o haga clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) y elija Obtener en el men de acceso directo. Haga clic en Aceptar para descargar los archivos dependientes.

Nota: Haga clic en Detener tarea actual (la X roja de la esquina inferior derecha) o pulse la tecla Esc (Windows) o Comando-. (punto) (Macintosh) para cancelar la transferencia de archivos.

136

Captulo 7

Colocar archivos en un servidor remoto Al colocar archivos, stos se copian desde el sitio local hasta el sitio remoto sin cambiar su estado de proteccin. Si desea colocar un archivo en un servidor remoto y desprotegerlo, utilice el comando Desproteger. Consulte Desproteger y proteger archivos en un servidor remoto en la pgina 135. Dreamweaver registra toda la actividad de transferencia de archivos. Si se produce un error mientras transere un archivo, el registro de FTP del sitio podr ayudarle a determinar el problema. Para mostrar el registro, elija Ventana > Registro FTP en la ventana Sitio (Windows) o Sitio > Registro FTP (Macintosh).
Nota: No utilice caracteres ASCII altos (por ejemplo, , , ) en los nombres de archivo que coloque en un servidor remoto. Muchos servidores convierten estos caracteres durante la transferencia, lo que rompe los vnculos a los archivos. Para colocar archivos en un servidor remoto: 1 2

Elija Ventana > Archivos del sitio para abrir la ventana Sitio. Elija el sitio deseado en el men de sitios de la parte superior de la ventana Sitio. Haga clic en Conectar para abrir una conexin con el servidor remoto. Si ya hay una conexin abierta (el botn Conectar indicar Desconectar), omita este paso.

4 5

Seleccione los archivos deseados en el panel de la derecha. Haga clic en Colocar o haga clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) y elija Colocar en el men de acceso directo. Haga clic en Aceptar para cargar los archivos dependientes.

Nota: Haga clic en Detener tarea actual (la X roja de la esquina inferior derecha) o pulse la tecla Esc (Windows) o Comando-. (punto) (Macintosh) para cancelar la transferencia de archivos.

Administrar sitios

137

Buscar y reemplazar
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.
Para iniciar una bsqueda: 1

Elija una de las opciones siguientes: En la ventana de documento o Sitio, elija Edicin > Buscar o Edicin > Reemplazar. En el inspector de HTML, haga clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) y elija Buscar o Reemplazar en el men de acceso directo.

En el cuadro de dilogo Buscar o Reemplazar que aparece, use la opcin Buscar en para especicar los archivos en los que desea buscar:
Documento actual Limita la bsqueda al documento activo. Esta opcin slo est disponible cuando se elige Buscar o Reemplazar en la ventana de documento o en el men de acceso directo del inspector de HTML. Archivos seleccionados Limita la bsqueda a los archivos y las carpetas seleccionados en la ventana Sitio. Esta opcin slo est disponible cuando se elige Buscar o Reemplazar en la ventana Sitio. Sitio actual

Ampla la bsqueda a todos los documentos HTML, los archivos de biblioteca y los documentos de texto del sitio actual. El nombre del sitio aparece a la derecha del men emergente. Si no es ste el sitio en el que desea buscar, elija otro en el men emergente de la ventana Sitio.

Limita la bsqueda a un grupo de archivos especco. Haga clic en el icono de carpeta para examinar y seleccionar el directorio deseado.
Carpeta

138

Captulo 7

Utilice la opcin Buscar para especicar el tipo de bsqueda que desea realizar.
Texto Permite buscar cadenas de texto especcas en la ventana de documento.

La bsqueda de texto ignora el cdigo HTML que interrumpe la cadena. Consulte Buscar texto en la ventana de documento en la pgina 140. Permite buscar cadenas de texto especcas en el cdigo fuente HTML. Consulte Buscar texto en el cdigo fuente HTML en la pgina 140.
Fuente HTML Texto (avanzado) Permite buscar cadenas de texto especcas que se encuentran dentro o fuera de una o varias etiquetas. Supongamos, por ejemplo, un documento que contiene el cdigo HTML Juan <i>intenta</i> hacer su trabajo a tiempo, pero no siempre lo consigue. Lo intenta con energa. Si busca intenta fuera de i slo encontrar la segunda aparicin de la palabra intenta. Consulte Buscar texto entre etiquetas especcas en la pgina 142.

Permite buscar etiquetas, atributos y valores de atributo especcos, como todas las etiquetas TD con VALIGN denido como TOP. Consulte Buscar etiquetas y atributos HTML en la pgina 140.
Etiqueta 4

Utilice una de las opciones siguientes para ampliar o limitar la bsqueda: Limita la bsqueda al texto que coincide con el uso de maysculas y minsculas del texto buscado. Por ejemplo, si busca aguas azules, no encontrar Aguas Azules.
Coincidir maysculas y minsculas Ignorar 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 ignorar el espacio en blanco.

Considera algunos caracteres (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 144.
Usar expresiones regulares

Administrar sitios

139

Buscar texto en la ventana de documento Utilice la opcin de texto en el cuadro de dilogo Buscar o Reemplazar para buscar cadenas especcas de texto sin tener en cuenta el cdigo HTML. Por ejemplo, si busca black dog encontrar black dog y <i>black</i> dog. Consulte Buscar y reemplazar en la pgina 138 para obtener instrucciones detalladas sobre la realizacin de bsquedas. Buscar texto en el cdigo fuente HTML Utilice la opcin Fuente HTML en el cuadro de dilogo Buscar o Reemplazar para buscar cadenas especcas de texto en el cdigo fuente HTML. Por ejemplo, si busca perro negro 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, un perro negro.><BR> Ayer vimos ms de un perro negro en el parque. El perro <A HREF=barnaby.html>negro</A> que ms nos gust se llamaba Barnaby.

El trmino perro negro tambin aparece en la segunda frase, pero no coincide con el texto buscado porque est cortado por un vnculo. Consulte Buscar y reemplazar en la pgina 138 para obtener instrucciones detalladas sobre la realizacin de bsquedas. Buscar etiquetas y atributos HTML Utilice la opcin Etiqueta en el cuadro de dilogo Buscar o Reemplazar para buscar etiquetas, atributos y valores de atributos especcos. Por ejemplo, puede buscar todas las etiquetas IMG sin atributo ALT . Consulte Buscar y reemplazar en la pgina 138 para obtener informacin sobre los distintos tipos de bsqueda.

140

Captulo 7

Para realizar una bsqueda de etiqueta: 1

Comience la bsqueda siguiendo los pasos que se describen en Buscar y reemplazar en la pgina 138. Elija una etiqueta especca en el men que aparece al lado del men emergente Buscar o elija [cualquier etiqueta]. Si slo desea buscar todas las apariciones de la etiqueta especicada, pulse el botn menos (-) y contine con el paso 5. En caso contrario, contine con el paso 3.

Limite la bsqueda con uno de los siguientes modicadores de etiqueta:

Con atributo Permite elegir en una lista los atributos que deben encontrarse en

la etiqueta para que sta coincida. Puede especicar un valor determinado para este atributo o elegir [cualquier valor].
Sin atributo Permite elegir en una lista los atributos que no pueden encontrarse en la etiqueta para que sta coincida. sta es la opcin que debe elegir para buscar todas las etiquetas IMG sin atributo ALT .

Permite especicar texto, texto y cdigo o una etiqueta que deben encontrarse dentro de la etiqueta 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 .
Contiene

Permite especicar texto, texto y cdigo o una etiqueta que no pueden encontrarse dentro de la etiqueta para que sta coincida.
No contiene En etiqueta Permite especicar una etiqueta dentro de la cual debe encontrarse

la etiqueta buscada para que sta coincida.

No est en etiqueta Permite especicar una etiqueta dentro de la cual no puede encontrarse la etiqueta buscada para que sta coincida. 4 5

Haga clic en el botn ms (+) y repita el paso 3 para limitar la bsqueda. Elija Buscar siguiente para resaltar la siguiente aparicin del texto buscado en el documento actual, o elija Buscar todos para generar una lista de todas las apariciones del texto buscado en el documento actual. Si realiza la bsqueda en un directorio o un sitio, Buscar siguiente resalta la siguiente aparicin del texto buscado en el documento actual o, si no hay ningn documento actual, abre el siguiente documento que contiene el texto buscado; por su parte, Buscar todos genera una lista de documentos que contienen el texto buscado.

Administrar sitios

141

Buscar texto entre etiquetas especficas Utilice la opcin Texto (avanzado) en el cuadro de dilogo Buscar o Reemplazar para buscar cadenas especcas de texto que se encuentren dentro o fuera de una serie de etiquetas contenedoras. Por ejemplo, puede buscar la palabra Sin ttulo entre etiquetas TITLE para localizar todas las pginas sin ttulo del sitio. Consulte Buscar y reemplazar en la pgina 138 para obtener informacin sobre los distintos tipos de bsqueda.
Para llevar a cabo una bsqueda de texto avanzada: 1

Comience la bsqueda siguiendo los pasos que se describen en Buscar y reemplazar en la pgina 138. Introduzca el texto que desea buscar en el campo de texto situado al lado del men emergente Buscar. Por ejemplo, escriba el trmino Sin ttulo. 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 ms (+) para restringir la bsqueda a etiquetas con un atributo o atributos especcos. Dado que la etiqueta TITLE no tiene atributos, no necesitar emplear esta opcin para buscar en todas las pginas sin ttulo del sitio.

Elija Buscar siguiente para abrir el siguiente documento que contenga el texto buscado, o elija Buscar todos para generar una lista de documentos que contengan este texto.

142

Captulo 7

Guardar modelos de bsqueda Puede guardar modelos de bsqueda y utilizarlos posteriormente haciendo clic en el botn Guardar consulta 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 quitar etiquetas no estndar en documentos creados con otro editor visual HTML o para conrmar 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: 1

Congure los parmetros de la bsqueda siguiendo los pasos que se describen en Buscar y reemplazar en la pgina 138. Si realiza una bsqueda avanzada de texto o de etiquetas, consulte Buscar etiquetas y atributos HTML en la pgina 140 o Buscar texto entre etiquetas especcas en la pgina 142 para obtener informacin sobre la conguracin de parmetros adicionales de bsqueda.

Haga clic en el botn Guardar consulta (identicado con un icono de disco). La ubicacin predeterminada para guardar las consultas es la carpeta Conguration/Queries, incluida dentro de la carpeta de la aplicacin Dreamweaver.

En el cuadro de dilogo que aparece, asigne un nombre de archivo que identique la consulta y haga clic en Guardar. Por ejemplo, si el modelo de bsqueda busca etiquetas IMG sin atributo ALT puede asignar a la consulta el nombre img_sin_alt.dwr. Las consultas de bsqueda tienen la extensin .dwq, mientras que las consultas de sustitucin tienen la extensin .dwr.

Para activar un modelo de bsqueda: 1 2

Elija Edicin > Buscar o Edicin > Reemplazar. Haga clic en el botn Cargar consulta (identicado con un icono de carpeta). El cuadro de dilogo Cargar consulta se abrir automticamente en la carpeta Conguration/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 slo estn disponibles las consultas de reemplazo (archivos .dwr).

Haga clic en Buscar siguiente, Buscar todos, Reemplazar o Reemp. todos para iniciar la bsqueda.

Administrar sitios

143

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 signicado y ejemplos de uso. Para buscar texto que contenga uno de los caracteres especiales de la tabla, anule el valor del carcter especial con una barra invertida. Por ejemplo, para buscar el asterisco en la frase "se aplican algunas condiciones*", el modelo de bsqueda deber ser el siguiente: aplican\*. Si no anula el valor del asterisco, encontrar todas las apariciones de "aplican" (as como de "aplica", "aplicann" y "aplicannn"), no slo las que van seguidas de asterisco.
Carcter ^ Texto buscado Principio de entrada o lnea. Ejemplo ^T encontrar "T" en "Tierras ricas", pero no "La cabaa del to Tom j$ encontrar "j" en "reloj", pero no en "ajuar in* encontrar "in" en "fin", "inn" en "innato" e "i" en "hito in+ encontrar "in" en "fin" e "inn" en "innato", pero no encontrar "hito

$ * +

Fin de entrada o lnea. El carcter anterior cero o ms veces. El carcter anterior una o ms veces.

El carcter anterior cero o una vez. st?on encontrar "son" en "Johnson" y "ston" en "Johnston", pero no encontrar "Appleton" ni "tension Cualquier carcter individual, salvo el de salto de lnea. Cualquier carcter individual, salvo el de salto de lnea. .in encontrar ran y can en la frase bran muffins can be tasty FF0000|0000FF encontrar "FF0000" en BGCOLOR=#FF0000 y 0000FF en FONT COLOR=#0000FF n{2} encontrar "nn" en "innato" y las dos primeras enes de "nnno", pero no encontrar "inane F{2,4} encontrar "FF" en "#FF0000" y las cuatro primeras efes de #FFFFFF.</

. x|y

{n}

Exactamente n apariciones del carcter anterior. Como mnimo n y como mximo m apariciones del carcter anterior.

{n,m}

[abc]

Cualquiera de los caracteres entre [e-g] encontrar "e" en "sed", "f" en corchetes. Especifique un rango "folio" y "g" en "guardia de caracteres con un guin (por ejemplo, [a-f] es equivalente a [abcdef]).

144

Captulo 7

Carcter [^abc]

Texto buscado Cualquier carcter que no est entre corchetes. Especifique un intervalo 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 dgito. Equivalente a [^0-9]. 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_].

Ejemplo [^aeiou] encontrar inicialmente "r" en "orangutn", "b" en "biblia" y "h" en "aah!

\b \B \d \D \f \n \r \s

\bb encontrar "b" en "biblia", pero no en "abajo" ni en "esnob \Bb encontrar "b" en "abajo", pero no en "biblia \d encontrar "3" en "C3PO" y "2" en "apartamento 2G \D encontrar "S" en "900S" y "Q" en "Q45

\slibre encontrar "libre" en "Cuba libre", pero no en "cubalibre

\S

\Slibre encontrar "libre" en "cubalibre", pero no en "Cuba libre

\t \w

bb\w* encontrar "barba" en "la barba cana" y "blanco" y "bonito" en "el perro blanco es muy bonito

\W

Cualquier carcter que no sea \W encontrar & en "Juan & alfanumrico. Equivalente a [^A- Mara" y "%" en "100% Za-z0-9_].

Administrar sitios

145

Administrar vnculos
Dreamweaver puede actualizar los vnculos con origen y destino en un documento cada vez que ste se mueve o cambia de nombre en un sitio local. Esta actualizacin funciona mejor cuando el sitio (o una seccin completa e independiente del mismo) est almacenado en la unidad local. No se realizan cambios en los archivos del sitio remoto hasta que se colocan o desprotegen los archivos en el servidor remoto.
Para activar la administracin de vnculos en Dreamweaver: 1 2

Elija Edicin > Preferencias y despus seleccione General. Seleccione Siempre o Mensaje en el men emergente Actualizar vnculos y haga clic en Aceptar. 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 especcas sobre cmo proceder en caso de eliminar un archivo, consulte Cambiar un vnculo en todo el sitio en la pgina 147.) Cambiar un vnculo en todo el sitio</a>.) 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. Si est activada la funcin de desproteccin/proteccin, Dreamweaver intentar proteger automticamente el archivo antes de realizar cambios.

Para acelerar el proceso de actualizacin, Dreamweaver puede crear un archivo de cach en el que almacenar informacin sobre todos los vnculos del sitio local. Este archivo de cach se crea al seleccionar la opcin Cach en el cuadro de dilogo Denicin de sitio y se actualiza de manera invisible cuando se usa Dreamweaver para agregar, cambiar o eliminar vnculos a archivos del sitio local.

146

Captulo 7

Para crear un archivo de cach para el sitio: 1

Elija Archivo > Abrir sitio > Denir sitios (Windows) o Sitio > Denir sitios (Macintosh). Seleccione el sitio en el cuadro de dilogo Denir sitios, elija Edicin y, a continuacin, seleccione la opcin Cach en el panel Datos locales.

Para volver a crear una cach para el sitio:

Elija Sitio > Volver a crear cach de sitio. La primera vez que agregue, cambie o quite vnculos a archivos del sitio local despus de iniciar Dreamweaver, el programa le pedir que cargue la cach. Si hace clic en S, se cargar la cach y se actualizarn automticamente todos los vnculos al archivo que acaba de modicar. Si elige No, el cambio se anotar en la cach, pero sta no se cargar y los vnculos no se actualizarn. 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 n de comprobar si la cach est desfasada. Si no ha cambiado ningn archivo fuera de Dreamweaver, puede hacer clic en Detener cuando aparezca el botn. Cambiar un vnculo en todo el sitio Adems de congurar Dreamweaver para que actualice los vnculos automticamente cada vez que mueve o cambia de nombre a un archivo, puede cambiar manualmente todos los vnculos (incluidos los vnculos de secuencia de comandos, mailto, ftp y nulos) 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 archivos con los que otros establecen vnculos.

Administrar sitios

147

Para cambiar un vnculo de archivo en todo el sitio: 1 2 3

Seleccione un archivo en el panel local de la ventana Sitio. Elija Sitio > Cambiar vnculo en todo el sitio. En el cuadro de dilogo que aparece, escriba en el cuadro Por vnculos a la ruta de otro archivo relativa a la raz del sitio o haga clic en el icono de carpeta para examinar y seleccionar un archivo. 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).

Despus de cambiar un vnculo en todo el sitio, el archivo seleccionado quedar hurfano (es decir, ningn archivo de la unidad local estar vinculado a l). Entonces podr borrarlo sin romper ningn vnculo del sitio local.
Nota: Recuerde que, dado que todos los cambios se realizan localmente, necesitar borrar manualmente el archivo correspondiente en el sitio remoto y colocar o desproteger los archivos cuyos vnculos haya modicado para que los visitantes del sitio puedan ver los cambios efectuados. Para cambiar vnculos de secuencia de comandos, correo electrnico, ftp o nulos en todo el sitio: 1 2

Elija Sitio > Cambiar vnculo en todo el sitio. En el cuadro de dilogo que aparece, introduzca el vnculo que desea cambiar en el cuadro Cambiar todos los vnculos a. Introduzca el nuevo vnculo en el cuadro Por vnculos a. Haga clic en Aceptar.

3 4

Por ejemplo, para actualizar todos los vnculos de correo electrnico que sealan a su antigua direccin, puede escribir mailto:juser@mindspring.com en el cuadro Cambiar todos los vnculos a, y mailto:juser-interface@mindspring.com en el cuadro Por vnculos a.

148

Captulo 7

Comprobar el sitio
Antes de cargar el sitio en un servidor y dejarlo listo para visitas, conviene comprobarlo localmente. Es necesario asegurarse de que las pginas tienen la apariencia y el funcionamiento esperado en los exploradores de destino, que no hay vnculos rotos y que las pginas no tardan demasiado en cargarse. Las directrices siguientes le ayudarn a hacer ms agradable la visita a sus pginas: Compruebe que las pginas funcionan de la forma prevista en los exploradores de destino y que los fallos que experimentan en otros exploradores sean mnimos. Las pginas debern ser legibles y funcionales en los exploradores que no admiten estilos, capas ni JavaScript. Consulte Comprobar la compatibilidad de una pgina con los exploradores de destino en la pgina 150. Con las pginas que funcionen muy mal en exploradores antiguos puede utilizar el comportamiento Comprobar explorador para remitir automticamente a los visitantes a otra pgina. Consulte Comprobar explorador en la pgina 267. Compruebe si hay vnculos rotos en el sitio y reprelos. Dreamweaver genera una lista de vnculos a sitios externos cuando se realiza una vericacin de vnculos. Siga peridicamente estos vnculos para comprobar que siguen siendo vlidos. Otros sitios experimentan cambios de diseo y organizacin, por lo que es posible que se hayan movido o borrado las pginas con las que tiene establecidos vnculos. Consulte Comprobar vnculos entre documentos en la pgina 151 y Reparar vnculos rotos en la pgina 152. Realice una vista previa de las pginas en todos los exploradores y plataformas posibles. De este modo podr observar las diferencias en diseo, color, tamao de fuentes y tamao predeterminado de ventana del explorador que no se pueden ver comprobando el explorador de destino. Consulte Vista previa en exploradores en la pgina 153. Procure que el tamao de las pginas y el tiempo que tardan en descargarse no sean excesivos. 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. Consulte Comprobar el tiempo y el tamao de descarga en la pgina 154.

Administrar sitios

149

Comprobar la compatibilidad de una pgina con los exploradores de destino Dreamweaver permite crear pginas Web con elementos que admiten todos los exploradores (por ejemplo, imgenes y texto de prrafo), as como con elementos que slo admiten los exploradores ms recientes (por ejemplo, estilos y capas). La funcin Comprobar exploradores de destino analiza el HTML de los documentos para ver si hay etiquetas o atributos que no admiten los exploradores de destino. La comprobacin no altera el documento. La funcin Comprobar exploradores de destino utiliza archivos de texto denominados perles de explorador para determinar qu etiquetas admiten los exploradores especcos. Dreamweaver incluye perles predenidos para las versiones 2.0, 3.0 y 4.0 de Netscape Navigator y las versiones 2.0, 3.0 y 4.0 de Internet Explorer. Para modicar los perles existentes o crear otros nuevos, consulte Crear y editar perles de explorador en la pgina 313. Puede ejecutar una comprobacin de explorador de destino con un documento, un directorio o todo el sitio.
Para ejecutar una comprobacin de explorador de destino: 1

Elija una de las opciones siguientes: Para ejecutar la comprobacin en el documento actual, guarde el archivo. La comprobacin se realizar con la ltima versin guardada del archivo y no incluir los cambios que no haya guardado. Para ejecutar la comprobacin con un directorio o un sitio, elija Ventana > Archivos del sitio y abra la ventana FTP del sitio. A continuacin, seleccione una carpeta en el directorio local. La comprobacin de explorador de destino se realizar en todos los archivos HTML de esa carpeta y las subcarpetas que contenga. La comprobacin de explorador de destino slo se puede llevar a cabo con archivos locales.

Elija Archivo > Comprobar exploradores de destino. Si an no ha seleccionado un Explorador principal, el programa le pedir que lo haga.

En la lista de exploradores, seleccione el que desea utilizar para la comprobacin. Haga clic en Comprobar. Se abrir el informe del explorador de destino en el explorador principal (que se iniciar si an no est abierto).

150

Captulo 7

Para guardar el informe, elija Archivo > Guardar en el explorador. El informe de comprobacin del explorador de destino es un archivo temporal que se almacena en la carpeta Temp en Windows y en la raz de documentos en Macintosh. El archivo se perder si no lo guarda antes de navegar a otro sitio.

Comprobar vnculos entre documentos 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. Dreamweaver slo comprueba vnculos y referencias a documentos dentro del sitio. Asimismo, recopila una lista de vnculos que aparecen en el documento o documentos seleccionados, pero no los verica.
Para comprobar los vnculos del documento actual: 1 2

Guarde el archivo en una ubicacin dentro de un sitio local. Elija Archivo > Comprobar vnculos > Este documento.

Para comprobar los vnculos de parte de un sitio local: 1 2 3 4

Elija Ventana > Archivos del sitio para abrir la ventana Sitio. Elija un sitio en la lista del men emergente Sitios. En el panel local, seleccione los archivos o las carpetas que desea comprobar. Haga clic con el botn secundario del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) y elija Comprobar vnculos > Archivos/carpetas seleccionados en el men de acceso directo.

Para comprobar los vnculos de todo el sitio:

Elija Archivo > Comprobar vnculos > Todo el sitio. Cuando Dreamweaver termina de comprobar los vnculos de los archivos especicados, abre el cuadro de dilogo Vericador de vnculos. Este cuadro de dilogo muestra una lista de los vnculos rotos, los vnculos externos (vnculos que Dreamweaver no puede comprobar porque estn fuera del sitio) y los archivos hurfanos (archivos a los que no estn vinculados otros documentos). Para alternar entre las listas de Vnculos rotos, Vnculos externos y Archivos hurfanos, seleccione el elemento correspondiente en el men emergente Mostrar. Para guardar todo el informe como archivo de texto delimitado por tabulaciones, haga clic en Guardar. Consulte tambin Reparar vnculos rotos en la pgina 152.

Administrar sitios

151

Reparar vnculos rotos Al comprobar vnculos en Dreamweaver aparece el cuadro de dilogo Vericador de vnculos con un informe de vnculos rotos, vnculos externos ysi ha comprobado todo el sitioarchivos hurfanos. Puede reparar las referencias de imagen y los vnculos rotos directamente en el cuadro de dilogo Vericador de vnculos, o abrir los archivos desde la lista y reparar los vnculos en el inspector de propiedades.
Para reparar los vnculos en el cuadro de dilogo Verificador de vnculos: 1 2

Seleccione el vnculo roto en el cuadro de dilogo Vericador de vnculos. Introduzca la ruta y el nombre de archivo o haga clic en el icono de carpeta para examinar el archivo. Pulse la tecla Tabulacin o Entrar. Si hay otras referencias rotas a este 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 a este archivo. Haga clic en No si desea actualizar nicamente la referencia actual.

Nota: Si est activada la funcin de desproteccin/proteccin de archivos para este sitio, Dreamweaver intentar proteger los archivos que requieren cambio. Si no puede desproteger un archivo, Dreamweaver mostrar un cuadro de dilogo de advertencia y no cambiar las referencias rotas. Consulte Usar el sistema de desproteccin/proteccin en la pgina 134. Para reparar vnculos en el inspector de propiedades: 1

En el cuadro de dilogo Vericador de vnculos, 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).

Sobrescriba el texto resaltado para establecer una ruta y un nombre de archivo nuevos o haga clic en el icono de carpeta para examinar el archivo. Si est actualizando una referencia de imagen y la nueva imagen aparece con el 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.

152

Captulo 7

A medida que los vnculos se van reparando, sus entradas desaparecen de la lista Vnculos rotos. Si una entrada aparece en la lista despus de introducir una ruta o un nombre de archivo nuevos en el Vericador de vnculos (o despus de guardar los cambios realizados en el inspector de propiedades), signica que Dreamweaver no encuentra el archivo nuevo. Se sigue considerando que el vnculo est roto. Vista previa en exploradores Puede obtener una vista previa de los documentos en los exploradores de destino. Elija Archivo -Vista previa en el explorador o pulse F12 o Control-F12 (Windows) o Comando-F12 (Macintosh) para mostrar el documento actual en el explorador principal o secundario, respectivamente. No es necesario que guarde el documento previamente. Podr activar todas las funciones relacionadas con el explorador, como los comportamientos JavaScript, los vnculos absolutos y relativos al documento, los controles ActiveX, los plug-ins de Netscape, etc., siempre que haya instalado los plug-ins o los controles ActiveX necesarios. Para cambiar el explorador principal o denir uno secundario, elija Archivo > Vista previa en el explorador > Editar lista de exploradores. Puede denir hasta 20 exploradores para realizar vistas previas. Todos los exploradores que dena aparecern en el men Vista previa en el explorador. El contenido vinculado a rutas relativas a la raz no aparece cuando se realiza una vista previa de documentos en un explorador local. Esto se debe a que los exploradores no reconocen races de sitios, mientras que los servidores s. Para realizar una vista de previa de contenido vinculado a rutas relativas a la raz, site el archivo en un servidor remoto y valo desde l. Consulte tambin Rutas relativas y absolutas en la pgina 117. Configurar preferencias de vista previa en el explorador Las preferencias de Vista previa en el explorador muestran los exploradores principal y secundario denidos actualmente. Para abrir las preferencias de Vista previa en el explorador, elija Edicin > Preferencias y seleccione Vista previa en el explorador o Archivo > Vista previa en el explorador > Editar lista de exploradores. Consulte Vista previa en exploradores en la pgina 153.
Agregar Editar Quitar

Dene un explorador nuevo.

Cambia la conguracin del explorador seleccionado. Elimina el explorador seleccionado en la lista.

Explorador principal y Explorador secundario Especica si el explorador seleccionado es el principal o el secundario. Pulse F12 y Control-F12 (Windows) o Comando-F12 (Macintosh) para abrir los exploradores principal y secundario, respectivamente.

Administrar sitios

153

Vista previa en lnea (Slo Windows) Permite obtener una vista previa de la pgina

actual a travs de un servidor local como URL que comienza por http://localhost/. Cuando esta opcin est desactivada, Dreamweaver abre el documento en un explorador con una ruta de archivo que comienza por archivo://. En algunos casos, los vnculos especicados como rutas relativas a la raz del sitio no funcionan correctamente cuando se abren en un explorador con una ruta archivo://. Comprobar el tiempo y el tamao de descarga En la parte inferior de la ventana de documento guran el tamao y el tiempo estimado de descarga de la pgina actual. Dreamweaver calcula el tamao basndose en todo el contenido de la pgina, incluidos los objetos vinculados, como imgenes y plug-ins. Dreamweaver estima el tiempo de descarga basndose en la velocidad de conexin introducida en el panel de la barra de estado del cuadro de dilogo Preferencias. El tiempo de descarga real depender de las condiciones generales de Internet.
Para establecer las preferencias de tiempo y tamao de descarga: 1 2

Elija Editar > Preferencias y, a continuacin, haga clic en la 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).

154

Captulo 7

CAPTULO 8
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Usar Roundtrip HTML

Introduccin a Roundtrip HTML

Roundtrip HTML es una funcin exclusiva de Dreamweaver que permite mover documentos entre el programa y un editor HTML de texto con escasa o nula repercusin sobre el contenido y la estructura del cdigo fuente HTML de los documentos. Dreamweaver incluso mantiene y reproduce cdigo HTML que no es vlido tcnicamente (por ejemplo, una etiqueta FONT entre mltiples etiquetas P si los exploradores admiten dicho cdigo. Sin embargo, el cdigo fuente HTML que genera Dreamweaver durante la edicin grca siempre ser vlido tcnicamente.

155

stas son las caractersticas fundamentales de Roundtrip HTML: Al pasar a Dreamweaver desde el editor externo o al abrir un documento HTML existente, el programa lleva a cabo las operaciones siguientes de forma predeterminada: reescribe las etiquetas solapadas, cierra las etiquetas que no pueden permanecer abiertas y elimina las etiquetas de cierre adicionales. Si no desea que Dreamweaver reescriba cdigo fuente HTML, elija Edicin > Preferencias y seleccione Reescritura de HTML para desactivarla. Consulte Congurar preferencias de reescritura de HTML en la pgina 158. En la ventana de documento, Dreamweaver muestra marcas del HTML no vlido e incompatible. Las etiquetas no vlidas aparecen resaltadas en amarillo y el texto dentro de las etiquetas aparece como texto normal. Si selecciona la etiqueta no vlida, Dreamweaver describe el error y cmo corregirlo en el inspector de propiedades. Si desactiva la reescritura de HTML, Dreamweaver muestra el cdigo HTML como no vlido, en lugar de reescribirlo. Dreamweaver no cambia etiquetas que no reconoce, ni siquiera las etiquetas XML, porque no tiene criterios para juzgar si son o no vlidas. Si se solapan a otras etiquetas, Dreamweaver puede considerarlas no vlidas y marcarlas como errneas. Por ejemplo, la siguiente etiqueta personalizada se marcara como errnea: <MiNuevaEtiqueta><B>texto</MiNuevaEtiqueta></B> . Dreamweaver no altera las etiquetas CFML (Cold Fusion Markup Language) ni ASP (Microsoft Active Server Pages), y muestra iconos para identicar bloques de cdigo CFML o ASP en la ventana de documento siempre que esto sea posible. Consulte Editar archivos de Cold Fusion y Active Server en Dreamweaver en la pgina 164. Es recomendable desactivar la reescritura de etiquetas no vlidas antes de abrir documentos ASP o CFML en Dreamweaver. Consulte Congurar preferencias de reescritura de HTML en la pgina 158. Dreamweaver permite iniciar un editor HTML de texto para modicar el documento actual. Dreamweaver est integrado con HomeSite (Windows) y BBEdit (Macintosh). Consulte Usar otros editores HTML en la pgina 162.

156

Captulo 8

Inspector de HTML
El inspector HTML muestra el cdigo fuente del documento actual. Las etiquetas aparecen con cdigos de color de acuerdo con la conguracin de Preferencias de colores de HTML Al agregar o cambiar contenido en la ventana de documento, Dreamweaver muestra los cambios inmediatamente en el inspector de HTML. Esto convierte al inspector de HTML en una herramienta til para aprender el lenguaje HTML o para recordar la sintaxis o los valores correctos de etiquetas y atributos especcos. Los cambios realizados en el inspector de HTML slo aparecern en la ventana de documento cuando haga clic fuera del inspector. Dreamweaver no reescribe cdigo HTML introducido directamente en el inspector de HTML. Si introduce aqu cdigo HTML no vlido, Dreamweaver resaltar las etiquetas como elementos de formato no vlido cuando se active la ventana de documento.
Para abrir el inspector de HTML, lleve a cabo una de las operaciones siguientes:

Elija Ventana > HTML. Haga clic en el icono de inspector HTML del lanzador o del minilanzador (en el ngulo inferior derecho de la ventana de documento). Pulse F10.
Para alternar entre la ventana de documento y el inspector de HTML:

Pulse Control-Tabulacin (Windows) o Comando-Tabulacin (Macintosh).

Configurar los controles de formato del cdigo fuente HTML

Dreamweaver dispone de los controles siguientes para aplicar formato al cdigo fuente HTML: Controlan los cambios que realiza Dreamweaver al cdigo fuente HTML cuando se abre un documento HTML. Consulte Congurar preferencias de reescritura de HTML en la pgina 158.
Preferencias de reescritura de HTML

Controlan las opciones comunes de formato HTML, como longitud de lneas y sangra. Consulte Congurar preferencias de formato HTML en la pgina 158.
Preferencias de formato HTML

El perl SourceFormat.prole ofrece el mximo grado de control sobre cmo Dreamweaver escribe el cdigo HTML. Consulte Editar el perl de formato del cdigo fuente HTML en la pgina 312.

Usar Roundtrip HTML

157

Preferencias de colores HTML

Controlan cmo se codican en color las etiquetas HTML (y el texto que hay entre ellas) en el inspector de HTML. Consulte Congurar preferencias de colores HTML en la pgina 160.
Preferencias de fuentes/codificacin Permiten especicar la fuente que utiliza el cdigo fuente HTML en el inspector de HTML. Consulte Congurar preferencias de fuentes/codicacin en la pgina 77.

Configurar preferencias de reescritura de HTML Las preferencias siguientes afectan a documentos HTML importados. No tienen ninguna repercusin al editar HTML en el inspector de HTML. Si desactiva estas opciones de reescritura, Dreamweaver muestra los elementos de formato no vlidos en la ventana de documento, en lugar de reescribir el cdigo HTML.
Etiquetas no cerradas y mal anidadas Reescribe las etiquetas anidadas o solapadas no vlidas. Por ejemplo, <B><I>text</B></I> se reescribe como <B><I>text</ I></B>. Esta opcin tambin inserta las comillas y los parntesis de cierre que

falten.
Eliminar etiquetas de cierre adicionales

Borra las etiquetas de cierre que no tienen su correspondiente etiqueta de apertura.

Advertir al solucionar/eliminar etiquetas Muestra un resumen de cdigo HTML no vlido tcnicamente que Dreamweaver ha intentado corregir. El resumen indica la ubicacin del problema (con nmeros de lnea y columna) para facilitar la correccin y conseguir que se reproduzca de la manera deseada.

Configurar preferencias de formato HTML A la hora de crear documentos, utilice las siguientes preferencias de formato HTML para controlar opciones como tamao de sangra, longitud de lnea y uso de maysculas y minsculas en nombres de elementos y atributos. Consulte Editar el perl de formato del cdigo fuente HTML en la pgina 312 para obtener informacin sobre controles adicionales de formato HTML. Para aplicar opciones de formato HTML a documentos HTML existentes, utilice el comando Aplicar formato de origen. Consulte Aplicar formato al cdigo fuente HTML en documentos existentes en la pgina 162.
Sangra Aplica sangra a todas las etiquetas marcadas con INDENT en el perl SourceFormat.prole. Consulte Editar el perl de formato del cdigo fuente HTML en la pgina 312. Usar Especica

si la sangra utiliza espacios o tabulaciones.

Filas y columnas de tabla

Aplica sangra automticamente a las etiquetas TR y TD para facilitar la lectura de cdigos de tabla. Para que funcione esta opcin debe estar activada la opcin Sangra.

158

Captulo 8

Marcos y conjuntos de marcos Aplica sangra automticamente a las etiquetas FRAME y FRAMESET anidadas para facilitar la lectura de los archivos de conjuntos de

marcos. Para que funcione esta opcin debe estar activada la opcin Sangra.
Tamao de sangra Determina el tamao de sangra (en espacios si se ha denido Usar como espacios, o en tabulaciones, si se ha denido como tabulaciones). Por ejemplo, si Usar se ha denido como tabulaciones y Tamao de sangra como 4, se aplicar una sangra de cuatro tabulaciones a las etiquetas. Tamao de tabulacin

Determina el tamao de las tabulaciones (medido en

espacios de caracteres).
Nota: Si Tamao de sangra no es un mltiplo de Tamao de tabulacin y Usar est denido como tabulaciones, se aplicar sangra a las etiquetas utilizando una combinacin de tabulaciones y caracteres de espacio. Ajuste automtico Ajusta las lneas (con un salto de lnea manual) cuando llegan a

la anchura de columna especicada. Por el contrario, la casilla de vericacin Ajustar del inspector de HTML agrega un salto de lnea automtico en las lneas que superan la anchura de la ventana. Resulta til para especicar el tipo de servidor remoto (Windows, Macintosh o Unix) en el que colocar los archivos. La seleccin del tipo correcto de caracteres de salto de lnea garantiza que el cdigo fuente HTML aparecer correctamente al verlo en el servidor remoto. Esta opcin tambin resulta til cuando se trabaja con un editor de texto externo que slo reconoce algunos tipos de saltos de lnea. Por ejemplo, utilice CR LF (Windows) si usa el Bloc de notas como editor externo, y CR (Macintosh) si usa SimpleText.
Saltos de lnea May/min etiquetas y May/min para atributos Controlan el uso de maysculas y minsculas en los nombres de elementos y atributos.

Especica si los nombres de elementos y atributos cambian al uso de maysculas o minsculas que haya especicado en las opciones anteriores al abrir un documento HTML existente. Por ejemplo, si desea ver siempre los nombres de elementos en minscula, especique nombres de elementos en minsculas y active esta opcin. Cuando importe un documento que contiene nombres de elementos en maysculas, Dreamweaver los convertir a minsculas.
Anular may/min de Centrado Especica si los elementos deben centrarse utilizando DIV ALIGN=center o CENTER. Ambos cdigos forman parte de la especicacin HTML 4.0 Transitional, pero CENTER lo reconoce una gama ms amplia de exploradores.

Usar Roundtrip HTML

159

Configurar preferencias de colores HTML Utilice las preferencias de colores HTML para controlar los colores de fondo, texto y etiquetas del inspector de HTML. Especica el color del fondo del inspector de HTML. Este color slo aparece cuando se hace clic o se escribe en el inspector. Cuando el inspector HTML no est en primer plano, el color del fondo es gris medio.
Fondo

Especica el color del texto que aparece entre etiquetas (por ejemplo, en el cdigo <B>some text</B>, las palabras some text aparecen en color de Texto, pero no las etiquetas). Para anular el color de Texto en una etiqueta especca, seleccione la opcin Incluir contenido.
Texto

Especica el color de las etiquetas de comentario (<!-- -->) y su contenido. Especica el color de todas las etiquetas excepto las de comentario. Para anular el color de Predet. etiqueta en etiquetas especcas, establezca su color.
Predet. etiqueta

Puede anular las opciones de color de Predet. etiqueta y Texto en etiquetas especcas especicando Color incluir contenido.
Especfico etiqueta Para establecer el color de una etiqueta especfica: 1

Seleccione una etiqueta en el cuadro Especco etiqueta. Haga clic mientras pulsa la tecla Mays para seleccionar etiquetas adyacentes o mientras pulsa la tecla Control (Windows) o Comando (Macintosh) para seleccionar varias etiquetas que no estn adyacentes.

Haga clic en el botn de opcin situado al lado de la muestra de color de la parte inferior del panel y utilice uno de estos mtodos para elegir un nuevo valor de color: En el campo de texto situado al lado de la muestra introduzca un valor hexadecimal. Mantenga pulsado el botn del ratn sobre la muestra de color y seleccione un color nuevo en la paleta de colores vlidos para los exploradores o el selector de colores del sistema.

Para asignar un color al texto situado entre las etiquetas de apertura y cierre de esta etiqueta, seleccione Aplicar color a contenido de etiqueta.

160

Captulo 8

Limpiar cdigo HTML

Utilice el comando Limpiar HTML para eliminar etiquetas vacas, combinar etiquetas FONT anidadas y optimizar cdigo HTML confuso o ilegible.
Para limpiar cdigo HTML: 1 2

Abra un documento existente y elija Comandos > Limpiar HTML. En el cuadro de dilogo que aparece dispone de las siguientes opciones:
Borrar etiquetas vacas Elimina las etiquetas que no tienen contenido entre ellas. Por ejemplo, <B></B> y <FONT COLOR=FF0000></FONT> se consideraran etiquetas vacas, a diferencia de las etiquetas B de <B>texto</B>. Borrar etiquetas anidadas repetidas Elimina las etiquetas que estn repetidas. Por ejemplo, en el cdigo <B>Eso es lo que <B>de verdad</B> quera decir</B> , las etiquetas B que rodean a las palabras "de verdad" estn repetidas y seran

eliminadas.
Borrar comentarios HTML ajenos a Dreamweaver Elimina todos los comentarios que no ha insertado Dreamweaver. Por ejemplo, se eliminara , <!-inicio texto del cuerpo --> a diferencia de <!-- #BeginEditable ttulodoc --> (porque se trata de un comentario de Dreamweaver que seala el comienzo de una regin editable de una plantilla).

Elimina todos los comentarios que ha insertado Dreamweaver. Por ejemplo, se eliminara , <!-- #BeginEditable ttulodoc --> a diferencia de <!--inicio texto del cuerpo--> (porque no se trata de un comentario de Dreamweaver). La eliminacin de los comentarios de Dreamweaver convierte los documentos asociados a plantillas en documentos ordinarios de HTML y los elementos de biblioteca en cdigo HTML normal (es decir, no se podrn actualizar cuando cambie la plantilla o el elemento de biblioteca original).
Borrar comentarios HTML de Dreamweaver Borrar etiquetas especficas Elimina las etiquetas especicadas en el campo de texto contiguo. Utilice esta opcin para eliminar etiquetas personalizadas insertadas por otros editores visuales, as como etiquetas que no desea que aparezcan en el sitio (por ejemplo, BLINK). Separe etiquetas mltiples con comas (por ejemplo, FONT, BLINK). Combinar etiquetas de <fuentes> anidadas cuando sea posible Consolida dos o ms fuentes (FONT) asociadas al mismo rango de texto. Por ejemplo, <FONT SIZE=7><FONT COLOR=#FF0000>big red</FONT></FONT> cambiaran a <FONT SIZE=7 COLOR=#FF0000>big red</FONT> . Mostrar registro al terminar

Muestra un cuadro de advertencia con detalles sobre los cambios realizados en el documento cuando termina la operacin de limpieza.

Usar Roundtrip HTML

161

Haga clic en Aceptar. Segn el tamao del documento y el nmero de opciones que seleccione, la tarea puede tardar varios segundos.

Aplicar formato al cdigo fuente HTML en documentos existentes Las opciones de formato de cdigo HTML que especique en las preferencias de formato HTML y en el perl SourceFormat.prole slo se aplicarn a los documentos creados con Dreamweaver. Para aplicar estas opciones de formato a documentos HTML existentes, utilice el comando Aplicar formato de origen.
Para aplicar las opciones de formato de origen de HTML a un documento existente: 1

Elija Archivo > Abrir para abrir un archivo HTML existente en la ventana de documento. Elija Comandos > Aplicar formato de origen.

Corregir cdigo no vlido

Si aparece cdigo HTML resaltado en amarillo intenso en la ventana de documento o el inspector de HTML, signica que Dreamweaver ha encontrado HTML no vlido que no puede mostrar. Estas marcas de HTML no vlido aparecen con frecuencia cuando se comienza a escribir una etiqueta en el inspector de HTML y se cambia a la ventana de documento sin terminar la etiqueta. Para corregir el problema, haga clic en la marca amarilla de HTML no vlido y siga las indicaciones del inspector de propiedades. Consulte tambin Introduccin a Roundtrip HTML en la pgina 155.

Usar otros editores HTML

En algunas ocasiones quiz preera utilizar un editor de texto para introducir manualmente grandes cantidades de cdigo HTML, JavaScript o VBScript. Puede utilizar cualquier editor de texto con Dreamweaver, como el Bloc de notas (que se entrega con Windows 95 y NT) y SimpleText (que se entrega con Macintosh), BBEdit, HomeSite, vi, emacs y TextPad. Las versiones comerciales y completas de Dreamweaver en ingls, francs y alemn se entregan con el editor de texto ms utilizado en Windows, HomeSite, y en Macintosh, BBEdit. Consulte Usar un editor de texto con Dreamweaver en la pgina 163 y Usar BBEdit con Dreamweaver (slo Macintosh) en la pgina 163. Si ha adquirido Dreamweaver por medio de la descarga electrnica de software (ESD), puede conseguir una copia de HomeSite o de BBEdit solicitando el CD y el manual en el sitio Web de Dreamweaver (http://www.dreamweaver.com/).

162

Captulo 8

Usar un editor de texto con Dreamweaver Puede iniciar un editor de texto externo desde Dreamweaver para editar el cdigo fuente HTML del documento actual y, a continuacin, volver a Dreamweaver para seguir editndolo grcamente. Dreamweaver detecta los cambios externos realizados en el documento y pide que se vuelva a cargar.
Para seleccionar un editor externo: 1 2 3

Elija Edicin > Preferencias. Seleccione Editores externos en la lista Categora de la izquierda. Haga clic en el botn Examinar situado al lado del cuadro HTML para seleccionar un editor de texto. En la opcin Sincronizar archivos externos, especique qu accin desea que Dreamweaver lleve a cabo al detectar cambios externos en un documento abierto en Dreamweaver. En la opcin Al iniciar, especique cmo trata Dreamweaver a los documentos antes de iniciar el editor.

Para iniciar el editor externo:

Seleccione Edicin > Iniciar editor externo o haga clic en Editor externo en la barra de ttulo de la ventana HTML. Usar BBEdit con Dreamweaver (slo Macintosh) Si abre un documento en BBEdit y Dreamweaver, ste se actualizar automticamente cuando cambie de una aplicacin a la otra. Adems, los dos programas realizan un seguimiento de la seleccin actual, es decir, si realiza una seleccin en Dreamweaver y cambia a BBEdit, encontrar seleccionado el mismo elemento. Puede desactivar la integracin con BBEdit si preere trabajar con una versin anterior de BBEdit o con otro editor de texto HTML. Consulte Usar un editor de texto con Dreamweaver en la pgina 163. Si est desactivada la integracin con BBEdit no se realizar seguimiento de selecciones.
Para utilizar BBEdit con Dreamweaver: 1

Lleve a cabo una de estas operaciones: Elija Edicin > Iniciar BBEdit. Haga clic en BBEdit, en el ngulo superior derecho del inspector de HTML.

2 3

Edite lo que desee en BBEdit. Haga clic en el botn Dreamweaver de la paleta de herramientas de HTML de BBEdit.

Usar Roundtrip HTML

163

Para desactivar la integracin con BBEdit: 1 2 3

Elija Edicin > Preferencias. Seleccione Editores externos en la lista Categora de la izquierda. Desactive Activar integracin con BBEdit y haga clic en Aceptar.

Editar archivos de Cold Fusion y Active Server en Dreamweaver Antes de abrir un archivo de Cold Fusion o Active Server Page en Dreamweaver, elija Edicin > Preferencias, seleccione Reescritura de HTML y desactive Etiquetas no cerradas y mal anidadas y Eliminar etiquetas de cierre adicionales. Dreamweaver muestra iconos para identicar bloques de cdigo CFML (Cold Fusion Markup Language) o ASP (Active Server Page) en la ventana de documento siempre que esto sea posible.
Para editar un bloque de cdigo ASP en la ventana de documento: 1 2 3

Haga clic en la marca amarilla ASP para seleccionarla. En el inspector de propiedades, haga clic en el botn Editar. Edite el cdigo ASP en el cuadro de dilogo que aparece y, a continuacin, haga clic en Aceptar.

Para editar un bloque de cdigo CFML en la ventana de documento: 1 2

Haga clic en la marca CFML para seleccionarla. En el inspector de propiedades, lleve a cabo una de las operaciones siguientes: Haga clic en el botn Atributos para editar los atributos de etiqueta existentes y sus valores o agregar otros nuevos. Haga clic en el botn Contenido para editar el contenido que aparece entre las etiquetas CFML de apertura y cierre. Si la etiqueta seleccionada est vaca (es decir, no tiene etiqueta de cierre), el botn Contenido estar desactivado.

Si no ve ningn marcador en los lugares en los que sabe a ciencia cierta que existe cdigo ASP o CFML, asegrese en primer lugar que est activado Ver > Elementos invisibles. Si est activado y no aparecen los iconos, Dreamweaver no reconoce el cdigo como CFML o ASP. Esto puede suceder cuando se insertan condicionales en etiquetas HTML, como en el siguiente cdigo ASP:
<input type=checkbox name=month value=October <% if month=October then %>checked<% end if %> >

164

Captulo 8

Para editar cdigo CFML o ASP cuando no aparecen marcas: 1

En la ventana de documento, site el cursor cerca de donde se encuentre el cdigo CFML o ASP. Elija Ventana > HTML para abrir el inspector de HTML. Haga clic en la barra de ttulo o la barra de estado del inspector de HTML. No haga clic en medio del inspector, pues el cursor se apartara del cdigo CFML o ASP que desea editar.

2 3

4 5

Edite el cdigo directamente en el inspector de HTML. Pulse F10 para cerrar el inspector de HTML y volver a la ventana de documento.

Para obtener informacin sobre el procesamiento de cdigo CFML o ASP y ver los resultados en la ventana de documento, consulte Introduccin a la ampliacin de Dreamweaver en la Ayuda de Dreamweaver.

Insertar secuencias de comandos

Puede introducir secuencias de comandos JavaScript y VBScript en la ventana de documento sin necesidad de utilizar el inspector de HTML. Para mostrar marcas de secuencias de comandos en la ventana de documento, elija Ver > Elementos invisibles. Consulte tambin Preferencias de elementos invisibles en la pgina 89.
Para insertar una secuencia de comandos: 1 2

Site el cursor donde desea colocar la secuencia de comandos. Haga clic en el botn Secuencia de comandos de la paleta de objetos o elija Insertar > Secuencia de comandos. En el cuadro de dilogo que aparece, elija el lenguaje de secuencia de comandos en el men emergente. Si utiliza JavaScript y no est seguro de su versin, elija JavaScript en lugar de JavaScript1.1 o JavaScript1.2.

Introduzca el cdigo que deber aparecer entre las etiquetas de secuencia de comandos. Para establecer un vnculo a un archivo externo de secuencia de comandos, haga clic en Aceptar sin escribir nada y, a continuacin, agregue la referencia al archivo de origen en el inspector de propiedades (escriba el nombre de archivo en el cuadro Origen o haga clic en el icono de carpeta para acceder al archivo y seleccionarlo).

Usar Roundtrip HTML

165

Para editar la secuencia de comandos: 1 2

Seleccione el icono Secuencia de comandos. En el inspector de propiedades, haga clic en Editar.

Configurar propiedades de secuencia de comandos Las siguientes propiedades aparecen en el inspector de propiedades cuando hay una marca de secuencia de comandos seleccionada: Especica JavaScript o VBScript como lenguaje de la secuencia de comandos.
Lenguaje

Especica un archivo de secuencia de comandos vinculado externamente. Introduzca la ruta o haga clic en el icono de carpeta para elegir el archivo.
Origen Editar Abre la ventana Secuencia de comandos, donde podr realizar cambios en la

secuencia.

Insertar comentarios
Un comentario es un texto descriptivo que se inserta en el cdigo HTML para explicar el cdigo o para facilitar informacin de otro tipo. Los comentarios no afectan a la apariencia del documento en el explorador. Consulte tambin Preferencias de elementos invisibles en la pgina 89.
Para insertar un comentario: 1 2

Site el cursor donde desea colocar el comentario. Haga clic en el botn Comentario de la paleta de objetos o elija Insertar > Comentario.

Para mostrar marcas de comentarios en la ventana de documento, elija Ver > Elementos invisibles.
Para introducir el texto del comentario: 1 2

Seleccione el icono Comentarios. Introduzca el texto en el inspector de propiedades.

Al crear un comentario se genera el siguiente cdigo HTML:

<!-- Comment text-->

166

Captulo 8

CAPTULO 9
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Formatear texto

Introduccin a las opciones de formato de texto

Las opciones de formato de Dreamweaver son similares a las de los programas estndar de tratamiento de texto. Utilice el men Texto > Formato o el men 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 la alineacin del texto seleccionado, use el men Texto o el inspector de propiedades. Tambin puede utilizar estilos para denir la apariencia del texto que corresponda a una determinada categora. Los comandos del men Texto y el inspector de propiedades aplican formato utilizando etiquetas HTML estndar (como B, FONT y CODE) que reconocen los exploradores de la Web ms utilizados. Los estilos personalizados utilizan hojas de estilos en cascada (CSS) para denir el formato del texto de una determinada clase o para redenir el formato de una etiqueta especca (como H1, H2, Po LI). Estos estilos son compatibles con Netscape Navigator 4.0 o superior y Microsoft Internet Explorer 3.0 o superior Puede utilizar estilos y formato HTML en la misma pgina, pero, al igual que ocurre con los programas de tratamiento de texto, el formato aplicado con el men Texto o el inspector de propiedades prevalece sobre los valores de la hoja de estilos en el texto seleccionado. Para ver una animacin introductoria al uso de estilos en Dreamweaver, consulte Aplicar formato al texto con hojas de estilo.

167

Aplicar formato al texto con hojas de estilo

La especicacin HTML 4.0 emitida por el World Wide Web Consortium (W3C) a principios de 1998 desalentaba el uso de etiquetas de formato HTML (como B, I, FONT, y CENTER) en favor de las hojas de estilos en cascada. Sin embargo, en la prctica, las etiquetas de formato HTML, a pesar de que ofrecen un control ms limitado sobre la apariencia que las hojas de estilos, son compatibles con una gama ms amplia de exploradores que las hojas de estilos. Por esta razn, es probable que sigan formando parte de las herramientas de los desarrolladores de la Web mientras los exploradores 3.0 y anteriores constituyan un porcentaje considerable del trco de la Web. Para obtener informacin especca sobre la aplicacin de formato con etiquetas HTML, consulte uno de los temas siguientes: Cambiar caractersticas de fuente Cambiar el color del texto Alinear texto y elementos Las etiquetas HTML que denen la estructura del documento ms que su apariencia, por ejemplo, encabezados, prrafos y listas, siguen formando una parte considerable de la especicacin HTML. De hecho, aunque tenga previsto utilizar hojas de estilos para denir las caractersticas de fuentes de la pgina, conviene utilizar etiquetas estndar de encabezado, ya que ayudan a conservar la estructura de la pgina en los exploradores que no admiten hojas de estilos. Si desea un ejemplo de esto, vea las pginas HTML Dreamweaver Help Pages en un explorador 3.0. Consulte Aplicar etiquetas de prrafo y encabezado. Aplicar etiquetas de prrafo y encabezado Utilice el men Formato del inspector de propiedades o el men Texto > Formato para aplicar las etiquetas estndar de prrafo y encabezado. Para redenir la apariencia de las etiquetas de prrafo y encabezado utilice hojas de estilos. Consulte Aplicar formato al texto con hojas de estilo.
Para aplicar una etiqueta de prrafo o encabezado: 1 2

Site el cursor en el prrafo o seleccione una parte o todo el texto del prrafo. Elija un estilo de prrafo en el men Formato del inspector de propiedades o el men Texto > Formato. Elija Ninguno para quitar un estilo de prrafo. La etiqueta asociada con el estilo seleccionado (por ejemplo,, P para prrafo, H1 para Encabezado 1, PRE para Preformateado, etc.) se aplicar a todo el prrafo.

168

Captulo 9

Cambiar caractersticas de fuente Utilice el inspector de propiedades o el men Texto para cambiar las caractersticas de fuente del texto seleccionado.
Para cambiar las caractersticas de fuente: 1

Seleccione el texto. Si no hay texto seleccionado, el cambio se aplicar al texto que escriba a continuacin. Elija una de las opciones siguientes: Para cambiar la fuente, elija una combinacin de fuentes en el inspector de propiedades o en el men Texto > Fuente. Los exploradores muestran el texto utilizando la primera fuente de la combinacin instalada en el sistema del usuario. Si ninguna de las fuentes de la lista est instalada, el explorador mostrar el texto de acuerdo con su propia conguracin. Consulte tambin Modicar combinaciones de fuentes. Predeterminada utiliza la fuente predeterminada del texto seleccionado (la fuente predeterminada del explorador o la fuente asignada a la etiqueta en una hoja de estilo). Use esta opcin para quitar tipos de fuente aplicados anteriormente. 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 men Texto > Estilo. Para cambiar el tamao de fuente, elija un tamao (de 1 a 7) en el inspector de propiedades o en el men Texto > Tamao. Las tamaos de fuente HTML son tamaos relativos, no de puntos especcos. Los usuarios establecen el tamao de puntos de la fuente predeterminada para sus exploradores. ste ser el tamao de fuente que vern cuando elijan Predeterminado o 3 en el inspector de propiedades o el men Texto > Tamao. Los tamaos 1 o 2 aparecern ms pequeos que el tamao de fuente predeterminado; los tamaos 4 a 7 aparecern ms grandes. Para hacer que el texto aparezca constantemente en un tamao de punto especco, utilice hojas de estilos. Para aumentar o reducir el tamao del texto seleccionado, elija un tamao relativo (desde + o -1 hasta + o -7) en el inspector de propiedades o en el men Texto > Aumentar tamao o Reducir tamao. Los nmeros indican una diferencia relativa respecto al tamao de BASEFONT. El valor predeterminado de BASEFONT es 3. De este modo, un valor de +4 produce un tamao de fuente de 7. Dreamweaver no muestra la etiqueta BASEFONT (incluida en HEAD), aunque el tamao de fuente aparecer correctamente en el explorador.

Formatear texto

169

Modificar 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 men Texto > Fuente.
Para modificar las combinaciones de fuentes: 1 2

Elija Texto > Fuente > Editar lista de fuentes. Seleccione la combinacin de fuentes en la lista del men Fuente, en la parte superior del cuadro de dilogo. Las fuentes de la combinacin seleccionada aparecern en la lista Fuentes elegidas, situada en el ngulo inferior izquierdo del cuadro de dilogo. A la derecha de sta se encuentra una lista con todas las fuentes instaladas en el sistema.

Elija una de las opciones siguientes: Para agregar o quitar fuentes de una combinacin, haga clic en los botones direccionales entre las listas Fuentes elegidas y Fuentes disponibles. Para agregar o quitar una combinacin de fuentes, haga clic, respectivamente, en los botones ms (+) y menos (-) de la parte superior del cuadro de dilogo. Para agregar una fuente que no est instalada en el sistema, escriba el nombre de la fuente en cuadro de texto situado bajo la lista Fuentes disponibles y haga clic en la echa direccional para agregarla a la combinacin. Agregar una fuente que no est instalada en el sistema resulta til, por ejemplo, para especicar una fuente slo para Windows cuando se trabaja con Macintosh. Para desplazarse por la lista de combinaciones de fuentes, haga clic en los botones de echas direccionales de la parte superior del cuadro de dilogo.

Para agregar una nueva combinacin a la lista de fuentes: 1 2

Elija Texto > Fuente > Editar lista de fuentes. Seleccione una fuente de la lista de Fuentes disponibles y haga clic en el botn << para agregar la fuente a la lista de Fuentes elegidas. Repita el paso 2 con cada fuente de la combinacin. Para agregar una fuente que no est instalada en el sistema, escriba el nombre de la fuente en cuadro de texto situado bajo la lista Fuentes disponibles y haga clic en el << botn para agregarla a la combinacin. Agregar una fuente que no est instalada en el sistema resulta til, por ejemplo, para especicar una fuente slo para Windows cuando se trabaja con Macintosh.

170

Captulo 9

Cuando termine de seleccionar fuentes especcas, 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.

Cambiar el 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.
Para cambiar el color del texto: 1 2

Seleccione el texto. Elija una de las opciones siguientes: Elija un color en la paleta de colores vlidos para las exploradores haciendo clic en el cuadro de color del inspector de propiedades. Elija Texto > Color. Aparecer el cuadro de dilogo Selector de colores del sistema. Seleccione un color y haga clic en Aceptar. Para denir el color predeterminado del texto, utilice el comando Modicar > Propiedades de la pgina. Consulte Denir colores predeterminados de texto.

Para restablecer el color predeterminado del texto: 1

En el inspector de propiedades, haga clic en el cuadro de color para abrir la paleta de colores vlidos para los exploradores. Haga clic en el botn Predeterminado (el botn central del ngulo inferior derecho).

Formatear texto

171

Alinear texto y elementos Puede alinear texto en la pgina utilizando el inspector de propiedades o el men Texto > Alineacin. Asimismo, puede centrar cualquier elemento en una pgina usando el comando Texto > Alineacin > Centro.
Para alinear texto: 1 2

Seleccione el texto que desea alinear. Haga clic en una opcin de alineacin (Izquierda, Derecha o Centro) del inspector de propiedades o elija Texto > Alineacin y seleccione una opcin.

Para centrar elementos: 1

Seleccione el elemento deseado (imagen, plug-in, tabla u otro elemento de pgina). Elija Texto > Alineacin > Centro.

Para aplicar y quitar sangra de texto: 1 2

Seleccione el texto deseado. 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 de acceso directo. De este modo se aplicar o eliminar la etiqueta BLOCKQUOTE cuando el texto seleccionado sea un prrafo o un encabezado, y se agregar o quitar una etiqueta adicional UL o OL cuando el texto seleccionado sea una lista.

172

Captulo 9

Crear listas
Puede crear listas numeradas, listas con vietas y listas de denicin a partir de texto existente o de texto nuevo que escriba en la ventana de documento. Adems, las listas se pueden anidar.
Para crear una lista nueva: 1 2

Site el cursor en la lnea donde desee agregar una lista de elementos nuevos. Haga clic en los botones Lista con vietas o Lista numerada del inspector de propiedades o elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar (con vietas), Lista ordenada (numerada) o Lista de denicin. Comience a escribir la lista, pulsando Entrar para pasar a otro elemento de la lista. Para terminar la lista, pulse Entrar dos veces.

Para crear una lista usando texto existente: 1 2

Seleccione una serie de prrafos para convertirlo en una lista. Haga clic en los botones Lista con vietas o Lista numerada del inspector de propiedades o elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar (con vietas), Lista ordenada (numerada) o Lista de denicin.

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.

Formatear texto

173

Aplicar formato al texto con hojas de estilo

Un estilo es un grupo de atributos de formato que controla la apariencia de un bloque o un rango de texto. Use estilos para aplicar formato a un documento individual o use una hoja de estilos externa (es decir, almacenada externamente y vinculada al documento actual) para controlar varios documentos al mismo tiempo. Una hoja de estilos incluye todos los estilos de un documento. Los estilos se identican mediante un nombre o una etiqueta HTML, lo que permite cambiar el atributo de un estilo y ver cmo todo el texto al que se aplica dicho estilo reeja el cambio inmediatamente. Los estilos de documentos HTML pueden controlar la mayora de los atributos tradicionales de formato de texto, como fuente, tamao y alineacin. Tambin pueden especicar atributos exclusivos de HTML, como posicin, efectos especiales e imgenes dinmicas. Las hojas de estilos residen en el rea HEAD de un documento y denen una serie de estilos. Los estilos pueden denir los atributos de formato de etiquetas HTML, rangos de texto identicados por un atributo CLASS o texto que cumpla los criterios de la especicacin de hojas de estilos en cascada (CSS). Dreamweaver reconoce los estilos denidos en documentos existentes siempre que se ajusten a las directrices de CSS. Las hojas de estilo funcionan en exploradores 4.0 y posteriores. Internet Explorer 3.0 reconoce algunos atributos de texto, pero la mayora de los exploradores anteriores los ignoran. Hay tres tipos de estilos en Dreamweaver: Los estilos de etiquetas HTML redenen el formato de una determinada etiqueta, como H1. Cuando se crea un estilo para la etiqueta H1 todo el texto con la etiqueta H1 cambia inmediatamente. Los estilos personalizados son similares a los que se emplean en los programas de tratamiento de texto, salvo que no se distingue entre estilo de carcter y de prrafo. Puede aplicar estilos personalizados a cualquier rango o bloque de texto. Si el estilo se aplica a un bloque de texto (por ejemplo, un prrafo completo o una lista sin ordenar), se agregar un atributo CLASS a la etiqueta del bloque (por ejemplo, P CLASS=miEstilo o UL CLASS=miEstilo). Si el estilo se aplica a un rango de texto, se insertarn alrededor del texto seleccionado etiquetas , SPAN que contengan el atributo CLASS. Consulte Aplicar un estilo personalizado. Los estilos del selector CSS redenen 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 especco (por ejemplo, #miEstilo se aplica a todas las etiquetas que contienen el par atributo-valor ID=miEstilo).

174

Captulo 9

El formato de texto que se aplica manualmente a rangos de texto puede prevalecer sobre los estilos. Para hacer que los estilos controlen el formato de un prrafo, borre todos los dems valores de formato. Si bien puede establecer todos los atributos de estilo denidos por la especicacin CSS1 en Dreamweaver, no todos los atributos aparecern en la ventana de documento. Los atributos que no aparecen se marcarn con un asterisco (*) en el cuadro de dilogo Denicin de estilo. Tambin es importante observar que algunos de los atributos de estilo CSS que pueden establecerse con Dreamweaver tienen una apariencia distinta en Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0, y algunos no son compatibles actualmente con ningn explorador. Hojas de estilo El World Wide Web Consortium es responsable de la especicacin de hojas de estilos en cascada (CSS1), donde se denen las propiedades de estilo (por ejemplo, fuente, color, relleno, margen, espaciado entre palabras) que controlan la apariencia de elementos. Dreamweaver permite establecer cualquier propiedad CSS1. Consulte Aplicar formato al texto con hojas de estilo. En Microsoft Internet Explorer 4.0 puede utilizar un lenguaje de secuencia de comandos como JavaScript o VBScript para cambiar las propiedades de posicin y estilo de los elementos despus de cargar la pgina. En Netscape Navigator 4.0 no se pueden cambiar las propiedades de estilo despus de cargar la pgina, pero s las de posicin. Crear o establecer vnculos con una hoja de estilos externa Una hoja de estilos externa es un archivo de texto que slo contiene especicaciones de estilo. La edicin de una hoja de estilos externa afecta a todos los documentos vinculados a ella. Las pginas HTML Help Pages de Dreamweaver utilizan una hoja de estilos vinculada llamada help.css. Abra este archivo (situado en la carpeta Help/html) en un editor de texto para ver los cdigos de deniciones de estilo. Abra alguno de los archivos de temas (los que comienzan por nmero) para ver cmo se vincula la hoja de estilos al documento utilizando una etiqueta LINK y cmo se aplican los estilos especcos.

Formatear texto

175

Para crear o establecer vnculos con una hoja de estilos externa: 1 2 3 4

Elija Ventana > Estilos o haga clic en el botn Estilos del lanzador. En la paleta de estilos, haga clic en Hoja de estilos. En el cuadro de dilogo Editar estilos, haga clic en Vincular. Lleve a cabo una de estas operaciones: En el cuadro Archivo/URL, introduzca la ruta a la hoja de estilos externa. Cree una hoja de estilos externa introduciendo un nombre de archivo que no exista en la ubicacin especicada. Las hojas de estilo externas deben tener la extensin .css.

Elija Vincular o Importar para especicar la etiqueta que desea usar para adjuntar la hoja de estilos externa y, a continuacin, haga clic en Aceptar. Si bien tanto IMPORT como LINK dan acceso a todos los estilos de la hoja externa desde el documento actual, LINK ofrece ms posibilidades y funciona con ms exploradores. La hoja de estilos externa aparece con la palabra (link) tras el nombre en la lista de estilos del cuadro de dilogo Editar estilos. Siga los pasos restantes si desea crear o editar estilos en la hoja externa.

Haga doble clic en el nombre de la hoja de estilos. Aparecer un segundo cuadro de dilogo Editar estilos. Haga clic en Nuevo para denir estilos en la hoja externa. Haga clic en Guardar cuando termine de denir los estilos.

7 8

176

Captulo 9

Editar una hoja de estilos externa La edicin de una hoja de estilos externa afecta a todos los documentos vinculados a ella.
Para editar una hoja de estilos externa: 1

Abra cualquier documento vinculado a la hoja de estilos externa que desea modicar. Elija Ventana > Estilos o haga clic en el botn Estilos del lanzador. Haga clic en el botn Hoja de estilos de la paleta de estilos. En el cuadro de dilogo Editar hoja de estilos, haga doble clic en el nombre de la hoja externa. Aparecer un segundo cuadro de dilogo Editar hoja de estilos mostrando los estilos de la hoja externa.

2 3 4

Edite los estilos de la hoja externa y haga clic en Guardar cuando termine. Este cambio afectar a todos los documentos vinculados a la hoja de estilos externa.

Formatear texto

177

Crear un estilo Cree un estilo para automatizar la aplicacin de formato a etiquetas HTML o a rangos o bloques de texto identicados mediante el atributo CLASS .
Para crear un estilo: 1

Elija Ventana > Estilos o haga clic en el botn Hoja de estilos de la paleta de estilos. Haga clic en Nuevo en el cuadro de dilogo Editar hoja de estilos. Dispone de los siguientes tipos de estilos:
Crear estilo person. (clase) Crea un estilo que se puede aplicar como un atributo CLASS a un rango o un bloque de texto. Redefinir etiqueta HTML

2 3

Redene el formato predeterminado de una etiqueta

HTML especicada. Dene el formato de una determinada combinacin de etiquetas o de todas las etiquetas que contienen un atributo ID especco.
Usar selector CSS 4

Introduzca un nombre, una etiqueta o un selector para el nuevo estilo siguiendo estas convenciones: Los nombres de estilo personalizados deben comenzar por un punto. Si no introduce el punto, lo har Dreamweaver. Para estilos de etiqueta HTML, introduzca una etiqueta HTML o elija una en el men. Para un selector CSS, introduzca criterios vlidos para selectores (por ejemplo, TD H2 o #miEstilo), o elija un selector en el men.

Haga clic en un nombre de panel en la parte izquierda del cuadro de dilogo y elija la siguiente conguracin de formato para el nuevo estilo en el panel correspondiente: Deje los atributos en blanco si no son importantes para el estilo.

Los atributos que no aparecen en la ventana de documento se marcarn con un asterisco (*) en el cuadro de dilogo Denicin de estilo. Algunos de los atributos de estilo CSS que pueden establecerse con Dreamweaver tienen una apariencia distinta en Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0, y otros no son compatibles actualmente con ningn explorador.

178

Captulo 9

Consulte los temas siguientes para obtener informacin sobre conguraciones especcas: Panel Denicin de estilo para tipo Panel Denicin de estilo para fondo Panel Denicin de estilo para bloque Panel Denicin de estilo para cuadro Panel Denicin de estilo para borde Panel Denicin de estilo para lista Panel Denicin de estilo para posicin Panel Denicin de estilo para extensiones Cuando se crea un estilo personalizado (clase), aparece en la paleta de estilos y en el men Texto > Estilo personalizado. Los estilos de etiquetas HTML y del selector CSS no aparecen en la paleta de estilos porque no se pueden aplicar. Estos estilos se reejan en la ventana de documento automticamente cada vez que aparece la etiqueta o el selector. Aplicar un estilo personalizado Los estilos personalizados (clase) son los nicos que se pueden aplicar a cualquier texto del documento, independientemente de las etiquetas que controlen dicho texto. La paleta de estilos muestra los nombres de todos los estilos CLASS disponibles. No confunda los estilos personalizados con opciones como Negrita o Variable del men Texto > Estilo. Estas opciones son atributos de formato predenidos que corresponden a etiquetas HTML especcas. Cuando se aplican dos o ms estilos al mismo texto, los estilos pueden entrar en conicto y producir resultados imprevistos. Consulte Estilos en conicto.
Para aplicar un estilo personalizado: 1 2

Elija Ventana > Estilos. Seleccione el texto al que desea aplicar un estilo. Site el cursor en un prrafo para aplicar el estilo a todo el prrafo. Para especicar la etiqueta exacta a la que se deber aplicar el estilo, seleccinela con el selector de etiquetas situado en la parte inferior izquierda de la ventana de documento. Tambin puede cambiar la seleccin de etiquetas con el men Aplicar a de la paleta de estilos. Si selecciona un rango de texto dentro de un prrafo, el estilo slo afectar al rango seleccionado.

Formatear texto

179

Haga clic en el nombre de un estilo de la paleta de estilos.

Tambin puede aplicar un estilo personalizado siguiendo este procedimiento: elija un nombre de estilo en el men Texto > Estilo personalizado o haga clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) y elija el nombre de estilo en el men Estilo personalizado del men de acceso directo. La etiqueta de la seleccin actual aparecer al lado del comando Estilo personalizado. Estilos en conflicto Cuando se aplican dos o ms estilos al mismo texto, los estilos pueden entrar en conicto y producir resultados imprevistos. Los exploradores aplican atributos de estilo de acuerdo con las reglas siguientes: Si se aplican dos estilos al mismo texto, el explorador muestra todos los atributos de ambos estilos a menos que entren en conicto atributos especcos. Por ejemplo, un estilo puede especicar azul como color de texto y el otro estilo puede especicar rojo. Si los atributos de dos estilos aplicados al mismo texto entran en conicto, el explorador mostrar el atributo del estilo ms interno (el ms prximo al texto). Si hay un conicto directo, los atributos de estilos personalizados (estilos aplicados con el atributo CLASS prevalecern sobre los atributos correspondientes a estilos de etiquetas HTML. En el ejemplo siguiente, el estilo denido para H1 podra especicar la fuente, el tamao y el color de todos los prrafos H1 pero el estilo personalizado .Blue aplicado a este prrafo prevalece sobre la conguracin de color del estilo H1. El segundo estilo 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">Salvo esta frase, controlada por el estilo .Red.</SPAN> Ahora volvemos al estilo .Blue.</SPAN></H1>

180

Captulo 9

Editar un estilo Al editar un estilo que controla texto del documento, cambiar inmediatamente el formato de todo el texto controlado por dicho estilo.
Para editar un estilo: 1

Elija Texto > Estilos personalizados > Editar hoja de estilos o haga clic en el botn Hoja de estilos de la paleta de estilos. Elija un estilo en el cuadro de dilogo Editar hoja de estilos y haga clic en Editar. Haga clic en un nombre de panel en la parte izquierda del cuadro de dilogo y elija la nueva conguracin de formato para el estilo en el panel correspondiente: Deje los atributos en blanco si no son importantes para el estilo.

Usar la paleta de estilos Utilice la paleta de estilos para aplicar estilos personalizados a la seleccin actual. La paleta de estilos slo muestra estilos personalizados (clase); los estilos de las etiquetas HTML y del selector CSS no aparecen en la paleta de estilos porque se aplican automticamente a cualquier texto controlado por la etiqueta o el selector especicados. Elija Ventana > Estilos para mostrar la paleta de estilos.
Aplicar a

Muestra la etiqueta de la seleccin actual. Si desea seleccionar otra etiqueta, eljala en el men.

Abre el cuadro de dilogo Editar estilos. Edite los estilos en el documento actual o en una hoja de estilos remota.
Hoja de estilos

Consulte tambin Aplicar formato al texto con hojas de estilo.

Nota: Haga clic con el botn derecho del ratn (Windows) o mientras mantiene pulsada la tecla Control (Macintosh) en la paleta de estilos para abrir un men de acceso directo que incluye los comandos Editar, Duplicar, Quitar y Aplicar.

Formatear texto

181

Panel Definicin de estilo para extensiones Las preferencias de formato de hoja de estilos controlan la forma en que Dreamweaver escribe el cdigo que dene los estilos. Los estilos se pueden escribir en una forma abreviada que resulta ms fcil para algunos usuarios. Algunas versiones antiguas de los exploradores no interpretan correctamente la forma abreviada. A menos que desee que Dreamweaver escriba los estilos en forma abreviada, no hay ninguna razn para cambiar las preferencias de hoja de estilos. Elija Edicin > Preferencias y haga clic en Formato de la hoja de estilos para mostrar las preferencias de formato de hoja de estilos. Consulte tambin Aplicar formato al texto con hojas de estilo.
Al crear estilos > Forma abreviada para

Determina qu atributos de estilos escribe

Dreamweaver en forma abreviada.

Al editar estilos > Usar forma abreviada Controla si Dreamweaver reescribe los estilos existentes en forma abreviada. Elija Si la utiliza el original para que Dreamweaver deje todos los estilos tal como estn. Elija Segn conguracin anterior para que Dreamweaver reescriba los estilos en forma abreviada de acuerdo con los atributos especicados en las casillas de vericacin de Forma abreviada para.

Convertir estilos CSS a formato HTML

Si ha utilizado estilos CSS para especicar opciones de formato de texto (como familia, tamao, color y decoracin de fuentes) y, posteriormente, decide que desea que las opciones se formato se puedan ver en un explorador 3.0, puede utilizar el comando Archivo > Convertir > Compatible con explorador 3.0 para convertir toda la informacin posible de estilos a etiquetas HTML.
Para convertir un archivo que utiliza estilos en un archivo compatible con exploradores 3.0: 1 2

Elija Archivo > Convertir > Compatible con explorador 3.0. En el cuadro de dilogo que aparece, elija Estilos CSS a formato HTML. Si elige la opcin Tablas a capas, 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 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.

182

Captulo 9

Nota: Es imprescindible realizar este procedimiento de compatibilidad con exploradores 3.0 cada vez que cambia el archivo original. 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 guran en la tabla siguiente se convierten a formato HTML con la opcin Hacer compatible con explorador 3.0. Los atributos que no guran en ella se eliminan. Consulte Convertir estilos CSS a formato HTML.
Atributo CSS color font-family font-size font-style: oblique font-style: italic font-weight 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 FONT COLOR FONT FACE FONT SIZE=[1-7] I I B UL TYPE=square UL TYPE=circle UL TYPE=disc UL 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

Formatear texto

183

Comprobar la ortografa
Utilice el comando Ortografa del men Texto para comprobar 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 ortogrco utiliza el diccionario de ingls de Estados Unidos. Para cambiar de diccionario, elija Edicin > Preferencias > General y seleccione otro diccionario en el men. Se pueden descargar diccionarios de otros idiomas desde el Dreamweaver Developers Center. Cuadro de dilogo Ortografa Utilice los siguientes comandos de Texto > Ortografa para comprobar la ortografa del documento actual:
Agregar a personal

Incorpora la palabra no reconocida al diccionario personal. Para borrar palabras del diccionario personal, edite el archivo Personal.dat en un editor de texto. Ignora esta aparicin de la palabra no reconocida. Ignora todas las apariciones de la palabra no reconocida.

Omitir

Omitir todas 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. Reemplaza todas las apariciones de la palabra no reconocida.

Cambiar todas

184

Captulo 9

10

CAPTULO 10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Insertar imgenes

Introduccin a la insercin de imgenes

Dreamweaver, como la mayora de los exploradores, puede mostrar imgenes JPEG y GIF. Dreamweaver, Microsoft Internet Explorer 4.0 o posteriores y Netscape Navigator 4.04 o posteriores tambin admiten imgenes PNG. En general, JPEG es el mejor formato para imgenes fotogrcas o de tonos continuos, mientras que GIF es el preferido para imgenes de tonos no continuos o con grandes reas de colores lisos. El formato PNG es un sustituto de GIF sin patente que incluye soporte para color indexado, escala de grises e imgenes en color verdadero. Tambin proporciona soporte de canal alfa para transparencias. PNG es el formato de archivo nativo de Macromedia Fireworks. Para utilizar una imagen como fondo de la pgina, especifquela como propiedad de la pgina. Consulte Denir una imagen de fondo o un color de pgina en la pgina 91. Para solapar imgenes, insrtelas en capas. Consulte Introduccin al uso de capas en la pgina 213.

185

Insertar una imagen

Para que aparezcan imgenes en un documento de Dreamweaver, los archivos correspondientes debern encontrarse en un sitio local denido. Si selecciona un archivo situado fuera del sitio local, Dreamweaver le preguntar si desea copiarlo en una carpeta del sitio local. Consulte Crear un sitio local en la pgina 108. Si especica una ruta para un archivo de origen fuera de la carpeta del sitio local, Dreamweaver mostrar un marcador de posicin para la imagen.
Para insertar una imagen: 1

Lleve a cabo una de estas operaciones: Site el cursor en el lugar de la pgina donde desea que aparezca la imagen y, a continuacin, elija Insertar > Imagen o haga clic en el botn Insertar imagen del panel Comn, en la paleta de objetos. Arrastre el botn Insertar formulario desde la paleta de objetos hasta la posicin deseada de la pgina. Arrastre una imagen desde el escritorio hasta la posicin deseada de la pgina; a continuacin siga con el paso 3.

En el cuadro de dilogo que aparece, escriba la ruta del archivo de origen o haga clic en Examinar para seleccionar un archivo. Consulte Rutas relativas y absolutas en la pgina 117 para obtener ms informacin sobre la especicacin de rutas. Para evitar que aparezca este cuadro de dilogo, desactive Mostrar dilogo al insertar objetos en las preferencias generales.
Nota: El contenido vinculado a travs de una ruta relativa a la raz no aparece cuando se realiza una vista previa de los archivos locales en un explorador, ya que ste no reconoce races de sitios, a diferencia de los servidores. Para realizar una vista de previa de contenido vinculado a rutas relativas a la raz, site el archivo en un servidor remoto y vea la pgina en un explorador. Consulte tambin Rutas relativas y absolutas en la pgina 117.

Dena las propiedades de la imagen en el inspector de propiedades. Consulte Congurar propiedades de imagen en la pgina 188.

186

Captulo 10

Crear una imagen dinmica

Una imagen dinmica es una imagen que cambia cuando el cursor pasa sobre ella. Una imagen dinmica se compone en realidad de dos imgenes: la imagen principal (la que aparece al cargarse inicialmente la pgina) y la imagen dinmica (la que aparece al pasar el cursor sobre la imagen principal). Para obtener informacin sobre cmo cambia una imagen en respuesta a distintos eventos (por ejemplo, un clic del ratn) o sobre cmo cambia una imagen distinta de aqulla sobre la est pasando el ratn, consulte Intercambiar imgenes en la pgina 284.
Para crear una imagen dinmica: 1

Site el cursor en el punto de la ventana de documento donde desea que aparezca la imagen dinmica. Lleve a cabo una de estas operaciones: Elija Ventana > Objetos para abrir la paleta de objetos y haga clic en el botn Sustitucin. Elija Insertar > Imagen de sustitucin.

En el cuadro de dilogo que aparece, introduzca la informacin siguiente: Introduzca la ruta y el nombre de archivo de la imagen original en el campo Imagen original o pulse Examinar y seleccione una imagen. Introduzca la ruta y el nombre de archivo de la imagen dinmica en el campo Imagen dinmica o acceda a una imagen y seleccinela. Para crear un vnculo, reemplace el signo # en el campo Vnculo por una ruta y un nombre de archivo o pulse Examinar y seleccione un archivo. Para hacer que Dreamweaver cargue previamente las imgenes en la cach del explorador, seleccione la opcin Carga previa de imgenes.

Haga clic en Aceptar.

Para comprobar una imagen dinmica: 1 2

Elija Archivo > Vista previa en el explorador. En el explorador, desplace el cursor sobre la imagen principal. Entonces deber verse la imagen dinmica.

Insertar imgenes

187

Configurar propiedades de imagen

Si hay una imagen seleccionada, puede elegir las propiedades siguientes en el inspector de propiedades: El inspector de propiedades muestra inicialmente las propiedades utilizadas con mayor frecuencia. Haga clic en la echa de ampliacin, situada en el ngulo inferior derecho, para ver todas las propiedades.
Imagen Permite An y Al

asignar nombre a la imagen para poder hacer referencia a ella con un lenguaje de secuencia de comandos como JavaScript o VBScript. Reservan espacio para la imagen en la pgina mientras sta se carga. Dreamweaver introduce automticamente el tamao original de la imagen. Los valores predeterminados y sin etiqueta son pxeles. Tambin puede introducir un nmero seguido de "in" para pulgadas, "pc" para picas, "pt" para puntos, "mm" para milmetros, "cm" para centmetros, o combinaciones de estas unidades, como 2in+5mm. Dreamweaver convierte los valores en pxeles en el cdigo fuente HTML. Al cambiar estos valores se produce un ajuste en el tamao de visualizacin de la imagen. Los valores cambiados aparecen en negrita. Para restablecer los valores originales, haga clic en las etiquetas de campo. Al cambiar la anchura y la altura no se reduce el tiempo de descarga, ya que el explorador descarga todos los datos de la imagen antes de modicar su tamao. Si desea reducir el tiempo de descarga y garantizar que todas las apariciones de una imagen tengan el mismo tamao, utilice una aplicacin de edicin de imgenes. Especica el archivo de origen para la imagen. Escriba la ruta o haga clic en icono de carpeta para buscar y seleccionar el archivo de origen. Consulte Rutas relativas y absolutas en la pgina 117 para obtener ms informacin sobre la introduccin de rutas.
Orig

Especica un hipervnculo para la imagen. Escriba el URL, arrastre el icono de sealizacin hasta un archivo de la ventana Sitio o haga clic en el icono de carpeta para buscar y seleccionar un documento del sitio.
Vincular Alinear Alinea una imagen y texto en la misma lnea. Consulte Alinear elementos

en la pgina 190.
Alt Especica

el texto alternativo que aparece en lugar de la imagen en los exploradores que slo admiten texto o en aqullos congurados para descargar las imgenes manualmente. Para usuarios con deciencias visuales que usan sintetizadores de voz con exploradores que slo admiten texto, el texto se expresa en voz alta. En algunos exploradores, este texto tambin aparece cuando el puntero se sita sobre la imagen.
Espacio V y Espacio H Agregan espacio, en pxeles, en la parte superior e inferior o a izquierda y derecha de la imagen, respectivamente.

188

Captulo 10

Destino

Especica el marco o la ventana donde se cargar la pgina vinculada. (Esta opcin no est disponible cuando no hay ningn vnculo en la imagen.) En la lista guran los nombres de todos los marcos del documento actual. Si el marco especicado no existe cuando se abre el documento actual en un explorador, la pgina vinculada se cargar en una ventana nueva con el nombre que usted haya especicado. Desde el momento que exista la ventana, podr enviar otros archivos a ese destino. Tambin puede seleccionar estos nombres de destino reservados:
_blank

carga el archivo vinculado en una ventana de explorador nueva y sin nombre.

carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el archivo vinculado se cargar en la ventana completa del explorador.
_parent

carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino es implcito, por lo que no suele ser necesario especicarlo.
_self

carga el archivo vinculado en la ventana completa del explorador, quitando as todos los marcos.
_top Orig base

Especica la imagen que debe cargarse antes que la imagen principal. Numerosos diseadores utilizan una versin de 2 bits (blanco y negro) de la imagen principal, ya que se carga rpidamente y ofrece a los visitantes una idea de lo que estn esperando. Sin embargo, puede utilizar cualquier imagen con las mismas dimensiones que la principal.

Establece la anchura en pxeles del borde del vnculo alrededor de la imagen. Introduzca 0 para especicar sin bordes.
Borde

Permite crear mapas de imagen de la parte del cliente. Consulte Crear mapas de imagen en la pgina 193.
Mapa Actualizar

Restablece los valores de An y Al para devolver el tamao original a la

imagen. Inicia el editor de imgenes que ha especicado en las preferencias de editores externos y abre la imagen seleccionada. Cuando guarde el archivo de imagen y vuelva a Dreamweaver, el programa actualizar la ventana de documento con la imagen editada. Consulte Usar un editor de imgenes externo en la pgina 192.
Editar

Insertar imgenes

189

Alinear elementos Las siguientes opciones de alineacin del inspector de propiedades estn asociadas con algunos elementos seleccionados, como imgenes y plug-ins.
Predeterminado por el explorador Depende del explorador, aunque suele especicar una alineacin con la lnea de base. Baseline

y Bottom Alinean la lnea de base del texto con la parte inferior del

objeto. Alinea la parte inferior absoluta del texto, incluidos los trazos bajos (como en la letra "g") con la parte inferior del objeto.
Inferior absoluta

Alinea la parte superior del carcter ms alto de la lnea de texto con la parte superior del objeto.
Superior Texto superior Alinea

el carcter ms alto de la lnea de texto con la parte superior

del objeto.
Medio

Alinea la lnea de base del texto con el medio del objeto. Alinea el medio del objeto con el medio del texto.

Medio absoluta Izquierda

Sita el objeto en el margen izquierdo, ajustando a la derecha el texto que est a su alrededor. Si el texto alineado a la izquierda est en la lnea delante del objeto, suele pasar a otra lnea los objetos alineados a la izquierda. Todo el texto de la lnea situado detrs del objeto pasar a la lnea anterior, apareciendo por encima del objeto.
Derecha Sita el objeto en el margen derecho, ajustando a la izquierda el texto que

est a su alrededor. Si el texto alineado a la derecha est en la lnea delante del objeto, suele pasar a otra lnea los objetos alineados a la derecha. Todo el texto de la lnea situado detrs del objeto pasar a la lnea anterior, apareciendo por encima del objeto. Cambiar el tamao de imgenes y otros elementos Puede cambiar visualmente el tamao de elementos como imgenes, plug-ins, pelculas Shockwave o Flash, applets y controles de ActiveX en la ventana de documento de Dreamweaver. El cambio visual de tamao ayuda a determinar cmo afecta al diseo un elemento con distintas dimensiones. Al cambiar de tamao se restablecen los atributos WIDTH y HEIGHT del elemento. El tamao de archivo del elemento no cambia. Las pelculas Flash y otros elementos basados en vectores son totalmente escalables y no pierden calidad al cambiar de tamao.

190

Captulo 10

Los elementos de mapas de bits como las imgenes GIF, JPEG y PNG pueden quedar distorsionados al reajustar sus atributos WIDTH y HEIGHT Se recomienda cambiar visualmente el tamao de estos elementos en Dreamweaver nicamente para comprobar distintas posibilidades de diseo. Una vez determinado el tamao ideal 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 que tarda en descargarse.
Para cambiar el tamao de un elemento: 1

Seleccione el elemento (por ejemplo, una imagen o una pelcula Shockwave) en la ventana de documento. Cambie el tamao de los manejadores que aparecen en los lados inferior y derecho del elemento y en la esquina inferior derecha. Si no aparecen manejadores de redimensionamiento, se seleccionarn otros elementos adems del que desea ajustar. Haga clic fuera de elemento y vuelva a seleccionarlo o utilice el selector de etiquetas en la parte inferior de la ventana de documento para realizar la seleccin.

Cambie el tamao del elemento: Arrastre el manejador de seleccin del lado derecho para ajustar la anchura del elemento. Arrastre el manejador de seleccin de la parte inferior para ajustar la altura del elemento. Arrastre el manejador de seleccin de la esquina para ajustar al mismo tiempo la anchura y la altura del elemento. Arrastre el manejador de seleccin de la esquina mientras pulsa la tecla Mays para conservar la relacin de aspecto (su relacin anchura/altura) al ajustar sus dimensiones.

Se puede cambiar visualmente el tamao de los elementos hasta un mnimo de 6 por 6 pxeles. Para ajustar la anchura y la altura de un elemento hasta un tamao menor (por ejemplo, 1 por 1 pxel), utilice el inspector de propiedades. Para restablecer las dimensiones originales de un elemento al que ha cambiado de tamao, haga clic en las etiquetas An y Al del inspector de propiedades.

Insertar imgenes

191

Usar un editor de imgenes externo

Puede abrir en un editor de imgenes externo una imagen seleccionada en Dreamweaver. Al volver a Dreamweaver despus de guardar el archivo de imagen, los cambios realizados en la imagen sern visibles en la ventana de documento.
Para seleccionar un editor de imgenes externo: 1 2 3

Elija Edicin > Preferencias. Seleccione Editores externos en la lista Categora de la izquierda. Haga clic en Examinar, al lado del cuadro Imgenes, y seleccione un editor de imgenes. Si elige Macromedia Fireworks como editor de imgenes externo y lo inicia desde Dreamweaver, Fireworks buscar automticamente en la carpeta que contiene el archivo seleccionado un archivo PNG con el mismo nombre. Por ejemplo, si selecciona una imagen cuyo archivo de origen es imgenes/ miFoto.gif e imgenes/ tambin contiene un archivo llamado miFoto.png, Fireworks abrir el archivo PNG. Como formato de archivo nativo de Fireworks, PNG conserva toda la informacin original de capas, vectores, colores y efectos, y todos los elementos se pueden editar completamente en cualquier momento. Los archivos se deben guardar con la extensin .png para que Dreamweaver pueda reconocerlos como tales. Si elige otra aplicacin de edicin de imgenes como editor externo y la inicia desde Dreamweaver, la aplicacin abrir la imagen seleccionada (por ejemplo, imgenes/miFoto.gif ). Si lo preere, puede abrir manualmente el archivo original desde el que se gener el GIF (por ejemplo, miFoto.psd podra ser el archivo original de Photoshop), realizar los cambios y volver a generar la imagen GIF. Dreamweaver actualizar la imagen en la ventana de documento cuando vuelva al programa.

Para iniciar el editor de imgenes externo, lleve a cabo una de estas operaciones:

Mantenga pulsada la tecla Control (Windows) o Comando (Macintosh) y haga doble clic en la imagen que desea editar. Haga clic con el botn derecho del ratn (Windows) o mientras pulsa la tecla Control (Macintosh) en la imagen que desea editar y elija Editar imagen en el men de acceso directo. Seleccione la imagen que desea editar y haga clic en Editar imagen en el inspector de propiedades.

192

Captulo 10

Crear mapas de imagen

Un mapa de imagen es una imagen con distintos hipervnculos asignados a regiones denidas de la imagen. Utilice el Editor de mapas de imgenes para crear y editar grcamente mapas de imagen de la parte del cliente. Los mapas de imagen de la parte del cliente almacenan la informacin de hipervnculo en el documento HTML, no en un archivo de mapa separado, como hacen los mapas de imagen de la parte del servidor. Cuando el usuario hace clic en una zona activa de la imagen, el URL asociado se enva directamente al servidor. Esto hace que los mapas de imagen de la parte del cliente sean ms rpidos que los mapas de la parte del servidor, pues el servidor no necesita interpretar dnde ha hecho clic el usuario. Los mapas de imagen de la parte del cliente son compatibles con Netscape Navigator 2.0 o posterior, NCSA Mosaic 2.1 y 3.0 y todas las versiones de Microsoft Internet Explorer. Dreamweaver no modica las referencias a mapas de imagen de la parte del servidor en documentos existentes. Puede utilizar mapas de imagen de la parte del cliente y del servidor en el mismo documento. Los exploradores que admiten ambos tipos de mapas de imagen dan prioridad a los mapas de imagen de la parte del cliente. Para incluir un mapa de imagen de la parte del servidor en un documento, deber escribir el cdigo HTML correspondiente.
Para crear un mapa de imagen: 1

Seleccione la imagen y haga clic en el botn Mapa del inspector de propiedades. Quiz necesite hacer clic en la echa de ampliacin situada en la esquina inferior derecha del inspector de propiedades para ver el botn Mapa.

Escriba el nombre del mapa en el cuadro Mapa. Este nombre aparecer como atributo NAME de la etiqueta MAP y como atributo USEMAP de la etiqueta IMG .

Seleccione la herramienta de crculo o cuadrado y arrstrela sobre la imagen para crear una zona activa con forma de crculo o rectngulo, o seleccione la herramienta de polgono y dena una zona activa con forma irregular haciendo un clic en cada esquina y dos clics para cerrar la forma. Escriba el URL de la zona activa en el cuadro Vincular o haga clic en el icono de carpeta para buscar y seleccionar un archivo. Para hacer que el documento vinculado aparezca en un lugar que no sea la ventana o el marco actuales, introduzca un nombre de ventana en el cuadro Destino y elija un nombre de marco en el men. Consulte Crear vnculos en la pgina 109.

Insertar imgenes

193

En el cuadro Alt, escriba texto alternativo que se mostrar en la zona activa en los exploradores de slo texto. Algunos exploradores muestran este texto como una sugerencia cuando el usuario detiene el ratn sobre la zona activa.

Repita los pasos 3 a 6 hasta denir todas las zonas activas. Entonces, haga clic en Aceptar.

194

Captulo 10

11

CAPTULO 11
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Crear tablas

Introduccin a las tablas

Las tablas resultan muy tiles para presentar datos. Tambin sirven para controlar en qu parte de la pgina aparecen el texto y los grcos. Una vez creada una tabla, se le puede agregar contenido, modicar sus propiedades de celda y la, y copiar y pegar mltiples celdas. Tambin se pueden realizar conversiones entre tablas y capas. Tanto las tablas como las capas permiten controlar la ubicacin de los elementos de la pgina, pero las capas no son compatibles con los exploradores 3.0 y anteriores. Si el proceso de diseo requiere una rpida reubicacin del contenido, puede utilizar capas para llevar a cabo esta tarea y, a continuacin, convertirlas en tablas para que se vean en exploradores ms antiguos. Consulte Usar capas para disear tablas en la pgina 226.

195

Crear tablas
Utilice la paleta de objetos o el men Insertar para crear una tabla.
Para insertar una tabla: 1

Lleve a cabo una de estas operaciones: Site el cursor en el lugar de la pgina donde desea que aparezca la tabla y haga clic en el botn Tabla del panel Comn, en la paleta de objetos, o elija Insertar > Tabla. Arrastre el botn Tabla desde la paleta de objetos hasta la posicin deseada de la pgina.

En el cuadro de dilogo que aparece, introduzca la informacin siguiente:

Filas y Columnas Especican el nmero de las y columnas que tendr la tabla. Relleno celda Especica la cantidad de espacio que habr entre el contenido de

la celda y el lmite de la misma.

Espacio celda Especica la cantidad de espacio que habr entre cada celda de la

tabla, sin incluir el borde.

Ancho Especica la anchura de la tabla en pxeles o como porcentaje de la ventana del explorador. Es conveniente especicar las tablas en pxeles para conseguir un diseo preciso del texto y las imgenes, mientras que el uso de porcentajes resulta adecuado cuando las proporciones de las columnas son ms importantes que su anchura. Borde

Especica la anchura del borde de la tabla.

Nota: Si desea insertar una tabla sin especicar previamente estas opciones, desactive la opcin Mostrar dilogo al insertar objetos en las preferencias generales. Consulte Congurar preferencias generales en la pgina 76.

196

Captulo 11

Anidar tablas Una tabla anidada es una tabla que se ha insertado en la celda de una tabla. Puede congurar una tabla anidada como si se tratara de cualquier otra tabla. Sin embargo, su anchura estar limitada por la anchura de la celda en la que aparece.
Para anidar una tabla en la celda de una tabla: 1

Lleve a cabo una de estas operaciones: Haga clic en la celda donde desea que aparezca la segunda tabla y elija Insertar > Tabla. Haga clic en la celda donde desea que aparezca la segunda tabla y, a continuacin, haga clic en el botn Tabla del panel Comn, en la paleta de objetos. Arrastre el botn Tabla del panel Comn, en la paleta de objetos, hasta la celda donde desea que aparezca la segunda tabla.

En el cuadro de dilogo que aparece, especique las propiedades de la tabla y haga clic en Aceptar.

Rellenar de contenido una tabla Puede escribir texto directamente en las celdas de la tabla o pegarlo. Las propiedades de un grco en una tabla se establecen como las de cualquier otro grco. Consulte Congurar propiedades de imagen en la pgina 188.
Para agregar texto a una tabla: 1

Haga clic en cualquier celda y lleve a cabo una de estas operaciones: Comience a escribir para introducir texto en la tabla. Las celdas de la tabla aumentarn de tamao a medida que escriba. Pegue el texto copiado desde Dreamweaver u otra aplicacin de edicin de texto. Utilice el comando Pegar como texto para conservar los prrafos Agregar texto e insertar objetos en la pgina 86.

Pulse la tecla Tab para pasar a la celda siguiente o pulse Mays-Tab para volver a la celda anterior. Si pulsa la tecla Tab en la ltima celda de una tabla se agregar otra la de manera automtica. Tambin puede usar las teclas de echa para moverse entre las celdas.

Crear tablas

197

Para agregar un grfico a una tabla: 1 2

Haga clic en la celda donde desea que aparezca el grco. Haga clic en el botn Insertar imagen del panel Comn, en la paleta de objetos, o elija Insertar > Imagen. En el cuadro de dilogo que aparece, seleccione un archivo de imagen.

Seleccionar elementos de tabla Con un solo movimiento puede seleccionar toda la tabla, una la, una columna o un rango contiguo de celdas dentro de la tabla. Una vez seleccionadas la tabla o las celdas, pude llevar a cabo lo siguiente: Modicar la apariencia de las celdas seleccionadas o del texto que contienen. Consulte Aplicar formato a tablas en la pgina 199. Copiar y pegar regiones de celdas contiguas. Consulte Copiar y pegar celdas en la pgina 210. Tambin puede seleccionar mltiples celdas discontiguas de una tabla y modicar las propiedades de dichas celdas. No se pueden copiar ni pegar selecciones de celdas discontiguas.
Para seleccionar toda la tabla, lleve a cabo una de estas operaciones:

Haga clic en la esquina izquierda de la tabla o en cualquier punto del borde derecho o inferior. Haga clic una vez en la tabla y elija Modicar > Tabla > Seleccionar tabla. Haga clic una vez en la tabla y elija Editar > Seleccionar todo. Site el cursor en cualquier lugar dentro de la tabla y seleccione la etiqueta <table> en la esquina inferior izquierda de la ventana de documento. Aparecern manejadores de seleccin alrededor de la tabla cuando sta est seleccionada.

198

Captulo 11

Para seleccionar filas o columnas, lleve a cabo una de estas operaciones:

Site el cursor en el margen izquierdo de una la o en la parte superior de una columna. Haga clic cuando aparezca la echa de seleccin.

Haga clic en una celda o arrastre en horizontal o en vertical para seleccionar varias las o columnas.
Para seleccionar una o varias celdas, lleve a cabo una de estas operaciones:

Haga clic en una celda y arrastre en horizontal o en vertical hasta otra celda. Haga clic en una celda y, a continuacin, pulse la tecla Mays y haga clic en otra celda. Todas las celdas de la regin rectangular quedarn seleccionadas.

Para seleccionar varias celdas discontiguas, lleve a cabo una de estas operaciones:

Pulse la tecla Control (Windows) o Comando (Macintosh) y haga clic en la tabla para agregar celdas, las o columnas a la seleccin. Seleccione varias celdas de la tabla y, a continuacin, pulse la tecla Control (Windows) o Comando (Macintosh) y haga clic en las celdas, las o columnas para desactivar la seleccin de celdas individuales.

Aplicar formato a tablas

Puede cambiar la apariencia de una tabla congurando las propiedades de la tabla y de sus celdas o aplicndole un diseo predenido. Consulte Congurar propiedades de tablas en la pgina 200, Congurar propiedades de las y celdas en la pgina 202y Aplicar formato a una tabla con un diseo predenido en la pgina 204. Para formatear el texto de la tabla, puede aplicar un formato al texto seleccionado o utilizar estilos. Consulte Introduccin a las opciones de formato de texto en la pgina 167.

Crear tablas

199

Etiquetas de tablas A la hora de dar formato a tablas en la ventana de documento, puede denir propiedades que se apliquen a toda la tabla o a las, columnas o celdas seleccionadas de la tabla. Cuando una propiedad, como color de fondo o alineacin, se dene de una forma para toda la tabla y de otra para celdas individuales de la misma, resulta til comprender cmo se interpreta el cdigo HTML. Cuando se dene la misma propiedad varias veces en una tabla, se interpreta de esta forma: El formato de celdas, que forma parte de la etiqueta TD tiene prioridad sobre el formato de las (etiqueta TR), que a su vez tiene prioridad sobre el formato de tablas (etiqueta TABLE). Por tanto, si especica 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 la etiqueta TD tiene prioridad sobre la etiqueta TABLE . En el ejemplo siguiente, la etiqueta TABLE establece un color de fondo amarillo (#FFFF99) para toda la tabla. La primera etiqueta TR cambiar esas celdas a verde (#33FF66), y la segunda etiqueta TD cambiar la celda superior central a azul (#333399). Las etiquetas TR y TD de la la inferior no han cambiado, por lo que esas celdas adoptan el color de la tabla, que es amarillo.
<TABLE BORDER="1" WIDTH="75%" BGCOLOR="#FFFF99"> <TR BGCOLOR="#33FF66"> <TD>&nbsp;</TD> <TD BGCOLOR="#333399">&nbsp;</TD> <TD>&nbsp;</TD> </TR> <TR> <TD>&nbsp;</TD> <TD>&nbsp;</TD> <TD>&nbsp;</TD> </TR> </TABLE>

Configurar propiedades de tablas El inspector de propiedades muestra las propiedades de tabla cuando hay una tabla seleccionada. Tambin puede utilizar el comando Formatear tabla para aplicar rpidamente un diseo predenido a la tabla seleccionada. Consulte Aplicar formato a una tabla con un diseo predenido en la pgina 204.

200

Captulo 11

Para especificar propiedades de tabla: 1 2

Seleccione la tabla. Elija Ventana > Propiedades para abrir el inspector de propiedades. Haga clic en la echa de ampliacin, situada en la esquina inferior derecha, para ver todas las propiedades. Para asignar un nombre a la tabla, escrbalo en el campo Nombre de la tabla. Dispone de las siguientes opciones de diseo de tabla:
Filas

3 4

y Cols Establecen el nmero de las y columnas que tendr la tabla.

An y Al

Establecen la anchura y la altura de la tabla, especicadas como porcentaje de la ventana del explorador o como valor absoluto en pxeles. No se suele denir la altura de una tabla. Alinea la tabla a la izquierda (opcin predeterminada), la derecha o el centro del explorador en las versiones 4.0 y posteriores. Para centrar una tabla para exploradores 3.0, seleccione la tabla y elija Texto > Alineacin > Centro.
Alinear Espacio V y Espacio H Especican la cantidad de espacio (en pxeles) que se deja en la parte superior e inferior o a izquierda y derecha de la tabla, respectivamente.

y Borrar ancho de columna Estos botones borran todos los valores de altura de la y anchura de columna de la tabla, respectivamente.
Borrar alto de fila Convertir ancho de tabla a pxeles Este botn convierte la anchura de la tabla expresada en forma de porcentaje de la ventana del explorador a su anchura actual expresada en pxeles. Haga clic en Convertir ancho de tabla a porcentaje para convertir la anchura actual en pxeles a un porcentaje de la ventana del explorador. 5

Dispone de las siguientes opciones de diseo de celda:

Esp. celda Rell. celda

Establece la cantidad de espacio entre las celdas de una tabla.

Establece la cantidad de espacio entre el contenido de una celda y sus bordes. Cuando no se asignan valores especcos de espaciado y relleno de celda, Netscape Navigator, Microsoft Internet Explorer y Dreamweaver muestran la tabla como si el espaciado de celda fuera 2 y el relleno de celda fuera 1.

Crear tablas

201

Establezca estas opciones para dar formato a los bordes: Establece, en pxeles, la anchura del borde alrededor de la tabla. La mayora de los exploradores muestran el borde como una lnea tridimensional. Si utiliza la tabla para el diseo de la pgina, especique un valor de borde de 0. Para ver los lmites de celda y tabla cuando el borde est denido como 0, elija Ver > Bordes de tabla.
Borde Borde claro y Borde oscuro Establecen los colores de borde que tienen un efecto de resalto y sombra, respectivamente, para dar apariencia tridimensional al borde. (Para restablecer las sombras grises predeterminadas, elimine los valores de color y deje los cuadros en blanco.) Borde

Establece el color de borde para toda la tabla.

Utilice las opciones Fnd para establecer la imagen de fondo o el color de fondo de la tabla.

Configurar propiedades de filas y celdas Seleccione cualquier combinacin de celdas y, a continuacin, utilice el inspector de propiedades para cambiar la apariencia de celdas, las o columnas individuales. Para seleccionar celdas, las y columnas, consulte Seleccionar elementos de tabla en la pgina 198. Para aplicar formato a toda la tabla, consulte Congurar propiedades de tablas en la pgina 200.
Para aplicar formato a una fila, una columna o una celda: 1 2

Seleccione cualquier combinacin de celdas de la tabla. Elija Ventana > Propiedades para abrir el inspector de propiedades y haga clic en la echa de ampliacin que se encuentra en la esquina inferior derecha para ver todas las propiedades

202

Captulo 11

Dispone de las siguientes opciones de apariencia:

Horiz Establece la alineacin horizontal del contenido de la celda segn la conguracin predeterminada del explorador (generalmente, izquierda para celdas normales y centro para celdas de encabezado) o a la izquierda, derecha o centro.

Establece la alineacin vertical del contenido de la celda segn la conguracin predeterminada del explorador (generalmente, medio) o como superior, medio, inferior o lnea de base.
Vert An y Al Establecen, en pxeles, la anchura y la altura de las celdas seleccionadas.

Para usar porcentajes, introduzca el smbolo de porcentaje (%) tras el valor.

Fnd (superior)

Establece la imagen de fondo para las celdas.

Fnd (inferior) Establece el color de fondo para las celdas. El color de fondo slo aparece dentro de las celdas, es decir, no pasa al espaciado de celda ni a los bordes de tabla. Esto supone que si el espaciado y el relleno de celdas no se denen como 0, habr huecos entre las reas coloreadas aunque el borde se dena como 0. Borde 4

Establece el color de borde para las celdas.

Dispone de las siguientes opciones de diseo:

Combinar y Dividir Combinan o dividen celdas. Consulte Dividir y combinar

celdas en la pgina 208.

No aj. Impide el ajuste de texto, por lo que se ampla la anchura de las celdas para dar cabida a todos los datos. Generalmente las celdas se amplan en horizontal para dar cabida a la palabra ms larga y, a continuacin, se amplan en vertical. Encab Aplica a la celda el formato de encabezado de tabla. El contenido de las celdas de encabezado de la tabla (TH) aparece en negrita y centrado de forma predeterminada.

Crear tablas

203

Aplicar formato a una tabla con un diseo predefinido Utilice el comando Formatear tabla para aplicar rpidamente un diseo predenido a una tabla y, seguidamente, seleccionar opciones para personalizar el diseo.
Para utilizar un diseo predefinido: 1 2

Seleccione la tabla y elija Comandos > Formatear tabla. En el cuadro de dilogo que aparece, elija un esquema de diseo en la lista de la izquierda. La tabla se actualizar para presentar una muestra del diseo. Para personalizar el diseo, realice cambios en las opciones Colores de las las, Primer la y Col. izquierda. Para modicar la anchura del borde, introduzca un valor en el cuadro Borde. Introduzca 0 para especicar sin bordes. Para aplicar el diseo a las celdas de la tabla (etiquetas TD) en lugar de a las las (etiquetas TR), seleccione la opcin Aplicar todos los atributos a etiquetas TD en lugar de a etiquetas TR. El formato aplicado a las celdas de la tabla tendr prioridad sobre el formato aplicado a las las. Sin embargo, el formato aplicado a las las producir un cdigo fuente HTML ms limpio y conciso. Consulte Aplicar formato a tablas en la pgina 199.

Haga clic en Aplicar o en Aceptar para dar formato a la tabla con el diseo seleccionado.

204

Captulo 11

Ordenar tablas
Puede ordenar una tabla de una manera sencilla de acuerdo con el contenido de una columna. Tambin puede realizar una operacin ms compleja ordenndola de acuerdo con el contenido de dos columnas. No se pueden ordenar tablas que contengan atributos COLSPAN o ROWSPAN es decir, tablas con celdas combinadas.
Para ordenar una tabla: 1 2

Seleccione la tabla y elija Comandos > Ordenar tabla. En el cuadro de dilogo que aparece dispone de las siguientes opciones: Seleccione la columna que desea ordenar en la opcin Ordenar por. Seleccione si desea ordenar la columna alfabticamente o numricamente en la opcin Orden. Esta opcin resulta importante cuando el contenido de una columna es numrico. Una clasicacin alfanumrica aplicada a una lista de nmeros de uno y dos dgitos generar un orden alfanumrico (como 1, 10, 2, 20, 3, 30) en lugar de un orden estrictamente numrico (como 1, 2, 3, 10, 20, 30). Seleccione Orden ascendente (de la A a la Z o de bajo a alto) u Orden descendente como orden de clasicacin.

Para realizar una clasicacin secundaria en otra columna, especique las opciones de orden en Despus por. Active la opcin El orden incluye la primera la para incluir la primera la en el orden. Si la primera la contiene un encabezado que no se debe mover, deje esta opcin desactivada. Haga clic en Aplicar o en Aceptar para ordenar la tabla.

Crear tablas

205

Cambiar el tamao de tablas y celdas

Puede cambiar el tamao de una tabla completa o de las y columnas individuales. Al cambiar el tamao de toda la tabla, todas sus celdas cambiarn proporcionalmente.
Para cambiar el tamao de la tabla: 1 2

Seleccione la tabla. Arrastre uno de los manejadores de seleccin para cambiar el tamao de la tabla en esa dimensin. Al arrastrar el manejador de la esquina se cambian ambas dimensiones.

Para cambiar el tamao de una fila o una columna, lleve a cabo una de estas operaciones:

Para cambiar la altura de la la, arrastre el borde inferior de la la. Para cambiar la anchura de la columna, arrastre el borde derecho de la columna. Cambiar la anchura de una columna El inspector de propiedades permite especicar la anchura de una columna de tres formas distintas.
Para establecer la anchura de la columna: 1 2 3

Haga clic en una de las celdas de la columna o seleccione la columna. Elija Ventana > Propiedades para abrir el inspector de propiedades. En el campo An, lleve a cabo una de estas operaciones: Introduzca un nmero para establecer la anchura de la columna de acuerdo con el valor especicado en pxeles. Introduzca un nmero seguido de un smbolo de porcentaje (%) para establecer la columna como porcentaje de la anchura de la tabla. (El men de pxeles y porcentajes no aparece para celdas, las ni columnas, slo para tablas completas.) Deje el campo en blanco (predeterminado) para permitir que el explorador y Dreamweaver determinen la anchura adecuada de acuerdo con el contenido de la celda y la anchura de las otras columnas. Generalmente se asigna espacio de acuerdo con la lnea ms larga o la imagen ms ancha. Por esta razn algunas veces una columna resulta mucho ms grande que otras de la tabla cuando se le agrega contenido.

206

Captulo 11

Borrar la anchura de una columna y la altura de una fila La forma ms sencilla de establecer la anchura de una columna y la altura de una la consiste en arrastrar los bordes de la tabla. Al arrastrar el borde de una columna o una la se establecen automticamente valores especcos para todas las columnas o las, en pxeles o como porcentaje de las dimensiones actuales de la tabla, segn cmo se haya especicado la anchura de la tabla. Si no consigue el resultado deseado arrastrando los bordes de la tabla, puede borrar la anchura de la columna y volver a empezar.
Para cambiar la anchura y la altura, lleve a cabo una de estas operaciones:

Seleccione la tabla, elija Modicar > Tabla, y seleccione Borrar alto de celda o Borrar ancho de celda. Elija Ventana > HTML y cambie la anchura y la altura directamente en el inspector de HTML. En el inspector de propiedades, introduzca los valores especcos de anchura y altura en los cuadros An y Al.

Agregar y eliminar filas y columnas

Utilice los comandos del men Modicar > Tabla o del men de acceso directo para agregar y eliminar las y columnas de una tabla.
Para agregar filas o columnas: 1 2

Haga clic en una celda donde desea que aparezca la nueva la o columna. Lleve a cabo una de estas operaciones: Para agregar una la, elija Modicar > Tabla > Insertar la o elija Tabla > Insertar la en el men de acceso directo. Para agregar una columna, elija Modicar > Tabla > Insertar columna o elija Tabla > Insertar columna en el men de acceso directo. Para agregar las y columnas, elija Modicar > Tabla > Insertar las o columnas, o elija Tabla > Insertar las o columnas en el men de acceso directo. En el cuadro de dilogo que aparece, introduzca el nmero de las o columnas que desea agregar. Especique si las nuevas las o columnas debern aparecer antes o despus de la la o la columna seleccionadas. Haga clic en Aceptar.

Crear tablas

207

Para eliminar una fila o una columna: 1 2

Haga clic en una celda de la la o la columna que desea eliminar. Elija una de las siguientes opciones: Para eliminar una la, elija Modicar > Tabla > Eliminar la o elija Tabla > Eliminar la en el men de acceso directo. Para eliminar una columna, elija Modicar > Tabla > Eliminar columna o elija Tabla > Eliminar columna en el men de acceso directo.

Para agregar o eliminar filas o columnas desde la parte inferior y derecha de una tabla: 1

Seleccione toda la tabla. (Haga clic en la esquina superior izquierda de la tabla, haga clic en la tabla y elija Modicar > Tabla > Seleccionar tabla.) En el inspector de propiedades: Aumente el valor de la o columna para agregar las. Reduzca el valor de la o columna para eliminar las. Dreamweaver agrega o elimina las desde la parte inferior de la tabla y agrega y elimina columnas a la derecha. Dreamweaver no advierte si las las o las columnas que desea eliminar contienen datos.

Dividir y combinar celdas Utilice el inspector de propiedades o los comandos del men Modicar > Tabla para dividir o combinar celdas. Puede combinar cualquier nmero de celdas adyacentes -siempre que la seleccin tenga forma rectangular- para obtener una sola celda que se extienda por varias columnas o las. Puede dividir una celda en varias las o columnas, independientemente de si anteriormente se haba combinado. Dreamweaver reestructura automticamente la tabla (agrega los correspondientes cdigos COLSPAN o ROWSPAN para crear la disposicin especicada. En la ilustracin siguiente, las celdas en la mitad de las dos primeras columnas se han combinado para ocupar dos las.

208

Captulo 11

Para combinar dos o ms celdas en una tabla: 1

Seleccione las celdas que desea combinar. Las celdas seleccionadas debern ser contiguas y tener forma rectangular.

Esta seleccin de tabla no tiene forma rectangular, por lo que las celdas no se pueden combinar.

Esta seleccin tiene forma rectangular, por lo que las celdas se pueden combinar.
2

Elija Modicar > 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 combinada: 1 2

Haga clic en la celda o seleccione una celda. Elija Modicar > Tabla > Dividir celdas o haga clic en el botn Dividir celdas del inspector de propiedades. En el cuadro de dilogo Dividir celda, elija si desea dividir la celda en las o en columnas y, a continuacin, introduzca el nmero de las o columnas.

Crear tablas

209

Copiar y pegar celdas

Puede copiar y pegar al mismo tiempo varias celdas de una tabla, conservando el formato de las mismas. Tambin puede copiar y pegar nicamente el contenido de la celda. Las celdas se pueden pegar en un 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.
Para cortar o copiar celdas en una tabla: 1

Seleccione una o ms celdas de la tabla. Para cortar o copiar celdas, la seleccin debe tener forma rectangular. Consulte Seleccionar elementos de tabla en la pgina 198.

Seleccin incorrecta: Esta celdas no se pueden cortar ni copiar.

Seleccin correcta: Esta celdas se pueden cortar o copiar.

2

Corte o copie las celdas utilizando los comandos del men Edicin. Si selecciona toda una la o columna y elige Edicin > Cortar, la la o la columna desaparecern de la tabla.

210

Captulo 11

Para pegar celdas de tabla: 1

Elija dnde desea pegar las celdas. Para agregar celdas a la tabla delante o por encima de la celda actual, haga clic en una de las celdas de la tabla. Para crear una nueva tabla con las celdas, site el cursor fuera de la tabla.

Elija Edicin > Pegar. Si pega las o columnas completas, stas se agregarn a la tabla. Si pega una celda individual, se reemplazar el contenido de la celda seleccionada, siempre que el contenido del Portapapeles sea compatible con dicha celda. Si pega fuera de una tabla, las las, columnas o celdas se utilizarn para denir una tabla nueva.

Para eliminar el contenido y dejar las celdas intactas: 1 2

Seleccione una o ms celdas. Elija Edicin > Copiar slo texto.

Nota: Si selecciona todas las celdas de una la o una columna, la la o la celda y su contenido se eliminarn de la tabla. Para copiar y pegar el contenido de celdas: 1

Seleccione el texto y elija Edicin > Copiar slo texto. Slo se copiar en el Portapapeles el texto de las celdas seleccionadas. Haga clic en una celda o en otro lugar de la ventana de documento y elija Edicin > Pegar como texto. No se puede volver a pegar la seleccin en una seleccin de varias celdas.

Crear tablas

211

212

Captulo 11

12

CAPTULO 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Usar capas

Introduccin al uso de capas

Las capas sirven para situar elementos en ubicaciones exactas de la ventana del explorador. Las capas pueden contener texto, imgenes, plug-ins e incluso otras capas. Una capa puede contener cualquier cosa que se pueda colocar en el cuerpo de un documento HTML. Las capas resultan especialmente tiles para hacer que se solapen partes de la pgina. Puede mostrar u ocultar capas con comportamientos para crear pginas de descarga rpida que cambien sin cargar contenido adicional procedente de archivos de origen. Puede hacer que las capas se muevan o cambien con el tiempo de acuerdo con la lnea de tiempo. Capas Hay dos formatos de capa para situar contenido en una pgina: capas CSS y capas Netscape. Las capas CSS (tambin denominadas elementos CSS-P) sitan el contenido en una pgina mediante las etiquetas DIV y SPAN. Las propiedades de las capas CSS se denen en el documento del World Wide Web Consortium sobre Colocacin de elementos HTML con hojas de estilos en cascada. Las capas Netscape sitan el contenido en la pgina utilizando las etiquetas LAYER e ILAYER . de Netscape. Las propiedades de las capas Netscape estn denidas por el formato de capas propio de Netscape. Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0 admiten las capas creadas utilizando las etiquetas DIV y SPAN . Slo Navigator admite las capas creadas con las etiquetas LAYER y ILAYER . Las versiones anteriores de ambos exploradores muestran el contenido de la capa, pero no lo colocan.

213

En Dreamweaver, el trmino capa hace referencia a cualquier elemento que puede situarse en coordenadas exactas de la pgina. Las propiedades de colocacin son: izquierda y superior (coordenadas x e y, respectivamente), ndice z (tambin denominado orden de apilamiento) y visibilidad. Los elementos colocados se pueden denir las etiquetas DIV, SPAN, LAYER y ILAYER en Dreamweaver. Consulte Congurar preferencias de capa en la pgina 216.

Crear capas
Cree capas mediante tcnicas de insercin, arrastrar y soltar o dibujo. Una vez creada una capa, use la paleta de Capas para seleccionarla, andela dentro de otra capa, o cambie su orden de apilamiento. Consulte Usar la paleta de capas en la pgina 220. Las propiedades predeterminadas de la capa (etiqueta, visibilidad, alto y ancho, etctera) se especican en las preferencias de la Capa. Para cambiar la conguracin predeterminada, elija Edicin > Preferencias y seleccione Capas. Consulte Congurar preferencias de capa en la pgina 216. De forma predeterminada, Dreamweaver crea capas con la etiqueta DIV e inserta cdigo de capa en la posicin del cursor, o cuando se estn dibujando capas, en la parte superior de la pgina, BODY . Si se crea una capa anidada, Dreamweaver inserta el cdigo dentro de la etiqueta que dene la capa padre. Al crear capas, para evitar el solapamiento de unas capas con otras, active la opcin Evitar solapamiento en la paleta de capas o elija Ver > Evitar solapamiento de capas. Consulte Evitar solapamiento de capas en la pgina 227.
Para crear una capa, lleve a cabo una de estas operaciones:

Para insertar una capa, coloque el cursor en la ventana de documento en el que desea colocar la capa y luego elija Insertar > Capa. Para arrastrar y soltar una capa, haga clic en el botn Capa en la paleta de objetos y arrastre la capa a la ventana de documento. La capa quedar situada en el lugar en el que se suelte el botn del ratn. Para dibujar una capa, haga clic en el botn Capa de la paleta de objetos, suelte el botn del ratn, y use el cursor para dibujar una capa en la ventana de documento. En la ventana de documento, aparecer una marca de capa en la parte superior izquierda de la pgina. Si no se ve la marca de capa, elija Ver > Elementos invisibles. Consulte Preferencias de elementos invisibles en la pgina 89. En la paleta de capas, el nombre de la capa se mostrar en la columna Nombre. Al ir creando nuevas capas, stas se mostrarn en forma de lista apilada; la ltima capa que se haya creado aparecer en la primera posicin de la lista. Consulte Cambiar el orden de apilamiento de las capas en la pgina 225.

214

Captulo 12

Anidar capas Una capa anidada es aquella que se ha creado dentro de otra capa. Use la paleta de capas o la tcnica de insercin, arrastrar y soltar o dibujar, para crear capas anidadas. Anidar le permite agrupar capas. Una capa anidada se mueve con su capa padre, de la que hereda su visibilidad. Las capas de Netscape creadas con las etiquetas LAYER y ILAYER se expanden para incluir el ancho y el alto de su capa hija. A continuacin, se incluye un ejemplo de cdigo HTML de una capa anidada:
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;"> Contenido situado en el interior de la capa padre. <div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;"> Contenido situado en el interior de la capa anidada. </div> </div>

Al dibujar capas, use Preferencias de capa para que una capa que se ha creado dentro de otra sea una capa anidada. Elija Edicin > Preferencias, seleccione Capas, y haga clic en la casilla de vericacin Anidar. Consulte Congurar preferencias de capa en la pgina 216.
Para crear una capa anidada, siga uno de estos procedimientos:

Para insertar una capa anidada, coloque el cursor dentro de una capa existente y elija Insertar > Capa. Para arrastrar y soltar una capa anidada, haga clic en el botn Capa en la Paleta de objetos y luego, sin soltar el botn del ratn, arrastre la capa y sultela dentro de una capa existente. Para dibujar una capa anidada, haga clic en el botn Capa en la paleta de objetos, suelte el botn del ratn, y luego use el cursor para dibujar una capa dentro de una capa existente (si est activada la opcin Anidar en la Categora Capas del cuadro de dilogo Preferencias); en caso contrario, pulse Control (Windows) o Comando (Macintosh) mientras dibuja la capa.
Para crear una capa anidada mediante la paleta de capas: 1 2

Elija Ventana > Capas para abrir la paleta de capas. Pulse la tecla Control (Windows) o la tecla Comando (Macintosh), seleccione una capa en la paleta de capas y arrstrela hasta la capa de destino. Suelte el botn del ratn cuando aparezca un cuadro alrededor del nombre de la capa de destino.

Usar capas

215

Configurar preferencias de capa Use Preferencias de capa para denir la conguracin predeterminada de las capas nuevas. Elija Edicin > Preferencias y luego haga clic en Capas para cambiar las Preferencias de capa.
Etiqueta Indica la etiqueta predeterminada que se us para DIV crean capas CSS; LAYER y ILAYER crean capas Netscape. Visibilidad Ancho

denir la capa. SPAN y

Determina si las capas sern visibles como opcin predeterminada.

y Alto Establecen la anchura y la altura predeterminadas de las capas creadas mediante Insertar > Capa.
Color de fondo

Determina el color de fondo predeterminado. Especica una imagen de fondo predeterminada.

Imagen de fondo

Anidar Convierte una capa dibujada dentro de los lmites de una capa existente en

una capa anidada. Pulse Control (Windows) o Comando (Macintosh) para cambiar esta conguracin temporalmente mientras se dibuja una capa. Configurar propiedades de capa Use el inspector de propiedades para especicar el nombre y la ubicacin de una capa, as como para establecer otras opciones de las capas. Para ver todas las propiedades siguientes, haga clic en la echa de ampliacin que se encuentra en el ngulo inferior derecho del Inspector de propiedades.
ID de capa Especica un nombre para identicar la capa en la paleta de capas y en

las secuencias de comandos. Introduzca un nombre en el cuadro sin ttulo que aparece a la izquierda en el Inspector de propiedades. Use solamente caracteres alfanumricos estndar para el nombre de las capas. No utilice caracteres especiales como espacios, guiones, barras ni puntos.
L y T Especican

la posicin de la capa con respecto al ngulo superior izquierdo de la pgina o capa padre.
An y Al Especican

la anchura y la altura de la capa. Si el contenido de la capa excede del tamao especicado, estos valores son anulados. Para capas CSS, los valores predeterminados de ubicacin y tamao se expresan en pxeles (px). Tambin se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milmetros), cm (centmetros) o % (porcentaje del valor principal). Las abreviaturas deben seguir al valor sin espacio de separacin: por ejemplo: 3 mm. El parmetro Desbordamiento controla el modo en que reaccionan las capas CSS cuando el contenido excede el tamao de la capa.

216

Captulo 12

ndice Z

Determina el ndice z, u orden de apilamiento, de la capa. Las capas con los nmeros ms altos aparecern por encima de las capas con los nmeros ms bajos. Los valores pueden ser positivos o negativos. Resulta ms sencillo cambiar el orden de apilamiento de las capas mediante la paleta de capas que introduciendo valores de ndice z especcos. Consulte Cambiar el orden de apilamiento de las capas en la pgina 225. Las capas Netscape (aquellas con las etiquetas LAYER o ILAYER) tambin se pueden apilar con relacin a otras capas de la pgina. Cuando se selecciona una capa Netscape, aparecen dos opciones adicionales en el ngulo inferior derecho del Inspector de propiedades. Use la opcin A/B para seleccionar una posicin relativa de apilamiento y despus seleccione el nombre de otra capa en el men emergente que aparece directamente a la derecha. (A especica una capa por encima de la capa actual; B especica una capa por debajo de la capa actual.)

Vis Determina el estado inicial de visualizacin de la capa. Use un lenguaje de secuencias de comandos, como JavaScript, para controlar la propiedad de visibilidad y visualizar en forma dinmica el contenido de la capa. Elija una de las opciones siguientes:

La opcin predeterminada no especica ninguna propiedad de visibilidad, pero la mayora de los exploradores interpretan esta conguracin como Heredada. Heredada usa la propiedad de visibilidad de la capa padre. Visible muestra el contenido de la capa, independientemente del valor de la capa padre. Visible muestra el contenido de la capa, independientemente del valor de la capa padre. Observe que las capas ocultas creadas con LAYER y ILAYER siguen ocupando el mismo espacio que si fueran visibles.
Im. fondo Especica una imagen de fondo para la capa. Escriba la ruta de la imagen en el cuadro de texto o haga clic en el icono de la carpeta para examinar y seleccionar un archivo de imagen.

Especica un color de fondo para la capa. Deje esta opcin en blanco para especicar un fondo transparente.
Col. fondo Etiqueta Indica si la capa es una capa CSS o una capa Netscape. SPAN y DIV crean capas CSS; LAYER y ILAYER crean capas Netscape.

Usar capas

217

Desbordamiento

(Para capas CSS, solamente) Determina lo que ocurre si el contenido de una capa excede de su tamao. Elija una de las opciones siguientes: Visible aumenta el tamao de la capa para que todo su contenido sea visible. La capa se expande hacia abajo y hacia la derecha. Oculta mantiene el tamao de la capa y recorta cualquier contenido que no quepa. No hay barras de desplazamiento. Desplaz. Incluye barras de desplazamiento a la capa independientemente de que el contenido exceda o no del tamao de la capa. La inclusin especca de barras de desplazamiento evita la confusin que provoca la aparicin y desaparicin de las barras de desplazamiento en un entorno dinmico. Esta opcin slo funciona en aquellos exploradores que admiten barras de desplazamiento. Automtico presenta las barras de desplazamiento solamente cuando el contenido de la capa excede de sus lmites. Dene la parte de la capa que ser visible. Introduzca valores que representen la distancia en pxeles desde los lmites de la capa. Los valores de conguracin de S (borde superior) e I (izquierda) se reeren a la capa, no a la pgina.
Rec

(Para capas Netscape, solamente) permite situar una capa en relacin con su capa padre. La opcin Izda, Sup sita la capa con respecto al ngulo superior izquierdo de la capa padre. La opcin PgX, PgY sita la capa en una ubicacin absoluta con respecto al ngulo superior izquierdo de la pgina, independientemente de la posicin de la capa padre.
Usar Izda, Sup o PgX, PgY Orig (Para

capas Netscape, solamente) Permite visualizar otro documento HTML dentro de la capa. Escriba la ruta del documento o haga clic en el icono de la carpeta para examinar y seleccionar el documento. Observe que Dreamweaver no muestra esta propiedad en la ventana de documento.
A/B (Para

capas Netscape, solamente) Especica la capa de arriba (A) o de abajo (B) con respecto a la capa actual en el orden de apilamiento (ndice z). Slo las capas previamente denidas en el documento aparecern en la lista de nombres de capas a la derecha del men A/B.

218

Captulo 12

Configurar propiedades para capas mltiples Cuando se seleccionan dos o ms capas, el Inspector de propiedades de capas mostrar las propiedades de texto y un subconjunto de las propiedades habituales de las capas, lo que permite modicar varias capas de una sola vez. Para seleccionar mltiples capas, mantenga pulsada la tecla Mays mientras selecciona las capas. Consulte Trabajar con capas en la pgina 220. Si desea informacin sobre cmo aplicar formato al texto de las capas, consulte Propiedades de texto en la Ayuda de Dreamweaver. Especican la posicin de la capa desde el ngulo superior izquierdo de la pgina o capa padre.
IyS

Especican la anchura y la altura de la capa. Si el contenido de la capa excede del tamao especicado, estos valores son anulados.
An y Al

Para capas CSS, los valores predeterminados de ubicacin y tamao se expresan en pxeles (px). Tambin se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milmetros), cm (centmetros) o % (porcentaje del valor principal). Las abreviaturas deben seguir al valor sin espacio de separacin: por ejemplo: 3 mm.
Vis Determina el estado inicial de visualizacin de la capa. Use un lenguaje de secuencias de comandos, como JavaScript, para controlar la propiedad de visibilidad y visualizar en forma dinmica el contenido de la capa. Elija una de las opciones siguientes:

La opcin predeterminada no especica ninguna propiedad de visibilidad, pero la mayora de los exploradores interpretan esta conguracin como Heredada. Heredada usa la propiedad de visibilidad de la capa padre. Visible muestra el contenido de la capa, independientemente del valor de la capa padre. Oculta muestra el contenido de la capa como si fuera transparente, independientemente del valor de la capa padre. Observe que las capas ocultas creadas con LAYER y ILAYER siguen ocupando el mismo espacio que si fueran visibles.
Etiqueta Indica si la capa es una capa CSS o una capa Netscape. SPAN y DIV crean capas CSS; LAYER y ILAYER crean capas Netscape. Im. fondo Especica una imagen de fondo para la capa. Escriba la ruta de la imagen en el cuadro de texto o haga clic en el icono de la carpeta para examinar y seleccionar un archivo de imagen.

Especica un color de fondo para la capa. Deje esta opcin en blanco para especicar un fondo transparente.
Col. fondo

Usar capas

219

Usar la paleta de capas

La paleta de capas es un mapa visual de las capas de su documento. Elija Ventana > Capas para abrir la paleta de capas. Las capas se muestran en forma de lista apilada de nombres; la primera capa que se cre estar situada al nal 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 la echa de ampliacin para mostrar u ocultar las capas anidadas. Use la paleta de capas para evitar solapamientos, cambiar la visibilidad de las capas, anidar o apilar capas, y para seleccionar una o ms capas. Para anidar una capa dentro de otra, consulte Anidar capas en la pgina 215. Para seleccionar una o ms capas, consulte Trabajar con capas en la pgina 220. Para cambiar el orden de apilamiento de una capa, consulte Cambiar el orden de apilamiento de las capas en la pgina 225. Para cambiar la visibilidad de una capa, consulte Cambiar la visibilidad de una capa en la pgina 225. Para evitar el solapamiento de unas capas con otras, consulte Evitar solapamiento de capas en la pgina 227.

Trabajar con capas

Al trabajar con el diseo de la pgina, las capas se pueden activar, seleccionar o cambiar su tamao. Al poner las capas en el modo activo es posible colocar contenido en ellas. Seleccionar capas permite alinearlas, cambiar su posicin o cambiar su tamao. Cambiar el tamao de las capas permite modicar las dimensiones de una sola capa o aplicar a dos o ms capas las mismas dimensiones de alto y ancho. Al trabajar con una sola capa o con capas mltiples, aparecern diferentes inspectores de propiedades. Consulte Congurar propiedades de capa en la pgina 216 y Congurar propiedades para capas mltiples en la pgina 219. Adems, las opciones de capas en el men Modicar slo estarn disponibles cuando se seleccionan mltiples capas. Para evitar el solapamiento de unas capas con otras, use la opcin Evitar solapamiento. Consulte Evitar solapamiento de capas en la pgina 227.

220

Captulo 12

Activar capas Active una capa para poder colocar objetos en ella. Al activar una capa, se coloca en ella el cursor, se resalta el borde de la capa, y aparece el selector de seleccin, pero no se selecciona la capa.
Para activar una capa:

Haga clic en cualquier lugar dentro de la capa. Seleccionar capas Seleccione una o ms capas para alinearlas, asignarles la misma anchura y altura, cambiar su posicin, etc. Para ver una lista completa de opciones, consulte Congurar propiedades de capa en la pgina 216.
Para seleccionar una capa, lleve a cabo una de estas operaciones:

En la ventana de documento, haga clic en la marca de capa que representa la ubicacin de la capa en el cdigo HTML. Si no se ve la marca de capa, elija Ver > Elementos invisibles. Haga clic en un manejador de seleccin de capa. Si el manejador no est visible, haga clic en cualquier punto dentro de la capa para hacerlo visible.

Haga clic en el borde de una capa. Si no hay capas activas o seleccionadas, haga clic dentro de una capa mientras pulsa la tecla Mays. Si hay varias capas seleccionadas, haga clic dentro de una capa mientras pulsa las teclas Control y Mays (Windows) o Comando y Mays (Macintosh). De este modo se anular la seleccin de las restantes capas. En la paleta de capas, haga clic en el nombre de la capa.

Usar capas

221

Para seleccionar varias capas, lleve a cabo una de estas operaciones:

Pulse Mays y haga clic dentro o en el borde de dos o ms capas. En la paleta de capas, haga clic en dos o ms nombres de capas mientras pulsa la tecla Mays. Cuando haya varias capas seleccionadas, el borde y los manejadores de la ltima capa seleccionada se resaltarn en negro. Cambiar el tamao de capas Puede cambiar el tamao de una capa individual o de varias capas simultneamente para asignarles la misma anchura y altura. Si est activada la opcin Evitar solapamiento, no podr cambiar el tamao de una capa para que se solape con otra. Consulte Evitar solapamiento de capas en la pgina 227.
Para cambiar el tamao de una capa, lleve a cabo una de estas operaciones:

Para cambiar el tamao arrastrando, seleccione la capa y arrastre uno de los manejadores de redimensionamiento. Para cambiar el tamao un pxel cada vez, seleccione la capa y pulse las tecla Control-echa (Windows) o las teclas Opcin-echa (Macintosh). Para cambiar el tamao en el incremento de ajuste a la cuadrcula, pulse las teclas Mays-Control-echa (Windows) o Mays-Opcin-echa (Macintosh). Al cambiar el tamao de una capa cambiarn su anchura y altura. Esta operacin, sin embargo, no dene qu cantidad de contenido de la capa queda visible. Para denir la regin visible de una capa, consulte Congurar propiedades de capa en la pgina 216.
Para cambiar el tamao de varias capas: 1 2

En la ventana de documento, seleccione dos o ms capas. Lleve a cabo una de estas operaciones: Elija Modicar > Capas > Asignar mismo ancho o Asignar mismo alto. Las primeras capas seleccionadas se ajustarn a la anchura o la altura de la ltima capa seleccionada (resaltada en negro). En el inspector de propiedades, bajo Varias capas, introduzca los valores de anchura y altura. Estos valores se aplicarn a todas las capas seleccionadas.

222

Captulo 12

Mover capas
La operacin de mover capas en la ventana de documento le resultar familiar a cualquiera que haya trabajado con aplicaciones grcas bsicas. Si est activada la opcin Evitar solapamiento, no podr mover una capa para que se solape con otra. Consulte Evitar solapamiento de capas en la pgina 227.
Para mover una o varias capas, lleve a cabo una de estas operaciones:

Para mover arrastrando, seleccione las capas y arrastre el manejador de seleccin de la ltima capa seleccionada (resaltada en negro). Para mover un pxel cada vez, seleccione las capas y use las teclas de echa. Utilice las teclas Mays-echa para mover la capa en el incremento de ajuste a la cuadrcula. Alinear capas Utilice los comandos de alineacin de capas para alinear una o varias capas con el borde especicado de la ltima capa seleccionada. Cuando se alinean capas, las capas hijas que no estn seleccionadas pueden moverse debido a que su capa padre est seleccionada y se mueve. Para evitarlo, no utilice capas anidadas.
Para alinear dos o ms capas: 1 2

Seleccione las capas. Elija Modicar > Capas y seleccione una opcin de alineacin. Por ejemplo, si selecciona Alinear con el 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).

Ajustar capas a la cuadrcula Utilice la cuadrcula como una gua visual para colocar y cambiar el tamao de las capas en la ventana de documento. Si est activado el ajuste, las capas se situarn automticamente en la posicin de ajuste ms prxima cuando se muevan o cambien de tamao. El ajuste funciona independientemente de que la cuadrcula est visible.
Para mostrar la cuadrcula, lleve a cabo una de estas operaciones:

Elija Ver > Cuadrcula > Mostrar. Elija Ver > Cuadrcula > Conguracin y seleccione la opcin Cuadrcula visible.

Usar capas

223

Para ajustar una capa: 1

Elija Ver > Cuadrcula > Ajustar a para activar (o desactivar) la opcin de ajuste). Seleccione la capa y arrstrela. Cuando se libere, la capa pasar a la posicin de ajuste ms prxima.

Para cambiar la configuracin de cuadrcula y ajuste: 1 2

Elija Ver > Cuadrcula > Conguracin para abrir el cuadro de dilogo. Seleccione las opciones deseadas. Cuadrcula visible: permite ver la cuadrcula. Funciona conjuntamente con el comando Mostrar (Ver > Cuadrcula > Mostrar). El espaciado dene la distancia entre las marcas de cuadrcula. Introduzca un nmero y, a continuacin, elija pxeles, pulgadas o centmetros en el men Unidades. Color: especica el color de las marcas de la cuadrcula. El color predeterminado es azul claro. Mostrar: especica que la cuadrcula se muestra como lneas o puntos. Ajuste: activa o desactiva la opcin de ajuste. Funciona conjuntamente con el comando Ajustar a (Ver > Cuadrcula > Ajustar a). Ajustar cada: especica una unidad de ajuste. Introduzca un nmero de unidades en el cuadro Ajustar cada y, a continuacin, elija pxeles, pulgadas o centmetros en el men Unidades. El valor predeterminado es 5 pxeles. Para hacer que las capas se ajusten a la cuadrcula, las unidades de cuadrcula y ajuste deben ser iguales. Por ejemplo, si Espaciado se dene como 50 pxeles, dena Ajustar cada como 50 pxeles.

Haga clic en Aceptar.

224

Captulo 12

Cambiar el orden de apilamiento de las capas

Utilice el inspector de propiedades o la paleta de capas para cambiar el orden de apilamiento de las capas. La capa que gura en la parte superior de la lista es la primera en el orden de apilamiento. En el cdigo HTML, el ndice z determina el orden en que se dibujan las capas en un explorador. Puede cambiar el ndice z de cada capa utilizando el inspector de propiedades o la paleta de capas, aunque el procedimiento siguiente es mucho ms sencillo.
Para cambiar el orden de apilamiento de las capas: 1 2 3

Elija Ventana > Capas para abrir la paleta de capas. Seleccione una capa en la paleta de capas y arrstrela hacia arriba o hacia abajo. Suelte el botn del ratn cuando aparezca una lnea entre las capas.

Cambiar la visibilidad de una capa

Mientras trabaja con un documento, puede mostrar y ocultar capas para ver qu apariencia tendr la pgina en distintas condiciones. Use la paleta de capas para cambiar la visibilidad de las capas. Use el panel de preferencias de capa para denir la visibilidad predeterminada de las capas nuevas. Consulte Congurar preferencias de capa en la pgina 216.
Para cambiar la visibilidad de las capas: 1 2

Elija Ventana > Capas para abrir la paleta de capas. Haga clic en la columna con el icono de ojo para cambiar la visibilidad. Si el ojo est abierto signica que la capa es visible. Si est cerrado, la capa es invisible. Si no hay icono de ojo, la capa hereda la visibilidad de su padre. En capas no anidadas, el padre es el cuerpo del documento, que siempre es visible. Para cambiar la visibilidad de todas las capas al mismo tiempo, haga clic en el icono de ojo que se encuentra en el encabezado de la columna.

Usar capas

225

Usar capas para disear tablas

Las capas sirven para situar contenido en una pgina y resultan ms fciles de utilizar y manipular que las celdas de las tablas. Puede utilizar capas para crear rpidamente diseos de pgina complejos y, a continuacin, convertir las capas en tablas para ofrecer compatibilidad con los exploradores 3.0. Tambin puede alternar entre capas y tablas para optimizar el diseo de la pgina. Si desea destinar su pgina a exploradores 4.0 y posteriores, puede utilizar una combinacin de tablas y capas e incluso animar las capas. Consulte Animar con HTML dinmico en la pgina 288.
Nota: Si desea generar archivos compatibles con exploradores 3.0 y 4.0 a partir del archivo actual, utilice las opciones de conversin del men Archivo. Consulte Convertir entre exploradores 3.0 y 4.0 en la pgina 228. Para pasar al modo de edicin de capas: 1

Elija Modicar > Diseo > Reubicar contenido usando capas.

En el cuadro de dilogo que aparece, seleccione las opciones deseadas. y Ajustar a cuadrcula Permite utilizar una cuadrcula para facilitar la colocacin de las capas. Consulte Ajustar capas a la cuadrcula en la pgina 223.
Mostrar cuadrcula Evitar solapamiento de capas Limita las posiciones de las capas cuando se crean, mueven y cambian de tamao para evitar que se solapen. Consulte Evitar solapamiento de capas en la pgina 227. Mostrar paleta de capas Muestra la paleta de capas. Consulte Usar la paleta de capas en la pgina 220.

Haga clic en Aceptar. Las tablas se convierten en capas dentro del archivo. Las celdas vacas no se convierten en capas. El contenido fuera de las tablas tambin se sita en capas.

226

Captulo 12

Para pasar al modo de edicin de tablas: 1 2

Elija Modicar > Diseo > Convertir capas en tabla. En el cuadro de dilogo que aparece, seleccione las opciones de diseo de tablas deseadas.
Ms preciso Crea una celda de tabla para cada capa, junto con las celdas adicionales necesarias para conservar el espacio entre capas.

Especica que los bordes de las capas deben alinearse si se sitan a la distancia especicada en pxeles. Si esta opcin est seleccionada, la tabla resultante tendr menos las y columnas.
Mnimo: contraer celdas vacas Usar GIF transparentes Rellena la ltima la de la tabla con GIF transparentes. De este modo se garantiza que la tabla se muestra de la misma forma en todos los exploradores.

Cuando esta opcin est activada, resulta imposible editar la tabla resultante arrastrando sus columnas. Cuando est desactivada, la tabla resultante no contiene GIF transparentes, pero su apariencia puede variar ligeramente en los distintos exploradores.
Centrar en pgina

Centra la tabla resultante en la pgina.

Si esta opcin est desactivada, la tabla se alinea a la izquierda.

3

Seleccione las herramientas de diseo y las opciones de cuadrcula deseadas y haga clic en Aceptar.

Evitar 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 exploradores 3.0, utilice la opcin Evitar solapamiento a n de limitar el movimiento y la ubicacin de las capas y evitar su solapamiento.

Usar capas

227

Para evitar el solapamiento de capas:

Elija Ver > Evitar superposicin de capas o active la opcin Evitar solapamiento en la paleta de capas.

Cuando esta opcin est activada, no se puede crear una capa sobre otra, ni mover, cambiar de tamao o anidar dentro de una capa existente. Cuando se activa la opcin despus de crear capas solapadas, arrastre la capa solapada para separarla de la otra. Cuando estn activadas esta opcin y el ajuste, la capa no se ajustar a la cuadrcula si esto provoca el solapamiento de las dos capas, sino que se ajustar al borde de la capa ms prxima.
Nota: Algunas acciones no impiden que las capas se solapen incluso cuando est activada la opcin Evitar solapamiento. Si inserta una capa desde el men, introduce nmeros en el inspector de propiedades o cambia las capas de posicin editando el cdigo fuente HTML en el inspector de propiedades, puede provocar que las capas se solapen o aniden a pesar de que la opcin est activada. Si se produce una situacin de este tipo, arrastre las capas superpuestas en la ventana de documento para separarlas.

Convertir entre exploradores 3.0 y 4.0

Utilice las opciones de conversin del men Archivo para crear una versin de una pgina que utilice capas y que resulte compatible con los exploradores 3.0 o para convertir un documento que usa tablas en otro con capas. En cada caso, Dreamweaver crear un archivo distinto y convertido y conservar el original. En general, slo deber realizar estas conversiones cuando est completamente satisfecho con el archivo original, ya que deber repetir la conversin cada vez que cambie el archivo original.
Nota: Si desea utilizar capas para disear una pgina para uso con exploradores 3.0, utilice los comandos Diseo del men Modicar para convertir la pgina actual de un diseo tabla a otro de capa y a la inversa sin crear otro archivo. Consulte Usar capas para disear tablas en la pgina 226.

228

Captulo 12

Para convertir un archivo para uso con exploradores 3.0: 1 2

Elija Archivo > Convertir > Compatible con explorador 3.0. En el cuadro de dilogo que aparece, elija si desea convertir capas a 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. Todas las capas sern sustituidas por una sola tabla que mantendr la posicin original.
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.

Cuando es posible, el formato CSS se sustituye por estilos de carcter HTML. Todo el formato CSS que no se pueda convertir a HTML ser eliminado. Consulte la Tabla de conversin de CSS a formato HTML en la pgina 183 para obtener informacin sobre los estilos que se convierten y los que se eliminan. El cdigo de lnea de tiempo que anima capas se elimina. El cdigo de lnea de tiempo que no est relacionado con capas (por ejemplo, comportamientos o cambios en el origen de la imagen) se ejecutar con el tiempo de acuerdo con su diseo. La lnea de tiempo se rebobinar automticamente hasta el marco 1.
Para convertir tablas en capas:

Elija Archivo > Convertir > Tablas a capas. Dreamweaver abrir el archivo convertido en una ventana nueva y sin ttulo. Cada celda de la tabla se convertir en una capa distinta; las celdas vacas no se convertirn. El contenido que est fuera de las tablas se situar en una sola capa. Utilice comportamientos, lneas de tiempo y CSS para dotar de mayor dinamismo e inters a su esttica pgina 3.0.

Usar capas

229

230

Captulo 12

13

CAPTULO 13
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Usar marcos

Introduccin al uso de marcos

Los marcos dividen la pgina Web de manera que se puedan cargar diferentes archivos en reas denidas en la misma pgina. Con frecuencia, los marcos denen un rea de navegacin y un rea de contenido de la pgina. Cuando un documento se divide en marcos, Dreamweaver crea un archivo de conjuntos de marcos sin nombre y documentos sin nombre en cada uno de los nuevos marcos. Lo que el usuario percibe como una sola pgina Web con dos marcos, en realidad est formado por tres archivos independientes: el archivo de conjuntos de marcos y dos archivos que albergan el contenido que aparece dentro de los marcos. Un conjunto de marcos es un archivo que dene una pgina Web con marcos. Un conjunto de marcos almacena informacin sobre el tamao y la ubicacin de los marcos de la pgina y, adems, contiene tambin los nombres de los archivos que se deben cargar como contenido de cada uno de los marcos. Es posible cambiar las propiedades de los marcos y conjuntos de marcos, cambiar el tamao de los marcos y usar vnculos para controlar su contenido. Cuando la opcin Ver > Bordes de marco est desactivada, el conjunto de marcos aparecer exactamente como se ve en un explorador. Cuando se muestran los bordes de los marcos, Dreamweaver aade un espacio alrededor del documento para el borde y ensancha los bordes pequeos para facilitar las operaciones de arrastrar y seleccionar.

231

Crear marcos
Puede crear un marco arrastrando un borde de marco o eligiendo comandos en el men Modicar.
Para crear marcos nuevos, lleve a cabo una de estas operaciones:

Elija Modicar > Conjunto de marcos > Dividir marco a la izquierda, a la derecha, hacia arriba o hacia abajo. Elija Ver > Bordes de marco y arrastre -manteniendo pulsada la tecla Alt (Windows) o la tecla Opcin (Macintosh)- un borde de marco hasta dentro de la ventana de documento para dividir el marco vertical u horizontalmente. Arrastre una de las esquinas para dividir el marco actual en cuatro marcos nuevos.

Para eliminar un marco:

Arrastre el borde del marco hasta sacarlo fuera de la pgina o hasta el borde del marco padre. Crear un conjunto de marcos anidado Al dividir un marco se crea un nuevo conjunto de marcos dentro del archivo actual de conjuntos de marcos. Un conjunto de marcos dentro de otro conjunto de marcos recibe el nombre de conjunto de marcos anidado.
Para crear un conjunto de marcos anidado: 1 2

Site el cursor dentro de un marco. Elija Modicar > Conjunto de marcos > Dividir marco hacia arriba, hacia abajo, a la izquierda, o a la derecha.

Tambin puede arrastrarmanteniendo pulsada la tecla Alt (Windows) o la tecla Opcin (Macintosh)un borde de marco hasta dentro de la ventana de documento para dividir el marco vertical u horizontalmente.

232

Captulo 13

Para ver el cdigo HTML, seleccione el conjunto de marcos padre haciendo clic en el borde de un marco y despus abra el inspector de HTML. El cdigo presentar un aspecto similar al del ejemplo siguiente:
<frameset cols="207,397"> <frame src="file:///C|/SITEROOT/UntitledFrame-2" name="Left"> <frameset rows="270,268"> <frame src="file:///C|/SITEROOT/UntitledFrame-3" name="TopRight"> <frame src="/temp.htm" name="BottomRight"> </frameset> </frameset>

Se aprecia cmo el nuevo conjunto de marcos est sangrado dentro del conjunto de marcos padre. Guardar archivos en marcos y en conjuntos de marcos Las pginas con marcos constan de varios archivos. Elija la opcin adecuada para guardar un archivo en un marco, el archivo del conjunto de marcos, o todos los archivos de una vez.
Para guardar archivos en un conjunto de marcos, elija una de las siguientes opciones:

Para guardar un documento dentro de un marco, coloque el cursor en el marco y elija Archivo > Guardar. Para guardar un archivo de conjuntos de marcos, elija Archivo > Guardar conjunto de marcos > Guardar conjunto de marcos como. Para guardar todos los archivos abiertos de una vez, elija Archivo > Guardar todo.

Seleccionar un marco o un conjunto de marcos

Seleccione marcos y conjuntos de marcos para cambiar sus propiedades. El inspector de propiedades muestra las propiedades del marco o conjunto de marcos seleccionado. Consulte Propiedades de marco y conjunto de marcos en la pgina 235.
Para seleccionar un marco, lleve a cabo una de estas operaciones:

Haga clic manteniendo pulsada la tecla Alt (Windows) o las teclas MaysOpcin (Macintosh) dentro de un marco. Elija Ventana > Marcos y haga clic en un marco en el inspector de marcos.

Usar marcos

233

Para seleccionar un conjunto de marcos, lleve a cabo una de estas operaciones:

Haga clic en el borde de un marco de la ventana de documento. Haga clic en el borde que encierra los marcos en el inspector de marcos. Cuando se selecciona un conjunto de marcos, todos los bordes de los marcos del conjunto se mostrarn con un contorno de lnea de puntos en la ventana del documento.
Para cambiar la seleccin al marco siguiente, lleve a cabo alguna de estas operaciones:

Pulse la tecla Alt (Windows) o Comando (Macintosh), ms una tecla de echa para cambiar la seleccin al marco siguiente. Pulse la tecla Alt (Windows) o Comando (Macintosh), ms la tecla de echa arriba o abajo para cambiar la seleccin al conjunto de marcos padre. Pulse la tecla Alt (Windows) o Comando (Macintosh), ms la tecla de echa abajo para cambiar la seleccin al marco hijo. Si el inspector de HTML est abierto, seguir la seleccin actual de la ventana de documento en el cdigo HTML. Usar el inspector de marcos El inspector de marcos muestra los conjuntos de marcos del documento actual y permite seleccionar marcos y conjuntos de marcos para poder cambiar sus propiedades. El inspector de marcos tambin muestra la jerarqua de la estructura del conjunto de marcos de una manera que puede no percibirse en la ventana de documento. Los conjuntos de marcos presentan bordes gruesos tridimensionales. Los marcos tienen delgadas lneas grises y muestran el nombre del marco.
Para que aparezca el inspector de marcos:

Elija Ventana > Marcos.

Para seleccionar un marco en el inspector de marcos:

Haga clic en un marco en el inspector de marcos.

Para seleccionar un conjunto de marcos en el inspector de marcos:

Haga clic en el borde que encierra los marcos en el inspector de marcos. Cuando se selecciona un conjunto de marcos, todos los bordes de los marcos del conjunto se mostrarn con un contorno de lnea de puntos en la ventana del documento.

234

Captulo 13

Propiedades de marco y conjunto de marcos

Hay dos conjuntos de propiedades que controlan la apariencia y las propiedades de los documentos con marco. Las propiedades de marco determinan el nombre del marco, el archivo de origen, los mrgenes, el desplazamiento y el cambio de tamao de los distintos marcos de un conjunto de marcos. Las propiedades de conjunto de marcos controlan las dimensiones de los marcos y el color y la anchura de los bordes entre los marcos. (Elija Ventana > Propiedades para que aparezca el inspector de propiedades si es que no est ya abierto.) Consulte Introduccin al uso de marcos en la pgina 231 papara obtener ms informacin acerca de los marcos.
Para ver propiedades de marcos, lleve a cabo una de estas operaciones:

Haga clic manteniendo pulsada la tecla Alt (Windows) o las teclas MaysOpcin (Macintosh) en un marco. Haga clic en un marco en el inspector de marcos. Consulte Congurar propiedades de marco en la pgina 236.
Para ver propiedades de conjunto de marcos, lleve a cabo una de estas operaciones:

Haga clic en el borde de un marco de la ventana de documento. Haga clic en el borde que encierra los marcos en el inspector de marcos. Consulte Congurar propiedades de conjunto de marcos en la pgina 237.

Usar marcos

235

Configurar propiedades de marco Para ver propiedades de marco, haga clic en un cuadro manteniendo pulsada la tecla Alt (Windows) o la tecla Opcin (Macintosh). Para ver todas las propiedades de marco siguientes, haga clic en la echa de ampliacin que se encuentra en el ngulo inferior derecho del inspector de propiedades. Determina el nombre del marco actual para usar como destino de hipervnculos y referencias de secuencias de comandos. El nombre de un marco tiene que estar formado por una sola palabra. Se admite subrayado (_), pero no guiones (-), puntos (.) ni espacios.
Marco

Determina el documento de origen del marco. Introduzca un nombre de archivo o haga clic en el icono de la carpeta para examinar y seleccionar el archivo. Tambin puede abrir un archivo en un marco colocando el cursor en el marco y eligiendo Archivo > Abrir en marco.
Orig

Determina si aparecern barras de desplazamiento cuando no haya suciente espacio para mostrar todo el contenido del marco actual. La conguracin predeterminada de la mayora de los exploradores es Automtico.
Desplaz. Mismo tamao Impide que el tamao del marco actual se pueda cambiar y que los

usuarios arrastren los bordes del marco. El tamao de los marcos siempre se puede cambiar en la ventana del documento, pero los marcos con esta opcin activada no admiten modicaciones de tamao en un explorador. Controla el borde del marco actual. Las opciones posibles son S, No y Predeterminado. Al elegir una de estas opciones, se anula la conguracin de borde denida para el conjunto de marcos. (Consulte Congurar propiedades de conjunto de marcos en la pgina 237.) La conguracin predeterminada de la mayora de los exploradores es S. Para desactivar un borde, todos los marcos contiguos deben estar congurados con la opcin No (o con la opcin Predeterminado, y el conjunto de marcos padre congurado en No).
Bordes

Establece un color de borde para todos los bordes contiguos al marco actual. Esta opcin de conguracin anula el color de borde del conjunto de marcos. (Consulte Congurar propiedades de conjunto de marcos en la pgina 237.)
Color de borde

Establece la anchura en pxeles de los mrgenes izquierdo y derecho (es decir, del espacio que hay entre el borde del marco y su contenido).
Ancho del margen

Establece la altura en pxeles de los mrgenes superior e inferior (es decir, del espacio que hay entre el borde del marco y su contenido).
Alto del margen

236

Captulo 13

Configurar propiedades de conjunto de marcos Para ver propiedades de conjunto de marcos, haga clic en el borde de un marco. Para ver todas las propiedades del conjunto de marcos, haga clic en la echa de ampliacin que se encuentra en el ngulo inferior derecho del inspector de propiedades. Controla los bordes de los marcos contenidos en el conjunto de marcos actual. Elija S para mostrar los bordes tridimensionales y en color gris; No para mostrar los bordes planos y en color gris; o elija Predeterminado para que el explorador determine cmo mostrar los bordes. La conguracin predeterminada de la mayora de los exploradores es S.
Bordes Ancho del borde

Especica la anchura de los bordes en el conjunto de marcos

actual. Establece un color de borde para todos los bordes en el conjunto de marcos actual. Esta opcin de conguracin puede ser anulada por un color de borde especicado para un solo marco.
Color de borde Valor Especica el tamao de la la o columna seleccionada. Consulte Especicar

tamaos de marco en la pgina 238.

Unidades

Especica si la la o columna seleccionada es un tamao jo (pxeles), un porcentaje de la ventana del explorador, o se ampla y reduce para llenar el espacio libre de la ventana (relativo). Consulte Especicar tamaos de marco en la pgina 238.

Identica la la o columna seleccionada. Haga clic en las chas situadas a la izquierda para seleccionar una la, y en las chas de la parte superior para seleccionar una columna. Consulte Especicar tamaos de marco en la pgina 238.
Seleccin FilaCol

Usar marcos

237

Especificar tamaos de marco Arrastre el borde de un marco a la ventana de documento para establecer los tamaos aproximados de los marcos; luego, use el inspector de propiedades para especicar la manera en que los exploradores deben asignar el espacio a los marcos cuando no hay suciente sitio para mostrar todos los marcos en todo su tamao.
Para especificar los tamaos de los marcos: 1

Haga clic en el borde de un marco para seleccionar el conjunto de marcos. Elija Ver > Bordes de marco si los bordes no estn visibles. En el inspector de propiedades, haga clic en la echa de ampliacin para ver todas las propiedades. Haga clic en la cha situada encima de la columna o a la izquierda de una la para seleccionar lo que desea cambiar.

Para especicar cmo asignar el espacio cuando se cambia el tamao de la ventana del explorador, introduzca un nmero en el cuadro de Valor, y elija una unidad entre las siguientes opciones: Establece el tamao de la columna o la seleccionada en un valor absoluto. Esta opcin es la mejor de las posibles para un marco que siempre tiene que tener el mismo tamao, como una barra de exploracin. Si se establece una opcin de Unidades diferente para otros marcos, a stos solamente se les asignar espacio cuando los marcos que se han especicado en pxeles ya tengan su tamao exacto.
Pxeles

Indica que el marco actual tiene que ocupar un porcentaje especicado del conjunto de marcos al que pertenece. A los marcos especicados con la opcin Porcentaje como unidad, se les asigna espacio despus de aquellos especicados en pxeles, pero antes de los marcos con la opcin Relativo como unidad.
Porcentaje

Indica que al marco actual se le asignar espacio proporcionalmente a otros marcos. A los marcos con las unidades establecidas en Relativo se les asigna espacio despus de asignrselo a los marcos con el tamao especicado en pxeles y en porcentaje, pero ocuparn todo el espacio restante de la ventana del explorador.
Relativo

238

Captulo 13

Definir bordes de marco y conjunto de marcos Se puede especicar la apariencia que los bordes de los marcos y los conjuntos de marcos tendrn en la pgina. Cuando se especican opciones de bordes para un marco, se anulan las opciones correspondientes del conjunto de marcos.
Para definir bordes de marco: 1

Seleccione el marco haciendo clic mientras se mantiene pulsada la tecla Alt (Windows) o las teclas Mays-Opcin (Macintosh) o haga clic en un marco en el inspector de marcos. Establezca las opciones siguientes:
Bordes Controla el borde del marco actual. Las opciones posibles son S, No y Predeterminado. La conguracin predeterminada de la mayora de los exploradores es S. Para desactivar un borde, todos los marcos contiguos deben estar congurados con la opcin No (o con la opcin Predeterminado, y el conjunto de marcos padre congurado en No). Color de borde

Establece un color de borde para todos los bordes contiguos al

marco actual.
Para definir bordes de conjunto de marcos: 1

Seleccione el conjunto de marcos haciendo clic en el borde de un marco en la ventana de documento o haciendo clic en el borde que encierra los marcos en el inspector de marcos. Establezca las opciones siguientes:
Bordes Controla los bordes de los marcos contenidos en el conjunto de marcos actual. Elija S para mostrar los bordes en color tridimensional; No para mostrar los bordes planos y en color gris; o elija Predeterminado para que el explorador determine cmo mostrar los bordes. La conguracin predeterminada de la mayora de los exploradores es S. Color de borde Establece un color de borde para todos los bordes en el conjunto de marcos actual. Esta opcin de conguracin puede ser anulada por un color de borde especicado para un solo marco. Ancho del borde Especica la anchura de los bordes en el conjunto de marcos actual. Introduzca 0 para especicar sin bordes.

Usar marcos

239

Cambiar el color de fondo de un marco El color de fondo de un marco se cambia estableciendo el color de fondo del documento en el marco.
Para cambiar el color de fondo de un documento en un marco: 1

Lleve a cabo una de estas operaciones: Coloque el cursor en el marco y elija Modicar > Propiedades de la pgina. Haga clic con el botn derecho del ratn (Windows) o haga clic manteniendo pulsada la tecla Control (Macintosh) dentro del marco y elija Propiedades de la pgina en el men de acceso directo.

Haga clic en el cuadro Color de fondo para seleccionar un color.

Controlar el contenido con vnculos del marco

Use un vnculo en un marco para controlar el contenido en otro marco.
Para crear un vnculo que cambie el contenido de otro marco: 1

Haga clic manteniendo pulsada la tecla Alt (Windows) o la tecla Opcin (Macintosh) en un marco para seleccionarlo. Asigne un nombre al marco introducindolo en el cuadro Marco en el inspector de propiedades. Repita los pasos 1 y 2 para cada marco del conjunto de marcos. Seleccione texto o un objeto, y luego introduzca el archivo con el que desea establecer un vnculo en el cuadro Vnculo en el inspector de propiedades. Para especicar un punto de jacin en el otro archivo, introduzca un signo de nmero (#) antes del nombre del punto de jacin. Consulte Vincular con un punto de jacin con nombre en la pgina 114.

3 4

Haga clic en la echa de ampliacin situada en el ngulo inferior derecho del inspector de propiedades y luego elija el nombre del marco de destino en el men emergente Destino.

240

Captulo 13

Crear contenido sin marcos

Dreamweaver permite especicar contenido para visualizar en exploradores antiguos o basados en texto que no admiten marcos. Dreamweaver inserta el contenido especicado en el archivo del conjunto de marcos mediante una instruccin similar a la siguiente:
<noframes><body bgcolor="#FFFFFF"> este es el contenido sin marcos. </body></noframes>

Cuando un explorador que no admite marcos carga un archivo de conjunto de marcos, solamente mostrar el contenido NOFRAMES (sin marcos).
Para definir contenido sin marcos: 1

Elija Modicar > Conjunto de marcos > Editar contenido sin marcos. Dreamweaver borra la ventana de documento, y en la parte superior del rea de cuerpo aparecen las palabras "Contenido sin marcos".

2 3

Cree el contenido sin tramas en la ventana de documento. Vuelva a elegir Modicar > Conjunto de marcos > Editar contenido sin marcos para volver a la vista normal del documento de conjunto de marcos.

Usar marcos

241

242

Captulo 13

14

CAPTULO 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Crear formularios

Introduccin a la creacin de formularios

Los formularios permiten recoger informacin de los usuarios. Entre los usos ms comunes de los formularios se encuentran las encuestas, los formularios de pedido y las interfaces de bsqueda. Para que funcionen, los formularios requieren dos componentes: el HTML que describe el formulario y una aplicacin en la parte del servidor o una secuencia de comandos en la parte del cliente para procesar la informacin que el usuario introduce en los campos del formulario. Dreamweaver le permite crear formularios, aadirles objetos y, (mediante los comportamientos) validar la informacin introducida por el usuario. Debe usarse un editor de textos para escribir una secuencia de comandos o una aplicacin para procesar los datos del formulario (Perl es el lenguaje de secuencias de comandos de uso frecuente para procesamiento de formularios; C, Java e incluso, JavaScript, constituyen otras alternativas). Los formularios de Dreamweaver pueden incluir objetos estndar como campos de texto, botones, campos de imagen, casillas de vericacin, botones de opcin, listas/mens, campos de archivo y campos ocultos. Dreamweaver tambin admite tipos de entrada que no reconoce mostrando las propiedades genricas de campo en el inspector de propiedades. Consulte Propiedades genricas de campo.

243

Crear un formulario
Use el comando Insertar > Formulario o el panel Formularios de la paleta de objetos para crear un formulario.
Para crear un formulario: 1

Lleve a cabo una de estas operaciones: Coloque el cursor en la posicin en que desea que aparezca el formulario y elija Insertar > Formulario. Coloque el cursor en la posicin en que desea que aparezca el formulario y haga clic en el botn Formulario del panel Formularios en la paleta de objetos. Arrastre el botn Formulario a la posicin deseada de la pgina. Si no se aprecia ningn resultado visible, compruebe que est activada la opcin Ver > Elementos invisibles.

Seleccione el formulario y establezca sus propiedades en el inspector de propiedades. Elija una de las opciones siguientes:
Nombre del formulario

Asigna un nombre al formulario. Asignar nombre al formulario hace que sea posible controlarlo con un lenguaje de secuencias de comandos como JavaScript o VBScript.

Identica la aplicacin de la parte del servidor que procesa la informacin del formulario, especicada como un URL. Introduzca la ruta de la aplicacin o haga clic en el icono de la carpeta para ubicar el archivo.
Accin Mtodo 3

Dene cmo se manejan los datos del formulario.

En el inspector de propiedades, elija uno de los siguientes mtodos para denir la manera en que se manejan los datos del formulario:
Obtener Adjunta valores del formulario al URL y enva al servidor una peticin GET. Dado que los URL estn limitados a 8192 caracteres, no utilice el mtodo GET con formularios largos. Publicar Enva los valores del formulario en el cuerpo de un mensaje y enva al servidor un mensaje POST. Predeterminado Usa el mtodo predeterminado del explorador (generalmente,

GET).

244

Captulo 14

Agregar un objeto a un formulario

Al agregar un objeto a un formulario, se pueden establecer sus propiedades mediante el inspector de propiedades.
Para agregar un objeto a un formulario: 1

Lleve a cabo una de estas operaciones: Coloque el cursor dentro de los lmites del formulario y elija un objeto del men Insertar > Objeto de formulario. Coloque el cursor dentro de los lmites del formulario y haga clic en el botn del panel Formularios en la paleta de objetos. Arrastre un botn de objeto a la posicin deseada dentro de los lmites del formulario.

Especique las propiedades del objeto en el inspector de propiedades (elija Ventana > Propiedades para que aparezca el inspector de propiedades si no est ya abierto).
Campos de texto Aceptan todo tipo de texto, tanto alfabtico como numrico. El texto introducido puede mostrarse como una sola lnea, mltiples lneas o como vietas y asteriscos (para proteccin de la contrasea). Consulte Propiedades de campo de texto en la Ayuda de Dreamweaver.

Lleve a cabo tareas estndar, como enviar o restablecer formularios, o una funcin personalizada. Puede introducir una etiqueta personalizada para un botn, o bien usar una de las etiquetas predenidas. Consulte Propiedades de botn en la Ayuda de Dreamweaver.
Botones Campos de imagen Pueden usarse en lugar de lo0s botones Enviar. Consulte Propiedades de campo de imagen en la Ayuda de Dreamweaver. Casillas de verificacin Admiten mltiples respuestas en un solo grupo de opciones. Consulte Propiedades de casilla de vericacin en la Ayuda de Dreamweaver. Botones de opcin

Representan opciones exclusivas de eleccin. Al seleccionar un botn en un grupo, se anula la seleccin de todos los dems botones del grupo. Consulte Propiedades de botn de opcin en la Ayuda de Dreamweaver.

Crear formularios

245

Listas/mens Presenta una lista de valores que el usuario puede elegir. El objeto

puede ser un men emergente, en el que los valores de la lista slo aparecen al hacer clic en el objeto (para una sola respuesta), o un cuadro de lista que siempre muestra los valores en una lista desplazable (para mltiples respuestas). Consulte Propiedades de lista/men en la Ayuda de Dreamweaver.
Campos de archivo Permiten al usuario examinar los archivos de sus discos duros y cargarlos como datos de formulario. Consulte Propiedades de campo de archivo en la Ayuda de Dreamweaver. Campos oculto Permiten almacenar informacin (como el destinatario de los datos de formulario o el objeto del formulario) que no son relevantes para el usuario, pero que sern usados por la aplicacin que procesa el formulario. Consulte Propiedades de campo oculto. 3

Si lo desea, puede escribir una etiqueta o texto descriptivo junto al objeto.

A las etiquetas de los objetos de formulario se les puede aplicar formato de texto. Consulte Cambiar caractersticas de fuente para obtener ms informacin al respecto.

Procesar formularios
Los formularios son procesados por la secuencia de comandos o la aplicacin especicada en el atributo ACTION de la etiqueta FORM . Seleccione un formulario y mire en el inspector de propiedades cual es su accin asociada. Los formularios ms simples usan JavaScript o VBScript para llevar a cabo todo el proceso del formulario en la parte del cliente (en contraposicin al envo de los datos de formulario al servidor para su proceso). Por ejemplo, al nal 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 denida en el HEAD del documento que salte a un documento si el usuario selecciona S, y a otro documento si el usuario selecciona No:
function processForm(){ if (document.forms[0].elements[0].checked){ window.location.href = userAnsweredYes.html; }else{ window.location.href = userAnsweredNo.html; } }

246

Captulo 14

Para usar una funcin JavaScript en la parte del cliente como accin del formulario: 1 2

Seleccione un formulario. En el inspector de propiedades, escriba: javascript: seguido por el nombre de la funcin del campo Accin: por ejemplo, javascript:processForm(). No ponga espacio entre los dos puntos y el nombre de la funcin.

Se pueden gestionar muchas tareas de proceso de formularios mediante secuencias de comandos en la parte del cliente, pero no se pueden guardar los datos introducidos por el usuario ni enviarlos a otra persona. Para hacer esto, se necesita una aplicacin en la parte del servidor, como una secuencia de comandos Common Gateway Interface (CGI). Las secuencias de comandos CGI pueden escribirse en Perl, C, Java o en otros lenguajes de programacin. Hay varios sitios en la Web que ofrecen secuencias de comandos CGI gratuitas, que se pueden usar tal como estn o modicarlas para adaptarlas a las necesidades concretas. Consulte Recursos HTML. Tambin le puede preguntar a su proveedor de servicio Internet o equipo responsable del sitio Web si hay secuencias de comandos CGI ya conguradas para ser ejecutadas en su servidor que usted pueda usar.

Crear formularios

247

248

Captulo 14

15

CAPTULO 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Reutilizar elementos de pgina

Introduccin a la reutilizacin de elementos de pgina

La mayora de los sitios Web tienen contenido que aparece en todas las pginas del sitio (como el encabezado y el pie de pgina) o contenido que aparece slo en algunas pginas pero que se tiene que actualizar con frecuencia (como titulares de noticias u ofertas especiales). Dreamweaver ofrece dos formas de manejar los contenidos repetitivos para que no sea necesario cambiarlos en cada pgina del sitio: Los elementos de biblioteca son adecuados para todos los sitios y deben usarse siempre para aquellos sitios que se ven localmente. Consulte Usar elementos de biblioteca en la pgina 250. Las Server-Side Includes solamente pueden usarse para sitios que se ven desde un servidor, y slo en servidores que estn congurados para procesar ServerSide Includes. (Consulte con su administrador de Web o del sistema, si no est seguro de que su servidor Web admita Server-Side Includes.) Consulte Usar Server-Side Includes en la pgina 256.

249

Usar elementos de biblioteca

Use elementos de biblioteca para el contenido que aparece en muchas pginas del sitio y para el que debe actualizarse con frecuencia. Al colocar un elemento de biblioteca en un documento se inserta una copia del cdigo HTML en el archivo y se crea una referencia con el elemento original externo. La referencia con el elemento externo de la biblioteca permite actualizar el contenido en todo el sitio de una sola vez cambiando el elemento de biblioteca y usando despus los comandos de actualizacin del men Modicar > Biblioteca. Dreamweaver almacena elementos de biblioteca en la carpeta Biblioteca, en la carpeta raz local de cada sitio. Se puede denir una biblioteca distinta para cada sitio. (Para obtener ms informacin sobre la carpeta raz local de cada sitio, consulte Crear un sitio local en la pgina 108.) Crear un elemento de biblioteca Se puede crear un elemento de biblioteca a partir de una parte seleccionada del cuerpo de un documento. Cuando se crea un elemento de biblioteca a partir de una parte seleccionada de un documento, Dreamweaver convierte el rea seleccionada en un elemento de biblioteca. Los elementos de biblioteca pueden incluir cualquier elemento de BODY como texto, formularios, imgenes, applets de Java, plug-ins y elementos de ActiveX. Dreamweaver almacena solamente una referencia con los elementos vinculados como imgenes. El archivo original debe permanecer en su ubicacin especicada para que el elemento de biblioteca funcione correctamente. Los elementos de biblioteca tambin pueden contener comportamientos, pero hay unos requisitos especiales para poder editar comportamientos en elementos de biblioteca. Consulte Editar un comportamiento en un elemento de biblioteca en la pgina 253. Los elementos de biblioteca no pueden contener lneas de tiempo u hojas de estilos, ya que el cdigo de estos elementos forma parte del HEAD.
Para crear un elemento de biblioteca: 1

Seleccione una parte de un documento para guardarla como elemento de biblioteca. Lleve a cabo una de estas operaciones: Elija Ventana > Biblioteca y arrastre la seleccin a la paleta de bibliotecas, o haga clic en el botn Crear de la paleta de bibliotecas. Pulse Control (Windows) o Comando (Macintosh) para evitar que la seleccin sea reemplazada por el nuevo elemento de biblioteca. Elija modicar > Agregar objeto a biblioteca.

Introduzca un nombre para el nuevo elemento de biblioteca.

250

Captulo 15

Configurar preferencias de biblioteca Se puede personalizar el color de resaltado de los elementos de biblioteca y mostrar u ocultar el color de resaltado en las preferencias de resaltado.
Para cambiar el color de resaltado de la biblioteca: 1 2

Elija Edicin > Preferencias y despus seleccione Resalto. Haga clic en el cuadro color para seleccionar un color para los elementos de biblioteca. Seleccione la opcin Mostrar para alternar la visualizacin del color de resaltado de la biblioteca. La opcin Ver > Elementos invisibles tambin debe estar activada para que el color de resalto de la biblioteca sea visible en la ventana de documento.

Haga clic en Aceptar para cerrar el cuadro de dilogo Preferencias.

Agregar un elemento de biblioteca a una pgina Cuando se agrega un elemento de biblioteca a una pgina, el contenido real se inserta en el documento junto con una referencia al elemento original. Despus de haberse insertado el contenido, no es necesario que el elemento original est presente para que se muestre.
Para agregar un elemento de biblioteca: 1 2 3

Coloque el cursor en la ventana de documento. Elija Ventana > Biblioteca o haga clic en el botn Biblioteca en el lanzador. Arrastre un elemento de la paleta de bibliotecas a la ventana de documento, o seleccione un elemento y haga clic en Agregar a pgina. Mantenga pulsada la tecla Control (Windows) o Comando (Macintosh) mientras arrastra un elemento fuera de la paleta de bibliotecas para insertar el contenido del elemento sin crear una instancia del elemento en la paleta de bibliotecas.

Reutilizar elementos de pgina

251

Efectuar cambios en un elemento de biblioteca Al editar un elemento de biblioteca se modica el archivo original del elemento. Dreamweaver le ofrece la posibilidad de actualizar el elemento editado en todos los documentos del sitio actual.
Nota: La paleta de estilos y el inspector de lneas de tiempo no estn disponibles cuando se est editando un elemento de biblioteca porque los elementos de biblioteca solamente pueden contener elementos de BODY. El cdigo de lneas de tiempo y de hojas de estilos forma parte del HEAD. De manera similar, el inspector de comportamientos tampoco est disponible porque inserta cdigo en el HEAD as como en el BODY. Si desea instrucciones sobre cmo editar comportamientos en elementos de biblioteca, consulte Editar un comportamiento en un elemento de biblioteca en la pgina 253. Para editar un elemento de biblioteca: 1 2

Elija Ventana > Biblioteca o haga clic en el botn Biblioteca en el lanzador. Seleccione un elemento de biblioteca y haga clic en el botn Abrir, o doble clic en el elemento. Dreamweaver abre una nueva ventana para editar el elemento de biblioteca. Edite el elemento de biblioteca y luego guarde los cambios realizados. En el cuadro de dilogo que aparece, elija si desea actualizar los documentos en el sitio local con el elemento de biblioteca editado. Elija S para actualizar todos los documentos en el sitio local con el elemento de biblioteca editado. Elija No para no cambiar ningn documento hasta que se use el comando Modicar > Biblioteca > Actualizar pgina actual o Actualizar pginas.

3 4

Al actualizar elementos de biblioteca se reemplaza el contenido de un elemento en aquellos documentos que lo incluyan.
Para actualizar un elemento de biblioteca: 1 2

Elija Modicar > Biblioteca > Actualizar pginas. En el cuadro de dilogo que aparece, elija los archivos que desea actualizar. Elija Todo el sitio para actualizar todos los documentos del sitio especicado. Elija Archivos que usan para actualizar todos los documentos que usan el elemento de biblioteca especicado.

Haga clic en Iniciar.

252

Captulo 15

Al cambiar el nombre de un elemento de biblioteca se rompe la conexin entre los elementos que se insertaron con el nombre antiguo y el elemento al que se cambi el nombre.
Para cambiar el nombre de un elemento de biblioteca: 1 2 3

Seleccione un elemento de biblioteca en la paleta de bibliotecas. Haga clic dentro del nombre del elemento. Introduzca un nombre nuevo.

Al eliminar un elemento de biblioteca, desaparece el elemento de la biblioteca, pero no cambia el contenido de ningn documento.
Para eliminar un elemento de biblioteca: 1 2 3

Elija Ventana > Biblioteca o haga clic en el botn Biblioteca en el lanzador. Seleccione un elemento en la paleta de bibliotecas. Haga clic en el botn Eliminar o pulse la tecla Supr.

Hacer elementos de biblioteca editables Para hacer que un elemento de biblioteca se pueda editar en el documento actual, debe romperse el vnculo entre el elemento del documento y la biblioteca. Una vez creada una instancia editable de un elemento de biblioteca, esa instancia no se podr actualizar desde la biblioteca.
Para hacer editable un elemento de biblioteca: 1 2

Seleccione un elemento de biblioteca en el documento actual. Haga clic en Hacer editable en el inspector de propiedades.

Editar un comportamiento en un elemento de biblioteca Cuando se crean elementos de biblioteca que contienen elementos con comportamientos adjuntados, Dreamweaver copia el elemento y su controlador de eventos (el atributo que especica el evento que se buscar y la accin que se llamar cuando tenga lugar el evento) en el archivo de elementos de biblioteca. Dreamweaver no copia las funciones asociadas de JavaScript en el elemento de biblioteca. Lo que hace Dreamweaver, es insertar automticamente las funciones en el HEAD del documento actual (si esas funciones no existen ya) cuando se agrega el elemento de biblioteca al documento.

Reutilizar elementos de pgina

253

Las funciones de JavaScript no se almacenan con el elemento de biblioteca porque son elementos de HEAD y los elementos de biblioteca solamente pueden contener elementos de BODY elements. Por ello, el inspector de comportamientos no estar disponible cuando se est editando un elemento de biblioteca porque slo podr inspeccionarse la mitad del cdigo de comportamiento. Para editar un comportamiento en un elemento de biblioteca, previamente debe hacerse editable el elemento, y luego volver a crearlo despus de efectuar los cambios.
Para editar un comportamiento en un elemento de biblioteca: 1

Abra un documento que contenga el elemento de biblioteca. Anote el nombre del elemento de biblioteca y las etiquetas exactas que contiene. Necesitar esta informacin para llevar a cabo los pasos 8 y 9.

Seleccione el elemento de biblioteca y haga clic en Hacer editable en el inspector de propiedades. Seleccione el elemento al que est adjuntado el comportamiento. Elija Ventana > Comportamientos para abrir el inspector de comportamientos, y luego haga doble clic en la accin que desea cambiar. Para eliminar una accin conjuntamente, seleccinela y pulse Eliminar. En el cuadro de dilogo parmetros que aparece, efecte los cambios necesarios y haga clic en Aceptar. Elija Ventana > Biblioteca para abrir la paleta de bibliotecas. Elimine el elemento de biblioteca original. En la ventana de documento, seleccione los elementos que componen el elemento de biblioteca. Tenga en cuenta que debe seleccionar exactamente los mismos elementos que haba en el elemento de biblioteca original.

3 4

6 7 8

En la paleta de bibliotecas, haga clic en el botn Crear y asigne al nuevo elemento el mismo nombre del elemento que se elimin en el paso 7. Asegrese de usar la misma ortografa y letras maysculas y minsculas. Elija Modicar > Biblioteca > Actualizar pginas. Elija Archivos que usan en el men emergente Consulta. El nombre del elemento de biblioteca debe aparecer en el men emergente contiguo.

10 11

12

Seleccione la opcin Actualizar elementos de biblioteca, y haga clic en Iniciar.

254

Captulo 15

Configurar propiedades de elemento de biblioteca Use las propiedades de elemento de biblioteca para especicar el archivo de origen de un elemento y para hacerlo editable o volverlo a crear despus de editarlo. Haga doble clic en un elemento de biblioteca para abrir el inspector de propiedades. Consulte tambin Introduccin a la reutilizacin de elementos de pgina en la pgina 249. Muestra el nombre de archivo y la ubicacin del archivo de origen del elemento de biblioteca.
Orig Abrir

Abre el archivo de origen del elemento de biblioteca.

Hacer editable Rompe el vnculo entre el elemento de biblioteca seleccionado y su archivo de origen. El contenido del elemento de biblioteca se hace editable, pero esta instancia del elemento ya no se puede actualizar con las funciones de actualizacin de biblioteca.

Sobrescribe el elemento de biblioteca original con la seleccin actual. Use esta opcin para volver a crear elementos de biblioteca si el archivo de biblioteca no est presente, se ha cambiado el nombre del elemento, o si se ha editado el elemento.
Recrear

Usar la paleta de bibliotecas La paleta de bibliotecas muestra todos los elementos que hay en la biblioteca actual junto con los controles de biblioteca que aqu se relacionan. Para agregar elementos a la pgina actual, arrstrelos directamente desde la lista a la pgina o seleccinelos y haga clic en Agregar a pgina. Haga clic en Abrir para efectuar cambios en el elemento. Consulte tambin Introduccin a la reutilizacin de elementos de pgina en la pgina 249. Agrega la seleccin actual de la ventana de documento a la biblioteca como un nuevo elemento.
Crear Eliminar Abrir

Elimina el elemento seleccionado de la biblioteca.

Abre el elemento seleccionado en una nueva ventana para editarlo.

Agregar a pgina Coloca el elemento de biblioteca seleccionado en la pgina, en la

posicin del cursor.

Reutilizar elementos de pgina

255

Usar Server-Side Includes

Las Server-Side Includes (inclusiones de la parte del servidor) son instrucciones para que el servidor incluya el archivo especicado en el documento actual. Debido al hecho de que el proceso de Server-Side Includes se verica en el servidor, el contenido incluido no aparece cuando se abre un documento localmente en un explorador. Sin embargo, es visible si se elige Archivo > Vista previa en el explorador desde dentro de Dreamweaver; esto se debe a que Dreamweaver procesa las instrucciones de la include igual que lo hara un servidor. Al colocar una Server-Side Includes en un documento, solamente se inserta una referencia con el archivo externo. Dreamweaver muestra el contenido de un archivo externo en la ventana de documento, facilitando as la tarea de disear pginas, pero este contenido no se puede editar directamente en un documento. Cualquier cambio que se realice en el archivo externo se reejar automticamente en cada uno de los documentos que lo incluyen.
Para insertar una Server-Side Includes: 1

Elija Insertar > Server-side include o haga clic en el botn Insertar Server-side include en el panel Invisibles de la paleta de objetos. En el cuadro de dilogo que aparece, introduzca la ruta del archivo que desea incluir, o haga clic en el icono de carpeta para examinar y seleccionar el archivo; despus, haga clic en Aceptar.

Ver Server-Side Includes en Dreamweaver Como opcin predeterminada, Dreamweaver procesa todas las Server-Side Includes no condicionales y las muestra en la ventana de documento.
Para cambiar los archivos que se deben procesar o desactivar el procesamiento de Server-Side Includes: 1 2

Elija Edicin > Preferencias > Traduccin. Seleccione Server-Side Includes en la lista de traductores.

256

Captulo 15

Seleccione una de las opciones siguientes para traducir las Server-Side Includes:
En todos los archivos Es la conguracin predeterminada; no hay razn para cambiarla salvo en el caso de que preera no ver el contenido de los archivos incluidos en la ventana de documento. En ningn archivo

Desactiva todo el proceso de Server-Side Includes en

Dreamweaver. Procesa las Server-Side Includes solamente en los archivos que terminan en .stm, .html, .htm, .shtml o .shtm.
En archivos con extensiones En archivos que coincidan con una de estas expresiones Primero explora el documento para buscar coincidencias con las expresiones regulares de la lista y, si encuentra alguna, entonces procesa las Server-Side Includes correspondientes que haya en el documento.

Editar una Server-Side Includes Al igual que los elementos de biblioteca, las Server-Side Includes se seleccionan como una unidad completa en la ventana de documento. A diferencia de los elementos de biblioteca, el HTML contenido en una Server-Side Includes no aparece en el inspector de HTML. En su lugar, aparece la instruccin del servidor actual, cuyo aspecto es similar al siguiente:
<!--#include virtual=/uber/html/footer.html -->

Para editar el contenido asociado con el archivo incluido, debe abrirse el archivo.
Para editar una Server-Side Includes: 1

Seleccione la Server-Side Includes en la ventana de documento o en el inspector de HTML, y haga clic en Editar, en el inspector de propiedades. El archivo incluido se abre en una nueva ventana de documento. Edite lo que sea necesario del archivo y gurdelo. Los cambios efectuados se reejarn inmediatamente en el documento actual y en todos los documentos que se abran posteriormente y que incluyan el archivo.

Reutilizar elementos de pgina

257

258

Captulo 15

16

CAPTULO 16
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Agregar interactividad y animacin

Introduccin a la interactividad y la animacin

Use la interactividad y la animacin en sus pginas Web para ofrecer una respuesta a los visitantes segn se van desplazando y haciendo clic, para captar su inters, para demostrar conceptos, para validar datos de formulario sin establecer contacto con el servidor. Dreamweaver ofrece varias maneras de agregar interactividad y animacin a las pginas: Use los comportamientos para realizar tareas de respuesta a eventos especcos, como por ejemplo, resaltar un botn cuando el usuario pasa por encima de l con el puntero del ratn, validar un formulario cuando el usuario hace clic en el botn Enviar, o abrir una segunda ventana del explorador cuando la pgina principal ha terminado de cargarse. Consulte Introduccin a los comportamientos en la pgina 260. Use lneas de tiempo para crear animaciones que no necesitan plug-ins, controles de 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 llamar automticamente acciones de comportamiento cuando la pgina ha terminado de cargarse. Consulte Animar con HTML dinmico en la pgina 288. Use applets de Java, pelculas Shockwave, pelculas de Flash Player, o cualquier otro control de ActiveX o plug-in de Netscape en una pgina para agregar pelculas autnomas, esquemas de exploracin interactivos, y otros elementos multimedia a su pgina. Consulte Agregar pelculas, applets y otros elementos multimedia en la pgina 299.

259

Introduccin a los comportamientos

Un comportamiento es una combinacin de un evento y una accin. Las acciones son secuencias de comandos de Java ya denidos que realizan tareas especcas, como abrir la ventana de un explorador, reproducir un sonido o detener una pelcula Shockwave. Los eventos son denidos por el explorador para cada elemento de pgina; por ejemplo, onMouseOver, onMouseOut y onClick son eventos asociados con vnculos en la mayora de los exploradores, mientras que onLoad es un evento asociado con imgenes y el cuerpo del documento. Al adjuntar un comportamiento a un elemento de una pgina, debe especicar tanto la accin como el evento que la activa. Varias acciones pueden ser activadas por un mismo evento, y se puede especicar el orden en que se desea que esas acciones se veriquen. Dreamweaver incluye varias acciones de comportamiento; pueden encontrarse otras acciones en el apartado Extensibility Exchange, de Dreamweaver Developers Center, as como en los sitios Web de otros fabricantes. Consulte Descargar e instalar comportamientos de terceros en la pgina 263. Si dispone de los conocimientos necesarios de JavaScript, tambin puede escribir sus propias acciones de comportamiento. Si desea ms informacin sobre cmo escribir las acciones de comportamiento, consulte Introduccin a la ampliacin de Dreamweaver. Adjuntar un comportamiento Se pueden adjuntar comportamientos al documento completo (a la seccin BODY) o a vnculos, imgenes, elementos de formulario, o a cualquier otro elemento HTML. Cules son los elementos que aceptan comportamientos depende del explorador. Internet Explorer 4.0, por ejemplo, tiene una gama de eventos para cada elemento mucho ms amplia que Netscape Navigator 4.0, o que la versin 3.0 de cualquier otro explorador. Se puede especicar ms de una accin para cada evento. Las acciones se verican en el orden en que aparecen en la lista. Si desea informacin sobre la manera de cambiar el orden de las acciones, consulte Cambiar un comportamiento en la pgina 262.

260

Captulo 16

Para adjuntar un comportamiento: 1

Seleccione un objeto. Para adjuntar un comportamiento a la pgina completa, haga clic en la etiqueta <body> en el selector de etiquetas, que se encuentra en la parte inferior izquierda de la ventana de documento.

Elija Ventana > Comportamientos para abrir el inspector de comportamientos, o haga clic en el botn comportamiento del lanzador. La etiqueta HTML del objeto seleccionado aparece en la barra de ttulo. Haga clic en el botn ms y elija una accin en el men emergente Acciones. Las acciones que no funcionen en el documento actual no estarn disponibles en el men. Por ejemplo, la accin Reproducir lnea de tiempo no estar disponible si el documento no tiene lneas de tiempo. Dependiendo de la accin elegida, 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 incluidas en el programa funcionan con las versiones 4.0 o posteriores de los exploradores. Algunas acciones no funcionan en los exploradores antiguos. Consulte Usar las acciones de comportamiento incluidas con Dreamweaver en la pgina 264.

El evento predeterminado de la accin aparece en la columna Eventos. Si este no es el evento que desea, seleccione otro en el men emergente Eventos. Los eventos que aparecern sern distintos segn el objeto seleccionado y los exploradores especicados en el men emergente Eventos para. Si no aparecen los eventos esperados, asegrese de que est seleccionado el objeto correcto, o cambie los exploradores de destino en el men emergente Eventos para. Al adjuntar un comportamiento a una imagen, algunos eventos como onMouseOver y onMouseDown 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 denir un vnculo. No borre el signo de nmero (#) que aparece posteriormente en el cuadro Vnculo en el inspector de propiedades, porque si lo hiciera eliminara el comportamiento. Si lo desea, puede sustituir el signo de nmero por un nuevo valor de vnculo.

Agregar interactividad y animacin

261

Cambiar un comportamiento Despus de adjuntar un comportamiento, se puede cambiar el evento que desencadena la accin, agregar o eliminar acciones, y cambiar los parmetros de las acciones.
Para cambiar un comportamiento: 1 2

Seleccione un objeto con un comportamiento adjuntado. Elija Ventana > Comportamientos para abrir el inspector de comportamientos. Los comportamientos aparecern en el inspector ordenados alfabticamente por eventos. Si hay varias acciones para un mismo evento, las acciones aparecen en el orden en que se ejecutarn.

Elija una de las opciones siguientes: para eliminar un comportamiento, seleccinelo y haga clic en el botn menos o pulse Eliminar. Para cambiar los parmetros de una accin, haga doble clic en el comportamiento (o seleccinelo y pulse la tecla Entrar), cambie los parmetros en el cuadro de dilogo, y luego haga clic en Aceptar. para cambiar el orden de las acciones de un evento dado, seleccione el comportamiento y haga clic en los botones Arriba o Abajo.

Crear nuevas acciones Las acciones son elementos de JavaScript. Si posee los conocimientos sucientes de JavaScript, puede escribir nuevas acciones y hacer que aparezcan en el men emergente Acciones en el inspector de comportamientos. Consulte Introduccin a la ampliacin de Dreamweaver. Inspector de comportamientos Use el inspector de comportamientos para adjuntar comportamientos de JavaScript a objetos y para modicar los parmetros de otros comportamientos previamente adjuntados. Los comportamientos se muestran en una lista ordenada alfabticamente por eventos. Si hay varias acciones para un mismo evento, las acciones aparecen en el orden en que se ejecutarn. Las etiquetas que controlan la seleccin actual aparecen en la parte superior del inspector. Para abrir el inspector de comportamientos, elija Ventana > Comportamientos o haga clic en el botn Comportamiento del lanzador. Consulte tambin Introduccin a los comportamientos en la pgina 260.

262

Captulo 16

Acciones (+)

Muestra una lista de las acciones que pueden ejecutarse. Cuando se elige una accin, aparece un cuadro de dilogo con sus parmetros.
Eliminar ()

Elimina la accin actual de la lista de Acciones.

Especica los exploradores en los que deber funcionar el comportamiento actual. La seleccin que se realiza en este men determina los eventos que aparecern en el men emergente Eventos.
Eventos para Eventos Muestra todos los eventos que pueden desencadenar la accin. Aparecern

distintos eventos dependiendo del objeto seleccionado. Si no aparecen los eventos esperados, asegrese de que est seleccionado el objeto correcto. Use el selector de etiquetas, que se encuentra en la parte inferior izquierda de la ventana de documento, para seleccionar una etiqueta determinada.
Nota: El men emergente Eventos solamente aparecer despus de haber seleccionado una accin.

Los distintos exploradores reconocen eventos diferentes para los diversos objetos. Elija los exploradores en los que desea que el comportamiento funcione en el men emergente Mostrar eventos para. En el men Eventos aparecern solamente aquellos eventos reconocidos por los exploradores que se hayan seleccionado. y Abajo Desplazan la accin seleccionada arriba o abajo en la lista de comportamientos. Las acciones se ejecutan en el orden especificado.
Flechas Arriba

Descargar e instalar comportamientos de terceros Una de las caractersticas ms interesantes de Dreamweaver es su capacidad de ampliacin, esto es, que ofrece al usuario con sucientes conocimientos de JavaScript la oportunidad de crear sus propios objetos, comportamientos, comandos e inspectores de propiedades. Muchos de los usuarios han optado por compartir sus trabajos de desarrollo con otros para lo que han enviado archivos a Extensibility Exchange, en el sitio Web de Dreamweaver (http:// www.dreamweaver.com/). Pueden encontrarse las instrucciones para descargar estos archivos de ampliacin en Extensibility Exchange.
Para instalar un comportamiento de otro proveedor en su copia de Dreamweaver: 1

Extraiga el archivo o archivos de comportamientos del archivo descargado, mediante una herramienta de extraccin o descompresin. Por ejemplo, WinZip (Windows) o ZipIt (Macintosh) pueden abrir los archivos zip que estn disponibles en Extensibility Exchange.

Arrastre los archivos extrados a la carpeta Conguracin/Comportamientos/ Acciones, de la carpeta de la aplicacin Dreamweaver. Reinicie Dreamweaver.

Agregar interactividad y animacin

263

Usar las acciones de comportamiento incluidas con Dreamweaver

las acciones de comportamiento incluidas con Dreamweaver han sido creadas para funcionar con la versin 4.0 de todos los exploradores. Algunas acciones no funcionan en los exploradores antiguos. En la siguiente tabla puede encontrar informacin sobre la manera en que funcionan las acciones en los distintos exploradores. Al hacer clic en el nombre de una accin, acceder a una explicacin de lo que esta accin lleva a cabo y de la manera de elegir sus posibles opciones.
Macintosh Accin Netscape 2.x Netscape 3.x Internet Explorer 3.0 Internet Explorer 3,01 Windows Netscape 2.x Netscape 3.x Internet Explorer 3.0 Internet Explorer 3,01

Llamar JavaScript Cambiar OK; falla propiedad sin error para objetos en capas Compro- OK bar explorador Comprobar plugin Controlar Shockwave o Flash Controlar sonido OK OK; falla sin error para objetos en capas OK Falla sin error OK OK; falla sin error para objetos en capas OK OK; falla sin error para objetos en capas OK OK OK

OK

OK

OK

OK

OK

Falla sin error Falla sin error

OK

OK

OK

OK

OK

Falla sin error

OK

Falla sin error

Falla sin error

OK

Falla sin error

Falla sin error

Error

OK OK

Falla sin error Falla sin error Falla sin error Falla sin error

Falla sin error OK

Falla sin error Falla sin error Falla sin error OK

OK OK

Falla sin error OK

Falla sin error OK

Mostrar Falla sin mensaje error de estado Arrastrar capa Ir a URL Falla sin error

Falla sin error

Falla sin error OK

Falla sin error OK

Falla sin error OK

Falla sin error OK

Ir a URL OK en un marco funciona, pero Ir a URL en ventana principal falla sin error si se ha aplicado a un vnculo.

264

Captulo 16

Macintosh Accin Netscape 2.x Netscape 3.x Internet Explorer 3.0 Falla sin error Internet Explorer 3,01 OK

Windows Netscape 2.x Netscape 3.x Internet Explorer 3.0 OK Internet Explorer 3,01 OK

Abrir ven- Falla sin tana del error explorador Mensaje emergente OK

OK

OK

OK

OK

Falla sin error Falla sin error Falla sin error Falla sin error Falla sin error

OK

OK

OK

OK

OK

Carga pre- Falla sin via de error imgenes MostrarOcultar capas Intercambiar imagen Restaurar imagen intercambiada Validar formulario Falla sin error Falla sin error Falla sin error

OK

OK

Falla sin error Falla sin error Falla sin error Falla sin error

OK

Falla sin error Falla sin error Falla sin error Falla sin error

Falla sin error Falla sin error Falla sin error Falla sin error

Falla sin error OK

Falla sin error OK

Falla sin error OK

OK

OK

OK

Falla sin error

OK

Falla sin error

OK

Falla sin error Error

OK

Falla sin error

Falla sin error Falla sin error

Reprodu- Error cir lnea de tiempo Detener lnea de tiempo Ir a marco de lnea de tiempo

La anima- Falla sin cin de error las imgenes de origen y la llamada a los comportamientos funcionan, pero la animacin de capas falla sin error.

Falla sin error

La anima- Falla sin cin de error las imgenes de origen y la llamada a los comportamientos funcionan, pero la animacin de capas falla sin error.

Agregar interactividad y animacin

265

Llamar JavaScript La accin Llamar JavaScript permite usar el inspector de comportamientos para especicar que debe ejecutarse una funcin personalizada o lnea de cdigo JavaScript cuando se produzca un evento determinado.
Para usar la accin Llamar JavaScript: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Llamar JavaScript en el men emergente Acciones. Escriba el cdigo JavaScript exacto que se ejecutar o el nombre de una funcin.
0){history.back()}.

2 3

Por ejemplo, para crear un botn Atrs, podra escribir if (history.length > Si ha encapsulado el cdigo en una funcin, escriba solamente el nombre de la funcin (por ejemplo, goBack()). 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 explorador de destino en el men emergente Eventos para.

4 5

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 explorador. Son muchas ms las que JavaScript puede cambiar en Microsoft Internet Explorer (IE) 4.0 que en IE 3.0 o Netscape Navigator 3.0 o 4.0.
Nota: No es recomendable usar esta accin si no se tienen buenos conocimientos de HTML y JavaScript.

266

Captulo 16

Para usar la accin Cambiar propiedad: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Cambiar propiedad en el men emergente Acciones. Seleccione el tipo de objeto cuya propiedad deseara cambiar en el men emergente Tipo de objeto. Al elegir un tipo de objeto el men emergente Objeto con nombre muestra todos los objetos con nombre del tipo seleccionado.

2 3

4 5

Seleccione un objeto especco en el men emergente Objetos 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 explorador, elija diferentes exploradores en el men emergente Explorador. Si se est introduciendo una propiedad manualmente, asegrese de usar el nombre exacto en JavaScript de la propiedad (y recuerde que las propiedades de JavaScript distinguen maysculas de minsculas).

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. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el explorador de destino en el men emergente Eventos para.

Comprobar explorador Use la accin Comprobar explorador para enviar a los visitantes a distintas pginas, dependiendo de las marcas y versiones de sus exploradores. Por ejemplo, podra querer que los usuarios fueran a una pgina si su explorador fuera Netscape Navigator 4.0 o una versin posterior, que fueran a otra pgina si tuvieran Microsoft Internet Explorer 4.0 o una versin posterior, y que permanecieran en la pgina actual si tuvieran un explorador de algn otro tipo. Resulta til adjuntar este comportamiento a la etiqueta de BODY de una pgina que es compatible con prcticamente cualquier explorador (y que no usa ninguna otra secuencia JavaScript); de esta manera, los visitantes que llegan a la pgina con JavaScript desactivado podrn ver algo. Otra posibilidad consiste en adjuntar este comportamiento a un vnculo nulo (etiqueta A) y que la accin determine la pgina a la que ir el vnculo, de acuerdo con la marca y versin del explorador que tenga el visitante.

Agregar interactividad y animacin

267

Para usar la accin Comprobar explorador: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Comprobar explorador en el men emergente Acciones. Determine el criterio de separacin que desea aplicar a los visitantes: por marca de explorador, por versin de explorador, o por ambas. Por ejemplo, desea que todos los que tengan un explorador de la versin 4.0 vean una pgina, y los dems vean otra pgina distinta? Desea que los usuarios de Netscape Navigator vean una pgina y los usuarios de Microsoft Internet Explorer (IE) vean otra distinta? O, desea tal vez que los usuarios de Navigator 4.0 e IE 4.0 vean una pgina, los usuarios de Navigator 2.0 o 3.0 vean otra, y los usuarios de IE 3.0 u otro explorador permanezcan en la pgina en la que se encuentran?

2 3

4 5

Especique una versin de Netscape Navigator. En los mens emergentes contiguos, elija las opciones sobre lo que debe ocurrir si el explorador es de la versin especicada o posterior, y lo que debe ocurrir en caso contrario. Las opciones son Ir a URL, Ir a URL Alt y Permanecer en esta pgina. especique una versin de Microsoft Internet Explorer. En los mens emergentes contiguos, elija las opciones sobre lo que debe ocurrir si el explorador es de la versin especicada o posterior, y lo que debe ocurrir en caso contrario. Las opciones son Ir a URL, Ir a URL Alt y Permanecer en esta pgina. Elija una opcin en el men emergente Otros exploradores para especicar lo que debe ocurrir si el explorador no es Netscape Navigator ni Microsoft Internet Explorer. Permanecer en esta pgina es la mejor opcin para los exploradores 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 todas formas.

6 7

Introduzca las rutas y los nombres de archivo del URL y del URL alternativo en los campos de texto que hay en la parte inferior del cuadro de dilogo. Haga clic en Aceptar.

10

268

Captulo 16

11

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 explorador de destino en el men emergente Eventos para. Recuerde que el objetivo de este comportamiento es comprobar las distintas versiones de los exploradores, por lo que lo mejor es elegir un evento que funcione tanto en la versin 3.0 como en la 4.0 de los exploradores.

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. Por ejemplo, podra querer que los usuarios vayan a una pgina si tienen Shockwave, y a otra distinta si no lo tienen.
Nota: Con JavaScript no se pueden detectar los plug-ins especcos en Microsoft Internet Explorer (IE); sin embargo, en el caso de los plug-ins que van acompaados de controles ActiveX (como ocurre con Shockwave y Flash), no es necesario comprobar si un plug-in est instalado si se han usado las etiquetas OBJECT y EMBED para incluir el contenido en la pgina. En este caso, seleccione la opcin Ir al primer URL si est disponible ActiveX. Anule la seleccin de la opcin si no est usando la etiqueta OBJECT o si el plug-in no va acompaado por ningn control ActiveX. Para usar la accin Comprobar plug-in: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Comprobar plug-in en el 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. Debe usarse el nombre exacto del plug-in como es indica en negrita en la pgina About Plug-ins en Netscape Navigator (desde Navigator, elija Help > About Plug-ins en Windows, o men Apple > About Plug-ins en Macintosh).

2 3

Especique un URL en el campo URL, para los usuarios que tienen el plug-in instalado. Para hacer que los usuarios que tienen el plug-in permanezcan en la misma pgina, deje vaco el campo URL.

Especique un URL alternativo en el campo URL Alt, para los usuarios que no tienen el plug-in instalado. Para hacer que los usuarios que no tienen el plug-in permanezcan en la misma pgina, deje vaco el campo URL.

Agregar interactividad y animacin

269

Seleccione la opcin Ir al primer URL si est disponible ActiveX, si est usando las dos etiquetas OBJECT y EMBED. Debido a que la etiqueta OBJECT descarga el control ActiveX automticamente si el usuario no lo tiene todava, esta opcin permite al usuario ir a la pgina con el contenido del plug-in. Actualmente, ActiveX solamente est disponible en Microsoft Internet Explorer para Windows 95/NT.

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 explorador de destino en el men emergente Eventos para.

Control Shockwave or Flash Use la accin Controlar Shockwave o Flash para reproducir, detener, rebobinar o ir a un marco de una pelcula Shockwave o Flash.
Para usar la accin Controlar Shockwave o Flash: 1

Elija Insertar > Shockwave o Insertar > Flash para insertar una pelcula Shockwave o Flash Player, respectivamente. Elija Ventana > Propiedades e introduzca un nombre para la pelcula en el campo de introduccin de texto situado ms a la izquierda. Debe asignarse un nombre a la pelcula para poder adjuntarla a la accin Controlar Shockwave o Flash. Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Controlar Shockwave o Flash en el men emergente Acciones. Seleccione una pelcula en el men emergente Objeto Shockwave. Automticamente, Dreamweaver presenta una lista de todos los archivos que terminan en .dcr, .dir, .swf, o .spl que estn en las etiquetas OBJECT o EMBED en el documento actual.

4 5

Elija reproducir, detener, rebobinar o ir a una secuencia de la pelcula. Reproducir reproduce la pelcula desde el marco actual. 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 explorador de destino en el men emergente Eventos para.

7 8

270

Captulo 16

Controlar sonido Use la accin Controlar sonido para reproducir o detener un sonido. Por ejemplo, podra querer reproducir un efecto sonoro siempre que el usuario pase el puntero del ratn por encima de un vnculo, o reproducir una secuencia musical cuando la pgina se carga y dejar que el usuario detuviera la msica haciendo clic en un botn.
Nota: Los exploradores pueden necesitar el plug-in LiveAudio u otro equivalente, para reproducir sonidos. Para usar la accin Controlar sonido: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Controlar sonido en el men emergente Acciones. Lleve a cabo una de estas operaciones: Para usar la accin de reproducir un sonido, introduzca la ruta y el nombre de un archivo de sonido en el campo Reproducir sonido, o haga clic en el botn Examinar para seleccionar un archivo. Para usar la accin de detener un sonido, seleccione la accin Detener sonido y luego elija un archivo de sonido en el men emergente contiguo.

2 3

4 5

Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento del men emergente. Si los eventos que busca no aparecen en la lista, cambie el explorador de destino en el men emergente Eventos para.

Agregar interactividad y animacin

271

Mostrar mensaje de estado La accin Mostrar mensaje de estado muestra un mensaje en el barra de estado, que se encuentra en la parte inferior de la ventana del explorador. Por ejemplo, puede usar esta accin para describir el destino de un vnculo en la barra de estado en lugar de mostrar el URL son el que est asociado. Para ver un ejemplo de mensaje de estado, pase el ratn por encima de cualquiera de los botones de navegacin de las Pginas de ayuda de Dreamweaver.
Para usar la accin Mostrar mensaje de estado: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Mostrar mensaje de estado en el men emergente Acciones. Introduzca el mensaje en el campo Mensaje. El campo mensaje tiene un tamao deliberadamente pequeo para recordarle que el mensaje tiene que ser conciso. El explorador cortar el mensaje si no cabe en la barra de estado.

2 3

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 explorador de destino en el men emergente Eventos para.

Arrastrar capa La accin de Arrastrar capa permite al usuario arrastrar una capa. Use esta accin para crear puzzles, controles deslizantes y otros elementos mviles de interfaz de usuario. Se puede especicar la direccin en la que el usuario puede arrastrar la capa (horizontalmente, verticalmente, o en cualquier direccin), un destino hasta el que el usuario debe arrastrar la capa, si la capa se ajustar al destino si aquella se encuentra a un cierto nmero de pxeles del destino, qu suceder cuando la capa llegue al destino y otros detalles. Dado que la accin Arrastrar capa debe ser llamada antes de que la capa pueda ser arrastrada por el usuario, asegrese de que el evento que desencadena la accin se produzca antes de que el usuario intente arrastrar la capa. Se recomienda adjuntar la accin Arrastrar capa al objeto BODY con el evento onLoad aunque tambin se puede adjuntar a un vnculo que llene toda la capa (como, por ejemplo, un vnculo alrededor de una imagen) usando el evento onMouseOver.

272

Captulo 16

Para usar la accin Arrastrar capa: 1

Elija Insertar > Capa o haga clic en el botn Capa en la paleta de objetos y arrastre una capa a la ventana de documento. Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Arrastrar capa en el 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 ambos exploradores, se debe seleccionar un objeto diferente, como la etiqueta BODY o un vnculo (etiqueta A), o cambiar el explorador de destino a IE 4.0 en el men emergente Eventos para.

4 5

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 (expresados 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 solamente el movimiento horizontal, introduzca valores positivos para Izquierda y Derecha, y 0 para Arriba y Abajo.

Introduzca valores (expresados en pxeles) en los campos Izquierdo y Superior para denir el destino de la capa. El destino de la capa es la zona hasta la que usted desea que el usuario 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 explorador. Haga clic en la opcin Obtener posicin actual para que en los campos se muestre la posicin actual de la capa.

Introduzca un valor (expresado en pxeles) en el campo Ajustar si cerca, para determinar lo cerca del destino que el usuario tiene que soltar la capa para que esta se ajuste al destino. Los valores grandes facilitan al usuario la operacin de encontrar el destino para soltar la capa.

Agregar interactividad y animacin

273

Para puzzles simples y manipulacin de escenarios, puede detenerse aqu. Para denir el manejador de arrastre de una capa, siga el movimiento de una capa mientras est siendo arrastrada, y desencadene una accin cuando se suelte la capa, haga clic en Ms opciones. Para denir una zona determinada de la capa en la que se debe hacer clic para poderla arrastrar, elija rea en capa en el men emergente Manejador de arrastre, e 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 de dentro de la capa contiene un elemento que sugiere la posibilidad de arrastrarla, como una barra de ttulo o un asa de cajn. No congure esta opcin si desea que el usuario pueda hacer clic en algn lugar de la capa para arrastrarla.

10

11

Si lo desea, puede elegir una de las siguientes opciones Mientras arrastra: Seleccione Traer capa a primer plano si la capa debe desplazarse a la primera posicin en el orden de apilamiento mientras se est arrastrando. Si selecciona esta opcin, elija si desea dejar la capa en la primera posicin o devolverla a su posicin original en el orden de apilamiento en el men emergente. 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 crear 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. Consulte Recopilar informacin sobre la capa desplazable en la pgina 275.

12

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 ajustado si el cdigo JavaScript debe ejecutarse solamente si la capa ha llegado 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 explorador de destino en el men emergente Eventos para. Recuerde que, como las versiones 3.0 de los exploradores no admiten capas, las versiones 4.0 de los exploradores, IE 4.0, y Netscape 4.0 son las nicas opciones posibles.

13 14

Nota: No se puede adjuntar la accin Arrastrar capa a un objeto con el evento onMouseDown.

274

Captulo 16

Recopilar informacin sobre la capa desplazable Cuando se adjunta la accin Arrastrar capa a un objeto, Dreamweaver inserta la funcin MM_dragLayer() en el HEAD del documento. Adems de registrar la capa como desplazable, esta funcin dene tres propiedades para cada capa desplazableMM_LEFTRIGHT, MM_UPDOWN, y MM_SNAPPEDque se usted puede usar en su propias funciones de JavaScript para determinar la posicin horizontal actual de la capa, la posicin vertical actual de la capa, y si la capa ha alcanzado el destino donde debe ser soltada. 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 Netscape Navigator como en Microsoft Internet Explorer.)
function getPos(containingLayer,nestedLayer){ var layerRef = ((navigator.appName=='Netscape')?document.layers[containingLayer].document.layers[nest edLayer]:document.all[nestedLayer]); 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, se 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 se debe soltar la capa, o tambin se puede llamar otra funcin para que muestre u oculte una capa dependiendo del valor. Los nicos limites de la reaccin al valor de MM_UPDOWN o MM_LEFTRIGHT son su imaginacin y sus conocimientos de JavaScript. Resulta especialmente til leer la propiedad MM_SNAPPED cuando se tienen varias capas en la pgina, todas las cuales tienen que alcanzar sus objetivos antes de que el usuario pueda pasar a la prxima pgina o tarea. Por ejemplo, se puede crear una funcin para determinar cuntas capas tienen un valor MM_SNAPPED de TRUE y llamarlas cada vez que se suelta una capa. Cuando el recuento de capas ajustadas alcanza el nmero deseado, entonces se puede enviar al usuario a la pgina siguiente o presentarle un mensaje emergente de felicitacin. Si se ha adjuntado la accin Arrastrar capa a vnculos de varias capas usando el evento onMouseOver debe efectuarse un cambio menor en la funcin MM_dragLayer() para evitar que a la propiedad MM_SNAPPED de una capa ajustada se le asigne el valor FALSE si se pasa por encima el ratn (esto puede ocurrir si se ha usado la accin Arrastrar capa para crear un puzzle grco, ya que es muy probable que el usuario pase por encima de las piezas acopladas mientras va colocando las dems). MM_dragLayer() no se escribi para evitar este comportamiento puesto que, a veces, es deseable (por ejemplo, si se desean establecer mltiples destinos para soltar una sola capa.

Agregar interactividad y animacin

275

Para evitar que se vuelvan a registrar las capas ajustadas: 1 2 3 4

Elija Edicin > Buscar. Seleccione el origen del cdigo HTML en el men emergente Buscar. Tipo (!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 encuentra una instruccin con el siguiente contenido:
if (!curDrag) return false;

Cierre el cuadro de dilogo Buscar y luego modique la instruccin en el inspector de HTML, para que quede de la siguiente forma:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;

Las dos barras paralelas verticales (||) signican "o", y curDrag es una variable que representa la capa que se est registrando como desplazable. En ingls, la instruccin signica si curDrag no es un objeto, o si ya tiene un valor MM_SNAPPED no te molestes en ejecutar el resto de la funcin.

276

Captulo 16

Ir a URL La accin Ir a URL abre una nueva pgina en la ventana actual o en el marco especicado. Esta accin resulta especialmente til para cambiar el contenido de dos o ms marcos con un solo clic.
Para usar la accin Ir a URL: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Ir a URL en el men emergente Acciones. Elija un destino para el URL en la lista de seleccin Abrir en. La lista de seleccin automticamente muestra los nombres de todos los marcos del conjunto de marcos actual as como de la ventana principal. Si no hay marcos, la ventana principal es la nica opcin posible.

2 3

Nota: Esta accin puede dar lugar a resultados inesperados si hay algn marco que se llame superior, vaco, auto o padre. A veces, los exploradores confunden estos nombres con los destinos reservados superior, vaco, auto y padre. 4

Introduzca la ruta y el nombre de archivo del documento que desea abrir en el campo URL, o haga clic Examinar para seleccionar un archivo. 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 explorador de destino en el men emergente Eventos para.

5 6 7

Agregar interactividad y animacin

277

Abrir ventana del explorador Use la accin Abrir ventana del explorador para abrir un URL en una nueva ventana. Se pueden especicar las propiedades de la nueva ventana, incluido su tamao, sus atributos (si se puede cambiar su tamao, si tiene barra de mens, etc.), y su nombre Si no se especican los atributos de la ventana, se abrir con el mismo tamao y los mismos atributos de la ventana que la lanz. Al especicar algunos atributos de la ventana automticamente se desactivan 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 herramientas 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 no tendr barra de herramientas de navegacin, ni barra de herramientas de ubicacin, ni barra de estado, ni barra de mens, ni selectores de cambio de tamao, ni barras de desplazamiento.
Para usar la accin Abrir ventana del explorador: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Abrir ventana del explorador en el men emergente Acciones. Introduzca el URL que desea mostrar, o haga clic en Examinar para seleccionar un archivo.

2 3

278

Captulo 16

Congure una o varias de las siguientes opciones:

Anchura ventana Altura ventana

Especica la anchura de la ventana en pxeles.

Especica la altura de la ventana en pxeles.

Barra de herramientas de exploracin Es la la de botones del explorador que incluye Atrs, Adelante, Inicio y Actualizar. Barra de herramientas de ubicacin

Es la la de opciones del explorador que

incluye el campo posicin.

Barra de estado Es la zona gris en la parte inferior de la ventana del explorador

en la que aparecen mensajes (como el tiempo de carga que falta y los URL asociados con los vnculos).
Barra de mens Es la zona de la ventana (Windows) o del escritorio (Macintosh) del explorador en la que aparecen los mens como Archivo, Edicin, Ver, Ir a y Ayuda. Esta opcin debe establecerse explcitamente si desea que los usuarios puedan navegar desde la nueva ventana. Si no se ve esta opcin, el usuario solamente podr cerrar o minimizar la ventana (Windows), o cerrar la ventana y salir de la aplicacin (Macintosh) desde la nueva ventana. Barras de desplazamiento necesarias Especica que debern aparecer las barras

de desplazamiento necesarias 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 Manejador para cambiar tamao tambin est desactivada, los usuarios no tendrn forma alguna de ver el contenido que se extiende ms all del tamao original de la ventana. Especica que el usuario tenga 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 de cambio de tamao que se encuentra en el ngulo superior derecho. Si esta opcin no se establece explcitamente, el botn de cambio de tamao no estar disponible, y el ngulo inferior derecho no se podr arrastrar.
Selectores de cambio de tamao Nombre de ventana

Es el nombre de la nueva ventana. Es imprescindible asignar un nombre a la ventana si se desea poder usarla como destino de vnculos o controlarla con cdigo JavaScript.

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 explorador de destino en el men emergente Eventos para.

Agregar interactividad y animacin

279

Mensaje emergente La accin Mensaje emergente presenta un cuadro de dilogo de alerta de JavaScript con el mensaje que usted desee. Dado que los cuadros de dilogo de alerta de JavaScript slo tienen un botn (Aceptar), esta accin resulta ms adecuada para proporcionar informacin al usuario que para proponerle una eleccin.
Para usar la accin Mensaje emergente: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Mensaje emergente en el 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 explorador de destino en el men emergente Eventos para.

2 3 4 5

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 secuencias de comandos de JavaScript) en la memoria cach del explorador. Esto contribuye a evitar los retrasos debidos a la descarga cuando llega el momento de que aparezcan las imgenes.
Nota: La accin Carga previa de imgenes carga automticamente todas las imgenes resaltadas cuando se selecciona la opcin Carga previa de imgenes en el cuadro de dilogo Intercambiar imgenes, por lo que no es necesario usar la accin Carga previa de imgenes con Intercambiar imgenes.

280

Captulo 16

Para usar la accin Carga previa de imgenes.: 1

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Carga previa de imgenes en el men emergente Acciones. Introduzca la ruta y el nombre de una imagen que desee cargar en el campo Archivo de imagen origen, o haga clic Examinar para seleccionar un archivo de imagen. Haga clic en el botn ms (+), que se encuentra en la parte superior del cuadro de dilogo, para agregar la imagen deseada a la lista Carga previa de imgenes. Se debe hacer clic en el botn ms (+) antes de introducir la siguiente imagen; en caso contrario, la imagen elegida ser reemplazada en la lista por la siguiente imagen que se elija.

2 3

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 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 explorador de destino en el men emergente Eventos para.

7 8

Agregar interactividad y animacin

281

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.
Para usar la accin Mostrar-Ocultar capas: 1

Elija Insertar > Capa o haga clic en el botn Capa en la paleta de objetos y arrastre una capa a la ventana de documento. Repita este paso para crear capas adicionales. Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione 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 exploradores, se debe seleccionar un objeto diferente BODY como la etiqueta (A) o cambiar el explorador de destino a IE 4.0 en el men emergente Eventos para.

4 5

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. 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 explorador de destino en el men emergente Eventos para.

7 8

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.

282

Captulo 16

Para crear una capa de carga previa: 1

Haga clic en el botn Capa en la paleta de objetos y arrastre una capa grande a la ventana de documento. Asegrese de que la capa cubra todo el contenido de la pgina. En la paleta de capas, arrastre el nombre de la capa hasta la primera posicin de la lista de capas para especicar que la capa debe estar encima de todas las dems en el orden de apilamiento. Asigne nombre a la capa de carga en el campo de introduccin de texto situado ms a la izquierda en el inspector de propiedades. Con la capa todava seleccionada, establezca el color de fondo de la capa en el mismo color que tiene el fondo de la pgina del inspector de propiedades.

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, Por favor espere mientras la pgina se carga o Cargando pgina... son mensajes que indican al usuario lo que est ocurriendo, por lo que no creern que la pgina carece de contenido.

Haga clic en la etiqueta <body> en el selector de etiquetas, que se encuentra en el ngulo inferior izquierdo de la ventana de documento. En el inspector de comportamientos, seleccione Mostrar-Ocultar capas en el men emergente Acciones. Seleccione la capa llamada de carga en la lista de Capas con nombre. Haga clic en Ocultar. Haga clic en Aceptar.

8 9 10

Agregar interactividad y animacin

283

Intercambiar imgenes La accin Intercambiar imagen intercambia una imagen por otra cambiando el atributo SRC de la etiqueta IMG. Use esta accin para crear botones de sustitucin y otros efectos de imgenes (incluido el intercambio de ms de una imagen a la vez).
Nota: Como 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 para evitar distorsiones. Para usar la accin Intercambiar imgenes: 1

Elija Insertar > Imagen o haga clic en el botn Imagen en la paleta de objetos para insertar una imagen. En el inspector de propiedades, introduzca un nombre para la imagen en el campo de introduccin de texto situado ms a la izquierda. La accin Intercambiar imgenes funciona igualmente aunque no se asignen nombres a las imgenes (la accin asigna nombres automticamente a las imgenes que no lo tienen, cuando se adjunta el comportamiento a un objeto), pero es ms fcil determinar cul es cada imagen en el cuadro de dilogo Intercambiar imgenes si a todas las imgenes se les ha asignado un nombre previamente.

3 4

Repita los pasos 1 y 2 para insertar ms imgenes. Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Intercambiar imgenes en el men emergente Acciones. Seleccione la imagen cuyo origen desea cambiar en la lista Imgenes. Introduzca la ruta y el nombre de archivo de la nueva imagen en el campo Denir origen como, o haga clic Examinar para seleccionar un archivo de imagen. Repita los pasos 6 y 7 para todas las dems imgenes que desee cambiar. Seleccione la opcin Carga previa de imgenes para cargar las nuevas imgenes en la memoria cach del explorador. Esto contribuye a evitar los retrasos debidos a la descarga cuando llega el momento de que aparezcan las imgenes.

5 6 7

8 9

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 explorador de destino en el men emergente Eventos para.

284

Captulo 16

Restaurar imgenes intercambiadas La accin Restaurar imagen intercambiada restaura el ltimo conjunto de imgenes intercambiadas a sus archivos de origen anteriores. Esta accin se agrega automticamente siempre que se adjunta la accin Intercambiar imagen a un objeto; nunca debera ser necesario seleccionarla manualmente. Validar formulario La accin Validar formulario comprueba el contenido de los campos de texto especicados para asegurarse de que el usuario ha introducido el tipo correcto de datos. Adjunte esta accin a campos de formulario individuales con el evento onBlur para validar los campos segn va rellenando el formulario el usuario, o adjntela al formulario con el evento onSubmit para evaluar varios campos 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 especicados contiene datos no vlidos.
Para usar la accin Validar formulario: 1

Elija Insertar > Formulario o haga clic en el botn Formulario en la paleta de objetos para insertar un formulario Elija Insertar > Objeto Formulario > Campo de texto o haga clic en el botn Campo de texto en la paleta de objetos para insertar un campo de texto. Repita este paso para insertar ms campos de texto. Lleve a cabo una de estas operaciones: Para validar campos individuales segn ve rellenndolos el usuario en el formulario, seleccione un campo de texto y elija Ventana > Comportamientos. Para validar mltiples campos cuando el usuario enva el formulario, haga clic en la etiqueta <form> en el selector de etiquetas, que se encuentra en el ngulo inferior izquierdo de la ventana de documento y elija Ventana > Comportamientos.

4 5

Seleccione Validar formulario en el men emergente Acciones. Lleve a cabo una de estas operaciones: Si est validando campos individuales, seleccione el mismo campo que seleccion en la ventana de documento en la lista de Campos con nombre. Si est validando mltiples campos, seleccione un campo de texto en la lista de Campos con nombre.

Seleccione la opcin Necesario si el campo debe contener algn dato.

Agregar interactividad y animacin

285

Elija una de las siguientes opciones Aceptar: Use Algo si el campo es necesario, pero no tiene que contener un tipo de dato determinado. Si no est seleccionado Necesario, esta opcin carece de sentido (es lo mismo que si la accin no se hubiera adjuntado al campo). 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 desde para comprobar que el campo contiene solamente caracteres numricos dentro de un rango determinado.

Si est validando mltiples campos, repita los pasos 6 y 7 para cada uno de los campos que desee validar. 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 o 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 deja de usar el campo. La diferencia entre ellos es que onBlur se produce independientemente de que el usuario haya escrito o no en el campo, mientras que onChange tiene lugar exclusivamente si el usuario cambia de algn modo el contenido del campo. onBlur es el evento preferible cuando se ha especicado que el campo es Necesario.

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 usuarios 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 usuario 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 la opcin Rep. Autom. en el inspector de lneas de tiempo.

286

Captulo 16

Para usar las acciones Reproducir lnea de tiempo y Detener lnea de tiempo: 1

Elija Ventana > Lnea de tiempo para abrir el inspector de lneas de tiempo y asegurarse de que el documento contenga una lnea de tiempo. Si no se ven barras de animacin de color morado en el inspector de lneas de tiempo, el documento no contiene ninguna lnea de tiempo. Consulte Crear una animacin de lneas de tiempo en la pgina 290.

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Seleccione Reproducir lnea de tiempo o Detener lnea de tiempo en el men emergente Acciones. Seleccione la lnea de tiempo que desea reproducir o detener, o elija detener todas las lneas de tiempo, en el men emergente. 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 explorador de destino en el men emergente Eventos para.

5 6

Ir a marco de lnea de tiempo La accin Ir a marco de lnea de tiempo desplaza el cabezal de reproduccin al marco especicado. Esta accin puede usarse en el canal Behaviour del inspector de lneas de tiempo para hacer que las partes de lnea de tiempo se reproduzcan 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 marco de lnea de tiempo: 1

Elija Ventana > Lnea de tiempo para abrir el inspector de lneas de tiempo y asegurarse de que el documento contenga una lnea de tiempo. Si no se ven barras de animacin de color morado en el inspector de lneas de tiempo, el documento no contiene ninguna lnea de tiempo. Consulte Crear una animacin de lneas de tiempo en la pgina 290.

Siga los pasos del 1 al 3 del procedimiento que se indica en Adjuntar un comportamiento en la pgina 260. Para adjuntar el comportamiento a un marco de la lnea de tiempo, haga clic en el canal Behavior en el marco deseado.

3 4

Seleccione Ir a lnea de tiempo en el men emergente Acciones. Seleccione la lnea de tiempo deseada en el men emergente Lnea de tiempo.

Agregar interactividad y animacin

287

5 6

Introduzca un nmero de marco en el campo Ir a marco. Si est agregando esta accin al canal Behavior de una lnea de tiempo y desea que la parte de la lnea de tiempo comprendida entre Ir a marco y el marco actual se reproduzca en bucle, introduzca en el campo Bucle el nmero de veces que ste deber repetirse. Este campo debe dejarse en blanco si la accin Ir a marco de lnea de tiempo no se est adjuntando a un marco de lnea de tiempo.

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 explorador de destino en el men emergente Eventos para.

Animar con HTML dinmico

Se conoce por HTML dinmico, o DHTML, el lenguaje HTML capaz de cambiar las propiedades de estilo o de ubicacin con un lenguaje de secuencias de comandos. Las lneas de tiempo usan HTML dinmico para cambiar las propiedades de las capas e imgenes en una serie de marcos con el transcurso del tiempo. Use lneas de tiempo para crear animaciones que no necesitan controles de ActiveX, plug-ins, ni applets de Java. Las lneas de tiempo crean la animacin al cambiar la posicin, el tamao, la visibilidad y el orden de apilamiento de una capa con el transcurso del tiempo. Las lneas de tiempo tambin sirven para realizar otras acciones que se desea que ocurran cuando termine de cargarse la pgina. Por ejemplo, las lneas de tiempo pueden cambiar el archivo de origen de una imagen, y pueden ejecutar comportamientos en un momento determinado. Las funciones de capa de las lneas de tiempo solamente funcionan en las versiones 4.0 o posteriores de los exploradores. Abra el inspector de HTML para ver el cdigo JavaScript generado por una lnea de tiempo. El cdigo de lnea de tiempo est en la funcin MM_initTimelines dentro de una etiqueta SCRIPT en el HEAD del documento. Al editar el cdigo HTML de un documento que contenga lneas de tiempo, hay que tener cuidado para no mover, cambiar el nombre o borrar algo que est relacionado con la lnea de tiempo.

288

Captulo 16

Usar el inspector de lneas de tiempo El inspector de lneas de tiempo representa las propiedades de las capas y las imgenes con en transcurso del tiempo. Elija Ventana > Lnea de tiempo, para abrir el inspector de lneas de tiempo. Consulte tambin Animar con HTML dinmico en la pgina 288. Haga clic con el botn derecho del ratn (Windows) o haga clic manteniendo pulsada la tecla Control (Macintosh) en el inspector de lneas de tiempo para abrir un men de acceso directo que incluye todos los comandos importantes. Muestra qu marco de la lnea de tiempo se est visualizando actualmente en la pgina.
Cabezal de reproduccin Men emergente Lnea de tiempo Cabezal de reproduccin

Men emergente Lnea de tiempo

Especica qu lneas de tiempo del documento se mostrarn en el inspector de lneas de tiempo. Muestran barras para animar capas e imgenes.

Canales de animacin

Barras de animacin Muestran la duracin de cada objeto. Una sola la puede incluir mltiples barras en representacin de otros tantos objetos. Barras diferentes no pueden controlar un mismo objeto en el mismo marco.

Son cuadros en una barra en los que se han especicado propiedades del objeto (como posicin, por ejemplo). Dreamweaver calcula valores intermedios para marcos en cuadros clave. Pequeos crculos sealan los cuadros clave.
Cuadros clave

Es el canal de los comportamientos que deben ejecutarse en un marco determinado de la lnea de tiempo.
Canal Behavior

Canal Behavior

Agregar interactividad y animacin

289

Nmero de marcos

Indica el nmero de marcos que ocupa cada barra. El nmero que aparece entre los botones Atrs y Reproducir es el marco actual. La duracin de la animacin se controla estableciendo el nmero total de marcos y el nmero de marcos por segundo (fps). El valor predeterminado de 15 marcos por segundo es una buena velocidad media para usar en la mayora de los exploradores que se ejecutan en sistemas normales Windows o Macintosh. Las velocidades ms altas no mejoran necesariamente los resultados. Los exploradores siempre reproducen todos los marcos de la animacin, incluso aunque en el sistema del usuario no puedan alcanzar la velocidad de marcos por segundo.

Rebobinar

Desplaza el cabezal de reproduccin hasta el primer marco de la lnea

de tiempo. Desplaza el cabezal de reproduccin un marco hacia la izquierda. Haga clic en el botn Atrs y mantngalo pulsado con el ratn para reproducir la lnea de tiempo hacia atrs.
Atrs

Desplaza el cabezal de reproduccin un marco hacia la derecha. Haga clic en el botn Reproducir y mantngalo pulsado con el ratn para reproducir la lnea de tiempo continuamente.
Reproducir Rep. Autom. Inicia automticamente la reproduccin de una lnea de tiempo cuando la pgina actual se carga en un explorador. 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.

Hace que la lnea de tiempo actual se reproduzca en bucle indenidamente mientras la pgina est abierta en un explorador. Bucle inserta el comportamiento Ir a marco de lnea de tiempo en el canal Behavior despus del ltimo marco de la animacin. Haga doble clic en el marcador de este marco para editar los parmetros de este comportamiento y cambiar el nmero de repeticiones en bucle.
Bucle

Crear una animacin de lneas de tiempo Las lneas de tiempo crean la animacin al cambiar la posicin, el tamao, la visibilidad y el orden de apilamiento de las capas. Las lneas de tiempo tambin pueden cambiar los archivos de origen de las imgenes. Las lneas de tiempo solamente pueden mover capas. Para hacer que se muevan imgenes o texto, cree una capa usando la herramienta Capa de la paleta de objetos y luego inserte imgenes, texto o cualquier otro tipo de contenido en la capa. Consulte Crear capas en la pgina 214.

290

Captulo 16

Para crear una animacin de lneas de tiempo: 1

Si desea animar una capa, desplace la capa al lugar donde deber estar cuando se inicie la animacin. Elija Ventana > Lnea de tiempo o haga clic en el botn Lnea de tiempo en el lanzador. Seleccione la capa o imagen que desea animar. Asegrese de haber seleccionado el elemento deseado. Haga clic en el marcador de capa o use la paleta de capas para seleccionar una capa. Consulte tambin Trabajar con capas en la pgina 220. Al seleccionar una capa, a su alrededor aparecen manejadores, como se muestra en la siguiente ilustracin.

Haga clic en el marcador de la capa para seleccionarla

Botn Arrastrar capa Capa seleccionada con una imagen en su interior

Al hacer clic en la propia capa, en su interior aparecer un cursor intermitente, pero no selecciona la capa.
4

Elija Modicar > Agregar objeto a lnea de tiempo, o simplemente arrastre el objeto seleccionado al interior del inspector de 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 o de la imagen. Si est trabajando con una imagen, la nica propiedad que puede cambiar es el archivo de origen de la imagen en el inspector de propiedades. Los pasos restantes no proceden. Consulte Cambiar propiedades de imagen y capa con lneas de tiempo en la pgina 294.

Agregar interactividad y animacin

291

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. Si desea que la capa se desplace describiendo una curva, seleccione su barra de animacin y haga clic manteniendo pulsada la tecla Control (Windows) o manteniendo pulsada la tecla Comando (Macintosh) para agregar un cuadro clave en la posicin del cursor, o haga clic en un marco en medio de la barra de animacin y elija Agregar cuadro clave en el men de acceso directo. Repita este paso para crear denir ms cuadros clave. Mantenga pulsado el botn Reproducir para obtener una vista previa de la animacin en la pgina. Repita el procedimiento para agregar otras capas e imgenes a la lnea de tiempo y para crear una animacin ms compleja.

Crear 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.
Para crear una lnea de tiempo arrastrando una ruta: 1 2

Elija Insertar > Capa, para crear una capa. Desplace la capa al lugar donde deber estar cuando se inicie la animacin. Asegrese de haber seleccionado el elemento correcto. Haga clic en el marcador de capa o use la paleta de capas para seleccionar una capa. Consulte tambin Trabajar con capas en la pgina 220.

3 4 5

Elija Modicar > Ruta grabada de capa. Arrastre la capa por la pgina para crear una ruta. Suelte el botn del ratn en el punto en donde debe detenerse la animacin. Dreamweaver agrega una barra de animacin a la lnea de tiempo con el nmero adecuado de cuadros clave.

En el inspector de lneas de tiempo, haga clic en el botn Rebobinar; luego, mantenga pulsado el botn Reproducir para obtener una vista previa de la animacin.

292

Captulo 16

Modificar lneas de tiempo Despus de denir los componentes bsicos de una lnea de tiempo, se pueden realizar tiles cambios como agregar y eliminar marcos, 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 marco nal. Todos los cuadros clave de la animacin se desplazarn, por lo que sus posiciones relativas permanecern constantes. Mantenga pulsadas las teclas Control (Windows) o Comando (Macintosh) mientras arrastra el marcador del marco nal para evitar que se muevan los dems cuadros clave. 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 todas las barras asociadas con la animacin (pulse 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 ajusta 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 agregar o eliminar cuadros de la lnea de tiempo, elija Modicar > Lnea de tiempo > Agregar marco o Eliminar marco. Para que la lnea de tiempo se reproduzca automticamente cuando la pgina se abra en un explorador, haga clic en Rep. Autom. Rep. Autom. adjunta un comportamiento a la pgina que ejecuta la accin de 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 marco de lnea de tiempo en el canal Behavior despus del ltimo marco de la animacin. Pueden editarse los parmetros de este comportamiento para denir el nmero de repeticiones en bucle que se desean.

Agregar interactividad y animacin

293

Cambiar propiedades de imagen y capa con lneas de tiempo Adems de mover capas con lneas de tiempo, se puede cambiar el archivo de origen de una imagen y la visibilidad, el tamao y el orden de apilamiento de una capa.
Para cambiar las propiedades de imagen y capa con una lnea de tiempo: 1

En el inspector de lneas de tiempo, lleve a cabo una de estas operaciones: Seleccione un cuadro clave de la barra que controla el objeto que desea cambiar. (Los marcos inicial y nal son cuadros clave.) Para crear un nuevo cuadro clave, haga clic en un marco situado en medio de la barra de animacin y elija Modicar > Lnea de tiempo > Agregar cuadro clave o haga clic mientras mantiene pulsada la tecla Control (Windows) o Comando (Macintosh) en un cuadro de la barra de animacin.

Dena nuevas propiedades para el objeto eligiendo una de las siguientes opciones: Para cambiar el archivo de origen de una imagen, haga clic en el icono de la carpeta que aparece junto al cuadro Orig en el inspector de propiedades para examinar y seleccionar una nueva imagen. Para cambiar la visibilidad de una capa, elija Mostrar, Ocultar o Heredada e en el men emergente Visibilidad en el inspector de propiedades. Consulte tambin Cambiar la visibilidad de una capa en la pgina 225. 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. Actualmente, Internet Explorer 4.0 es el nico explorador capaz de cambiar dinmicamente el tamao de una capa. Para cambiar el orden de apilamiento de una capa, introduzca un nuevo valor en el campo ndice Z, o use la paleta de capas para cambiar el orden de apilamiento de la capa actual. Consulte tambin Cambiar el orden de apilamiento de las capas en la pgina 225.

Mantenga pulsado el botn Reproducir para ver la animacin.

La capa actualmente seleccionada siempre est visible y en la primera posicin del orden de apilamiento. Anule la seleccin de todas las capas que estuvieran seleccionadas para que la lnea de tiempo controle el orden de apilamiento o la visibilidad.

294

Captulo 16

Usar 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. La pgina puede incluir tambin elementos interactivos que desencadenen la reproduccin de diferentes lneas de tiempo. Por ejemplo, los botones pueden desencadenar la reproduccin de diferentes animaciones de lneas de tiempo.
Para manejar mltiples lneas de tiempo, use las opciones siguientes:

Para crear una nueva lnea de tiempo, elija Modicar > Lnea de tiempo > Nueva lnea de tiempo. Para eliminar una lnea de tiempo, elija Modicar > Lnea de tiempo > Eliminar lnea de tiempo. Para cambiar el nombre de una lnea de tiempo, elija Modicar > Lnea de tiempo > Cambiar nombre de lnea de tiempo o introduzca un nuevo nombre en el men emergente Lnea de tiempo. Para ver una lnea de tiempo diferente en el inspector de lneas de tiempo, elija una nueva lnea de tiempo en el men emergente Lnea de tiempo, en el inspector de lneas de tiempo. Copiar y pegar animaciones Cuando ya tenga la secuencia de animacin que desea, puede 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 puede copiar y pegar mltiples secuencias de una sola vez.
Para cortar o copiar y pegar secuencias de animacin: 1

Haga clic en una barra de animacin para seleccionar una secuencia. Para seleccionar mltiples secuencias, pulse la tecla Mays mientras hace clic, o pulse Conrtol-A (Windows) o Comando-A (Macintosh) para seleccionar todas las secuencias. Copie o corte la seleccin. Lleve a cabo una de estas operaciones: 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 inspector de lneas de tiempo.

2 3

Agregar interactividad y animacin

295

Pegue la seleccin en la lnea de tiempo. Las barras de animacin de un mismo objeto no pueden solaparse 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 llegase a solaparse con otra barra de animacin del mismo objeto, automticamente Dreamweaver desplazara la seleccin al primer marco en que no se solapase.

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 de acceso directo, y seleccione el nombre de la segunda capa en el men emergente. Si lo desea, puede borrar la capa pegada. Consulte Aplicar una secuencia de animacin a un objeto diferente en la pgina 296. Aplicar una secuencia de animacin a un objeto diferente Para ahorrar tiempo, se puede crear una secuencia de animacin una sola vez y aplicarla a las dems capas del documento.
Para aplicar una secuencia de animacin existente a otros objetos: 1

En el inspector de lneas de tiempo, seleccione la secuencia de animacin que desea copiar, y cpiela. Haga clic en cualquier marco del inspector de lneas de tiempo y pegue la secuencia. Haga clic con el botn derecho del ratn (Windows) o haga clic manteniendo pulsada la tecla Control (Macintosh) en la secuencia de animacin pegada y elija Cambiar objeto en el men de acceso directo. En el cuadro de dilogo que entonces aparece, 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.

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

296

Captulo 16

Usar comportamientos en lneas de tiempo Coloque comportamientos a lneas de tiempo para que se ejecuten en un marco determinado de la lnea de tiempo.
Para colocar un comportamiento en una lnea de tiempo: 1

Haga doble clic en un marco en el canal Behavior, en el inspector de comportamientos. Use el inspector de comportamientos para denir el comportamiento.

El nico evento que puede desencadenar una accin en una lnea de tiempo es el hecho de que la animacin alcance un cierto nmero de marcos; 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 vista previa en un explorador para ver cmo funciona el comportamiento. En Dreamweaver no se puede obtener la vista previa de un comportamiento. Acciones de comportamiento para controlar lneas de tiempo Adjunte las acciones de comportamiento que aqu se indican a un vnculo, botn u otro objeto, para controlar lneas de tiempo. Para crear efectos interesantes, puede colocar comportamientos que contengan estas acciones en el canal Behavior. Por ejemplo, puede conseguir que una lnea de tiempo se detenga por s misma. Consulte tambin Introduccin a los comportamientos en la pgina 260. Hace que la lnea de tiempo salte a un marco determinado. La casilla de vericacin Bucle del inspector de lneas de tiempo, agrega la accin Ir a marco de lnea de tiempo despus del ltimo marco de la animacin; esto hace que vaya al marco 1 y vuelva a iniciarse la animacin.
Ir a marco de lnea de tiempo Reproducir lnea de tiempo Reproduce una lnea de tiempo desde el primer marco.

La casilla de vericacin Rep. Autom. del inspector de lneas de tiempo ejecuta la accin Reproducir lnea de tiempo cuando se carga la pgina.
Detener lnea de tiempo

Detiene una lnea de tiempo.

Cambiar nombre de lneas de tiempo Para cambiar el nombre de la lnea de tiempo que aparece en el inspector de lneas de tiempo, elija Modicar > Lnea de tiempo > Cambiar nombre, e introduzca un nuevo nombre, o introduzca un nuevo nombre en el men emergente Nombre de lnea de tiempo. 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), debe editarse el comportamiento para reejar el nuevo nombre de la lnea de tiempo.

Agregar interactividad y animacin

297

Sugerencias de animacin para lneas de tiempo Las siguientes sugerencias pueden mejorar el resultado de sus animaciones, y facilitar considerablemente la tarea de crearlas: Muestre y oculte capas en lugar de cambiar el archivo de origen en animaciones con mltiples imgenes. Cambiar el archivo de origen de una imagen puede ralentizar la animacin porque 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 falta 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 marco nal de la barra de animacin de la capa para extender el movimiento sobre ms marcos. Al alargar la barra de animacin se crean ms puntos de datos entre los puntos de inicio y de nal del movimiento; esto tambin hace que el movimiento sea ms lento. Intente incrementar el nmero de marcos por segundo (fps) para aumentar la velocidad, pero tenga en cuenta que la mayora de los exploradores 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 exploradores para encontrar la mejor conguracin posible. No anime grandes mapas de bits. Mejore la velocidad de la animacin, pero no moviendo imgenes grandes. En lugar de eso, 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 exploradores actuales. Los exploradores siempre reproducen todos los marcos en una animacin de lnea de tiempo, incluso cuando las prestaciones del sistema o de Internet se reducen.

298

Captulo 16

Agregar pelculas, applets y otros elementos multimedia

Para insertar un applet de Java, una pelcula Shockwave, una pelcula Flash Player, o cualquier otro control ActiveX o plug-in de Netscape en una pgina, coloque el cursor en el lugar donde desea insertar el objeto y luego haga clic en el botn correspondiente de la paleta de objetos. Los botones de la paleta de objetos insertan el cdigo HTML necesario para que el objeto aparezca en la pgina. Use el inspector de propiedades para especicar el archivo de origen, las dimensiones y otros parmetros.
Nota: No existe un estndar universalmente aceptado para identicar los archivos de origen de los controles ActiveX. Consulte la documentacin del control ActiveX que est usando para saber los parmetros que debe emplear.

Insertar 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 exploradores de uso ms frecuente. El software que reproduce las pelculas Shockwave est disponible tanto como plug-in para Netscape como 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 exploradores. Al realizar cambios relativos a la pelcula en el inspector de propiedades, Dreamweaver adapta los datos introducidos a los parmetros adecuados para las dos etiquetas OBJECT y EMBED.
Para insertar una pelcula Shockwave: 1 2 3 4

Coloque el cursor donde desea insertar una pelcula Shockwave. Haga clic en el botn Shockwave en la paleta de objetos. En el cuadro de dilogo que aparece, seleccione un archivo de pelcula. En el inspector de propiedades, introduzca la anchura y la altura de la pelcula en los cuadros An y Al. Estas son las nicas propiedades necesarias. Consulte Propiedades de Shockwave en la pgina 300 para obtener ms informacin sobre las dems propiedades.

Agregar interactividad y animacin

299

Propiedades de Shockwave Para asegurar los mejores resultados tanto en Internet Explorer como en Netscape, Dreamweaver inserta pelculas Shockwave usando las dos etiquetas OBJECT y EMBED. (OBJECT es la etiqueta denida por Microsoft para los controles ActiveX; EMBED es la etiqueta denida por Netscape para plug-ins.) Haga doble clic en una pelcula Shockwave para ver sus propiedades en el inspector de propiedades. Consulte tambin Insertar pelculas Shockwave en la pgina 299. El inspector de propiedades muestra inicialmente las propiedades utilizadas con mayor frecuencia. Haga clic en la echa de ampliacin, situada en el ngulo inferior derecho, para ver todas las propiedades. Especica un nombre para identicar una pelcula en las secuencias de comandos. Introduzca un nombre en el campo sin ttulo que aparece en el extremo izquierdo del inspector de propiedades.
Nombre

Especican la anchura y la altura de la pelcula en pxeles. Tambin se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milmetros), cm (centmetros) o % (porcentaje del valor padre). Las abreviaturas deben seguir al valor sin espacio de separacin: por ejemplo: 3 mm.
An y Al

Especica la ruta del archivo de la pelcula Shockwave. Introduzca un valor o haga clic en la carpeta situada a la derecha del cuadro para examinar.
Archivo

Determina las etiquetas usadas para identicar la pelcula Shockwave. Se puede elegir OBJECT y EMBED recomienda emplear el valor predeterminado, OBJECT y EMBED.
Etiqueta

Determina cmo se alinear la pelcula en la pgina. Consulte Alinear elementos en la pgina 190 para obtener una descripcin de las opciones posibles.
Alinear

Especica un color de fondo para la zona de la pelcula. Este color tambin aparecer cuando la pelcula no se est reproduciendo (mientras se carga y despus de haberse reproducido).
Col. fondo ID Dene Bordes

el parmetro opcional ID ActiveX. El uso ms frecuente de este parmetro es pasar informacin entre controles ActiveX. Especica la anchura del borde alrededor de la pelcula.
Espacio V y Espacio H Especican el nmero de pxeles de espacio blanco que habr por encima y por debajo, y a la derecha y a la izquierda de la pelcula.

(slo para OBJECT) Especica una imagen que se mostrar si el explorador del usuario no admite controles ActiveX.
Imagen alt

Abre un cuadro de dilogo para introducir parmetros adicionales para pasar a la pelcula Shockwave. La pelcula Shockwave debe ser modicada para recibir estos parmetros. Consulte Acerca de parmetros en la pgina 308.
Parmetros

300

Captulo 16

Insertar pelculas de Flash Player La tecnologa Flash de Macromedia es la principal solucin para la reproduccin de grcos y animaciones vectoriales. Flash Player est disponible tanto como plug-in de Netscape como en formato de control ActiveX para Internet Explorer, y ya viene incorporado en las ltimas versiones de Netscape Navigator, Windows 98, y software de conexin a Internet de America Online. Cuando se inserta una pelcula Flash Player, Dreamweaver usa tanto la etiqueta OBJECT (denida por Microsoft para los controles ActiveX), como la etiqueta EMBED (denida por Netscape) para ofrecer los mejores resultados en ambos exploradores. Al realizar cambios relativos a la pelcula en el inspector de propiedades, Dreamweaver adapta los datos introducidos a los parmetros adecuados para las dos etiquetas OBJECT y EMBED.
Para insertar una pelcula Flash Player: 1 2 3 4

Coloque el cursor donde desea insertar la pelcula. Haga clic en el botn Flash Player en la paleta de objetos. En el cuadro de dilogo que aparece, seleccione un archivo de pelcula. En el inspector de propiedades, introduzca la anchura y la altura de la pelcula en los cuadros An y Al. Estas son las nicas propiedades necesarias. Consulte Propiedades de Flash Player en la pgina 301 para obtener ms informacin sobre las dems propiedades.

Propiedades de Flash Player Para asegurar los mejores resultados tanto en Internet Explorer como en Netscape, Dreamweaver inserta pelculas Flash Player usando las dos etiquetas OBJECT y EMBED. (OBJECT es la etiqueta denida por Microsoft para los controles ActiveX; EMBED es la etiqueta denida por Netscape para plug-ins.) Haga doble clic en una pelcula Flash Player para ver sus propiedades en el inspector de propiedades. Consulte tambin Insertar pelculas de Flash Player en la pgina 301. El inspector de propiedades muestra inicialmente las propiedades utilizadas con mayor frecuencia. Haga clic en la echa de ampliacin, situada en el ngulo inferior derecho, para ver todas las propiedades. Especica un nombre para identicar una pelcula en las secuencias de comandos. Introduzca un nombre en el campo sin ttulo que aparece en el extremo izquierdo del inspector de propiedades.
Nombre

Especican la anchura y la altura de la pelcula en pxeles. Tambin se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milmetros), cm (centmetros) o % (porcentaje del valor padre). Las abreviaturas deben seguir al valor sin espacio de separacin: por ejemplo: 3 mm.
An y Al

Agregar interactividad y animacin

301

Archivo

Especica la ruta del archivo de la pelcula Flash Player. Introduzca un valor o haga clic en la carpeta situada a la derecha del cuadro para examinar. Determina las etiquetas usadas para identicar la pelcula. Puede elegir las dos etiquetas OBJECT y EMBED, o cualquiera de las dos. Se recomienda emplear el valor predeterminado , OBJECT y EMBED.
Etiqueta

Determina cmo se alinear la pelcula en la pgina. Consulte Alinear elementos en la pgina 190 para obtener una descripcin de las opciones posibles.
Alinear

Especica un color de fondo para la zona de la pelcula. Este color tambin aparecer cuando la pelcula no se est reproduciendo (mientras se carga y despus de haberse reproducido).
Col. fondo ID Dene Bordes

el parmetro opcional ID ActiveX. El uso ms frecuente de este parmetro es pasar informacin entre controles ActiveX. Especica la anchura del borde alrededor de la pelcula.
Espacio V y Espacio H Especican el nmero de pxeles de espacio blanco que habr por encima y por debajo, y a la derecha y a la izquierda de la pelcula.

(slo para OBJECT) Especica una imagen que se mostrar si el explorador del usuario no admite controles ActiveX.
Imagen alt

Abre un cuadro de dilogo para introducir parmetros adicionales para pasar a la pelcula. La pelcula debe ser modicada para recibir estos parmetros. Consulte Acerca de parmetros en la pgina 308.
Parmetros Calidad Establece el parmetro QUALITY para las etiquetas OBJECT y EMBED que ejecutan la pelcula. Consulte la documentacin de Flash en donde se describen las opciones posibles. Las posibilidades son baja, Baja automtica, Alta automtica y Alta. Escala Establece el parmetro SCALE para las etiquetas OBJECT y EMBED que ejecutan

la pelcula. Consulte la documentacin de Flash en donde se describen las opciones posibles.

Rep. Autom. Bucle

Reproduce automticamente la pelcula cuando se carga la pgina.

Reproduce la pelcula indenidamente.

302

Captulo 16

Insertar y editar objetos Aftershock Aftershock es una utilidad de Macromedia que genera todo el cdigo HTML necesario para reproducir las pelculas de Shockwave o Flash Player. En Dreamweaver se pueden abrir los archivos creados con Aftershock y luego pegar su contenido en otros documentos de Dreamweaver. Para editar objetos Aftershock, instale Aftershock en su sistema y luego incielo desde el inspector de propiedades.
Para insertar objetos Aftershock en Dreamweaver: 1

En Dreamweaver, abra un archivo HTML creado por Aftershock. Los elementos de Aftershock aparecen como objetos no editables en Dreamweaver. Si un objeto incluye una imagen de vista previa, Dreamweaver la mostrar.

Copie el contenido del archivo en otro documento de Dreamweaver.

Para editar un objeto Aftershock: 1

Haga doble clic en un objeto Aftershock para abrir el inspector de propiedades. Haga clic en el botn Iniciar Aftershock. Edite el archivo en Aftershock, guarde los cambios, y salga de la utilidad. Al salir de Aftershock, Dreamweaver actualiza el contenido del objeto Aftershock con la nueva informacin.

2 3

Agregar interactividad y animacin

303

Propiedades de plug-in de Netscape Despus de insertar un plug-in de Netscape, use el inspector de propiedades para establecer los parmetros. Haga doble clic en un plug-in de Netscape para ver sus propiedades en el inspector de propiedades. Consulte tambin Agregar pelculas, applets y otros elementos multimedia en la pgina 299. El inspector de propiedades muestra inicialmente las propiedades utilizadas con mayor frecuencia. Haga clic en la echa de ampliacin, situada en el ngulo inferior derecho, para ver todas las propiedades. Especica un nombre para identicar el plug-in en las secuencias de comandos. Introduzca un nombre en el campo sin ttulo que aparece en el extremo izquierdo del inspector de propiedades.
Plug-in W y H Especican, en pxeles, la anchura y la altura que se ha asignado al objeto en la pgina. Tambin se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milmetros), cm (centmetros) o % (porcentaje del valor padre). Las abreviaturas deben seguir al valor sin espacio de separacin: por ejemplo: 3 mm. Orig Especica el archivo de datos de origen. Introduzca un nombre de archivo, o haga clic en el icono de la carpeta y elija el archivo.

Especica el URL del atributo PLUGINSPAGE. Introduzca el URL completo del sitio desde el que los usuarios pueden descargar el plug-in. Si el usuario que est viendo la pgina no tiene el plug-in, el explorador intentar descargarlo desde este URL.
Url plg

Determina cmo se alinear el objeto en la pgina. Consulte Alinear elementos en la pgina 190 para obtener una descripcin de las opciones posibles.
Alinear Alt Especica el contenido alternativo que se mostrar si el explorador del usuario no es compatible con la etiqueta EMBED. Si se elige una imagen, se procesar usando la etiqueta NOEMBED. Si introduce texto, se procesar con el atributo ALT de la etiqueta EMBED. Espacio V y Espacio H Especican el nmero de pxeles de espacio blanco que habr por encima y por debajo, y a la derecha y a la izquierda de la pelcula. Bordes

Especica la anchura del borde alrededor del plug-in.

Abre un cuadro de dilogo para introducir parmetros adicionales para pasar al plug-in de Netscape. Muchos plug-ins responden a parmetros especiales. El plug-in Flash, por ejemplo, incluye parmetros para BGCOLOR, SALIGN y SCALE. Consulte Acerca de parmetros en la pgina 308.
Parmetros

304

Captulo 16

Reproducir plug-ins en la ventana de documento Se puede obtener una vista previa de las pelculas y animaciones basadas en plugins, es decir, los elementos que usan la etiqueta EMBED, directamente en la ventana de documento. (NO es posible ver pelculas o animaciones basadas en controles ActiveX.) Se pueden reproducir todos los elementos a la vez para ver el aspecto que presentar la pgina ante el usuario, pero tambin se pueden reproducir uno por uno para asegurarse de que se ha incrustado el elemento multimedia correcto. Para reproducir pelculas, deben instalarse en el sistema los plug-ins adecuados. Al iniciarse, Dreamweaver busca automticamente todos los plug-ins instalados, primero en la carpeta Conguration/Plugins y luego en las carpetas de plug-ins de todos los exploradores instalados.
Para reproducir el contenido de plug-ins en la ventana de documento: 1

Inserte uno o ms elementos multimedia eligiendo Insertar > Shockwave, Insertar > Flash, o Insertar > Plugin. Elija una de las siguientes opciones: Seleccione uno de los elementos multimedia que ha insertado y elija Ver > Plugin > Reproducir. Elija Ver > Plugin > Reproducir todo, para reproducir todos los elementos multimedia de la pgina que incluye los plug-ins.

Para detener la reproduccin del contenido de plug-ins:

Seleccione un elemento multimedia y elija Ver > Plugin > Detener, o elija Ver > Plugin > Detener todo, para detener la reproduccin del contenido de los plug-ins. Solucin de problemas Si, despus de haber seguido los pasos indicados para reproducir contenido de plug-ins en la ventana de documento, parte del contenido de plug-ins no se reproduce, intntelo con los procedimientos siguientes: Asegrese de que el plug-in asociado est instalado en el sistema, y que la versin del plug-in es compatible con la versin de la pelcula. Abra el archivo llamado badplugins.cfg en un editor de texto y compruebe si en la lista aparece el plug-in en cuestin. El archivo badplugins.cfg contiene informacin sobre aquellos plug-ins que pueden causar fallos o problemas graves en Dreamweaver. (Si algn plug-in concreto ocasiona problemas, considere la posibilidad de aadirlo a esta lista.) Compruebe que el sistema disponga de la memoria suciente (y en Macintosh, que haya suciente memoria asignada a Dreamweaver). Algunos plug-ins necesitan entre 2 MB y 5 MB adicionales para poderse ejecutar.

Agregar interactividad y animacin

305

Propiedades de ActiveX Despus de insertar un objeto ActiveX, use el inspector de propiedades para establecer otros parmetros. No existe un estndar universalmente aceptado para identicar los archivos de datos de los controles ActiveX. Consulte la documentacin del control ActiveX que est usando para saber el parmetro que debe emplear. Haga clic en Parmetros, en el inspector de propiedades, para introducir los valores de las propiedades que no aparecen en el inspector de propiedades. Haga doble clic en un objeto ActiveX para ver sus propiedades en el inspector de propiedades. Consulte tambin Agregar pelculas, applets y otros elementos multimedia en la pgina 299. El inspector de propiedades muestra inicialmente las propiedades utilizadas con mayor frecuencia. Haga clic en la echa de ampliacin, situada en el ngulo inferior derecho, para ver todas las propiedades. Especica un nombre para identicar el objeto ActiveX en las secuencias de comandos. Introduzca un nombre en el campo sin ttulo que aparece en el extremo izquierdo del inspector de propiedades.
ActiveX An y Al Especican la anchura y la altura del objeto en pxeles. Tambin se pueden

emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milmetros), cm (centmetros) o % (porcentaje del valor padre). Las abreviaturas deben seguir al valor sin espacio de separacin: por ejemplo: 3 mm. Identica el control ActiveX en el explorador. Introduzca un valor o elija uno de los que aparecen en el men emergente. Cuando se ha cargado la pgina, el explorador usa la clase ID para ubicar el control ActiveX que necesita el objeto ActiveX asociado a la pgina. Si el explorador no localiza el control ActiveX especicado, intentar descargarlo de la ubicacin indicada en Base.
Class ID

Especica el URL que contiene el control ActiveX. Internet Explorer descarga el control ActiveX de esta ubicacin si no se ha instalado en el sistema del usuario.
Base Incrustar Hace que Dreamweaver agregue una etiqueta EMBED en la etiqueta OBJECT del control ActiveX. Si el control ActiveX tiene un plug-in de Netscape equivalente, la etiqueta EMBED activa el plug-in. Dreamweaver asigna los valores

que se han introducido como propiedades de ActiveX a sus plug-ins de Netscape equivalentes. Dene el archivo de datos que se usar para un plug-in de Netscape si la opcin Incrustar est activada. Si no se introduce un valor, Dreamweaver intentar determinar el valor a partir de las propiedades de ActiveX previamente introducidas.
Orig

306

Captulo 16

Alinear Determina cmo se alinear el objeto en la pgina. Consulte Alinear elementos en la pgina 190 para obtener una descripcin de las opciones posibles. Imagen alt OBJECT.

Especica una imagen que debe mostrarse si el explorador no admite

Espacio V y Espacio H Especican el nmero de pxeles de espacio blanco que habr por encima y por debajo, y a la derecha y a la izquierda del plug-in.

Especica el archivo de datos correspondiente al control ActiveX que se tiene que cargar. Muchos controles ActiveX, como Shockwave y RealPlayer, no usan este parmetro.
Datos ID Dene Bordes

el parmetro opcional ID ActiveX. El uso ms frecuente de este parmetro es pasar informacin entre controles ActiveX. Especica la anchura del borde alrededor del objeto. Abre un cuadro de dilogo para introducir parmetros adicionales para pasar al objeto ActiveX. Muchos controles ActiveX responden a parmetros especiales. Consulte Acerca de parmetros en la pgina 308.
Parmetros

Propiedades de applet Java Despus de insertar un applet de Java, use el inspector de propiedades para establecer los parmetros. Haga doble clic en un applet de Java para ver sus propiedades en el inspector de propiedades. Consulte tambin Agregar pelculas, applets y otros elementos multimedia en la pgina 299. El inspector de propiedades muestra inicialmente las propiedades utilizadas con mayor frecuencia. Haga clic en la echa de ampliacin, situada en el ngulo inferior derecho, para ver todas las propiedades.
Applet

Especica un nombre para identicar el applet en las secuencias de comandos. Introduzca un nombre en el campo sin ttulo que aparece en el extremo izquierdo del inspector de propiedades.

An y Al Especican la anchura y la altura del applet en pxeles. Tambin se pueden

emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milmetros), cm (centmetros) o % (porcentaje del valor padre). Las abreviaturas deben seguir al valor sin espacio de separacin: por ejemplo: 3 mm. Especica el archivo de contenido del applet. Introduzca un nombre de archivo, o haga clic en el icono de la carpeta y elija el archivo.
Cdigo

Identica la carpeta que contiene el applet seleccionado. Al elegir un applet, este campo se rellena automticamente.
Base

Agregar interactividad y animacin

307

Alinear

Determina cmo se alinear el objeto en la pgina. Consulte Alinear elementos en la pgina 190 para obtener una descripcin de las opciones posibles.
Alt Especica

el contenido alternativo (normalmente, una imagen) que se mostrar si el explorador del usuario no es compatible con applets de Java o tiene Java desactivado. Si introduce texto, Dreamweaver lo procesar con el atributo ALT de la etiqueta APPLET. Si elige una imagen, Dreamweaver insertar una etiqueta IMG entre las etiquetas APPLET de apertura y de cierre.
Nota: Para especicar un contenido alternativo que puedan mostrar tanto Netscape Navigator (con Java desactivado) como Lynx (un explorador basado en texto), seleccione una imagen y luego agregue manualmente un atributo ALT a la etiqueta IMG en el inspector de HTML. Espacio V y Espacio H Especican el nmero de pxeles de espacio blanco que habr por encima y por debajo, y a la derecha y a la izquierda del applet.

Abre un cuadro de dilogo para introducir parmetros adicionales para pasar al applet. Muchos applets responden a parmetros especiales. Consulte Acerca de parmetros en la pgina 308.
Parmetros

Acerca de parmetros Use el cuadro de dilogo Parmetros para introducir valores para parmetros especiales denidos para pelculas Shockwave, controles ActiveX, plug-ins de Netscape y applets de Java. Consulte la documentacin correspondiente al objeto que est usando para obtener informacin sobre los parmetros necesarios.
Para introducir un valor para un parmetro: 1 2 3

Haga clic en el botn ms (+). Introduzca el nombre del parmetro en la columna Parmetro. Introduzca el valor del parmetro en la columna Valor.

Para borrar parmetros:

Seleccione un parmetros y pulse Suprimir.

Para reordenar parmetros:

Use los botones de echa arriba y abajo.

308

Captulo 16

17

CAPTULO 17
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Personalizar Dreamweaver

Introduccin a la personalizacin de Dreamweaver

Dreamweaver ofrece numerosas posibilidades de personalizacin para que pueda trabajar de la forma que le resulte ms familiar, cmoda y ecaz sin dejar de generar un cdigo impecablemente limpio. A continuacin se incluyen algunas de las formas en que se puede personalizar Dreamweaver: Cambie la disposicin de los objetos de la paleta de objetos de manera que aquellos que usa con ms frecuencia queden siempre visibles, cree nuevos paneles para reorganizar los objetos, o agregue otros nuevos. Consulte Cambiar la paleta de objetos y el men Insertar en la pgina 310. Edite SourceFormat.prole para conseguir un control incluso mejor del cdigo HTML que Dreamweaver crea. SourceFormat.prole incluye, entre otras cosas, toda la conguracin de preferencias de Formato HTML. Consulte Editar el perl de formato del cdigo fuente HTML en la pgina 312. Edite los perles existentes en el explorador o cree otros nuevos para conseguir que la pgina funcione exactamente como Vd. desea en diferentes exploradores. Consulte Crear y editar perles de explorador en la pgina 313. Establezca las preferencias para todo, desde combinaciones de colores y resaltos a conguraciones de sitios y exploradores. Consulte Congurar preferencias en la pgina 76.

309

Cambiar la paleta de objetos y el men Insertar

Como opcin predeterminada, la paleta de objetos est dividida en cuatro paneles: Comn, Formularios, Head e Invisibles. Si desea informacin sobre los elementos de estos paneles, consulte Usar la paleta de objetos en la pgina 74). Los paneles corresponden a carpetas que se encuentran en la carpeta Conguration/Objects, dentro de la carpeta de la aplicacin Dreamweaver.
Para reorganizar los objetos de la paleta de objetos:

Mueva los archivos HTML y GIF correspondientes a un objeto de una carpeta a otra.
Para cambiar el nombre de los paneles de la paleta de objetos:

Cambie el nombre de las carpetas de la carpeta Conguration/Objects. Cambiar el men Insertar El orden de los objetos en el men Insertar es determinado por el archivo InsertMenu.htm, en la carpeta Conguration/Objects. El archivo contiene una amplia lista sin ordenar (con vietas) de todos los objetos de la carpeta Conguration/Objects. Las listas anidadas sin ordenar indican submens, y los elementos de lista que solamente contienen guiones indican separadores. Todos los objetos que no aparecen especcamente en la lista, al iniciarse el programa se adjuntan al nal del men Insertar.
Para cambiar el men Insertar: 1 2

Abra el archivo llamado InsertMenu.htm en la carpeta Conguration/Objects. Para agregar un objeto nuevo, cree un nuevo elemento de lista y escriba el nombre del objeto; la letra, el nmero o el smbolo que desea usar como mtodo abreviado de teclado; y el nombre del archivo del objeto, separado con comas. Por ejemplo: Derechos DCD, C, Derechos DCD.htm (Slo para Windows) Resalte la letra que desea usar como mnemnico y elija Texto > Estilo > Subrayado.

Para crear una lnea de separacin entre objetos, cree un nuevo elemento de lista y escriba uno o ms guiones. Para reordenar los objetos, reorgancelos en la lista. Para eliminar un objeto del men sin eliminarlo de la paleta de objetos, borre su nombre y su acceso directo, pero deje las comas y el nombre del archivo. Por ejemplo: , ,Layer.htm

4 5

310

Captulo 17

Para eliminar completamente un objeto, squelo fuera de la carpeta Conguration/Objects.

Nota: Reinicie Dreamweaver para ver los cambios de los elementos de la carpeta Conguration/Objects.

Crear un objeto simple Los objetos ms simples no requieren JavaScript; solamente contienen el cdigo HTML que se insertar en el documento. Para obtener instrucciones sobre la creacin de objetos ms complejos usando JavaScript, consulte Introduccin a la ampliacin de Dreamweaver en la Ayuda de Dreamweaver.
Para crear un objeto simple: 1

Cree un nuevo documento en blanco con un editor de texto (por ejemplo, BBEdit o HomeSite). Puede usar el inspector de HTML de Dreamweaver como editor de texto, pero previamente tendr que borrar todas las etiquetas que aparecen en el inspector de HTML cuando empiece a abra un documento nuevo.

Escriba o pegue las etiquetas que desee que este objeto inserte en sus documentos. Escriba, por ejemplo:
<P> &copy; 1998 DCD Productions, Inc.<BR> Todos los derechos reservados </P>

Guarde el archivo. Si desea que el nuevo objeto aparezca en uno de los paneles existentes, gurdelo en una de las carpetas de objetos (Comn, Formularios, Head o Invisibles). Si desea crear un nuevo panel, cree una nueva carpeta en la carpeta Objects, y guarde el archivo en ella. Las carpetas adicionales dentro de cualquier subcarpeta de Objects sern ignoradas.

Agregue el objeto al men Insertar. Consulte Cambiar el men Insertar en la pgina 310. En un programa de grcos o de edicin de imgenes (como Macromedia Fireworks), cree una imagen GIF de 18 x 18 pxeles que sirva de icono del objeto en la paleta de objetos. Si rea una imagen ms grande, Dreamweaver la reducir automticamente al tamao de 18 x 18 pxeles. Si no crea un icono para el objeto, Dreamweaver inserta un icono de imagen ausente en la paleta de objetos.

Personalizar Dreamweaver

311

Asigne al icono el mismo nombre que tiene el archivo del objeto y guarde el icono en el mismo directorio que el archivo del objeto. Por ejemplo, si el objeto se llama Derechos DCD.htm y Vd. lo guard en el directorio Comn, asigne al icono el nombre de Derechos DCD.gif y gurdelo tambin en el directorio Comn.

Reinicie Dreamweaver para poder usar el nuevo objeto.

Editar el perfil de formato del cdigo fuente HTML

El perl de formato del cdigo fuente HTML determina el formato que Dreamweaver aplica al cdigo fuente HTML en un documento. El perl incluye las preferencias de formato para etiquetas individuales y para grupos de etiquetas, junto con las preferencias de Formato HTML (establecidas con el comando Preferencias). Se puede editar el archivo SourceFormat.prole en un editor de texto para controlar con precisin la forma en que Dreamweaver escribe el cdigo HTML. El perl es un archivo de texto guardado en la carpeta Conguration, en la carpeta de la aplicacin Dreamweaver. Las preferencias de Formato HTML establecidas mediante el comando Preferencias se guardan en el archivo SourceFormat.prole al salir de Dreamweaver, y los cambios realizados en el perl no tendrn efecto hasta que se reinicie Dreamweaver. Por ello, para asegurar el acceso a la conguracin de nuevas preferencias, se debe salir del programa antes de editar el perl. El perl de formato del cdigo fuente HTML sigue un formato especco, que est contenido en un archivo. Observe las convenciones siguientes: Cada seccin del perl empieza con un <?KEYWORD> (por ejemplo, <?OPTIONS>, <?ELEMENTS>, <?ATTRIBUTES> ). Los parmetros de cada seccin estn denidos en comentarios de cdigo HTML (<!-- -->) directamente encima de la seccin. La lnea OMIT de la seccin <?OPTIONS> est reservada para uso futuro (actualmente no afecta al formato del cdigo fuente HTML). Las etiquetas individuales pueden marcarse como pertenecientes a grupos de sangrado (IGROUP) de la seccin <?ELEMENTS> Como opcin predeterminada, IGROUP 1 contiene las y columnas de tabla, e IGROUP 2 contiene conjuntos de marcos y marcos. Estos grupos corresponden a las opciones Sangrar las y columnas de tabla y Sangrar conjuntos de marcos y marcos, del cuadro de dilogo Preferencias de Formato HTML. La sangra puede desactivarse para todo el grupo eliminando su nmero del atributo ACTIVE en la seccin <?OPTIONS> Tambin se pueden agregar otras etiquetas a IGROUP 1 o 2 para poder controlarlas mediante las opciones de Preferencias de Formato HTML.

312

Captulo 17

Por ejemplo, la conguracin predeterminada para la etiqueta P en el archivo SourceFormat.prole es <P BREAK=1,0,0,1 INDENT>, que da lugar a lo siguiente:
<p> Un prrafo de texto que est sangrado con respecto al margen izquierdo, y tiene un salto antes de la apertura de la etiqueta P y despus del cierre de la etiqueta P, pero no despus de la etiqueta P y no antes del cierre de la etiqueta P.</p> <p>Prrafo siguiente.</p>

Si cambia la conguracin a <P BREAK=1,1,1,2>, obtendr:

<p> Un prrafo de texto que est sangrado con respecto al margen izquierdo, y tiene un salto antes de la apertura de la etiqueta P y despus del cierre de la etiqueta P, pero no despus de la apertura de la etiqueta P y no antes del cierre de la etiqueta P. </p> <p> Prrafo siguiente. </p>

Crear y editar perfiles de explorador

Los perles de exploradores son los archivos con los que se comparan los documentos cuando se ejecuta Comprobar exploradores de destino (consulte Comprobar la compatibilidad de una pgina con los exploradores de destino en la pgina 150). Cada perl contiene informacin sobre las etiquetas y atributos HTML que soporta un explorador determinado. Tambin puede contener advertencias, mensajes de error y sugerencias para sustituciones de etiquetas. Los perles de exploradores se almacenan en el disco duro en la carpeta Conguration/BrowserProles, en la carpeta de la aplicacin Dreamweaver. Se pueden editar los perles existentes o crear otros nuevos con un editor de texto (por ejemplo, BBEdit, HomeSite, Bloc de notas, o SimpleText). No es necesario salir de Dreamweaver para editar o crear perles de explorador. Los perles de explorador tienen un formato especco. Para evitar la necesidad de analizar los errores durante las comprobaciones en el explorador de destino, al crear o editar perles observe las siguientes reglas: La primera lnea se reserva para el nombre del perl Debe ir seguida por un solo retorno de carro. El nombre de esta lnea aparece en el cuadro de dilogo Comprobar exploradores de destino y en el informe de comprobacin de destino. El nombre debe ser nico. La segunda lnea se reserva para el designador PROFILE_TYPE=BROWSER_PROFILE. Dreamweaver usa esta lnea para determinar los documentos que son perles de explorador. No se debe cambiar ni mover. Dos guiones (--) al principio de una lnea indican un comentario (es decir, que la lnea ser ignorada durante el proceso de comprobacin del destino).

Personalizar Dreamweaver

313

La sintaxis de una entrada de etiqueta es

<!ELEMENT htmlTag NAME="tagName" > <!ATTLIST htmlTag unsupportedAttribute1!Error !msg="El atributo unsupportedAttribute1 de la etiqueta htmlTag no es compatible. Intente usar thisAttribute para un efecto similar." supportedAttribute1 supportedAttribute2( validValue1 | validValue2 | validValue3 ) unsupportedAttribute2!Error !htmlmsg="<b>No use nunca unsupportedAttribute2 de la htmlTag !!</b>" >

en donde
htmlTag

es la etiqueta que aparece en un documento HTML.

tagName es la forma en que se denomina a la etiqueta (por ejemplo, la etiqueta <HR> se denomina "regla horizontal"). El atributo NAME es opcional; si se

especica, tagName se usar en el mensaje de error. Si no se asigna nombre, se usar htmlTag.

unsupportedAttribute es un atributo no admitido. Se considera que todas las etiquetas o los atributos que no se mencionan especcamente, son no admitidos. Especique etiquetas o atributos no admitidos solamente cuando desee crear una mensaje de error personalizado. supportedAttribute es un atributo admitido por la etiqueta htmlTag. Solamente las etiquetas que aparecen en la lista sin una designacin de !Error se consideran admitidos por el explorador. validValue

es un valor admitido por el atributo.

Antes de cerrar el parntesis angular (>) debe aparecer un espacio en la lnea !ELEMENT despus de del parntesis de apertura, antes del parntesis de cierre, y antes y despus de cada barra vertical (|) en la lista de valores. Antes de las palabras ELEMENT, ATTLIST, Error, msg, y htmlmsg (!ELEMENT, !ATTLIST, !Error, !msg, !htmlmsg) debe aparecer un signo de exclamacin sin espacio.
!Errors (errores) y !Warnings (advertencias) pueden aparecer dentro de !ELEMENT o del rea !ATTLIST.

!Los mensajes !msg solamente pueden contener texto sin formato. !Los mensajes !htmlmsg pueden contener cualquier cdigo HTML vlido, incluidos hipervnculos. Los comentarios HTML (<!-- -->) no se pueden mencionar especcamente en los perles de explorador porque intereren con el anlisis. Dreamweaver no informa de errores en los comentarios porque estos son compatibles con todos los exploradores.

314

Captulo 17

En el siguiente ejemplo se muestra una entrada para la etiqueta APPLET que podra ser adecuada para Navigator 3.0:
<!ELEMENT APPLET Name="Java Applet" > <!ATTLIST APPLET Align ( top | middle | bottom | left | right | absmiddle | absbottom | baseline | texttop ) Alt Archive Class!Warning !htmlmsg=Este explorador ignora el atributo <CODE>CLASS</CODE> para la etiqueta <CODE>APPLET</CODE>. Code Codebase Height HSpace ID!Warning !htmlmsg=Este explorador ignora el atributo <CODE>ID</CODE> para la etiqueta <CODE>APPLET</CODE>. Use <CODE>NAME</CODE> en su lugar. Name Style!Warning !htmlmsg=Este explorador ignora el atributo <CODE>STYLE</CODE> para la etiqueta <CODE>APPLET</CODE>. VSpace Width >

Crear un perfil de explorador Se puede crear un perl de explorador modicando un perl existente. Por ejemplo, para crear un perl para Netscape Navigator 5.0, se puede abrir el perl para Navigator 4.0, agregar cualquier etiqueta o atributo nuevos introducidos en la versin 5.0, y guardar el perl como Netscape Navigator 5.0.
Para crear un perfil de explorador: 1

Con un editor de texto, abra el perl que se parezca ms al perl que desea crear, o abra el perl que desea cambiar. Cambie el nombre del perl. El nombre del perl aparece en la primera lnea. No puede haber dos perles con el mismo nombre.

Agregue todas las etiquetas o atributos nuevos que sepa que son compatibles con el explorador, de acuerdo con la sintaxis que se indica en Crear y editar perles de explorador en la pgina 313. Si no desea recibir mensajes de error sobre una determinada etiqueta no compatible, agrguela a la lista de etiquetas no admitidas. Si incluye las etiquetas no admitidas en la lista de etiquetas admitidas, guarde el perl en un archivo distinto con un nuevo nombre (como NombreExplorador x.x limitado). Al cambiar el nombre del perl se conserva el perl original slo con las etiquetas que verdaderamente son admitidas por el explorador.

Personalizar Dreamweaver

315

Elimine todas los atributos o etiquetas que no sean admitidos por el explorador. Este paso no es necesario si se est creando un perl para la siguiente versin de Netscape Navigator o Microsoft Internet Explorer, porque los exploradores no suelen reducir su compatibilidad con las etiquetas de una versin a otra posterior.

Agregue los mensajes de error personalizados que desee, de acuerdo con la sintaxis que se indica en Crear y editar perles de explorador en la pgina 313. Los perles que vienen con Dreamweaver incluyen todas las etiquetas admitidas; tambin pueden incluir lneas de comentarios con algunas etiquetas de uso frecuente pero no admitidas. Para agregar un mensaje de error personalizado, borre los dos guiones del principio de la lnea y aada !msg "mensaje" o !htmlmsg "<tag>mensaje</tag>" despus de !Error. Por ejemplo, esta notacin puede aparecer en el perl de Netscape Navigator 3.0:
<!ELEMENT HR name="Regla horizontal" > <!ATTLIST HR -- COLOR !Error >

Para agregar un mensaje de error personalizado, borre los guiones y aada el mensaje precedido por !msg:
<!ELEMENT HR name="Regla horizontal" > <!ATTLIST HR COLOR !Error !msg "Internet Explorer 3.0 admite COLOR en reglas horizontales, pero no Netscape Navigator 3.0." >

316

Captulo 17

APNDICE A
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mtodos abreviados de teclado

Men Archivo
Comando Documento nuevo Nueva ventana Abrir un archivo HTML Windows Control-Mays-N Control-N Macintosh Comando-N n/a

Control-O, o arrastre el Comando-O archivo desde la ventana del Explorer o del sitio a la ventana de documento. Control-Mays-O Control-W Control-S Control-Mays-S Alt-F4 o Control-Q Mays-Comando-O Comando-W Comando-S Mays-Comando-S Comando-Q

Abrir en marco Cerrar Guardar Guardar todo Salir

317

Men Edicin
Comando Deshacer Rehacer Cortar Copiar Pegar Borrar. Borrar Iniciar editor externo Propiedades de la pgina Preferencias Windows Control-Z Control-Y Control-X Control-C Control-V Supr Control-A Control-E Control-J Control-U Macintosh Comando-Z Comando-Y, MaysComando-Z Comando-X Comando-C Comando-V Borrar Comando-A Comando-E Comando-J Comando-U, Comando-K

Editar texto
Accin Crear un prrafo nuevo Insertar un salto de lnea Insertar un espacio de no separacin Mover texto o un objeto a otro lugar de la pgina Copiar texto o un objeto en otro lugar de la pgina En Windows, use Entrar Mays-Entrar Control-Mays-espacio Arrastrar el elemento seleccionado a la nueva ubicacin Arrastrar el elemento seleccionado a la nueva ubicacin, mientras se mantiene pulsada la tecla Control Control-Mays-C Control-Mays-V Hacer doble clic En Macintosh, use Entrar Mays-Entrar Opcin-espacio Arrastrar el elemento seleccionado a la nueva ubicacin Arrastrar el elemento seleccionado a la nueva ubicacin, mientras se mantiene pulsada la tecla Opcin. Mays-Comando-C Mays-Comando-V Hacer doble clic

Copiar slo texto (no copia etiquetas HTML Pegar como texto Seleccionar una palabra.

318

Apndice A

Accin Agregar a biblioteca elementos seleccionados Cambiar entre la ventana de documento y el inspector de HTML Abrir y cerrar el inspector de propiedades Ortografa

En Windows, use Control-Mays-B Control-Tab

En Macintosh, use Mays-Comando-B Comando-Tab u OpcinTab Mays-Comando-J Mays-F7

Control-Mays-J Mays-F7

Formatear texto
Comando Sangra Anular sangra Formato > Ninguno Aplicar estilo de prrafo Aplicar encabezados 1-6 al prrafo Alineacin > Izquierda Alineacin > Centro Alineacin > Derecha Poner en negrita un texto seleccionado Poner en cursiva un texto seleccionado Editar hoja de estilos Windows Control-] Control-[ Control-0 (cero) Control-T Control-1-6 Control-Alt-L Control-Alt-C Control-Alt-R Control-B Control-I Control-Mays-E Macintosh Comando-] Comando-[ Comando-0 (cero) Comando-T Comando--1-6 Opcin-Comando-L Opcin-Comando-C Opcin-Comando-R Comando-B Comando-I Mays-Comando-E

Nota: Muchos mtodos abreviados de formato de texto no funcionan cuando se trabaja en el inspector de HTML.

Mtodos abreviados de teclado

319

Buscar y reemplazar texto

Accin Buscar Buscar siguiente Reemplazar En Windows, use Control-F F3 Control-H En Macintosh, use Comando-F F3, Comando-G Comando-H

Trabajar con tablas

Accin Seleccionar tabla (con el cursor dentro de la tabla) Ir a la celda siguiente Ir a la celda anterior Insertar una fila (antes de la actual) Agregar una fila al final de la tabla Eliminar la fila actual Insertar una columna Eliminar una columna Combinar celdas Dividir celdas Actualizar diseo de tabla (estando en el modo "edicin rpida de tabla", obliga a redibujar la tabla) En Windows, use Control-A Tab Mays-Tab Control-M Tab en la ltima celda Control-Mays-M Control-Mays-A Comando-Mays- (menos) En Macintosh, use Comando-A Tab Mays-Tab Comando-M Tab en la ltima celda Comando-Mays-M Comando-Mays-A Comando-Mays- (menos)

Seleccionar varias celdas Seleccionar varias celdas contiguas y pulsar M contiguas y pulsar M Control-Alt-S Control-Espacio Comando-Opcin-S Comando-Espacio

320

Apndice A

Trabajar con marcos

Accin Seleccionar un marco En Windows, use Hacer clic en el marco mientras se mantiene pulsada la tecla Alt Alt-flecha derecha Alt-flecha izquierda Alt-flecha arriba Alt-flecha abajo Arrastrar el borde del marco mientras se mantiene pulsada la tecla Alt Arrastrar el borde del marco mientras se mantienen pulsadas las teclas Alt y Control En Macintosh, use Hacer clic en el marco mientras se mantienen pulsadas las teclas Mays y Opcin Comando-flecha derecha Comando-flecha izquierda Comando-flecha arriba Comando-flecha abajo Arrastrar el borde del marco mientras se mantiene pulsada la tecla Opcin Arrastrar el borde del marco mientras se mantienen pulsadas las teclas Opcin y Comando

Seleccionar siguiente marco o conjunto de marcos Seleccionar marco o conjunto de marcos anterior Seleccionar conjunto de marcos padre Seleccionar primer marco o conjunto de marcos hijo Agregar un nuevo marco a un conjunto de marcos

Agregar un nuevo marco a un conjunto de marcos mediante el mtodo de empujar

Trabajar con capas

Accin Seleccionar una capa En Windows, use Hacer clic manteniendo pulsadas las teclas Control y Mays En Macintosh, use Hacer clic manteniendo pulsadas las teclas Mays y Comando

Seleccionar y mover una capa

Arrastrarla manteniendo Arrastrarla manteniendo pulsadas las teclas pulsadas las teclas Mays y Control Mays y Comando Hacer clic en la capa Hacer clic en la capa manteniendo pulsada la manteniendo pulsada la tecla Mays tecla Mays Teclas de flecha Mays-Teclas de flecha Teclas de flecha Opcin-teclas de flecha

Agregar o eliminar una capa de una seleccin Mover capa seleccionada por pxeles Mover capa seleccionada por incremento de ajuste

Mtodos abreviados de teclado

321

Accin Cambiar el tamao de una capa seleccionada por pxeles Cambiar tamao de una capa seleccionada por incremento de ajuste

En Windows, use Control-Teclas de flecha

En Macintosh, use Opcin-Teclas de flecha

Control-Mays-Teclas de Opcin-Mays-Teclas de flecha flecha Comando-Teclas de flecha Arriba/Abajo/ Derecha/Izquierda Comando-Mays-[ Comando-Mays-] Comando-Mays-F6 Comando-F6

Alinear capas seleccionadas con Control-Teclas de flecha la parte Superior/Inferior/Derecha/ Arriba/Abajo/Derecha/ Izquierda de la ltima capa Izquierda seleccionada Igualar la anchura de las capas seleccionadas Igualar la altura de las capas seleccionadas Convertir capas en tablas Control-Mays-[ Control-Mays-] Control-Mays-F6

Reubicar contenido usando capas Control-F6

Activar o desactivar la preferencia Arrastrarla manteniendo Arrastrarla manteniendo de anidar al crear una capa pulsada la tecla Control pulsada la tecla Comando Alternar la visualizacin de la cuadrcula Ajustar a cuadrcula Control-Alt-Mays-G Control-Alt-G Mays-OpcinComando-G Opcin-Comando-G Mays-F9 Borrar

Agregar un cuadro clave (lnea de Mays-F9 tiempo) Eliminar un cuadro clave (lnea de Supr tiempo)

Trabajar con lneas de tiempo

Accin En Windows, use En Macintosh, use Comando-MaysOpcin-T

Agregar un objeto a una lnea de Control-Mays-Alt-T tiempo

322

Apndice A

Trabajar con imgenes

Accin Cambiar atributo de origen de imagen Editar la imagen en un editor externo En Windows, use Hacer doble clic en la imagen Hacer doble clic en la imagen manteniendo pulsada la tecla Control En Macintosh, use Hacer doble clic en la imagen Hacer doble clic en la imagen manteniendo pulsada la tecla Comando

Administrar hipervnculos
Accin Crear hipervnculo (seleccionar texto) Quitar vnculo Arrastrar y soltar para crear un hipervnculo desde un documento En Windows, use Control-L Mays-Control-L Seleccionar el texto, la imagen o el objeto, luego arrastrar la seleccin, manteniendo pulsada la tecla Mays, a un archivo de la ventana Sitio. Seleccionar el texto, la imagen o el objeto, luego arrastrar el icono de sealizacin de archivo en el inspector de propiedades a un archivo de la ventana Sitio. Hacer doble clic en el vnculo manteniendo pulsada la tecla Control Control-F7 Control-F8 En Macintosh, use Comando-L Mays-Comando-L Seleccionar el texto, la imagen o el objeto, luego arrastrar la seleccin, manteniendo pulsada la tecla Mays, a un archivo de la ventana Sitio. Seleccionar el texto, la imagen o el objeto, luego arrastrar el icono de sealizacin de archivo en el inspector de propiedades a un archivo de la ventana Sitio. Hacer doble clic en el vnculo manteniendo pulsada la tecla Comando Comando-F7 Comando-F8

Arrastrar y soltar para crear un hipervnculo usando el inspector de propiedades

Abrir en Dreamweaver el documento vinculado

Comprobar vnculos del documento actual Comprobar vnculos de todo el sitio

Mtodos abreviados de teclado

323

Establecer destino y obtener vista previa en exploradores

Accin Vista previa en explorador principal Vista previa en explorador secundario En Windows, use F12 Control-F12 En Macintosh, use F12 Comando-F12

Administracin de sitio y FTP

Accin Crear archivo nuevo Crear carpeta nueva Abrir seleccin Obtener carpetas o archivos seleccionados desde un sitio FTP remoto Windows Control-Mays-N Control-Alt-Mays-N Control-Alt-Mays-O Pulsar Control-Mays-D, o arrastrar los archivos desde el panel Remoto al panel local en la ventana Sitio. Pulsar Control-Mays-U, o arrastrar los archivos desde el panel Local al panel Remoto en la ventana Sitio. Control-Alt-Mays-D Control-Alt-Mays-U Control-Alt-Mays-F5 Control-F5 Alt-F5 Macintosh Mays-Comando-N Mays-OpcinComando-N Mays-OpcinComando-O Pulsar Mays-ComandoD, o arrastrar los archivos desde el panel Remoto al panel Local en la ventana Sitio. Pulsar Mays-ComandoU, o arrastrar los archivos desde el panel Local al panel Remoto en la ventana Sitio. Mays-OpcinComando-D Mays-OpcinComando-U Mays-OpcinComando-F5 Comando-F5 Opcin-F5

Colocar carpetas o archivos seleccionados en un sitio FTP remoto

Proteger Desproteger Desconectar Actualizar sitio local Actualizar sitio remoto

324

Apndice A

Mapa del sitio

Accin Ver archivos del sitio Ver mapa del sitio Crear raz Vincular a archivo existente Cambiar vnculo Quitar vnculo Mostrar/Ocultar vnculo Mostrar ttulos de pginas Cambiar nombre de archivo Acercar mapa del sitio Alejar mapa del sitio Windows F5 Mays-F5 Control-Mays-R Control-Mays-K Control-L Tecla Supr Control-Mays-Y Control-Mays-T F2 Control-+ (ms) Control- - (menos) Macintosh F5 Mays-F5 Comando-Mays-R Comando-Mays-K Comando-L Tecla Borrar Comando-Mays-Y Comando-Mays-T n/a Comando-+ (ms) Comando- - (menos)

Reproducir plug-ins
Accin Reproducir plug-in Detener plug-in Reproducir todos los plug-ins Detener todos los plug-ins En Windows, use Control-P Control-. Control-Mays-P Control-Mays-. En Macintosh, use Comando-P Comando-. Comando-Mays-P Comando-Mays-.

Mtodos abreviados de teclado

325

Ver elementos de pgina

Para mostrar u ocultar Elementos invisibles Reglas Cuadrcula Ver contenido de Head (encabezado) Windows Control-Mays-I Control-Alt-Mays-R Control-Alt-Mays-G Control-Mays-W Macintosh Mays-Comando-I Mays-OpcinComando-R Mays-OpcinComando-G Comando-Mays-W

Trabajar con plantillas

Accin Crear nueva regin editable Marcar regin como editable En Windows, use Control-Alt-V Control-Alt-W En Macintosh, use Comando-Opcin-V Comando-Opcin-W

Insertar objetos
Para insertar Cualquier objeto (imagen, pelcula Shockwave, etc) Windows Arrastrar el archivo desde la ventana del Explorer o del Sitio a la ventana de documento. Control-Alt-I Control-Alt-T Control-Alt-F Control-Alt-D Control-Alt-A Macintosh Arrastrar el archivo desde la ventana del Finder o del Sitio a la ventana de documento. Opcin-Comando-I Opcin-Comando-T Opcin-Comando-F Opcin-Comando-D Opcin-Comando-A

Imagen Tabla Pelcula Flash Pelcula Shockwave Director Punto de fijacin con nombre

326

Apndice A

Abrir y cerrar ventanas

Para mostrar u ocultar Objetos Propiedades Lanzador Ver archivos del sitio Ver mapa del sitio Biblioteca Estilos Comportamientos Lneas de tiempo HTML Capas Marcos Plantillas Mostrar/Ocultar ventanas flotantes Cerrar ventana de documento Windows Control-F2 Control-F3 Mays-F4 F5 Mays-F5 F6 F7 F8 F9 F10 F11 Control-F10 Control-F11 F4 Control-F4 o Control-W Macintosh Comando-F2 Comando-F3 Mays-F4 F5 Mays-F5 F6 F7 F8 F9 F10 F11 Comando-F10 Comando-F11 F4 Comando-W o Comando-F4

Obtener ayuda
Comando Temas de ayuda Dreamweaver en lnea Windows F1 Control-F1 Macintosh ayuda Comando-F1

Mtodos abreviados de teclado

327

328

Apndice A

NDICE

A abrir documentos 82 paletas 73 Abrir ventana del explorador, accin 278 Acceso al servidor, opciones 130 acciones cambiar en comportamientos 262 compatibilidad de exploradores 264 controlar lneas de tiempo 297 crear 262 denidas 260 elegir en comportamientos 260 Vase tambin acciones individuales por nombre Acciones, men emergente 262 ACTION, atributo 246 Active Server Pages, etiquetas 155 ActiveX, controles cambiar tamao 190 propiedades 306 actualizar vnculos 146 Actualizar pgina actual, comando 104 Actualizar pginas, comando 104 actualizar vista 121 Advertir al solucionar/eliminar etiquetas, opcin 158 Aftershock, objetos insertar 303 Agregar marco, comando 290 Agregar objeto a biblioteca, comando 250 Agregar objeto a lnea de tiempo, comando 290 Ajuste automtico, opcin 159 Al crear estilos, Forma abreviada para, opcin 182 Al editar estilos, Forma abreviada para, opcin 182 alineacin imagen de rastreo 86 Alineacin, comandos 172

alinear capas 223 elementos de pgina 190 Alinear con seleccin, comando 86 anidar al crear en una capa 216 capas 215 marcos 232 animaciones 288 aplicar a objetos 296 con rutas completas 292 copiar y pegar 295 crear 290 mejorar 298 Anular may/min de, opcin 159 aplicaciones usar con Dreamweaver 79 Aplicar a pgina, comando 103 Aplicar formato de origen, comando 162 Aplicar plantilla a pgina, comando 103 applets cambiar tamao 190 insertar 299 archivos cargar 137 descargar 136 desproteger y proteger 134 incluir en documento 256 transferir 134 archivos dependientes mensaje 133 mostrar y ocultar 127 Archivos locales, opcin 120 archivos ocultos mostrar y ocultar 127 Archivos remotos, opcin 120 Arrastrar capa, accin 272, 275 Arreglar etiquetas no cerradas y mal anidadas, opcin 158 ASP, editar etiquetas 164

329

atributos buscar 140 en perles de exploradores 313 Ayuda 13 ayuda mtodos abreviados 327 B Barra de estado, preferencias 77 BASE, etiqueta 74 BBEdit 163 bibliotecas 250 actualizar pginas 252 preferencias 251 romper vnculo con elemento 253 volver a crear elementos 255 bordes marco 239 tabla 200 Borrador, botn 92 Bucle, opcin 289 bucles de lneas de tiempo 293 buscar 138 etiquetas y atributos HTML 140 expresiones regulares 144 mtodos abreviados 320 modelos 143 texto en cdigo fuente HTML 140 texto en la ventana de documento 140 texto entre etiquetas especcas 142 Buscar en, opcin 104 buscar y reemplazar. Vasebuscar Buscar, opciones 138 bsquedas de texto en cdigo fuente HTML 140 en la ventana de documento 140 expresiones regulares 144 C cabezal de reproduccin 289 Cach, opcin 108 Cambiar propiedad, accin 266

cambiar tamao capas 222 celdas de tabla 206 elementos de pgina 190 marcos 238 campos de formulario validar 285 canal de comportamientos 289 capas activar 221 ajustar a cuadrcula 223 alinear 223 anidar 215 arrastrar 275 cambiar orden de apilamiento 225 cambiar tamao 222 cambiar visibilidad con comportamientos 282 cambiar visibilidad con la paleta de capas 225 convertir en tablas 226 convertir para exploradores 3.0 228 crear 214 en diseo de tablas 226 evitar solapamiento 227 introduccin 213 manipular 220 mtodos abreviados 321 mover 223 preferencias 216 propiedades 216 propiedades para mltiples 219 puntos de jacin 89 seleccionar 221 visibilidad 225 caracteres ASCII altos en nombres de archivos 137 Carga previa de imgenes, accin 280 cargar archivos 137 carpeta raz local 108 carpetas buscar 138 celdas de tabla combinar 208 copiar y pegar 210 dividir 208 formatear 202 celdas. Vase celdas de tabla Centrado, opcin 159 CFML, editar etiquetas 164

330

ndice

CGI, secuencias de comandos 246 CLASS, atributo 178 Coincidir maysculas y minsculas, opcin 138 Cold Fusion Markup Language, etiquetas 164 colocar archivos en un servidor remoto 137 Colocar, comando 137 color cambiar para texto 171 elegir 92 elementos de interfaz 76 fondo de marco 240 pgina 91 predeterminado para texto 91 seguro para la Web 93 color de regin bloqueada 98 Color de vnculo, opcin 91 Color del texto, opcin 91 Color, comando 171 colores de etiquetas de HTML preferencias 160 columnas y las agregar y eliminar 207 formatear 202 Combinar celdas, comando 208 combinar etiquetas FONT anidadas cuando sea posible, opcin 161 comentarios insertar 166 Comentarios, opcin de Colores HTML 160 comportamientos acciones 264 adjuntar 260 cambiar 262 colocar en lneas de tiempo 297 compatibilidad de exploradores 264 crear acciones 262 denidos 260 eliminar 262 en plantillas 102 eventos 260 terceros 263 Comprobar explorador, accin 267 Comprobar exploradores de destino, comando 150 Comprobar plug-in 269 Conectar/Desconectar, opcin 132 Conexin FTP, opcin 133 Cong. fuentes, opcin 77

conjuntos de marcos anidados 232 bordes 239 establecer destino de vnculos en 113 guardar archivos en 233 propiedades 237 seleccionar 233 Vase tambin marcos contenido agregar a tablas 197 repetido 249 Controlar Shockwave o Flash, accin 270 Controlar sonido, accin 271 controles deslizantes crear 272 Convertir capas en tabla, comando 226 convertir tablas en capas 228 cortafuegos conectar a travs de 130 congurar servidor y puerto para 133 CSS, atributos convertir a HTML 183 CSS, capas 213 CSS1 175 CSS-P 213 cuadrcula ajustar capas a 223 como gua 86 cuadro de color 92 cuadros clave 289 crear 290 cursiva 169 curso prctico 17 D Denir combinacin de colores, comando 91 denir destino de exploradores convertir archivo para compatibilidad con 3.0 228 Denir sitios, comando 130 descargar comportamientos 263 estimaciones de tamao y tiempo 154 desproteger y proteger archivos 134 deshacer 134 Desproteger/proteger, opcin 130 Detener lnea de tiempo, accin 286

ndice

331

diccionario editar 184 elegir 76 diccionario personal 184 Direccin HTTP, opcin 108 Dividir marco, comandos 232 documentos abrir 82 agregar texto 86 asignar nombre 90 basados en plantillas 103 buscar 138 congurar 90 crear 82 introduccin 81 plantillas 82 separar de plantilla 104 tamao y tiempo de descarga 154 vista previa en exploradores 153 documentos HTML. Vase HTML Dreamweaver ampliacin 11 curso prctico 13 espacio de trabajo 71 instalar 12 manual del usuario 15 nuevas funciones 10 personalizar 309 usar con otras aplicaciones 79 Dreamweaver Developers Center 15 E editar hojas de estilos externas 177 Editar contenido sin marcos, comando 241 Editar lista de exploradores, comando 153 Editar lista de fuentes, comando 170 editores externos imagen 192 texto 163 Elemento de biblioteca, propiedades 255 elementos alinear 190 ver invisibles 326 Vase tambin elementos de pgina individuales

elementos de biblioteca 250 agregar a pgina 251 cambiar nombre 252 color de resaltado 251 comparados con Server-Side Includes 249 convertir en editables 253 crear 250 editar 252 eliminar 252 Elementos invisibles preferencias 89 elementos invisibles comentarios 166 mostrar y ocultar 89 secuencias de comandos 165 seleccionar 88 elementos multimedia insertar 299 parmetros 308 eliminar comentarios HTML ajenos a Dreamweaver, opcin 161 eliminar comentarios HTML de Dreamweaver, opcin 161 eliminar etiquetas anidadas repetidas, opcin 161 Eliminar etiquetas de cierre adicionales, opcin 158 eliminar etiquetas especcas, opcin 161 eliminar etiquetas vacas, opcin 161 EMBED, etiqueta 304 encabezado, etiquetas aplicar 168 Especco etiqueta, opcin 160 establecer destino de exploradores comprobar compatibilidad 150 establecer destino de vnculo 113 establecer exploradores de destino mtodos abreviados 324 perles de exploradores 313 Estilo, submen 169

332

ndice

estilos 174 aplicar estilos personalizados 179 convertir a HTML 182 crear 178 editar 181 en conicto 180 en plantillas 102 personalizados. Vase hojas de estilos tabla de conversin de CSS a formato HTML 183 Vase tambin hojas de estilos estructura de directorios sitio 129 etiquetas ASP 164 buscar 140 CFML 164 en perles de exploradores 313 no reconocidas 155 no vlidas 155, 162 seleccionar 88 superpuestas 155 tabla 200 XML 155 eventos cambiar en comportamientos 262 denidos 260 desencadenar comportamientos 260 disponibles para distintos exploradores y objetos 260 Eventos, men emergente 262 Evitar solapamiento de capas, comando 227 explorador principal 153 explorador secundario 153 exploradores archivos compatibles con 3.0 228 colores seguros 93 comprobar la compatibilidad con 150 comprobar versin 267 establecer destino 150 vista previa en 153 expresiones regulares 144 externas hojas de estilos 175

F Filas y columnas de tabla, opcin 158, 196 Flash, pelculas cambiar tamao 190 controlar 270 insertar 301 propiedades 301 fondo imagen de pgina 91 Fondo, opcin de Colores HTML 160 formatear HTML en el documento actual 162 preferencias 157 Formatear tabla, comando 204 Formato no vlido, propiedades 162 formatos de archivos, imagen 185 Formulario, comando 244 Formulario, Objeto, submen 245 formularios 243 agregar objetos 245 componentes 243 crear 244 procesar 246 propiedades 245 fotografas 185 fps 289 FTP preferencias 133 registro 136 FTP del sitio, preferencias 133 fuentes cambiar caractersticas 169 cambiar combinaciones 170 codicacin 77 denir predeterminadas 77 Fuentes/codicacin, preferencias 77 funciones de productividad 11

ndice 333

G General, preferencias 76 GIF, imgenes 185 como imgenes de rastreo 85 grcos. Vase imgenes guardar archivos en marcos y conjuntos de marcos 233 Guardar como plantilla, comando 96 Guardar conjunto de marcos, comando 233 Guardar consulta, opcin 143 Guardar todo, comando 233 guas 83 H Hacer editable, propiedad de biblioteca 253 HEAD, contenido 93 HEAD, elementos 74 herramientas grcas 10 Hojas de estilos preferencias 182 hojas de estilos 174 en cascada, especicacin 175 externas, crear 175 externas, editar 177 externas, vincular con 175 Vase tambin estilos HTML aplicar color a etiquetas 160 buscar texto 140 controles de formato fuente 157 conversin de atributos CSS 183 denir editores externos 163 editar 155 editar con BBEdit 163 editar perl de formato de origen 312 en Server-Side Includes 257 estilos de etiquetas 174 formatear en documentos existentes 162 formatear etiquetas 168 limpiar 161 no vlido 162 opcin Sangra 158 preferencias 157 reescribir 158 HTML Help Pages de Dreamweaver 13

I icono de sealizacin de archivo 110 Ignorar diferencias de espacios en blanco, opcin 138 ILAYER, etiqueta 213 imagen de rastreo 85 imgenes alinear 172 cambiar archivo de origen con lneas de tiempo 294 cambiar tamao visualmente 190 carga previa 280 editar 192 en tablas 197 formatos admitidos 185 insertar 186 intercambiar 284 mapas de 193 mtodos abreviados 323 propiedades 188 restaurar intercambiadas 285 ndice Z, opcin cambiar orden de apilamiento 225 insertar applets 299 elementos multimedia 299 objetos Aftershock 303 pelculas Flash 301 pelculas Shockwave 299 Server-Side Includes 256 Insertar, men cambiar 310 InsertMenu.htm 310 inspector de comportamientos 262 inspector de HTML 157 inspector de lneas de tiempo 289 inspector de marcos 234 inspector de propiedades 73 inspectores abrir y cerrar 73 interactividad 259 Intercambiar imagen, accin 284 Ir a marco de lnea de tiempo, accin 287 Ir a URL, accin 277

334

ndice

J Java, applets propiedades 307 JavaScript 165 alertas 280 ejecutar 266 JPEG, imgenes 185 como imgenes de rastreo 85 L lanzador 73 LAYER, etiqueta 213 Limpiar HTML, comando 161 lneas de tiempo cabezal de reproduccin 289 cambiar archivo de origen de imagen 294 cambiar nombre 297 cambiar propiedades de capa 294 controlar con comportamientos 297 crear 290 crear bucles 293 cuadros clave 290 en plantillas 102 mtodos abreviados 322 modicar 293 mltiples 295 reproducir automticamente 293 reproducir comportamientos en 297 rutas complejas 292 sugerencias de animacin 298 Lista sin ordenar, opcin 173 listas anidadas 173 crear 173 Llamar JavaScript, accin 266 M MAP, etiqueta 193 mapa del sitio 118 mapas de bits 185 mapas de imgenes 193 del lado del cliente 193 del lado del servidor 193

mapas de sitios crear 122 editar pginas 124 guardar 128 mtodos abreviados 325 mostrar archivos 127 rama 128 ver 119 vnculos 126 marcadores como elementos invisibles 89 Marcar seleccin como editable, comando 97 marcos 231 anidados 232 bordes 239 cambiar contenido 240 cambiar el color de fondo 240 cambiar tamao 238 crear 232 en exploradores antiguos 241 establecer destino de vnculos en 113 guardar archivos en 233 mtodos abreviados 321 propiedades 236 seleccionar 233 marcos por segundo (fps) 289 Marcos y conjuntos de marcos, opcin 158 May/min para atributos, opcin 159 May/min para etiquetas, opcin 159 mensaje de la barra de estado 272 Mensaje emergente, accin 280 mens de acceso directo 75 META, etiqueta 74 mtodos abreviados 317 minilanzador 72 mostrar capas 225 imagen de rastreo 85 informacin de documento 72 nombres en la paleta de objetos 73 Mostrar mensaje de estado, accin 272 Mostrar minilanzador en barra de estado, opcin 77 mostrar registro al terminar, opcin 161 Mostrar reglas, comando 84 Mostrar-Ocultar capas, accin 282

ndice 335

N negrita 169 Netscape, capas 213 Netscape, plug-ins 304 NOFRAMES, contenido 241 Nombre del sitio, opcin 108 Nueva regin editable, comando 97 Nuevo desde plantilla, comando 83, 103 O objetos agregar a formularios 245 crear 311 insertar 86 insertar con la paleta de objetos 74 mtodos abreviados 326 obtener archivos de un servidor remoto 136 Obtener, comando 136 onBlur, evento 285 orden de apilamiento cambiar con lneas de tiempo 294 capas 225 ortografa comprobar 184 elegir un diccionario 76 Ortografa, cuadro de dilogo 184 P pgina color 91 imagen de fondo 91 reutilizar elementos 249 tamao 154 tiempo de descarga estimado 154 ttulo 90 paleta de bibliotecas 255 paleta de capas 220 paleta de estilos 181 paleta de objetos 74 agregar objetos a 311 personalizar 310

paleta de plantillas 102 Paleta, botn 92 paletas abrir y cerrar 73 paletas otantes 76 Paletas otantes, preferencias 78 Parmetros, cuadro de dilogo 308 parrafo, etiquetas 168 Pegar como texto, comando 86 pelculas insertar 299 perl del formato de origen 312 perles de exploradores crear 315 editar 313 plantillas actualizar pgina 104 basar documentos en 103 cambiar nombre 102 comportamientos en 102 convertir una regin en no editable 101 crear 96 editar 104 estilos en 102 introduccin 95 lneas de tiempo en 102 localizar regin editable 104 mtodos abreviados 326 preferencias 98 propiedades de pgina 96 regiones bloqueadas 97 separar documento de 104 plug-ins cambiar tamao 190 comprobar 269 mtodos abreviados de reproduccin 325 reproducir 305 solucionar problemas 305 PNG, imgenes 185 como imgenes de rastreo 85 Predet. etiqueta, opcin 160

336

ndice

preferencias 76 Barra de estado 77 biblioteca 251 Capas 216 colores de etiquetas de HTML 160 Elementos invisibles 89 Formato de la hoja de estilos 182 formato fuente HTML 158 FTP del sitio 133 Fuentes 77 General 76 Paletas otantes 78 plantilla 98 Reescribir HTML 158 Resalto 78 Vista previa en el explorador 153 procesar formularios 246 propiedades applets de Java 307 cambiar con comportamientos 266 capas 216 conjuntos de marcos 237 controles de ActiveX 306 las y celdas 202 imagen 188 marco 236 mostrar 73 mltiples capas 219 pelculas Flash 301 pelculas Shockwave 300 tabla 200 Proteger archivos al abrir, opcin 130 publicacin de contenido dinmico 10 puntos de jacin con nombre 114 Q Quitar la marca de regin editable, comando 101 Quitar lnea de tiempo, comando 295 Quitar marco, comando 290

R rama 128 Redenir etiqueta HTML, opcin 178 Reescribir HTML preferencias 158 regin editable color 98 localizar 104 Registrar ruta de capa, comando 292 reglas 84 reglas horizontales 87 relativas rutas 117 relleno de celdas, opcin 196 Rep. autom., opcin 289 repetir elementos 249 Reproducir lnea de tiempo, accin 286 requisitos del sistema Macintosh 12 Windows 12 Resalto, opcin 96 Restablecer origen, comando 84 Restablecer posicin, comando 85 Restaurar imagen intercambiada, accin 285 Reubicar contenido usando capas, comando 226 Roundtrip HTML 155 rutas absolutas y relativas 117 relativas a la raz del sitio 117 relativas al documento 117 rutas relativas a la raz 117 rutas relativas a la raz del sitio vista previa 153 S saltos de lnea 89 Saltos de lnea, opcin 159 sangrar texto 172 secuencias de comandos 89 introducir y editar 165 propiedades 166 seleccionar capas 221 elementos 88 marcos y conjuntos de marcos 233 objetos en la ventana de documento 88

ndice

337

selector CSS 178 selector de etiquetas 72 Separar de, comando 104 Server-Side Includes comparado con elementos de biblioteca 249 editar 257 insertar 256 ver 256 Shockwave, pelculas cambiar tamao 190 controlar 270 insertar 299 propiedades 300 Show Me, pelculas 13 sitio local crear 108 mapa 122 Vase tambin sitios Sitio, ventana 132 sitios agregar a 121 buscar archivos 138 cach 146 cambiar visualizacin 120 comprobar 149 comprobar vnculos 151 crear 108 denir 130 estructura y exploracin 129 mtodos abreviados 324 seleccionar archivos actualizados 121 ver 118 sonido controlar 271 subrayado 169 superpuestas, etiquetas 155 sustituciones crear 187

T tablas 195 agregar contenido a 197 agregar y eliminar las y columnas 207 ajustar las y columnas 206 alinear 172 anidar 197 borrar ancho y alto de celda 207 cambiar ancho de columna 206 cambiar tamao 206 convertir de capas 226 crear 195, 196 diseos predenidos para 204 etiquetas 200 las y celdas 202 formatear 199 mtodos abreviados 320 ordenar 205 propiedades 200 seleccionar elementos 198 Vase tambin columnas y las, celdas de tabla Tamao de tabulacin, opcin 159 Tamaos de ventana, opcin 77 teclado mtodos abreviados 317 Templates, carpeta 96 texto agregar a documentos 86 alineacin 172 cambiar color 171 cambiar combinaciones de fuentes 170 color predeterminado 91 formatear 167 mtodos abreviados de edicin 318 mtodos abreviados de formato 319 sangrar 172 Texto, opcin de Colores HTML 160 Tiempo de espera FTP, opcin 133 TITLE, etiqueta 74 Traduccin, preferencias 256 transferir archivos solucionar problemas 137

338

ndice

U URL. Vase rutas absolutas y relativas Usar cortafuegos, opcin 130 Usar expresiones regulares, opcin 138 USEMAP, atributo 193 V Validar formulario, accin 285 VBScript 165 Velocidad de conexin, opcin 77 ventana de documento 72 cambiar el tamao 84 seleccionar elementos en 88 ventanas abrir y cerrar 73 mtodos abreviados 327 ver contenido de HEAD 93 HTML bloqueado 100 HTML editable 100 mapa del sitio 119 regiones bloqueadas de la plantilla 99 regiones editables de la plantilla 99 Server-Side Includes 256 sitios locales 119 sitios remotos 119 Vericador de vnculos, cuadro de dilogo 152 Vnc. activos, opcin 91 Vnc. visitados, opcin 91 vincular documentos 113 puntos de jacin 114

vnculos abrir origen 126 actualizar 146 cambiar en todo el sitio 147 cambiar marcos con 240 comprobar 117, 151 con documentos 109 con hojas de estilos 175 con puntos de jacin 114 crear 113 crear con icono de sealizacin de archivo 110 de correo electrnico, cambiar 147 de correo electrnico, crear 115 de secuencias de comandos, cambiar 147 de secuencias de comandos, crear 115 eliminar 126 establecer destino 109 guardar en archivo de cach 146 mapa del sitio 126 mtodos abreviados 323 nulos, cambiar 147 nulos, crear 115 reparar 152 rutas 117 vericar 151 Vista previa en el explorador preferencias 153 vista previa en exploradores 153 mtodos abreviados 324 X XML, etiquetas 155

ndice 339

340

ndice