Adobe Dreamweaver Manual de usuario

Marca: Adobe

Modelo: Dreamweaver

Categoría: Manuales de software

Tipo: Manual de usuario

macromedia

™

Manual de Dreamweaver

Marcas comerciales

Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,

Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage

Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc

Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,

FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge

Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash,

Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip

HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools

to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind y Xtra son marcas comerciales de Macromedia, Inc. y

pueden estar registradas en los Estados Unidos de América o en otras jurisdicciones. Otros nombres de productos, logotipos, diseños,

títulos, palabras o frases mencionados en esta publicación pueden ser marcas comerciales, marcas de servicio o nombres comerciales de

Macromedia, Inc. u otras entidades y pueden estar registrados en determinadas jurisdicciones.

Este manual contiene vínculos con sitios Web de terceros que no están bajo el control de Macromedia, por lo que Macromedia no es

responsable del contenido de ninguno de los sitios vinculados. Si obtiene acceso a un sitio Web de terceros mencionado en este manual, lo

hará por su cuenta y riesgo. Macromedia proporciona estos vínculos exclusivamente para su comodidad, por lo que la inclusión del

vínculo no implica la aceptación de responsabilidad alguna por parte de Macromedia por el contenido de dichos sitios de terceros.

Descargo de responsabilidad de Apple

APPLE COMPUTER, INC. NO OFRECE GARANTÍAS DE NINGÚN TIPO, NI EXPRESAS NI IMPLÍCITAS, EN RELACIÓN

CON EL PAQUETE DE SOFTWARE INFORMÁTICO ADJUNTO, SU COMERCIABILIDAD O SU ADECUACIÓN PARA

UN PROPÓSITO ESPECÍFICO. ALGUNOS ESTADOS NO ADMITEN LA EXCLUSIÓN DE GARANTÍAS IMPLÍCITAS. ES

POSIBLE QUE LA EXCLUSIÓN ANTERIOR NO SE APLIQUE EN SU CASO. ESTA GARANTÍA PROPORCIONA AL USU-

RIO DERECHOS LEGALES ESPECÍFICOS. OTROS DERECHOS QUE LE PUEDAN CORRESPONDER VARÍAN DE UN

ESTADO A OTRO.

ni convertir a ningún formato electrónico o legible por máquina, en parte o en su totalidad, sin el permiso previo y por escrito de

Macromedia, Inc.

Número de componente ZDW40M100SP

Agradecimientos

Dirección del proyecto: Sheila McGinn

Redacción: Kim Diezel, Valerie Hanscom, Jed Hartman, Emily Ricketts

Edición: Anne Szabla y Lisa Stanziano

Administración de la producción: John “Zippy” Lehnus

Producción y diseño multimedia: Aaron Begley y Noah Zilberberg

Producción de la edición impresa: Chris Basmajian, Paul Benkman, Caroline Branch y Rebecca Godbois

Edición y producción Web: Jane Flint DeKoven y Jeff Harmon

Jefe de localisación: Bonnie Loo

Un agradecimiento especial para Jaime Austin, Chris Bank, Saam Barrager, Heidi Bauer, Jennifer Chapman, Winsha Chen, Kristin

Conradi, Margaret Dumas, Peter Fenczik, Jean Fitzgerald, S Fred Golden, Stephanie Goss, Victor Grigorieff, Narciso (nj) Jaramillo, John

Koch, David Lenoe, Eric Lerner, Charles Nadeau, Eric Ott, Jeff Schang, Mike Sundermeyer, Pablo “X/pectro” Arrieta, Veronica Luongo

y los equipos de ingeniería y control de calidad de Dreamweaver.

Primera edición: noviembre de 2000

Macromedia, Inc.

600 Townsend St.

San Francisco, CA 94103

CONTENIDO

INTRODUCCIÓN

Para comenzar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Requisitos del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Instalar Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Aprender a utilizar Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Flujo de trabajo de desarrollo Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Por dónde empezar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Convenciones tipográﬁcas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Novedades de Dreamweaver 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Recursos tecnológicos HTML y Web . . . . . . . . . . . . . . . . . . . . . . . . . 25

Accesibilidad y Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

CAPÍTULO 1

Curso práctico de Dreamweaver . . . . . . . . . . . . . . . . 27

Visita guiada a Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

El área de trabajo de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Conﬁgurar la estructura del sitio para el curso práctico . . . . . . . . . . . . 31

Deﬁnir un sitio local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Crear la página principal del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Diseñar una página en la vista de Disposición . . . . . . . . . . . . . . . . . . . 35

Añadir contenido a la página. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Trabajar en la vista Estándar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Utilizar el panel Activos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Insertar objetos Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Crear una plantilla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Comprobar el sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Siguientes pasos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Contenido

CAPÍTULO 2

Aspectos básicos de Dreamweaver . . . . . . . . . . . . . .71

Área de trabajo de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72

Diferentes vistas de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73

Trabajar con colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88

Colores seguros para la Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89

Deﬁnir preferencias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89

Utilizar Dreamweaver con otras aplicaciones . . . . . . . . . . . . . . . . . . . . .91

Aspectos básicos de la personalización de Dreamweaver . . . . . . . . . . . .91

CAPÍTULO 3

Planificar y configurar el sitio . . . . . . . . . . . . . . . . . . . . 97

Planiﬁcación y diseño de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97

Utilizar Dreamweaver para conﬁgurar un nuevo sitio . . . . . . . . . . . . .104

Editar un sitio Web existente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106

Editar un sitio remoto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107

Quitar un sitio de la lista de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . .108

CAPÍTULO 4

Administración del sitio y colaboración . . . . . . . . . 109

La ventana Sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110

Ver y abrir archivos en la ventana Sitio . . . . . . . . . . . . . . . . . . . . . . . .115

El mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120

Utilizar el mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120

Conﬁgurar un sitio remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128

Integración con WebDAV y SourceSafe. . . . . . . . . . . . . . . . . . . . . . . .131

Solución de problemas de conﬁguración de sitios remotos. . . . . . . . . .134

Utilizar Desproteger/proteger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135

Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138

Utilizar informes para mejorar el ﬂujo de trabajo. . . . . . . . . . . . . . . . .145

Obtener y colocar archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147

Sincronizar los archivos de los sitios local y remoto . . . . . . . . . . . . . . .150

CAPÍTULO 5

Configurar un documento. . . . . . . . . . . . . . . . . . . . . . 153

Crear, abrir y guardar documentos HTML . . . . . . . . . . . . . . . . . . . . .154

Conﬁgurar las propiedades del documento . . . . . . . . . . . . . . . . . . . . .156

Seleccionar elementos en la ventana de documento . . . . . . . . . . . . . . .158

Utilizar guías visuales en el proceso de diseño . . . . . . . . . . . . . . . . . . .160

Ver y editar el contenido de la sección head. . . . . . . . . . . . . . . . . . . . .162

Automatizar tareas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164

Contenido

CAPÍTULO 6

Diseñar la disposición de páginas . . . . . . . . . . . . . . . 171

Celdas y tablas de disposición . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172

Dibujar celdas y tablas de disposición . . . . . . . . . . . . . . . . . . . . . . . . .173

Mover y cambiar el tamaño de celdas y tablas de disposición. . . . . . . .179

Aplicar formato a celdas y tablas de disposición. . . . . . . . . . . . . . . . . .180

Conﬁgurar el ancho de la disposición . . . . . . . . . . . . . . . . . . . . . . . . .183

Conﬁgurar las preferencias de la vista de Disposición . . . . . . . . . . . . .188

CAPÍTULO 7

Utilizar tablas para presentar contenido . . . . . . . . . 189

Insertar una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190

Seleccionar elementos de tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194

Aplicar formato a tablas y celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196

Cambiar el tamaño de tablas y celdas . . . . . . . . . . . . . . . . . . . . . . . . .201

Añadir y eliminar ﬁlas y columnas. . . . . . . . . . . . . . . . . . . . . . . . . . . .202

Copiar y pegar celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206

Ordenar tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207

Exportar datos de tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208

CAPÍTULO 8

Utilizar marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Cuándo utilizar marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210

Crear páginas Web basadas en marcos . . . . . . . . . . . . . . . . . . . . . . . . .211

Crear marcos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211

Seleccionar un marco o un conjunto de marcos. . . . . . . . . . . . . . . . . .215

Guardar archivos de marcos y conjuntos de marcos. . . . . . . . . . . . . . .216

Propiedades de marcos y conjuntos de marcos. . . . . . . . . . . . . . . . . . .218

Controlar el contenido del marco con vínculos . . . . . . . . . . . . . . . . . .225

Manipular navegadores que no pueden mostrar marcos. . . . . . . . . . . .226

Usar comportamientos con marcos . . . . . . . . . . . . . . . . . . . . . . . . . . .227

CAPÍTULO 9

Administrar e insertar activos. . . . . . . . . . . . . . . . . . 229

Utilizar el panel Activos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230

Utilizar activos favoritos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238

Contenido

CAPÍTULO 10

Insertar y aplicar formato a texto. . . . . . . . . . . . . . . 243

Insertar texto y objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244

Crear listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248

Conﬁguración de fuentes, estilos, color y alineación . . . . . . . . . . . . . .249

Utilizar estilos HTML para aplicar formato a texto . . . . . . . . . . . . . .254

Utilizar hojas de estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259

Convertir estilos CSS a etiquetas HTML . . . . . . . . . . . . . . . . . . . . . .268

Comprobar la ortografía . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270

Buscar y reemplazar texto, etiquetas y atributos. . . . . . . . . . . . . . . . . .270

CAPÍTULO 11

Insertar imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Insertar una imagen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .280

Conﬁgurar propiedades de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . .281

Crear mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286

Utilizar un editor de imágenes externo . . . . . . . . . . . . . . . . . . . . . . . .291

Aplicar comportamientos a imágenes . . . . . . . . . . . . . . . . . . . . . . . . .294

CAPÍTULO 12

Uso conjunto de Fireworks y Dreamweaver . . . . 295

Inclusión de archivos de Fireworks en Dreamweaver . . . . . . . . . . . . . .295

Ejecución de Fireworks desde Dreamweaver . . . . . . . . . . . . . . . . . . . .300

Edición de archivos de Fireworks colocados en Dreamweaver . . . . . . .302

Optimización de imágenes y animaciones de Fireworks colocadas

en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305

Actualización de código HTML de Fireworks colocado en

Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .308

Creación de álbumes de fotografías Web . . . . . . . . . . . . . . . . . . . . . . .308

CAPÍTULO 13

Insertar elementos multimedia. . . . . . . . . . . . . . . . . . 313

Insertar objetos multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313

Iniciar un editor externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .314

Utilizar Design Notes con objetos multimedia . . . . . . . . . . . . . . . . . .316

Contenido de Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316

Utilizar objetos de botón Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317

Utilizar objetos de texto Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320

Conﬁgurar propiedades de objetos Flash . . . . . . . . . . . . . . . . . . . . . . .321

Insertar películas Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323

Insertar objetos Generator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325

Contenido

Películas Shockwave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326

Añadir sonido a una página. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327

Insertar contenido de plug-ins de Netscape Navigator. . . . . . . . . . . . .330

Insertar un control ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332

Insertar un applet de Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334

Utilizar parámetros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .335

Utilizar comportamientos para controlar elementos multimedia . . . . .336

CAPÍTULO 14

Editar HTML en Dreamweaver. . . . . . . . . . . . . . . . 337

Aspectos básicos de las etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . .338

Insertar comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .343

Utilizar el panel Referencia de Dreamweaver. . . . . . . . . . . . . . . . . . . .344

Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .346

Utilizar la vista de Código (o el inspector de código) . . . . . . . . . . . . .347

Insertar secuencias de comandos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .351

Abrir y editar archivos no HTML en Dreamweaver. . . . . . . . . . . . . . .354

Editar una etiqueta HTML en la vista de Diseño . . . . . . . . . . . . . . . .355

Conﬁgurar preferencias de formato de código . . . . . . . . . . . . . . . . . . .360

Limpiar código HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .364

Limpiar HTML de Microsoft Word . . . . . . . . . . . . . . . . . . . . . . . . . .366

Utilizar editores de HTML externos . . . . . . . . . . . . . . . . . . . . . . . . . .368

CAPÍTULO 15

Crear vínculos y navegar . . . . . . . . . . . . . . . . . . . . . . . 371

Ubicación y rutas de documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . .372

Crear vínculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .376

Administrar vínculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384

Crear menús de salto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .387

Crear barras de navegación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .389

Adjuntar comportamientos a vínculos: . . . . . . . . . . . . . . . . . . . . . . . .393

CAPÍTULO 16

Reutilizar contenido con plantillas y bibliotecas . . 395

Crear plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .397

Deﬁnir las regiones editables de una plantilla . . . . . . . . . . . . . . . . . . .401

Crear documentos basados en plantillas. . . . . . . . . . . . . . . . . . . . . . . .408

Actualizar páginas basadas en una plantilla . . . . . . . . . . . . . . . . . . . . .411

Exportar e importar contenido XML. . . . . . . . . . . . . . . . . . . . . . . . . .412

Crear, administrar y editar elementos de biblioteca . . . . . . . . . . . . . . .415

Usar server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423

Contenido

CAPÍTULO 17

Usar capas dinámicas . . . . . . . . . . . . . . . . . . . . . . . . 427

Capas y código HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .428

Crear capas en la página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .429

Trabajar con capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .432

Conﬁgurar propiedades de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . .437

Cambiar el orden de apilamiento de las capas . . . . . . . . . . . . . . . . . . .441

Cambiar la visibilidad de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . .442

Usar tablas y capas para diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .443

Animar las capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .446

Acciones de comportamiento para controlar líneas de tiempo

de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .456

CAPÍTULO 18

Usar comportamientos . . . . . . . . . . . . . . . . . . . . . . . 457

El panel Comportamientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .458

Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .458

Adjuntar un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .461

Comportamientos y texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .463

Adjuntar un comportamiento a una línea de tiempo . . . . . . . . . . . . . .464

Cambiar un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .465

Actualizar un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .466

Crear nuevas acciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .466

Descargar e instalar comportamientos de terceros. . . . . . . . . . . . . . . .466

Usar las acciones de comportamiento incluidas con Dreamweaver. . . .467

CAPÍTULO 19

Depurar código JavaScript . . . . . . . . . . . . . . . . . . . 499

Ejecutar el depurador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .500

Buscar y reparar errores de lógica. . . . . . . . . . . . . . . . . . . . . . . . . . . . .502

Contenido

CAPÍTULO 20

Crear formularios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507

Secuencias de comandos CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .508

Objetos de formulario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .508

Crear un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .510

Campos de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .511

Insertar casillas de veriﬁcación y botones de opción. . . . . . . . . . . . . . .517

Listas y menús. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .520

Botones de formulario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523

Diseño de formularios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .524

Procesar formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .526

Usar comportamientos con formularios. . . . . . . . . . . . . . . . . . . . . . . .527

CAPÍTULO 21

Comprobar y publicar un sitio . . . . . . . . . . . . . . . . . 529

Comprobar la compatibilidad con los navegadores . . . . . . . . . . . . . . .531

Usar comportamientos para detectar navegadores y plug-ins . . . . . . . .532

Vista previa en navegadores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .532

Comprobar vínculos en una página o un sitio . . . . . . . . . . . . . . . . . . .534

Comprobar el tiempo de descarga y el tamaño . . . . . . . . . . . . . . . . . .537

Utilizar informes para comprobar un sitio. . . . . . . . . . . . . . . . . . . . . .538

CAPÍTULO 22

Personalizar Dreamweaver . . . . . . . . . . . . . . . . . . . . 541

Cambiar el tipo de archivo predeterminado. . . . . . . . . . . . . . . . . . . . .542

Modiﬁcar el panel Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543

Crear un objeto simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544

Personalizar menús de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . .545

Personalizar la apariencia de cuadros de diálogo. . . . . . . . . . . . . . . . . .557

Cambiar el formato HTML predeterminado. . . . . . . . . . . . . . . . . . . .558

Trabajar con perﬁles de navegador. . . . . . . . . . . . . . . . . . . . . . . . . . . .560

Ampliar Dreamweaver: principios básicos . . . . . . . . . . . . . . . . . . . . . .564

Personalizar la apariencia de etiquetas de terceros . . . . . . . . . . . . . . . .565

Contenido

APÉNDICE A

Métodos abreviados de teclado . . . . . . . . . . . . . . . 575

Menú Archivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .575

Menú Edición . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .576

Vistas de página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .576

Ver elementos de página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .577

Editar código. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .577

Editar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .578

Aplicar formato al texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .579

Buscar y reemplazar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .579

Trabajar con tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .580

Trabajar con marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .580

Trabajar con capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .581

Trabajar con líneas de tiempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .582

Trabajar con imágenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .582

Administrar hipervínculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .582

Establecer destino y obtener vista previa en navegadores . . . . . . . . . . .583

Depurar en navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .583

Administración de sitio y FTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .583

Mapa del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .584

Reproducir plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .584

Trabajar con plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .584

Insertar objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585

Panel Historial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585

Abrir y cerrar paneles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585

Obtener ayuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586

Matriz de métodos abreviados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .587

ÍNDICE

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591

INTRODUCCIÓN

.............................................................................................................

Para comenzar

Macromedia Dreamweaver es un editor de código HTML profesional para el

diseño visual y la administración de sitios y páginas Web. Tan si preﬁere controlar

manualmente el código HTML como si preﬁere trabajar en un entorno de edición

visual, Dreamweaver le permite ponerse manos a la obra rápidamente y le facilita

herramientas útiles para mejorar su experiencia en diseño Web.

Dreamweaver incluye numerosas herramientas y funciones de edición de código:

referencias HTML, CSS y JavaScript, un depurador JavaScript y editores de

código (la vista de Código y el inspector de código) que permiten editar

JavaScript, XML y otros documentos de texto directamente en Dreamweaver. La

tecnología Roundtrip HTML de Macromedia importa documentos HTML sin

necesidad de cambiar el formato del código y, además, es posible conﬁgurar

Dreamweaver para limpiar y cambiar el formato HTML cuando lo desee.

Las funciones de edición visual de Dreamweaver también le permiten añadir

diseño y funcionalidad rápidamente sin escribir una sola línea de código. Puede

ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar

directamente hasta un documento. Agilice su ﬂujo de trabajo de desarrollo

mediante la creación y edición de imágenes en Macromedia Fireworks y su

importación directa a Dreamweaver, o bien añadiendo objetos Flash que puede

crear directamente en Dreamweaver.

Dreamweaver se puede personalizar totalmente. Utilice Dreamweaver para crear

sus propios objetos y comandos, modiﬁcar métodos abreviados de teclado e

incluso escribir código JavaScript para ampliar las posibilidades que ofrece

Dreamweaver con nuevos comportamientos, inspectores de propiedades e

informes de sitios.

Introducción

Requisitos del sistema

Para ejecutar Dreamweaver, es preciso disponer del hardware y el software

siguientes.

Para Microsoft Windows:

•

Un procesador Intel Pentium o equivalente a 166 MHz o más rápido que

ejecute Windows 95, Windows 98, Windows 2000, Windows Me o Windows

NT (con Server Pack 3).

•

La versión 4.0 o posterior de Netscape Navigator o Microsoft Internet Explorer.

•

32 MB de memoria de acceso aleatorio (RAM), además de 110 MB de espacio

libre en el disco duro.

•

Un monitor de 256 colores con capacidad para mostrar una resolución de 800

x 600 píxeles.

•

Una unidad de CD-ROM.

Para Macintosh:

•

Un Power Macintosh con Mac OS 8,6 ó 9.x.

•

32 MB de memoria de acceso aleatorio (RAM), además de 135 MB de espacio

libre en el disco duro.

•

Un monitor de 256 colores con capacidad para mostrar una resolución de 800

x 600 píxeles.

•

Una unidad de CD-ROM.

Instalar Dreamweaver

Siga estos pasos para instalar Dreamweaver en un sistema Windows o Macintosh.

Para instalar Dreamweaver:

Introduzca el CD de Dreamweaver en la unidad de CD-ROM del ordenador.

Dispone de las opciones siguientes:

•

En Windows, elija Inicio > Ejecutar. Haga clic en Examinar y elija el archivo

Dreamweaver 4 Installer.exe del CD de Dreamweaver. En el cuadro de diálogo

Ejecutar, haga clic en Aceptar para comenzar la instalación.

•

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

Siga las instrucciones que aparecen en pantalla.

Si el sistema lo solicita, reinicie el ordenador.

Para comenzar

Aprender a utilizar Dreamweaver

Macromedia Dreamweaver incluye diversos recursos para ayudarle a aprender

rápidamente el funcionamiento del programa y a dominar la creación de sitios y

páginas Web. Entre dichos recursos ﬁguran un manual impreso, páginas de ayuda

en línea, películas de una Visita guiada y lecciones interactivas. También

encontrará sugerencias, notas técnicas, ejemplos e información actualizada de

forma regular en el Centro de servicio técnico de Dreamweaver, dentro del sitio

Web de Macromedia.

Comience viendo las películas de la Visita guiada para conocer las funciones de

Dreamweaver. Después, realice el curso práctico de Dreamweaver. Finalmente,

siga las lecciones de Dreamweaver para aprender a realizar tareas especíﬁcas en

Dreamweaver.

Películas de la Visita guiada

Las películas de la Visita guiada proporcionan una introducción con animación al

proceso de desarrollo Web y le guían a través de una demostración de las funciones

de Dreamweaver.

Para ver una película de la Visita guiada, elija Ayuda > Visita guiada y haga clic en

el título de una de las películas. Cuando se termine cada película, haga clic en

Inicio para regresar a la lista de películas y, seguidamente, haga clic en otra

película. Puede ver la visita completa o pasar a las secciones que más le interesen.

Curso práctico

El curso práctico de Dreamweaver es el mejor lugar para comenzar si desea

adquirir algo de experiencia práctica en la creación de páginas con Dreamweaver.

Con este curso práctico aprenderá a crear un sitio Web de ejemplo con algunas de

las funciones más útiles y potentes de Dreamweaver. El curso práctico se incluye

tanto en la Ayuda de Dreamweaver como en el

Manual de Dreamweaver

impreso.

También puede descargar una versión imprimible del curso práctico desde el sitio

Web de Macromedia.

El curso práctico incluye páginas de ejemplo y activos (imágenes y archivos de

Macromedia Flash) que le ayudarán a iniciarse en el desarrollo de un sitio Web.

Introducción

Lecciones de Dreamweaver

Dreamweaver se suministra con un conjunto de lecciones interactivas. Cada

lección le guía a través de los diferentes pasos de una tarea especíﬁca e incluye

páginas de muestra que contienen todos los elementos de diseño y funcionales

necesarios. Puede utilizar las lecciones como guías detalladas paso a paso con

páginas de muestra o como referencia mientras trabaja en sus propias páginas.

Para localizar las lecciones, elija Ayuda > Lecciones y seleccione un tema.

Manual de Dreamweaver (libro impreso)

Manual de Dreamweaver

constituye una alternativa impresa a la Ayuda de

Dreamweaver que contiene información sobre la utilización de los comandos y las

funciones de Dreamweaver. Algunos temas de consulta sobre opciones del

programa no se incluyen en el libro impreso. Consulte la Ayuda de Dreamweaver

para obtener información sobre dichos temas.

Si ha adquirido la versión ESD (descarga electrónica de software) de

Dreamweaver, podrá descargar una versión imprimible del

Manual Dreamweaver

desde el Centro de servicio técnico de Dreamweaver en la dirección http://

www.macromedia.com/support/dreamweaver/documentation.html.

Ayuda de Dreamweaver

La Ayuda de Dreamweaver proporciona información completa sobre todas las

funciones de Dreamweaver optimizada para su uso en línea.

Para obtener un resultado óptimo a la hora de ver la Ayuda de Dreamweaver,

utilice Netscape Navigator 4.0 o posterior Microsoft Internet Explorer 4.0 o

posterior.

La Ayuda de Dreamweaver hace un amplio uso de JavaScript. Asegúrese de que

JavaScript está activado en su navegador. Si tiene intención de usar la función de

búsqueda, asegúrese de que también está activado Java.

Para comenzar

La Ayuda de Dreamweaver incluye los componentes siguientes:

Contenido

Permite ver toda la información organizada por temas. Haga clic en las

entradas de nivel superior para ver otros temas subordinados.

Índice

Al igual que un índice impreso, sirve para localizar términos importantes o

para acceder a temas relacionados.

Buscar

Permite localizar cualquier cadena de caracteres en todos los temas. La

función de búsqueda requiere un navegador 4.0 con Java activado.

Nota:

Al hacer clic en Buscar, puede aparecer una ventana de seguridad de Java

solicitando permiso para leer los archivos del disco duro. Deberá conceder este permiso

para que funcione la búsqueda. La applet no escribe en el disco duro ni lee archivos fuera

de la Ayuda de Dreamweaver.

•

Para buscar una frase, sencillamente escríbala en el campo de texto.

•

Para buscar archivos que contengan dos palabras clave (por ejemplo,

capas

estilos

), separe los términos de la búsqueda con un signo más (+).

Introducción

Ayuda contextual

Proporciona un botón de Ayuda en cada cuadro de diálogo o un

icono de signo de interrogación en los inspectores, las ventanas y los paneles para

abrir el tema de Ayuda correspondiente.

Barra de navegación de la Ayuda de Dreamweaver

Proporciona botones en los

que puede hacer clic para pasar de un tema a otro. Los botones de ﬂecha derecha e

izquierda permiten acceder al tema anterior o siguiente de una sección (siguiendo

el orden de los temas establecido en el contenido).

Ampliar Dreamweaver

El sistema de ayuda

Ampliación de Dreamweaver

proporciona información para

ingenieros de desarrollo en JavaScript y C sobre el DOM (modelo de objetos de

documento) y las API (interfaces de programación de aplicaciones) de

Dreamweaver, que permiten crear objetos, comandos, inspectores de propiedades,

comportamientos y traductores.

Centro de servicio técnico de Dreamweaver

El sitio Web Centro de servicio técnico de Dreamweaver se actualiza de forma

periódica con la información más reciente sobre Dreamweaver, así como con

sugerencias de usuarios expertos, ejemplos, sugerencias, actualizaciones e

información sobre temas avanzados. Visite este sitio Web con frecuencia para

conocer las últimas noticias sobre Dreamweaver y aprender a sacar el máximo

provecho del programa en la dirección http://www.macromedia.com/support/

dreamweaver/.

Grupo de debate sobre Dreamweaver

Intercambie ideas sobre aspectos técnicos y comparta útiles consejos con otros

usuarios de Dreamweaver visitando el grupo de debate de Dreamweaver.

Encontrará más información sobre cómo obtener acceso al grupo de debate en el

sitio Web de Macromedia en la dirección http://www.macromedia.com/software/

dreamweaver/discussiongroup/.

Haga clic aquí para abrir la Ayuda

Para comenzar

Flujo de trabajo de desarrollo Web

El ﬂujo de trabajo de desarrollo Web comienza con el proceso de deﬁnición de una

estrategia y unos objetivos del sitio, continúa con el diseño (durante el cual se

deﬁne el aspecto y el funcionamiento de un sitio propuesto) y avanza hasta la fase

de producción y desarrollo (durante la cual se crea el sitio y se codiﬁcan las

páginas); la funcionalidad del sitio se comprueba para ver si se cumplen los

objetivos establecidos y, seguidamente, se publica el sitio. Muchos ingenieros de

desarrollo también programan operaciones de mantenimiento periódico para

asegurarse de que el sitio continúa estando actualizado y operativo.

Para facilitar la localización de información necesaria para el desarrollo de sitios

Web, el

Manual de Dreamweaver

se divide en amplias secciones que siguen este

modelo estándar de aproximación al desarrollo Web: planiﬁcación del sitio,

diseño, desarrollo, comprobación y publicación y mantenimiento.

Planificar sitios

Planiﬁcar y organizar cuidadosamente el sitio desde el primer momento puede

ayudar a ahorrar tiempo más adelante. La organización del sitio implica mucho

más que determinar el lugar en el que irá cada archivo: la planiﬁcación del sitio

implica con frecuencia investigar los requisitos que debe cumplir el sitio, el perﬁl

de la audiencia y los objetivos del sitio. Además, debe tener en cuenta requisitos

técnicos tales como el acceso de los usuarios, los navegadores, los plug-ins o las

restricciones a la descarga de archivos.

Una vez que haya organizado la información y que haya determinado una

estructura operativa, podrá comenzar a crear el sitio.

•

Determine qué estrategia va a emplear y cuáles son los aspectos relativos a los

usuarios que debe tener en cuenta durante la planiﬁcación del sitio. Consulte

“Planiﬁcar y conﬁgurar el sitio” en la página 97.

•

Utilice el mapa del sitio de Dreamweaver para establecer la estructura

organizativa del sitio. En la ventana Sitio de Dreamweaver puede añadir, borrar

y renombrar los archivos y carpetas fácilmente con el ﬁn de cambiar la

organización según resulte necesario. Consulte “Administración del sitio y

colaboración” en la página 109.

Si trabaja en un equipo de desarrollo Web, es posible que también le interesen

estos temas:

•

Establezca sistemas que impidan que los miembros de un equipo sobrescriban

archivos; consulte Conﬁgurar el sistema de desprotección/protección.

•

Utilice Design Notes para comunicarse con otros miembros del equipo de

desarrollo Web; consulte Guardar información sobre archivos en Design Notes.

Introducción

Diseñar páginas Web

La mayoría de los proyectos de diseño Web comienzan con guiones en imágenes

(storyboards) o diagramas de ﬂujos que se convierten en páginas de muestra.

Utilice Dreamweaver para crear páginas de muestra mientras trabaje en la

deﬁnición de un diseño ﬁnal. Las páginas de muestra normalmente incluyen la

disposición de diseño, la navegación del sitio, los componentes técnicos, los temas

y el color e imágenes gráﬁcas u otros elementos multimedia.

•

Cree documentos HTML en Dreamweaver, añada fácilmente un título de

página o un color de fondo. Consulte “Conﬁgurar un documento” en la

página 153.

•

La vista Disposición de Dreamweaver y las herramientas de disposición le

permiten diseñar rápidamente páginas Web y, posteriormente, reorganizar la

estructura de las páginas. Consulte “Diseñar la disposición de páginas” en la

página 171.

•

Utilice el panel Objetos de Dreamweaver para diseñar y añadir rápidamente

tablas, crear documentos de marcos, diseñar formularios y trabajar con capas.

Consulte “Utilizar tablas para presentar contenido” en la página 189, “Utilizar

marcos” en la página 209, “Usar capas dinámicas” en la página 427 y “Crear

formularios” en la página 507.

Añadir contenido

Mediante Dreamweaver, podrá añadir fácilmente a las páginas Web una gran

variedad de contenidos. Añada activos y elementos de diseño, como texto,

imágenes, colores, películas, sonido y otros elementos multimedia.

•

El panel Activos le permite organizar fácilmente los activos de un sitio y

después arrastrar los activos directamente desde el panel Activos hasta un

documento cualquiera de Dreamweaver. Consulte “Administrar e insertar

activos” en la página 229.

•

Escriba directamente en un documento de Dreamweaver o importe texto desde

otros documentos, luego aplique formato al texto utilizando el inspector de

propiedades de Dreamweaver o el panel Estilos HTML. También puede crear

fácilmente sus propias CSS (Cascading Style Sheets: hojas de estilos en

cascada). Consulte “Insertar y aplicar formato a texto” en la página 243.

•

Inserte imágenes, incluidas imágenes de sustitución, mapas de imágenes e

imágenes por capas de Fireworks. Utilice herramientas de alineación para situar

las imágenes en la página. Consulte “Insertar imágenes” en la página 279 y

“Uso conjunto de Fireworks y Dreamweaver” en la página 295.

•

Inserte cualquier otro tipo de elementos multimedia en una página Web, como

películas Flash, Shockwave y QuickTime, sonido y applets. Consulte “Insertar

elementos multimedia” en la página 313.

Para comenzar

•

Añada contenido en el editor de código de Dreamweaver: Utilice la vista

Código de Dreamweaver o el inspector de código para escribir su propio código

HTML o JavaScript. Consulte “Editar HTML en Dreamweaver” en la

página 337.

•

Con Dreamweaver puede crear vínculos HTML estándar, incluidos vínculos de

ﬁjación y vínculos de correo electrónico, o establecer sistemas de navegación

gráﬁca, como los menús de salto y las barras de navegación. Consulte “Crear

vínculos y navegar” en la página 371.

•

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

fácilmente contenido reutilizable en su sitio. Puede crear páginas nuevas a partir

de la plantilla y luego añadir o cambiar contenido en las áreas editables.

Consulte “Reutilizar contenido con plantillas y bibliotecas” en la página 395.

Interactividad y animación

Muchas páginas Web son estáticas, pues sólo contienen texto e imágenes.

Dreamweaver permite ir más allá de las páginas estáticas, utilizando interactividad

y animación para captar el interés de los visitantes. Puede ofrecer a los visitantes la

posibilidad de realizar comentarios según se desplazan y hacen clic, así como

demostrar conceptos y validar datos de formularios sin establecer contacto con el

servidor. En otras palabras, permite a los visitantes ver y hacer más cosas dentro de

la página.

Dreamweaver dispone de varias maneras de añadir interactividad y animación a las

páginas:

•

Use líneas de tiempo para crear animaciones que no necesitan plug-ins,

controles ActiveX o Java. Las líneas de tiempo usan HTML dinámico para

cambiar la posición de una capa o el origen de una imagen con el paso del

tiempo, o para activar automáticamente acciones de comportamiento cuando la

página ha terminado de cargarse. Consulte “Usar capas dinámicas” en la

página 427.

•

Use los comportamientos para realizar tareas de respuesta a eventos especíﬁcos,

como por ejemplo, resaltar un botón cuando el puntero pasa por encima de él,

validar un formulario cuando el usuario hace clic en el botón Enviar o abrir una

segunda ventana del navegador cuando la página principal ha terminado de

cargarse. Consulte “Usar comportamientos” en la página 457.

•

Depure código JavaScript personalizado. Consulte “Depurar código JavaScript”

en la página 499.

•

Utilice formularios para permitir a los visitantes del sitio introducir datos

directamente en la página Web. Consulte “Crear formularios” en la página 507.

Introducción

Comprobar y publicar el sitio

Su sitio ya está listo para lanzarlo al mundo; pero antes de publicarlo en un

servidor, debe comprobarlo. En función del tamaño del proyecto, de las

especiﬁcaciones del cliente y de los tipos de navegadores que utilicen los visitantes,

necesitará mover el sitio a un servidor en funcionamiento en el que pueda

comprobarse y editarse. Una vez que haya realizado las correcciones, podrá

publicar el sitio para que el público en general pueda obtener acceso a él. Una vez

publicado el sitio, establezca un ciclo de mantenimiento para asegurar la calidad,

responder a los comentarios de los usuarios y actualizar la información del sitio.

Utilice las siguientes funciones de Dreamweaver para comprobar y publicar sus

sitios:

•

Para añadir nuevas etiquetas en una página o reparar el código, utilice el panel

Referencia de Dreamweaver con el ﬁn de consultar el código JavaScript, CSS y

HTML. Consulte “Utilizar el panel Referencia de Dreamweaver” en la

página 344.

•

Utilice el depurador JavaScript para que le resulte más fácil reparar errores

JavaScript en el código. El depurador permite establecer puntos de corte en el

código que luego facilitan la visualización del código conforme se depura una

página en Dreamweaver. Consulte “Depurar código JavaScript” en la

página 499.

•

Realice comprobaciones con navegadores y plug-ins, compruebe y repare

vínculos de sus documentos y genere informes del sitio para detectar errores

comunes en los archivos HTML. Consulte “Comprobar y publicar un sitio” en

la página 529.

•

En la ventana Sitio de Dreamweaver encontrará numerosas herramientas que le

ayudarán a administrar el sitio, transferir archivos desde y hacia un servidor

remoto, conﬁgurar un proceso de desprotección/protección que evite que se

sobrescriban archivos y sincronizar los archivos de los sitios local y remoto.

Consulte “Administración del sitio y colaboración” en la página 109.

Por dónde empezar

Este manual contiene información para usuarios de distintos niveles. Para sacarle

el máximo provecho a la documentación, comience leyendo las partes que sean

más relevantes para su nivel de experiencia.

Para usuarios sin experiencia en HTML:

Para empezar, vea las películas de la Visita guiada. Desde el menú principal de

Dreamweaver, elija Ayuda > Visita guiada.

A continuación siga las indicaciones del curso práctico de Dreamweaver. Elija

Ayuda > Curso práctico o siga los pasos del manual impreso.

Para comenzar

Trabaje con las lecciones correspondientes a los temas que le interesen. Elija

Ayuda > Lecciones y luego seleccione una lección.

Continúe con “Aspectos básicos de Dreamweaver” en la página 71, “Planiﬁcar y

conﬁgurar el sitio” en la página 97, “Administración del sitio y colaboración” en

la página 109 y “Crear vínculos y navegar” en la página 371.

Para obtener información sobre la aplicación de formato al texto y la inserción

de imágenes en las páginas, lea “Insertar y aplicar formato a texto” en la

página 243 y “Insertar imágenes” en la página 279.

Eso es todo lo que necesita para comenzar a crear sitios Web de gran calidad.

Cuando esté preparado para aprender a utilizar herramientas más avanzadas de

diseño e interacción, podrá continuar con el resto del manual por orden. Quizá le

resulte conveniente omitir el capítulo “Personalizar Dreamweaver” en la

página 541, al menos al principio.

Para diseñadores de sitios Web con experiencia que empiezan a usar

Dreamweaver:

Para empezar, vea las películas de la Visita guiada. Desde el menú principal de

Dreamweaver, elija Ayuda > Visita guiada.

Siga el curso práctico de Dreamweaver, en el que aprenderá los aspectos básicos

de uso del programa. Elija Ayuda > Curso práctico o siga los pasos del manual

impreso.

Trabaje con las lecciones correspondientes a los temas que le interesen. Elija

Ayuda > Lecciones y luego seleccione una lección.

Lea “Aspectos básicos de Dreamweaver” en la página 71 para obtener más

información general sobre el interfaz de usuario de Dreamweaver.

Aunque probablemente le resulte familiar gran parte del material de

“Administración del sitio y colaboración” en la página 109 y “Crear vínculos y

navegar” en la página 371, lea por encima esos capítulos para ver cómo se

aplican en Dreamweaver estos conceptos conocidos, prestando especial

atención a Utilizar Dreamweaver para conﬁgurar un sitio nuevo. A

continuación, lea “Administración del sitio y colaboración” en la página 109.

“Insertar y aplicar formato a texto” en la página 243 y “Insertar imágenes” en la

página 279 ofrecen información útil sobre el uso de Dreamweaver para crear

páginas HTML básicas.

Lea la introducción que aparece al comienzo de cada capítulo para determinar

si le interesan los temas que se abordan en él.

Introducción

Para diseñadores de sitios Web con experiencia en el uso de Dreamweaver 3:

Comience leyendo Novedades de Dreamweaver 4. Siga las referencias cruzadas

desde dicha sección en la que se tratan todas las funciones nuevas de

Dreamweaver.

Conviene leer por encima “Aspectos básicos de Dreamweaver” en la página 71

para conocer los nuevos aspectos del interfaz de usuario de Dreamweaver.

Consulte las lecciones de Dreamweaver; elija Ayuda > Lecciones para obtener la

lista de lecciones interactivas disponibles.

4 Si está interesado en personalizar y ampliar Dreamweaver, lea “Personalizar

Dreamweaver” en la página 541.

Convenciones tipográficas

En esta guía se utilizan las convenciones tipográﬁcas siguientes:

• Fuente de código Indica nombres de etiquetas y atributos HTML, así como el

texto literal empleado en los ejemplos.

•

Fuente de código en cursiva

Indica elementos reemplazables (también

denominados metasímbolos) en el código.

• Texto Roman en negrita Indica el texto que se debe introducir literalmente.

Novedades de Dreamweaver 4

Las nuevas funciones de Dreamweaver 4 mejoran la edición del código HTML,

facilitan el diseño de páginas, mejoran la administración del sitio y sus activos, le

permiten crear sus propios objetos Flash, agilizan el ﬂujo de trabajo, mejoran la

colaboración en equipo y permiten personalizar y ampliar Dreamweaver.

Edición de código mejorada

La barra de herramientas de Dreamweaver permite administrar la forma en que se

ve una página: vista de Diseño, vista de Código o vista combinada de código y

diseño. La barra de herramientas permite el acceso a funciones que se utilizan de

forma habitual, como Previsualizar en el navegador y Design Notes. Consulte

“Utilizar la barra de herramientas” en la página 78.

Vista de Código proporciona una nueva forma de ver el código fuente HTML

directamente en la ventana de documento de Dreamweaver. Consulte “Utilizar la

vista de Código (o el inspector de código)” en la página 347. También puede

editar documentos no HTML, como archivos JavaScript y archivos XML,

directamente en la vista de Código de Dreamweaver. Consulte “Insertar secuencias

de comandos” en la página 351.

Para comenzar 23

Editores de código integrados Dreamweaver incorpora ahora editores de código

avanzados: la vista de Código y el inspector de código. Puede conﬁgurar ajuste de

texto, sangría de código y aplicación de color a la sintaxis, entre otras opciones,

desde el menú Opciones de cualquiera de estos dos editores. Consulte “Conﬁgurar

las opciones de la vista de Código (o el inspector de código)” en la página 349.

El panel Referencia es una herramienta de consulta rápida para código HTML,

JavaScript y CSS. Proporciona información sobre las etiquetas especíﬁcas con las

que está trabajando en la vista de Código (o en el inspector de código). Consulte

“Utilizar el panel Referencia de Dreamweaver” en la página 344.

El menú emergente Navegación por el código le permite seleccionar código para

funciones JavaScript en una página; mediante el uso de este menú, puede navegar

rápidamente por el código JavaScript mientras trabaja en la vista Código.

Consulte “Ver funciones de secuencia de comandos” en la página 354.

El depurador JavaScript le permite depurar documentos JavaScript desde

Dreamweaver. Por ejemplo, puede deﬁnir puntos de corte para controlar el código

que desea examinar. Consulte “Depurar código JavaScript” en la página 499.

Diseño de página más sencillo

La vista de Disposición le permite diseñar rápidamente páginas Web dibujando

cuadros (tablas o celdas) a los que puede añadir contenido. Consulte “Dibujar

celdas y tablas de disposición” en la página 173.

Las plantillas mejoradas facilitan la identiﬁcación de las regiones editables en un

archivo de plantilla. Las plantillas muestran ahora una ﬁcha que contiene el

nombre de la región editable y un rectángulo delimitador. Consulte “Crear

plantillas” en la página 397.

Las hojas de estilos CSS pueden deﬁnirse ahora inmediatamente después de crear

un nuevo estilo. También puede adjuntar fácilmente una hoja de estilos CSS

existente a un botón en el panel Estilos CSS. Consulte “Utilizar hojas de estilos

CSS” en la página 259.

Integración mejorada

Los botones Flash y el texto Flash están ahora incorporados en Dreamweaver.

Puede elegir entre un conjunto de botones Flash predeﬁnidos e insertarlos en su

documento o hacer que su diseñador Flash cree plantillas de botones

personalizados automáticamente. Consulte “Utilizar objetos de botón Flash” en la

página 317 y “Utilizar objetos de texto Flash” en la página 320.

La división Roundtrip le permite integrar complemente Dreamweaver y Fireworks

4. Puede editar y actualizar imágenes y tablas HTML importadas de Fireworks.

También puede editar en Dreamweaver o Fireworks y hacer que los cambios se

conserven en ambos sitios. Consulte “Edición de archivos de Fireworks colocados

en Dreamweaver” en la página 302.

Introducción24

El selector de color seguro para la Web le permite encontrar fácilmente

correspondencias para colores y gráﬁcos. Con un solo clic, puede seleccionar un

color de cualquier lugar del escritorio para que el selector lo ajuste al color seguro

para la Web más próximo. Consulte “Trabajar con colores” en la página 88.

Optimizar el flujo de trabajo

El panel Activos le permite administrar los activos de su sitio. Puede ver todas las

imágenes, colores, URL externos y secuencias de comandos, así como elementos

de Flash, Shockwave, QuickTime, plantillas y bibliotecas desde un lugar central.

Previsualice los activos y luego arrástrelos hasta el lugar deseado del documento

HTML. Guarde activos utilizados habitualmente en una lista de favoritos y

reutilícelos en otros sitios. Consulte “Utilizar el panel Activos” en la página 230 y

“Utilizar activos favoritos” en la página 238.

Las Design Notes mejoradas le permiten adjuntar notas a un archivo de modo

que pueda realizar un seguimiento de sus cambios e informar sobre cuestiones de

diseño a otros miembros del equipo. Puede insertar y ver comentarios

directamente en la ventana Sitio de Dreamweaver. Consulte “Design Notes” en la

página 138 y “Utilizar informes para mejorar el ﬂujo de trabajo” en la página 145.

El correo electrónico integrado le permite comunicarse con los demás miembros

de su equipo. Cuando alguien proteja un archivo, ahora podrá hacer clic en el

nombre del miembro del equipo para enviarle un mensaje de correo electrónico.

Consulte “Conﬁgurar el sistema de desprotección/protección” en la página 136.

La generación de informes del sitio le permite utilizar varios informes predeﬁnidos

para comprobar problemas comunes de documentos HTML, como los

documentos sin título o la ausencia de etiquetas alt. También puede escribir

informes personalizados que se adapten a sus necesidades, ver los resultados de los

informes y abrir los archivos relacionados con los problemas dentro de la ventana

de resultados del informe. Consulte “Conﬁgurar el sistema de desprotección/

protección” en la página 136 y “Crear informes” en la página 538.

Integración con SourceSafe Si dispone de SourceSafe, ahora podrá depositar o

retirar archivos de SourceSafe mientras trabaja en Dreamweaver. Consulte

“Utilizar Dreamweaver con Visual SourceSafe” en la página 133.

La integración WebDAV utiliza ahora Dreamweaver para transferir archivos

empleando el protocolo WebDAV. Consulte “Utilizar Dreamweaver con el

protocolo WebDAV” en la página 131.

Package Manager (antes Extension Manager) instala fácilmente extensiones con

un solo clic. Visite Macromedia Exchange y descargue extensiones útiles que le

facilitarán su trabajo. Consulte “Añadir extensiones a Dreamweaver” en la

página 95.

Para comenzar 25

Interfaz de usuario común

Los métodos abreviados de teclado cuentan con un nuevo interfaz común a todos

los productos de publicación Web de Macromedia. Este nuevo interfaz permite

editar métodos abreviados existentes, crear otros nuevos para elementos de menús

y borrar métodos abreviados de teclado que ya no necesite. También puede

alternar entre conjuntos de conﬁguraciones de métodos abreviados de teclado.

Consulte “Utilizar el editor de métodos abreviados de teclado” en la página 92.

La administración de ventanas se ha mejorado: todas las ventanas se ajustan. Al abrir

una nueva ventana, Dreamweaver impide que se superponga a otros paneles visibles.

Los paneles cuentan ahora con nuevo diseño Macromedia y se comportan de

forma homogénea en los distintos productos de publicación Web. Todos los

paneles tienen iconos y texto para que pueda identiﬁcarlos fácilmente. Todos los

paneles utilizan colores y fuentes del sistema tanto en Windows como en

Macintosh, al tiempo que tienen comportamientos semejantes de ajuste y arrastre.

Recursos tecnológicos HTML y Web

A continuación se indican algunos recursos útiles disponibles en la Web:

La especificación HTML 4.0 (http://www.w3.org/TR/REC-html40/)es la

especiﬁcación oﬁcial del World Wide Web Consortium para HTML.

Index DOT Html (http://www.blooberry.com/indexdot/html/) es una amplia lista

de etiquetas, atributos y valores HTML e indica la compatibilidad que ofrecen

con distintos navegadores.

La biblioteca de etiquetas de desarrollo ZDNet (http://www.zdnet.com/devhead/

resources/tag_library/)es otra lista de información sobre todas las etiquetas HTML.

La especificación de hojas de estilos en cascada nivel 1 (CSS1) (http://

www.w3.org/TR/REC-CSS1) es la especiﬁcación oﬁcial para hojas de estilos del

World Wide Web Consortium.

La guía de referencia de hojas de estilos de Web Review (http://webreview.com/

guides/style/) explica qué son los estilos y en qué navegadores funcionan.

“CGI Scripts for Fun and Profit” (http://www.hotwired.com/webmonkey/99/26/

index4a.html?tw=programming) es un artículo del sitio Hotwired

Webmonkey que trata sobre la incorporación de secuencias de comandos CGI

(Common Gateway Interface) prefabricadas a las páginas.

El CGI Resource Index (http://www.cgi-resources.com/) es una base de datos sobre

todos los aspectos relativos a CGI, como secuencias de comandos prefabricadas,

documentación, libros e incluso contratación de programadores.

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

contiene una introducción a CGI.

Introducción26

La tabla de entidades (http://www.bbsinc.com/iso8859.html) ofrece una relación

de los nombres de entidades empleados en ISO 8859-1 (Latin-1).

La página de eventos dinámicos HTML (http://msdn.microsoft.com/workshop/

author/dhtml/reference/events.asp#om40_event) proporciona información sobre

eventos de Microsoft Internet Explorer.

Las páginas de introducción a Microsoft ASP (http://msdn.microsoft.com/

workshop/server/asp/ASPover.asp) proporcionan información sobre Active Server

Pages (ASP).

La página JSP de Sun (http://java.sun.com/products/jsp/) proporciona

información sobre JavaServer Pages (JSP).

Las páginas PHP (http://www.php.net/) ofrecen información sobre PHP:

Hypertext Preprocessor (preprocesador de hipertexto).

La página de productos ColdFusion de Allaire (http://www.allaire.com/Products/

ColdFusion/) Ofrece información sobre ColdFusion.

El sitio XML.com (http://www.xml.com) proporciona información, cursos

prácticos y sugerencias sobre Extensible Markup Language (XML) y sobre otras

tecnologías Web.

JavaScript Bible, escrita por Danny Goodman (IDG Books), es un tratado

completo sobre el lenguaje JavaScript 1.2.

JavaScript The Definitive Guide, escrita por David Flanagan (O’Reilly &

Associates), proporciona información sobre todas las funciones, objetos, métodos,

propiedades y manejadores de eventos JavaScript.

Accesibilidad y Dreamweaver

Macromedia permite crear excelentes aplicaciones Web accesibles para todos,

también para los discapacitados. Animamos a los ingenieros de desarrollo de sitios

accesibles a que apliquen las normas internacionales, incluidas las directrices

propuestas por el World Wide Web Consortium (W3C). Numerosas legislaciones

sobre accesibilidad, incluidas las de los Estados Unidos de América, hacen

referencia a las directrices W3C. Dichas directrices sobre contenido Web

promueven la adopción de prácticas de diseño y codiﬁcación que contribuyan a

una mayor accesibilidad, muchas de las cuales cuentan con un apoyo sólido en los

productos Macromedia. Para obtener más información sobre directrices W3C,

consulte Web Content Authoring Guidelines (http://www.w3.org/TR/WAI-

WEBCONTENT/full-checklist.html).

Para obtener la información más reciente sobre funciones de productos y recursos

que permiten un diseño accesible, consulte la página sobre accesibilidad de

Macromedia (http://www.macromedia.com/accessibility/).

CAPÍTULO 1

.............................................................................................................

Curso práctico de Dreamweaver

El curso práctico de Dreamweaver le guía a través de los pasos de creación de

páginas Web. Aprenderá a utilizar Macromedia Dreamweaver para deﬁnir un sitio

local y utilizará los paneles y herramientas de Dreamweaver para crear y editar

documentos Web.

En este curso práctico, creará páginas Web para Compass, una empresa ﬁcticia

especializada en viajes de aventura. Si no ha utilizado nunca Dreamweaver,

comience desde el principio del curso práctico y realícelo entero hasta el ﬁnal. Si

ya está familiarizado con Dreamweaver, puede que le interese comenzar por

“Utilizar el panel Activos” en la página 56; dicha sección y las que le siguen están

dedicadas a las funciones nuevas y modiﬁcadas de Dreamweaver, como el panel

Activos, los botones y el texto Flash, la utilización de una plantilla, la ejecución de

un informe de un sitio y la adición de Design Notes.

Tardará entre una y dos horas en completar el curso práctico, en función de su

experiencia, y durante este tiempo realizará las siguientes tareas:

• Deﬁnir un sitio local

• Crear una página en la vista de Disposición

• Insertar una imagen y una imagen de sustitución

• Trabajar con tablas en la vista Estándar

• Crear un vínculo con otro documento

• Insertar activos desde el panel Activos

• Insertar objetos de Texto Flash y Botón Flash

• Crear y aplicar una plantilla

• Ejecutar un informe de un sitio

• Añadir una Design Note

Nota: En este curso práctico se demuestran algunas funciones que sólo son compatibles

con navegadores de la versión 4.0 o superiores.

Capítulo 128

Visita guiada a Dreamweaver

Antes de comenzar, vea las películas de la Visita guiada para familiarizarse con el

proceso de desarrollo Web y con las funciones de Dreamweaver.

1 En Dreamweaver, elija Ayuda > Visita guiada.

2 Haga clic en el título de una película.

3 Cierre la película cuando haya terminado.

El área de trabajo de Dreamweaver

Comencemos con una breve introducción al área de trabajo de Dreamweaver.

• Si aún no ha iniciado Dreamweaver, haga doble clic en el icono de

Dreamweaver para iniciarlo.

El área de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y

a diversos niveles de experiencia. Cuando inicie Dreamweaver, se abrirán los

siguientes elementos del área de trabajo:

• La ventana de documento muestra el documento actual mientras lo está

creando y editando.

• El panel Objetos contiene iconos en los que puede hacer clic para insertar

objetos en el documento y para cambiar su forma de trabajar en el documento.

• Dreamweaver proporciona numerosos paneles ﬂotantes, como el panel Estilos

HTML y el inspector de código, que le permiten trabajar con otros elementos

de Dreamweaver.

Panel Objetos

Inspector de

propiedades

Ventana de documento

Barra del lanzador

Selector de etiquetas

Barra de herramientas

Panel flotante

Curso práctico de Dreamweaver 29

• La barra del lanzador contiene botones para abrir y cerrar los inspectores y los

paneles utilizados con mayor frecuencia.

• El inspector de propiedades muestra propiedades del objeto o texto

seleccionado y permite modiﬁcar dichas propiedades. (Las propiedades que

aparecen en el inspector dependen del objeto o texto seleccionado activamente

en el documento.)

Para abrir ventanas, inspectores y paneles de Dreamweaver, utilice el menú

Ventana. Una marca de veriﬁcación al lado de un elemento de este menú indica

que el elemento señalado se encuentra abierto, aunque puede estar oculto detrás

de otras ventanas. Para ver un elemento que actualmente no está abierto, elija el

nombre del elemento del menú o utilice su método abreviado de teclado.

Trabajar en Dreamweaver

Dreamweaver puede mostrar un documento de tres formas distintas: en la vista de

Diseño, en la vista de Código y en una vista dividida que muestra tanto el diseño

como el código. (Puede cambiar la vista en la que desea trabajar seleccionando una

vista en la barra de herramientas de Dreamweaver.) De forma predeterminada,

Dreamweaver muestra la ventana de documento en la vista de Diseño.

Además, puede trabajar con la vista de Diseño de Dreamweaver de dos formas

distintas: en la vista de Disposición y en la vista Estándar. (Puede seleccionar estas

vistas en la categoría de vistas del panel Objetos.) En la vista de Disposición,

puede diseñar el formato de una página, insertar gráﬁcos, texto y elementos

multimedia; en la vista Estándar, además de insertar gráﬁcos, texto y elementos

multimedia, también puede insertar capas, crear documentos con marcos, crear

tablas y aplicar otros cambios a la página (opciones que no se encuentran

disponibles en la vista de Disposición).

Organización de los archivos del curso práctico

Los archivos HTML ya acabados y los parcialmente realizados que se utilizan en

este curso práctico se encuentran en la carpeta Compass_Site de la carpeta

Tutorial. Las imágenes y demás archivos relacionados con el sitio se encuentran

también en la carpeta Compass_Site.

Cada archivo tiene un nombre signiﬁcativo. Por ejemplo, el archivo HTML que

contiene la información de destinos de viajes se denomina Destinations.html. Los

archivos parcialmente realizados (con los que deberá trabajar) tienen nombres

idénticos a los de sus equivalentes del sitio ya acabado, con la diferencia de que

comienzan por DW4_. Por ejemplo, la versión parcialmente realizada de

Destinations.html se denomina DW4_Destinations.html.

Capítulo 130

Previsualice el sitio Web finalizado

A continuación, vea las páginas del sitio Web ﬁnalizado para hacerse una idea de lo

que va a llevar a cabo.

1 Si aún no lo ha hecho, inicie Dreamweaver.

2 En Dreamweaver, elija Archivo > Abrir. En el cuadro de diálogo que permite

examinar los archivos, vaya a la carpeta Dreamweaver 4 (en la que instaló

Dreamweaver) y luego vaya a Tutorial/Compass_Site.

3 En la carpeta Compass_Site, seleccione CompassHome.html y haga clic en

Abrir para abrir la página principal de Compass en la ventana de documento.

No edite esta página, ya que creará su propia versión de esta página.

4 Elija Archivo > Previsualizar en el navegador y seleccione un navegador para ver

la página principal de Compass. (Utilice un navegador de la versión 4.0 o

superior para ver este sitio.)

5 Pase el puntero por encima de los botones de navegación para observar los

efectos de las imágenes de sustitución.

Haga clic en los botones de navegación para explorar el sitio.

6 Cierre el navegador cuando termine de ver el sitio.

7 Abra un documento nuevo vacío en Dreamweaver, elija Archivo > Abrir.

8 Cierre el archivo CompassHome.html que se encuentra abierto en

Dreamweaver.

Curso práctico de Dreamweaver 31

Configurar la estructura del sitio para el

curso práctico

Existen dos formas de trabajar con los archivos del curso práctico: utilizar un sitio

local predeﬁnido o deﬁnir un sitio local.

• Si no tiene experiencia en la utilización de Dreamweaver, le conviene deﬁnir el

sitio local para el curso práctico para saber cómo se conﬁgura un sitio local

cuando trabaje en sus propios sitios.

• Si ya está familiarizado con la deﬁnición de un sitio mediante Dreamweaver,

utilice si lo desea el sitio predeﬁnido del curso práctico. En el menú principal de

Dreamweaver, elija Sitios > Abrir sitio y luego seleccione Curso práctico -

Dreamweaver. El sitio Curso práctico - Dreamweaver está vinculado con los

archivos de Compass_Site situados en la carpeta Dreamweaver 4/Tutorial. Tras

seleccionar el sitio local, pase a la sección “Crear la página principal del sitio” en

la página 33 del curso práctico.

Nota: Si selecciona el sitio predefinido, el nombre del sitio que se muestra en las

capturas de pantalla del curso práctico no coincidirán; en lugar de my_tutorial, verá

Curso práctico - Dreamweaver como nombre del sitio en la pantalla.

Definir un sitio local

Al deﬁnir un sitio local, está indicando a Dreamweaver el lugar en el que tiene

intención de almacenar todos los archivos de un sitio concreto. Para trabajar de

manera eﬁcaz con Dreamweaver, deﬁna siempre un sitio local para cada sitio Web

que cree.

Para este curso práctico, deberá especiﬁcar la carpeta Compass_Site como carpeta

del sitio local.

1 Si aún no está abierta, inicie Dreamweaver.

Se abrirá un documento en blanco.

2 Elija Sitio > Nuevo sitio.

3 En el cuadro de diálogo Deﬁnición de sitio, asegúrese de que Datos locales está

seleccionado en la lista Categoría.

4 En el campo Nombre del sitio, escriba my_tutorial.

El nombre del sitio permite identiﬁcarlo y seleccionarlo fácilmente en la lista de

sitios que ha deﬁnido.

5 Haga clic en el icono de carpeta situado a la derecha del campo Carpeta raíz

local.

Capítulo 132

En el cuadro de diálogo que aparece a continuación, vaya a la carpeta Tutorial/

Compass_Site y lleve a cabo una de estas operaciones:

• En Windows, haga clic en Abrir y luego en Seleccionar cuando aparezca

Compass_Site en el campo Seleccionar.

• En Macintosh, haga clic en Elegir para seleccionar la carpeta Compass_Site.

El campo Carpeta raíz local se actualizará para mostrar la ruta del sitio local.

Nota: La ruta completa a la carpeta Compass_Site puede variar dependiendo del lugar

en el que haya instalado Dreamweaver.

7 Bajo Caché, lleve a cabo una de estas operaciones:

• Seleccione Activar caché (Windows) para crear un archivo de caché para el sitio.

• Seleccione Usar caché para acelerar actualizaciones de vínculos (Macintosh)

para crear un archivo de caché para el sitio.

Al crear un caché para los archivos de la carpeta Compass_Site, se establece un

registro de los archivos existentes de modo que Dreamweaver pueda actualizar

rápidamente los vínculos al mover, cambiar el nombre o eliminar un archivo.

8 Haga clic en Aceptar para cerrar el cuadro de diálogo.

Curso práctico de Dreamweaver 33

Haga clic en Aceptar en el mensaje sobre el caché.

La ventana Sitio mostrará a continuación una lista de todas las carpetas y

archivos contenidos en el sitio local. La lista también actúa como administrador

de archivos, ya que permite copiar, pegar, eliminar, mover y abrir archivos del

mismo modo que en el escritorio del PC.

Crear la página principal del sitio

Ahora que ya ha establecido una estructura para el sitio en la que se almacenarán

las páginas y activos del sitio Compass, creará la primera página: una página

principal para el sitio. Mientras crea esta página, añadirá imágenes, texto y activos

Flash; el documento contendrá los mismos componentes de diseño que la página

principal terminada de Compass.

Guarde el documento

Comience guardando el documento en el que está trabajando.

1 Deje abierta la ventana Sitio y haga clic en la ventana de documento para

activarla.

La ventana Sitio permanecerá abierta en segundo plano.

2 Seleccione Archivo > Guardar.

3 En el cuadro de diálogo Guardar como, seleccione la carpeta Compass_Site

como ubicación para este documento.

Capítulo 134

En el campo Nombre de archivo, escriba my_CompassHome.html.

5 Haga clic en Guardar.

Observe que el nombre del documento aparece ahora en la parte superior de la

ventana de documento.

Defina el título de página del documento

Aunque el documento tiene un nombre de archivo, observe que aún está

etiquetado como Untitled Document; ello se debe a que necesita un nombre de

archivo HTML o un título de página. La deﬁnición de un título de página

ayudará a los visitantes del sitio a identiﬁcar la página que están viendo: el título

de página aparece en la barra de título del navegador y en la lista de marcadores. Si

crea un documento sin título de página, el documento aparecerá en el navegador

con el título Untitled Document.

En esta parte del curso práctico deberá asignar un título a la página.

1 Con la ventana de documento activa, elija Ver > Barra de herramientas si la

barra de herramientas no está aún visible.

La barra de herramientas de Dreamweaver aparece encima de la ventana de

documento

2 En el campo Título, escriba Compass Home Page y luego haga clic en la

ventana de documento para ver el título de página en la barra de título de la

ventana de documento.

3 Guarde el archivo.

Curso práctico de Dreamweaver 35

Diseñar una página en la vista de

Disposición

Comenzará su primera página trabajando en la vista de Diseño de Dreamweaver.

Establecerá el diseño de la página y luego insertará imágenes y texto.

La página que complete en esta sección del curso práctico presentará una

apariencia similar a esta página.

Trabaje en la vista de Disposición

Dreamweaver cuenta con dos vistas de diseño visual: vista Estándar y vista de

Disposición. Comenzará a trabajar en la vista de Disposición, que le permite

dibujar celdas o tablas de disposición en las que podrá añadir contenido, como

imágenes, texto u otros elementos multimedia.

En esta parte del curso práctico, establecerá el diseño de la página; en la siguiente

sección añadirá el contenido. (Una vez que haya aprendido a realizar estas dos

tareas, le resultará más fácil añadir diseño y contenido a la vez.)

1 En el panel Objetos, haga clic en el icono de vista de Disposición si no está aún

seleccionado.

Aparecerá el cuadro de diálogo Introducción a la vista de Disposición, en el que

se describen las opciones de la vista de Disposición.

Icono de vista de Disposición

Icono Dibujar celda de disposición

Icono Dibujar tabla de disposición

Capítulo 136

Revise las opciones y luego haga clic en Aceptar para cerrar el cuadro de

diálogo.

3 En el panel Objetos, debajo de Disposición, observe que las opciones de

Disposición (Dibujar celda de disposición y Dibujar tabla de disposición) están

ahora disponibles; estas opciones no se encuentran disponibles en la vista

Estándar.

Dibuje celdas de disposición

En la vista de Disposición, puede dibujar celdas y tablas de disposición para

deﬁnir las áreas de diseño de un documento. Esta tarea es más fácil de realizar si

prepara una muestra de la página que está creando antes de comenzar a establecer

el diseño de la página.

Observe la siguiente muestra de disposición para hacerse una idea de cómo es el

diseño de la página que está creando en esta sección del curso práctico. Hay una

celda para el logotipo de Compass, una tabla con tres celdas para los botones de

navegación por el sitio, una celda para otro gráﬁco y una tabla con tres celdas que

contendrán texto.

Curso práctico de Dreamweaver 37

Deberá dibujar tablas y celdas similares a las de este diseño al trabajar en el

documento. En primer lugar, deberá dibujar una celda de disposición en la que

insertará el logotipo de Compass.

1 Haga clic en la ventana de documento de my_CompassHome para activarlo.

2 Si aún no están abiertas, abra las siguientes herramientas del área de trabajo:

• El panel Objetos (elija Ventana > Objetos), que le servirá para añadir objetos al

documento.

• El inspector de propiedades (elija Ventana > Propiedades), que le permitirá

deﬁnir propiedades o atributos para objetos del documento. Si el inspector de

propiedades no está aún ampliado, haga clic en la ﬂecha de ampliación situada

en la esquina inferior derecha para ver todas las opciones de propiedades.

3 En el panel Objetos, haga clic en el icono Dibujar celda de disposición.

4 Mueva el puntero a la ventana de documento; el puntero del ratón adoptará la

forma de una herramienta de dibujo (una cruz pequeña). Haga clic en la

esquina superior izquierda del documento y arrastre para dibujar una celda de

disposición.

Cuando suelte el ratón, aparecerá una celda de disposición en una tabla de

disposición.

La tabla de disposición se amplía para llenar toda la ventana de documento y

deﬁne el área de disposición de la página. El rectángulo blanco es la celda de

disposición que ha dibujado. Puede colocar celdas de disposición adicionales en

el área gris de la tabla de disposición.

Tabla de

disposición

Celda de

disposición

Capítulo 138

Cambie el tamaño de las celdas de disposición

Para diseñar una página con precisión, puede deﬁnir el tamaño de las celdas que

añada al documento. También puede cambiar de sitio las celdas en la página.

1 Haga clic en el borde de la celda de disposición para seleccionarla.

Aparecerán selectores alrededor de la celda de disposición seleccionada:

2 Para cambiar el tamaño de esta celda de disposición, lleve a cabo una de estas

operaciones:

• En el inspector de propiedades para la celda de disposición, escriba 510 en el

campo Fijo para deﬁnir el ancho de la celda en 510 píxeles y luego haga clic en

el documento para comprobar el cambio de ancho de la celda.

Nota: Si introduce un ancho en píxeles superior al ancho de la tabla de disposición o

que provoca que la celda se superponga a otra celda de una tabla de disposición,

Dreamweaver le avisará y ajustará el ancho de la celda con un valor válido.

• En la parte derecha de la celda de disposición, arrastre el selector de cambio de

tamaño situado en medio hacia la derecha hasta que la celda adopte el ancho

deseado. Cuando suelte el ratón, se mostrará el ancho de la celda en el área de

encabezados de columna situada a lo largo de la parte superior de la tabla de

disposición.

Curso práctico de Dreamweaver 39

Añada múltiples celdas de disposición

A continuación añadirá tres celdas de disposición debajo de la celda del logotipo

que acaba de crear. Posteriormente insertará los botones de navegación de la

página en estas celdas.

1 En el panel Objetos, haga clic en el icono Dibujar celda de disposición; después

mantenga presionada la tecla Control (Windows) o Comando (Macintosh).

2 En la ventana de documento, sitúe el puntero debajo de la celda que ha

dibujado para el logotipo; después arrastre para dibujar una celda de

disposición.

Continúe presionando la tecla Control (Windows) o Comando (Macintosh) y

dibuje otras dos celdas de disposición. La pantalla deberá ser similar a ésta.

Mueva a una celda de disposición

Si necesita alinear unas celdas con otras, puede cambiar el tamaño y mover las

celdas de disposición como estime oportuno. El tamaño de una celda de

disposición se modiﬁca mediante uno de sus selectores de cambio de tamaño.

No puede hacer clic y arrastrar una celda para moverla a una nueva posición. Si

necesita mover una celda de disposición para cambiar su posición en un

documento, siga estos pasos.

1 Haga clic en el borde de la celda de disposición para seleccionarla.

2 Para mover la celda de disposición, lleve a cabo una de estas operaciones:

• Utilice las teclas de ﬂecha.

• Mantenga presionada la tecla Mayús y utilice las teclas de ﬂecha para mover la

celda de disposición de 5 en 5 píxeles.

Capítulo 140

Agrupe celdas en una tabla de disposición

A continuación creará una tabla con las celdas de botones de navegación que acaba

de crear. Agrupar las celdas en una tabla le permite controlar el espaciado de celdas

y mover fácilmente las celdas como un grupo si desea cambiar la disposición de la

página. Creará una tabla para los botones de navegación con el mismo ancho que

la celda del logotipo situada encima.

Utilice Dibujar tabla de disposición para agrupar las imágenes de los botones de

navegación.

1 En el panel Objetos, haga clic en el icono Dibujar tabla de disposición.

2 En la ventana de documento, sitúe el puntero en la esquina superior izquierda

de la celda correspondiente al primer botón de navegación y luego arrastre el

puntero hasta que la tabla contenga las tres celdas y tenga la misma longitud

que la celda del logotipo.

3 Suelte el botón del ratón para ver las celdas agrupadas en una nueva tabla.

Ha creado una tabla que contiene tres celdas de disposición (el área blanca de la

tabla) y un espacio vacío (el área gris de la tabla).

Curso práctico de Dreamweaver 41

Mueva la tabla de disposición

Puede seleccionar y mover una tabla de disposición a otras áreas de un documento

Sin embargo, no es posible mover una tabla de disposición de manera que se

superponga a otra.

A continuación moverá la tabla que acaba de crear unos cuantos píxeles a la

derecha para desplazar la alineación de los botones de navegación con el logotipo

cuando éstos se inserten en la página.

1 En la ventana de documento, haga clic en la ﬁcha de Tabla de disposición para

moverla.

2 Arrastre la tabla de disposición unos cuantos píxeles hacia la derecha para

cambiar su posición, luego arrastre uno de los selectores de cambio de tamaño

de la derecha de la tabla para alinear los lados derechos de las celdas de

disposición del logotipo y de los botones de navegación.

Observe que, al crear nuevas tablas y celdas, aparecen líneas de cuadrícula que

esbozan el área de disposición. Puede utilizar estas líneas de cuadrícula para alinear

los elementos de disposición.

Añada otra celda de disposición

A continuación, añada una celda de disposición para el gráﬁco Learn More About.

1 En el panel Objetos, haga clic en el icono Dibujar celda de disposición.

2 En la ventana de documento, dibuje una nueva celda en el espacio situado

debajo de la tabla de botones de navegación.

La página deberá tener una apariencia similar a ésta.

Capítulo 142

Cree una tabla de disposición

En la última sección utilizó celdas para crear una tabla. Ahora comenzará con una

tabla y añadirá celdas.

1 En el panel Objetos, haga clic en el icono Dibujar tabla de disposición.

2 Mueva el puntero a la ventana de documento; en el área situada debajo de la

celda de disposición que acaba de añadir, arrastre el puntero hacia la derecha

para alinear con el lado derecho de la celda superior y luego arrastre hasta la

parte inferior de la ventana de documento.

Dibuje celdas de disposición en una tabla

Ahora añada las celdas de disposición en las que añadirá el texto sobre viajes.

1 En el panel Objetos, haga clic en el icono Dibujar celda de disposición y mueva

el puntero hasta la tabla de disposición que acaba de dibujar.

2 Dibuje una celda de tabla que ocupe aproximadamente un tercio del espacio de

la tabla.

3 Haga clic en el borde de la celda de disposición para seleccionarla y luego

escriba 170 en el campo Fijo del inspector de propiedades para deﬁnir el ancho

de las celdas.

4 Dibuje otra celda de tabla que ocupe aproximadamente un tercio del espacio de

la tabla junto a la primera celda.

5 Haga clic en el borde de la celda de disposición para seleccionarla y luego

escriba 170 en el campo Fijo del inspector de propiedades para deﬁnir el ancho

de las celdas.

Curso práctico de Dreamweaver 43

Dibuje la última celda de tabla en el espacio que queda en la tabla. Cambie el

tamaño de las celdas o muévalas como estime oportuno.

La pantalla deberá presentar una apariencia similar a ésta.

Añadir contenido a la página

Ahora que ya ha dispuesto las distintas áreas de la página, añadirá el contenido

gráﬁco, como el logotipo y las imágenes de sustitución.

Inserte imágenes

Aprenderá dos formas de insertar imágenes en Dreamweaver: utilizando el menú

principal de Dreamweaver y utilizando el panel Objetos.

1 Haga clic en cualquier lugar de la celda de disposición del logotipo (la celda de

disposición superior).

Al hacer clic en una celda de disposición, el punto de inserción se sitúa en la

celda sin seleccionarla.

2 Elija Insertar > Imagen.

3 En el cuadro de diálogo Seleccionar origen de imagen, localice la carpeta

Compass_Site y vaya hasta la carpeta Assets, luego a la carpeta de imágenes y

haga clic en compass_logo.gif para seleccionarlo.

Capítulo 144

Asegúrese de que el menú emergente Relativo a, situado en la parte inferior del

cuadro de diálogo, está deﬁnido con el valor Documento y luego haga clic en

Seleccionar (Windows) o Abrir (Macintosh) para seleccionar la imagen.

La imagen aparecerá en la celda de disposición.

5 Haga clic en cualquier lugar de la celda de disposición de Learn More About

para colocar el punto de inserción en dicha celda.

6 En la categoría Común del panel Objetos, haga clic en el icono Insertar

imagen.

7 En el cuadro de diálogo Seleccionar origen de imagen, localice la carpeta

Compass_Site/Assets/images y vaya a learnMoreAbout.gif; luego haga clic en

Seleccionar (Windows) o Abrir (Macintosh) para seleccionar la imagen.

La imagen aparecerá en la celda de disposición.

8 Elija Archivo > Guardar para guardar los cambios realizados en la página

principal.

Cree una imagen de sustitución

Las imágenes de sustitución cambian de apariencia cuando el puntero pasa sobre

ellas.

Utilizará el comando Insertar imagen de sustitución de Dreamweaver para crear

tres imágenes de sustitución para los botones de navegación: Trip Planner,

Destinations y Travel Logs.

Una imagen de sustitución consta de dos imágenes: la imagen que aparece cuando

se carga la página inicialmente en el navegador y la imagen que aparece cuando el

puntero pasa por encima de la imagen original. Asegúrese de que utiliza imágenes

que tengan el mismo tamaño. La primera imagen deﬁne el tamaño de la

visualización, de manera que, si la segunda imagen es mucho más pequeña o

mucho más grande, se obtendrá una imagen distorsionada y con una apariencia

poco profesional.

A continuación añadirá a la página un botón de navegación con una imagen de

sustitución. Después añadirá los demás botones de navegación y previsualizará la

página en un navegador para comprobar las sustituciones de imágenes.

1 En la ventana de documento, haga clic en la primera celda de la tabla de

botones de navegación.

Esto indica a Dreamweaver el lugar en el que desea que se inserte la imagen.

Curso práctico de Dreamweaver 45

Para insertar una imagen de sustitución, lleve a cabo una de estas operaciones:

• En la categoría Común del panel Objetos, haga clic en el icono Insertar imagen

de sustitución.

• Elija Insertar > Imágenes interactivas >Imagen de sustitución.

3 En el cuadro de diálogo Insertar imagen de sustitución, escriba planner en el

campo Nombre de imagen.

Esto asignará un nombre exclusivo a la imagen, lo que facilitará su

identiﬁcación en el código HTML.

4 En el campo Imagen original, haga clic en Examinar, vaya hasta

MenuTripPlanner.gif y haga clic en Seleccionar (Windows) o Abrir

(Macintosh).

Esto indica a Dreamweaver qué imagen debe mostrar cuando se cargue la

página inicialmente.

5 En el campo Imagen de sustitución, haga clic en Examinar, vaya hasta

MenuTripPlanner_on.gif y haga clic en Seleccionar (Windows) o Abrir

(Macintosh).

Esto indica a Dreamweaver qué imagen debe mostrar cuando el puntero pase

por encima de la imagen original.

6 Asegúrese de que la opción Carga previa de imagen de sustitución está

seleccionada, de manera que las imágenes de sustitución se carguen cuando se

cargue la página en el navegador, lo que garantiza una transición rápida entre

imágenes cuando el usuario pasa el puntero por encima de la imagen original.

7 Haga clic en Aceptar para cerrar el cuadro de diálogo.

La imagen aparecerá en el documento.

8 Cambie el tamaño de la celda de disposición para ajustarla a la imagen.

Capítulo 146

Cree el resto de imágenes de sustitución

A continuación añadirá imágenes de sustitución para los demás botones de

navegación.

1 En la ventana de documento, haga clic en la segunda celda de botones de

navegación; luego, en la categoría Común del panel Objetos, haga clic en el

icono Insertar imagen de sustitución.

2 En el cuadro de diálogo Insertar imagen de sustitución, escriba destinations en

el campo Nombre de imagen para asignar un nombre exclusivo a la imagen.

3 En el campo Imagen original, haga clic en Examinar y seleccione

MenuDestinations.gif.

4 En el campo Imagen de sustitución, haga clic en Examinar y seleccione

MenuDestinations_on.gif.

5 Asegúrese de que está seleccionada la opción Carga previa de imagen de

sustitución y haga clic en Aceptar para cerrar el cuadro de diálogo.

6 En la ventana de documento, haga clic en la tercera celda de botones de

navegación; luego, en la categoría Común del panel Objetos, haga clic en el

icono Insertar imagen de sustitución.

7 En el cuadro de diálogo Insertar imagen de sustitución, escriba travellog en el

campo Nombre de imagen para asignar un nombre exclusivo a la imagen.

8 En el campo Imagen original, haga clic en Examinar y seleccione

MenuTravelLogs.gif.

9 En el campo Imagen de sustitución, haga clic en Examinar y seleccione

MenuTravelLogs_on.gif.

10 Asegúrese de que está seleccionada la opción Carga previa de imagen de

sustitución y haga clic en Aceptar para cerrar el cuadro de diálogo.

11 Cambie el tamaño de las dos celdas de disposición para ajustarlas a la imagen.

Curso práctico de Dreamweaver 47

Previsualice el documento

No podrá ver el comportamiento de sustitución de imágenes en la ventana de

documento de Dreamweaver; las imágenes de sustitución sólo funcionan en un

navegador. No obstante, puede previsualizar el documento en Dreamweaver para

comprobar las funciones relacionadas con navegadores. No es preciso que guarde

el documento antes de previsualizarlo.

1 Presione F12 para ver el documento en un navegador Web.

Pase el puntero del ratón por encima de las imágenes de sustitución que ha

creado para comprobar cómo cambian.

2 Cuando termine de ver el archivo, cierre la ventana del navegador.

3 Regrese a la ventana de documento de Dreamweaver y elija Archivo > Guardar

para guardar los cambios realizados en la página principal.

Inserte texto

A continuación añadirá texto a las celdas de la tabla de disposición inferior.

En Dreamweaver, puede escribir el contenido directamente en una celda de

disposición o cortar y pegar en ella el contenido de otro documento. En este curso

práctico, añadirá texto a la celda de disposición copiando y pegando el contenido

de un archivo de texto existente en una celda de disposición.

1 Elija Archivo > Abrir; luego, en la carpeta Compass_Site, abra

DW4_HomeText.txt.

El documento DW4_HomeText.txt se abrirá en una nueva ventana de

documento de Dreamweaver.

2 En DW4_HomeText.txt, seleccione las dos primeras líneas de texto, desde “Fly

Fishing” hasta “ravioli”.

3 Elija Edición > Copiar para copiar el texto.

4 En el documento my_CompassHome, haga clic en la primera celda de

disposición de la tabla de disposición de texto descriptivo.

5 Elija Edición > Pegar para pegar el texto en la celda de disposición.

Capítulo 148

En DW4_HomeText.txt, seleccione las dos siguientes líneas de texto, desde

“Level 5 Rapids” hasta “Siberia”.

7 Elija Edición > Copiar para copiar el texto.

8 En el documento my_CompassHome, haga clic en la segunda celda de la tabla

de disposición de texto descriptivo.

9 Elija Edición > Pegar para pegar el texto en la celda de disposición.

10 En DW4_HomeText.txt, seleccione las dos últimas líneas de texto, desde

“Puget Sound Kayaking” hasta “Puget Sound”.

11 Copie el texto y luego péguelo en la tercera celda de la tabla de disposición.

12 Cierre DW4_HomeText.txt y después haga clic en my_CompassHome.html

para convertirlo en el documento activo.

Aplique formato al texto

Puede aplicar formato al texto en la ventana de documento deﬁniendo sus

propiedades en el inspector de propiedades. En primer lugar, seleccione el texto al

que desea aplicar formato y, a continuación, aplique los cambios. Cambiará la

fuente y el tamaño del texto.

1 Si el inspector de propiedades no está abierto, elija Ventana > Propiedades.

2 En la primera celda de disposición de texto descriptivo, seleccione todo el texto,

desde la palabra “Fly” hasta la última palabra, “ravioli”.

3 En el segundo menú emergente Formato del inspector de propiedades, que

indica actualmente Fuente predet., seleccione Verdana, Arial, Helvetica, sans-

serif.

4 En el menú emergente Tam, seleccione 2.

El texto del documento se actualizará automáticamente para reﬂejar los

cambios.

5 Repita los pasos anteriores para seleccionar y aplicar formato al texto de las

otras dos celdas de disposición de texto descriptivo.

Curso práctico de Dreamweaver 49

Aplique color y estilo

Ahora aplicará al texto cambios de formato adicionales; aplicará color y estilo para

crear un texto de encabezado.

1 En la primera celda de disposición de texto descriptivo, seleccione el texto de

encabezado, desde la palabra “Fly” hasta la palabra “Mountains”.

2 En el inspector de propiedades, haga clic en el selector de colores, mueva el

cuentagotas hasta la imagen Learn More About de la ventana de documento y

seleccione el color marrón del texto de la imagen.

3 Sin abandonar el inspector de propiedades, haga clic en el icono

para aplicar

estilo negrita al texto.

4 Repita los pasos anteriores para aplicar color y estilo al texto de encabezado de

las otras celdas de disposición de texto descriptivo.

5 Presione F12 para previsualizar la página en un navegador.

La página deberá tener una apariencia similar a la página siguiente.

Observe el texto. Hay poca separación entre el texto de una celda de

disposición y el de la siguiente. Resolverá este problema en los siguientes pasos

de este curso práctico.

6 Cierre la ventana del navegador y haga clic en la ventana de documento para

activarla.

Capítulo 150

Trabajar en la vista Estándar

La vista de Disposición es útil para establecer el diseño de las página Web. Aunque

puede ajustar la mayoría de los elementos de diseño en la vista de Disposición,

algunos cambios deben realizarse en la vista Estándar. Cuando cambie a la vista

Estándar, observará cómo Dreamweaver utiliza tablas para crear la estructura de la

página. Las tablas de disposición de la vista de Disposición se muestran como

etiquetas <table> en la vista Estándar.

A continuación aprenderá a trabajar con tablas para continuar reﬁnando el diseño.

En primer lugar, deberá cambiar a la vista Estándar de Dreamweaver.

• En el panel Objetos, haga clic en el icono de vista Estándar.

La página deberá tener una apariencia similar a la pantalla siguiente.

Defina las propiedades de celda

La altura de la celda determina la altura del espacio interior de una ﬁla de celdas.

Observe el espacio existente alrededor del logotipo de Compass. Deberá eliminar

el espacio sobrante entre el logotipo y los botones de navegación.

1 Haga clic en cualquier lugar del área vacía de la celda que contiene la imagen

del logotipo de Compass (pero no en la propia imagen).

2 Borre el valor que contiene actualmente el campo Al (alto) del inspector de

propiedades.

3 Sin abandonar el inspector de propiedades, haga clic en el icono de cuadro de

Color fondo situado en la parte inferior del inspector de propiedades; después

utilice el cuentagotas para seleccionar el negro.

Se aplicará el color de fondo a la celda.

4 Haga clic en cualquier lugar de la ventana de documento para ver el cambio.

Curso práctico de Dreamweaver 51

Seleccione una tabla

Seguidamente, ajustará el espacio de la tabla de botones de navegación. La forma

más sencilla de seleccionar una tabla en la vista Estándar consiste en utilizar el

selector de etiquetas, que muestra etiquetas HTML de los elementos del

documento.

Utilizará el selector de etiquetas para seleccionar la tabla que contiene los botones

de navegación.

1 Haga clic en la celda que contiene la imagen Trip Planner.

Observe el selector de etiquetas situado en la esquina inferior izquierda de la

ventana de documento.

Nota: Las etiquetas del selector de etiquetas pueden variar en función del número de

tablas creadas en la vista de Disposición.

2 En el selector de etiquetas, haga clic en la etiqueta <table> situada más a la

derecha.

En la ventana de documento, aparecerá un borde alrededor de la tabla de

botones de navegación, al tiempo que el inspector de propiedades reﬂejará las

propiedades de una tabla.

Capítulo 152

Defina las propiedades de la tabla

A continuación utilizará el inspector de propiedades de tabla para eliminar el

espacio sobrante en la tabla de botones de navegación y para añadir un color de

fondo a la tabla.

1 En el inspector de propiedades, haga clic en el icono Borrar alto de ﬁla. Es el

botón situado en la parte superior izquierda de la mitad inferior del inspector

de propiedades.

El espacio sobrante desaparecerá de la tabla.

2 Sin abandonar el inspector de propiedades, haga clic en el icono de cuadro de

Color fondo y después utilice el cuentagotas para seleccionar el negro.

Se aplicará el color de fondo negro a la tabla de botones de navegación.

Añada relleno de celdas

A continuación, realizará cambios en la celdas que contienen texto. Como puede

observar, el texto está demasiado cerca de los bordes de las celdas. Añadirá relleno

a las celdas para dejar espacio entre el texto y las celdas.

1 Haga clic en la primera celda de la tabla de texto descriptivo.

2 En el selector de etiquetas, haga clic en la etiqueta <table> situada más a la

derecha para seleccionar la tabla.

3 En el campo Rell. celda del inspector de propiedades, escriba 10 para añadir 10

píxeles de espacio entre el texto y las celdas de la tabla.

4 Haga clic en cualquier lugar de la ventana de documento para ver los cambios.

5 Guarde el documento.

Vea los archivos del sitio

Para ver una representación de alto nivel de la estructura de un sitio local, utilice

Ver mapa del sitio de Dreamweaver. También puede utilizar el mapa para añadir

nuevos archivos al sitio, para añadir, eliminar y cambiar vínculos y para crear un

archivo gráﬁco del sitio que podrá exportar e imprimir desde una aplicación de

edición de imágenes.

El mapa del sitio siempre muestra la página principal del sitio en la parte superior

del mapa; bajo la página principal aparecen los archivos con los que ésta tiene

vínculos.

Curso práctico de Dreamweaver 53

Hay varias formas de deﬁnir la página principal de un sitio. La forma más sencilla

consiste en usar el menú contextual dentro de la ventana Sitio.

1 Haga clic en la barra de título de la ventana Sitio para convertirla en la ventana

activa. (Si la ventana Sitio no está visible, elija Ventana > Archivos del sitio.)

2 En la lista Carpeta local de la ventana Sitio, haga clic con el botón derecho del

ratón (Windows) o mantenga presionada la tecla Control mientras hace clic

(Macintosh) en el documento my_CompassHome.html; en el menú

contextual, elija Establecer como página principal.

3 Haga clic en el icono Mapa del sitio situado en el área superior izquierda de la

ventana Sitio; seguidamente, en el menú emergente Mapa del sitio, seleccione

Mapa y archivos.

Aparecerá la ventana Sitio con dos vistas del sitio local: a la izquierda se muestra el

mapa del sitio, que representa gráﬁcamente la estructura actual del sitio Compass

(con my_CompassHome.html como página principal), mientras que a la derecha

se encuentra la lista de contenido de la carpeta local.

La página my_CompassHome.html actualmente no contiene ningún vínculo. En

la próxima sección del presente curso añadirá vínculos a esta página.

Deje abierta por el momento la ventana Sitio para poder observar cómo se

actualiza al añadir vínculos a la página principal.

Icono Mapa del sitio

Capítulo 154

Vincule sus documentos

Las imágenes de la parte superior de la página principal de Compass guían a los

visitantes a páginas especíﬁcas del sitio. A continuación añadirá vínculos para los

botones de navegación.

Observará que hay varias formas de crear vínculos con Dreamweaver. En primer

lugar, añadirá un vínculo desde la imagen Trip Planner a la página

TripPlanner.html utilizando el inspector de propiedades.

1 En la ventana Sitio, haga doble clic en el icono para el archivo

my_CompassHome.html en cualquiera de los paneles.

El archivo my_CompassHome.html se convertirá en la ventana activa.

2 En la ventana de documento, haga clic en la imagen Trip Planner para

seleccionarla.

3 Elija Ventana > Propiedades para abrir el inspector de propiedades si es que no

está abierto.

El inspector de propiedades muestra información acerca de la imagen

seleccionada.

Nota: El campo Vínculo contiene un signo de almohadilla (#), normalmente conocido

como vínculo nulo o

“ficticio”, creado al insertar la imagen de sustitución. No borre este

carácter. Pronto será reemplazado por el nombre de archivo del documento con el que

establezca el vínculo.

4 En el inspector de propiedades, haga clic en el icono de carpeta situado a la

derecha del campo Vínculo.

5 En el cuadro de diálogo Seleccionar archivo, vaya a la carpeta Compass_Site y

luego a DW4_TripPlanner.html; haga clic en Seleccionar (Windows) o Abrir

(Macintosh) para seleccionar el archivo que debe abrirse cuando se haga clic en

el botón Trip Planner.

El nombre de archivo aparecerá en el campo Vínculo del inspector de

propiedades. A continuación añadirá un vínculo a la imagen Destinations

mediante el inspector de propiedades y la ventana Sitio.

Curso práctico de Dreamweaver 55

Haga clic en la barra de título de la ventana Sitio para activarla, o bien elija

Ventana > Archivos del sitio. Si es preciso, cambie el tamaño 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.

7 En la ventana de documento, haga clic en la imagen Destinations para

seleccionarla.

8 En el inspector de propiedades, haga clic en el icono Arrastrar a archivo

(situado a la derecha del campo Vínculo) y luego arrastre el puntero hasta la

ventana Sitio; en la lista Carpeta local, señale al archivo

DW4_Destinations.html.

El nombre del archivo aparecerá en el campo Vínculo del inspector de

propiedades para la imagen de destinos.

9 Haga clic en el icono Mapa del sitio de la ventana Sitio. El mapa del sitio se

actualizará para reﬂejar el vínculo que ha agregado.

Un signo más (+) situado junto a cualquier archivo del mapa del sitio indica

que el archivo contiene vínculos con otros documentos. Haga clic en el signo

más para ampliar el mapa del sitio de forma que muestre los archivos asociados.

Haga clic en el signo menos (-) para reducir el mapa del sitio.

A continuación, añadirá un vínculo para la imagen Travelogs.

Capítulo 156

En la ventana de documento, haga clic en la imagen Travelogs para

seleccionarla.

11 En el inspector de propiedades, arrastre el icono de señalización de archivo a la

ventana Sitio y señale al archivo DW4_Travelog.html.

12 Elija Archivo > Guardar para guardar los cambios realizados en la página

principal.

Compruebe la página

No podrá comprobar los vínculos en Dreamweaver, sino que deberá comprobarlos

en un navegador para asegurarse de que las páginas funcionan de la forma

esperada.

1 Presione F12 para previsualizar la página en un navegador.

Haga clic en los botones de navegación para comprobar los vínculos. Haga clic

en el botón Atrás del navegador para regresar a la página principal.

2 Cuando haya terminado de comprobar la página, elija Archivo > Cerrar para

cerrar la página.

Utilizar el panel Activos

El panel Activos le permite ver activos del sitio tales como imágenes, colores

HTML, vínculos, películas Flash, otros tipos de películas, secuencias de

comandos, plantillas y elementos de biblioteca. Puede ver todos los activos del

sitio desde un único lugar y después añadir fácilmente el contenido a la página

directamente desde el panel.

A continuación aprenderá a utilizar el panel Activos para añadir activos a una

página.

Seleccione un nuevo documento

No es preciso que cree tablas adicionales en la página principal, ya que este curso

práctico incluye un archivo HTML similar a la página principal que ha creado;

dicha página incluye una nueva tabla de celdas en la parte derecha del documento.

Para iniciar esta parte del curso práctico, realice una de las siguientes operaciones:

• Si continúa el curso práctico desde la sección anterior, elija Archivo > Abrir y

luego seleccione DW4_CompassHome2.html.

Curso práctico de Dreamweaver 57

• Si comienza el curso práctico en esta sección, elija Sitios > Abrir sitio y, en la

lista de sitios, seleccione Curso práctico - Dreamweaver para abrir un sitio

deﬁnido. En el menú principal de la ventana de documento, elija Archivo >

Abrir; en el cuadro de diálogo que aparece a continuación, seleccione

DW4_CompassHome2.html.

Se abrirá el archivo DW4_CompassHome2.html.

Vea los activos del sitio

Comience abriendo el panel Activos.

1 Abra el panel Activos llevando a cabo una de estas operaciones:

• Elija Ventana > Activos.

• Haga clic en el icono Mostrar activos de la barra del lanzador.

Aparecerá el panel Activos.

Área de previsualización de activos

Opciones de activos

Capítulo 158

Inserte una imagen

Comenzará por utilizar el panel Activos para insertar dos imágenes en la página:

una imagen de un escalador y una imagen de texto.

1 En el panel Activos, haga clic en el icono Imágenes y asegúrese de que el botón

de opción Sitio, situado en la parte superior del panel Activos, está seleccionado

para poder ver todas las imágenes del sitio Compass.

2 En la lista Nombres, seleccione el icono de la imagen climber.jpg y arrástrelo al

centro de la celda de tabla de la parte derecha de la página.

3 Presione la tecla de ﬂecha derecha (al hacerlo, anulará la selección de la imagen

del escalador y situará el punto de inserción después de la imagen), luego

presione Mayús+Intro (Windows) o Mayús+Retorno (Macintosh) para insertar

un salto de línea.

4 En la lista Nombre, seleccione featureText.gif y arrástrela al salto de línea que

acaba de crear colocando la imagen featureText debajo de la imagen del

escalador.

Inserte una película Flash

A continuación añadirá un tipo distinto de activo. Arrastrará una película Flash

hasta la celda situada debajo de los botones de navegación.

1 Haga clic en el icono de Flash del panel Activos para ver todos los archivos

Flash del sitio Compass.

2 En la lista Nombres, haga clic en welcome.swf para seleccionar la película Flash

que debe insertar en el documento.

En el área de previsualización del panel Activos, observará el marcador de

posición de la película Flash.

Curso práctico de Dreamweaver 59

Haga clic en el botón Reproducir del área de previsualización del panel Activos

para ver la película Flash.

4 En la lista Nombres, arrastre Welcome.swf hasta la celda situada debajo del

botón de navegación de Trip Planner.

Aparecerá un marcador de posición de película Flash en la celda seleccionada.

Aplique un color utilizando el panel Activos

Los colores que aplique a los elementos HTML, como el del texto o el del fondo,

se añadirán automáticamente a la categoría de colores del panel Activos. Puede

seleccionar un color del panel Activos y aplicarlo al texto de la misma página o de

otras páginas del sitio.

1 Coloque el punto de inserción tras la imagen del escalador, presione Intro (Windows)

o Retorno (Macintosh) para añadir un nuevo párrafo y luego escriba Yosemite.

2 Haga doble clic en Yosemite para seleccionar el texto.

3 En el panel Activos, haga clic en el icono Colores para ver los colores HTML

del sitio Compass.

4 En la lista de valores, seleccione el icono de color para #993300 y arrástrelo

hasta el texto seleccionado para aplicarle dicho color.

Cree una lista de activos favoritos

Utilice el panel Activos para administrar sus activos. Puede crear su propio grupo

de activos favoritos en el panel Activos. A continuación añadirá el logotipo de

Compass y la imagen de botón de navegación a la lista de Favoritos del sitio.

1 En el panel Activos, seleccione el icono Imágenes.

2 En la lista Nombre, haga clic en compass_logo.gif para seleccionarlo y luego

realice una de las siguientes operaciones:

• Haga clic con el botón derecho del ratón (Windows) o haga clic manteniendo

presionada la tecla Control (Macintosh) para utilizar el menú contextual y

luego seleccione Añadir a Favoritos.

• Haga clic en el icono Añadir a favoritos situado en la parte inferior derecha del

panel Activos.

Se le informará de que se ha añadido el activo seleccionado a la lista Favoritos

del sitio.

3 Haga clic en Aceptar.

Botón Reproducir

Capítulo 160

Añada múltiples imágenes a la lista de favoritos

A continuación añadirá las imágenes del botón de navegación a la lista de

favoritos. Puede seleccionar múltiples imágenes en el panel Activos y luego

añadirlas a la lista de favoritos de una sola vez.

1 En la lista Imágenes del panel Activos, haga clic en la imagen del primer botón

de navegación (MenuDestinations.gif).

2 Seleccione los demás botones de navegación realizando una de estas

operaciones:

• Presione Mayús (Windows) y, en la lista Imágenes, haga clic en

MenuTripPlanner_on.gif (el último botón de navegación de la lista) para

seleccionar todas las imágenes de botones de navegación.

• Presione Mayús (Macintosh) y mantenga presionada esta tecla mientras

selecciona las distintas imágenes de botones de navegación.

3 Haga clic en el icono Añadir a Favoritos.

4 Haga clic en Aceptar en el mensaje de aviso.

Vea sus activos favoritos

Puede ver los activos que ha añadido a la lista de Favoritos y utilizar esta vista para

insertar activos en el documento.

• Para ver las imágenes que ha añadido a la lista de Favoritos, haga clic en el

botón de opción Favoritos situado en la parte superior del panel Activos.

Insertar objetos Flash

Los objetos Flash son pequeños archivos gráﬁcos SWF (Shockwave) que puede

crear mientras trabaja en Dreamweaver. Puede crear objetos de Texto Flash y de

Botón Flash. El Texto Flash le permite diseñar páginas Web con fuentes no

estándar sin preocuparse por las fuentes de que dispongan los visitantes en sus

equipos. Los botones Flash se crean a partir de plantillas Flash que se suministran

con Dreamweaver. Puede personalizar un botón de plantilla y añadirlo a sus

páginas Web.

Curso práctico de Dreamweaver 61

Cree un objeto de Texto Flash

A continuación creará un objeto de Texto Flash que utilizará como título de la

página principal.

1 En la ventana de documento, sitúe el punto de inserción por encima de la

imagen del escalador.

2 En el panel Objetos, haga clic en el icono Insertar texto Flash.

Aparecerá el cuadro de diálogo Insertar texto Flash.

3 En el cuadro de diálogo Insertar texto Flash, conﬁgure las siguientes opciones:

• Para Fuente, seleccione Verdana o elija una de sus fuentes favoritas.

• Para Tamaño, escriba 18.

• Para Color, haga clic en el cuadro de color y luego utilice el cuentagotas para

seleccionar el color marrón del texto de encabezado del documento.

• Para Color de sustitución, haga clic en el cuadro de color; después mueva el

cuentagotas a la ventana de documento y seleccione el color dorado del fondo

de la tabla.

• En el cuadro Texto, escriba Featured Destination.

• En el campo Guardar como, escriba myText.swf.

4 Haga clic en Aceptar para cerrar el cuadro de diálogo Insertar texto Flash.

Capítulo 162

Vea el objeto de Texto Flash en el documento

El objeto de Texto Flash aparecerá en el documento. Deberá reproducir el objeto

Flash para comprobar el efecto de sustitución del texto.

1 Si aún no está ampliado, haga clic en la ﬂecha de ampliación del inspector de

propiedades para verlo completo.

2 En el inspector de propiedades de Texto Flash, haga clic en Reproducir.

3 En la ventana de documento, pase el puntero por encima del objeto de Texto

Flash.

4 Para detener la reproducción del objeto, haga clic en Detener en el inspector de

propiedades.

Cree un objeto de botón Flash

Ahora comprobará lo fácil que es añadir un botón Flash a un documento. Creará

un botón Flash y lo añadirá debajo de la imagen del escalador.

1 En la ventana de documento, sitúe el punto de inserción en el lugar en el que

desee que aparezca el objeto, debajo del escalador; después, en el panel Objetos,

haga clic en el icono Insertar botón Flash.

Aparecerá el cuadro de diálogo Insertar botón Flash.

Curso práctico de Dreamweaver 63

En el cuadro de diálogo Insertar botón Flash, conﬁgure las siguientes opciones:

• En la lista Estilo, seleccione Rect. biselado-Bronce.

• Para Texto del botón, escriba More Details.

• Para Fuente, seleccione Verdana o elija una de sus fuentes favoritas.

• Para Tamaño, escriba 11.

• Haga clic en Aplicar para ver el botón Flash en el documento.

• En Guardar como, escriba myButton.swf.

3 Haga clic en Aceptar para cerrar el cuadro de diálogo.

El objeto de Botón Flash aparecerá en el documento.

Vea el botón Flash en el documento

El botón Flash que ha insertado tiene un efecto de sustitución; a continuación

reproducirá el botón para observar dicho efecto.

1 En el inspector de propiedades del botón Flash, haga clic en Reproducir para

reproducir el botón en el documento.

2 En la ventana de documento, pase el puntero por encima del objeto para ver el

efecto de sustitución del botón Flash.

3 Para detener la reproducción del objeto, haga clic en Detener en el inspector de

propiedades.

Crear una plantilla

Puede utilizar plantillas para crear documentos que tengan una estructura y una

apariencia comunes. Las plantillas son útiles si desea asegurarse de que todas las

páginas del sitio comparten determinadas características.

Si aplica una única plantilla a un grupo de páginas, podrá cambiar la información

del grupo de páginas editando la plantilla y, seguidamente, aplicándola de nuevo a

dichas páginas. Mientras que los elementos exclusivos de cada página (como el

texto que describe el artículo en venta) permanecen sin cambios, los elementos

comunes de la plantilla (como las barras de desplazamiento) se actualizan en todas

las páginas que comparten dicha plantilla.

La página de destinos de viajes de Compass está vinculada con varias páginas de

detalles de viajes que describen lugares a los que los visitantes del sitio pueden estar

interesados en viajar. Utilizará el diseño de una página de detalles de viajes

existente para crear una plantilla. El uso de una plantilla garantiza que las páginas

de información sobre los viajes tengan un diseño y un formato idénticos.

Capítulo 164

Cree una plantilla a partir de una página existente

En esta sección, creará una plantilla a partir de una página de viajes existente y, a

continuación, empleará la plantilla para crear una nueva página de viajes.

1 En la lista Carpeta local de la ventana Sitio, haga doble clic en el icono de

DW4_TravelDetail_surf.html para abrir dicho archivo.

2 Elija Archivo > Guardar como plantilla.

Aparecerá el cuadro de diálogo Guardar como plantilla.

Las plantillas existentes, travelDetail y travelDetail_v2, se crearon y se aplicaron

a las páginas de viajes ya terminadas del sitio Compass. Creará su propia versión

de esta plantilla.

3 En el campo Guardar como, cambie el nombre de la plantilla: escriba

myTravelDetail y haga clic en Guardar.

En la ventana de documento, un nuevo documento reemplazará al documento

DW4_TravelDetail. En la barra de título del documento, observe que el

documento contiene un identiﬁcador de plantilla, <<Plantilla>>, y una

extensión de archivo de plantilla de Dreamweaver (.dwt).

Modifique la plantilla

En este punto, la plantilla nueva coincide con la página a partir de la cual ha

guardado la plantilla. Una plantilla contiene regiones bloqueadas y editables. Las

regiones bloqueadas sólo pueden editarse dentro de la propia plantilla. Las

regiones editables son marcadores de posición para el contenido exclusivo de cada

página a la que se ha aplicado la plantilla. En su plantilla, el logotipo y los botones

de navegación no son editables, mientras que el título del destino, el anuncio de

banner relacionado y la descripción del destino sí lo son.

Curso práctico de Dreamweaver 65

El primer paso será crear regiones editables en la plantilla.

1 En la plantilla myTravelDetail.dwt de la ventana de documento, haga clic en el

marcador de posición Flash situado más arriba para seleccionarlo; esta película

muestra el título del destino.

2 Elija Modiﬁcar > Plantillas > Nueva región editable.

Aparecerá el cuadro de diálogo Nueva región editable.

3 En el campo Nombre, escriba titleCell como nombre de esta región de la

plantilla.

4 Haga clic en Aceptar.

Se creará una región de plantilla. Observe la ﬁcha que contiene el nombre de la

región de la plantilla. El marcador de posición también está rodeado por una

línea de color azul claro que identiﬁca los límites del área editable.

5 En la ventana de documento, seleccione el marcador de posición del banner

Flash y elija Modiﬁcar > Plantillas > Nueva región editable para convertir esta

sección en una región editable de la plantilla.

6 En el campo Nombre del cuadro de diálogo Nueva región editable, escriba

adCell y, a continuación, haga clic en Aceptar.

Aparecerán los identiﬁcadores del área de la plantilla en el documento.

7 En la ventana de documento, seleccione todo el texto de la primera celda

situada debajo del anuncio de banner y elija Modiﬁcar > Plantillas > Nueva

región editable para convertir esta sección en una región editable de la plantilla.

8 En el campo Nombre del cuadro de diálogo Nueva región editable, escriba

textCell1 y, a continuación, haga clic en Aceptar.

9 En la ventana de documento, seleccione todo el texto de la segunda celda

situada debajo del anuncio de banner y elija Modiﬁcar > Plantillas > Nueva

región editable para convertir esta sección en una región editable de la plantilla.

Capítulo 166

En el campo Nombre del cuadro de diálogo Nueva región editable, escriba

textCell2 y, a continuación, haga clic en Aceptar.

11 Elija Archivo > Guardar para guardar el archivo de plantilla.

Aplique la plantilla a una nueva página

Ahora que ya ha deﬁnido las regiones editables de la plantilla, utilizará la plantilla

para crear una página de detalles de un viaje a Nueva Zelanda.

1 Elija Archivo > Nuevo de plantilla para abrir un nuevo documento.

2 En la lista Plantillas del cuadro de diálogo Seleccionar plantilla, seleccione

myTravelDetail, luego haga clic en Seleccionar para seleccionar la plantilla que

desea aplicar a la nueva página.

La plantilla se aplicará al nuevo documento.

Esta página contiene las mismas regiones y contenido que la plantilla que ha

creado. Si lleva el puntero del ratón hasta una de las regiones no editables de

esta plantilla, como el área del logotipo o de los botones de navegación, el

puntero del ratón cambiará para indicar que no puede obtener acceso a la

región bloqueada.

3 Guarde el documento y asigne al archivo el nombre

myTravelDetail_mtnBike.html.

Curso práctico de Dreamweaver 67

Edite una página basada en una plantilla

A continuación actualizará el documento myTravelDetail_mtnBike.html,

actualizando las regiones editables con activos y texto que hacen referencia a los

datos de viajes en bicicleta de montaña por Nueva Zelanda.

1 En la ventana de documento, haga clic en el marcador de posición de objeto

Flash en la región titleCell para seleccionar el objeto que desea reemplazar.

2 En el campo Archivo del inspector de propiedades, haga clic en el icono de

carpeta y, en el cuadro de diálogo que aparece a continuación, vaya a Assets/

swfs y seleccione text_mtnBike.swf.

3 En la región adCell, haga clic en el marcador de posición de objeto Flash para

seleccionar el objeto que desea reemplazar.

4 En el campo Archivo del inspector de propiedades, haga clic en el icono de

carpeta y, en el cuadro de diálogo que aparece a continuación, vaya a Assets/

swfs y seleccione bikeAd.swf.

5 Elija Archivo > Abrir y vaya a DW4_MtnBikeText.txt para abrir un documento

que contiene el texto de este destino.

6 En DW4_MtnBikeText.txt, copie el párrafo de texto situado debajo de Cell 1;

en el documento myTravelDetail_mtnBike, reemplace el texto actual en la

región textCell1 seleccionándolo y pegando el texto copiado.

7 En DW4_MtnBikeText.txt, copie el párrafo de texto situado debajo de Cell 2;

en el documento myTravelDetail_mtnBike, reemplace el texto actual en la

región textCell2 seleccionándolo y pegando el texto copiado.

Se actualizará la información de detalles del viaje.

8 Cierre DW4_MtnBikeText.text.

9 En el campo Título de la barra de herramientas de Dreamweaver, escriba New

Zealand biking.

10 Guarde el documento.

Capítulo 168

Comprobar el sitio

Antes de pegar las páginas en un servidor remoto, debe comprobar siempre los

archivos. Hasta el momento, ha aprendido a comprobar las páginas

previsualizándolas en un navegador, ahora aprenderá a utilizar otras herramientas

de Dreamweaver que permiten realizar un seguimiento de un archivo y comprobar

las páginas.

En primer lugar, aprenderá a añadir una Design Note a un archivo y luego a

ejecutar un informe sobre los archivos del sitio.

Crear una Design note

Las Design Notes son un medio muy práctico para administrar el sitio mediante la

inserción de comentarios en la ventana Sitio del documento. Utilice Design Notes

para programar el trabajo de producción, realizar el seguimiento de los archivos o

comunicar datos sobre los archivos o el sitio a otros miembros del equipo. A

continuación creará una Design Note para realizar el seguimiento de un cambio

en una de las páginas del sitio.

1 En la ventana Sitio de Dreamweaver (Sitio > Archivos del sitio), seleccione

DW4_Destinations.html en el panel Carpeta local.

2 En el menú principal, elija Archivo > Design Notes.

Aparecerá el cuadro de diálogo Design Notes.

3 En la ﬁcha Información básica, seleccione Requiere atención del menú

emergente.

4 Haga clic en el icono de calendario para añadir la fecha al campo Notas.

5 Haga clic en el campo Notas y luego escriba Need to create Devil’s Tower page

and add links to documents.

6 Seleccione la opción Mostrar al abrir el archivo para que la Design Note se abra

automáticamente al abrir esta página.

Curso práctico de Dreamweaver 69

Haga clic en Aceptar para cerrar el cuadro de diálogo.

Aparecerá un icono de Design Note en la columna Notas del panel Carpeta

local.

8 En la ventana Sitio, seleccione DW4_Destinations.html y ábralo.

Se abrirán el documento y su Design Note asociada; podrá ver fácilmente las

acciones que es preciso llevar a cabo en este archivo.

Informes de sitios completos

Puede ejecutar informes de sitios para comprobar el estado de los archivos HTML

y administrar el ﬂujo de trabajo. Los informes pueden ejecutarse a nivel de

documento, carpeta o sitio. Ejecutará un informe para comprobar si hay algún

documento sin título en el sitio.

1 Elija Sitio > Informes.

Aparecerá el cuadro de diálogo Informes.

2 En el cuadro de diálogo Informes, seleccione Todo el sitio local del menú

emergente Informe sobre; después, bajo Informes HTML, seleccione Untitled

Document.

Capítulo 170

Haga clic en Ejecutar para ejecutar el informe.

Aparecerá un cuadro de diálogo de Resultados en el que se listan los

documentos sin título de página.

4 En la lista de archivos, haga clic en el archivo para seleccionarlo.

Se actualizará el campo Descripción detallada con información de advertencia

detallada.

5 Haga clic en Abrir archivo para abrir el archivo y corregir el problema.

Se abrirá el archivo.

6 En el campo Título de la barra de herramientas de Dreamweaver, escriba

Featured Destinations.

7 Guarde y cierre el archivo cuando termine.

8 Cierre el cuadro de diálogo Resultados.

Siguientes pasos

Felicidades: ha terminado el curso práctico de Dreamweaver. Ahora ya sabe cómo

diseñar páginas, añadir contenido y comprobar las páginas. Si lo desea, puede

continuar creando páginas y vínculos para el sitio Compass. Ya sabe cómo realizar

todas las operaciones necesarias para crear las páginas (también puede utilizar las

páginas completas como referencia). Después de actualizar las páginas,

previsualícelas para comprobar los efectos de sustitución y los vínculos para

asegurarse de que funcionan.

Si desea ampliar conocimientos sobre el uso de Dreamweaver, realice las lecciones

de Dreamweaver; en el menú principal de Dreamweaver, elija Ayuda > Lecciones y

luego seleccione una de las lecciones.

Si dispone de una copia de Dreamweaver y de Fireworks y desea aprender a

trabajar con estas dos herramientas conjuntamente, consulte los cursos prácticos

de Dreamweaver y Fireworks.

Si está interesado en ampliar conocimientos sobre cómo utilizar el código HTML,

el código JavaScript o las hojas de estilos en cascada (CSS), consulte los materiales

de Referencia suministrados con Dreamweaver. Elija Ventana > Referencia.

CAPÍTULO 2

.............................................................................................................

Aspectos básicos de Dreamweaver

Comenzar a utilizar Dreamweaver es tan fácil como abrir un documento HTML

existente o crear uno nuevo. Sin embargo, para sacar el máximo provecho de

Dreamweaver, deberá conocer cuáles son los conceptos que subyacen al área de

trabajo de Dreamweaver y cómo seleccionar opciones, utilizar inspectores y

paneles y deﬁnir las preferencias que mejor se adapten a su forma de trabajar.

Capítulo 272

Área de trabajo de Dreamweaver

El área de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y

a diversos niveles de experiencia. Estos son algunos de los componentes que se

utilizan más habitualmente:

• La ventana de documento muestra el documento actual mientras lo está

creando y editando.

• La barra del lanzador, situada en la parte inferior derecha de la ventana de

documento, contiene botones que permiten abrir y cerrar los inspectores y

paneles que utiliza con mayor frecuencia. Los iconos de la barra del lanzador

también aparecen en el lanzador, un panel ﬂotante que puede elegir del menú

Ventana. Puede especiﬁcar los iconos que aparecen en la barra del lanzador y en

el lanzador deﬁniendo las preferencias de paneles.

• La barra de herramientas contiene botones y menús emergentes que le

permiten ver la ventana de documento de diferentes formas, deﬁnir opciones de

vista y obtener acceso a algunas operaciones comunes, como, por ejemplo,

previsualizar en un navegador.

• Los menús contextuales permiten acceder rápidamente a comandos útiles

pertinentes para la selección o área actual. Para ver un menú contextual, haga

clic con el botón derecho del ratón (Windows) o haga clic en un elemento de

una ventana mientras presiona la tecla Control (Macintosh).

Panel Objetos

Barra de

herramientas

Menú

contextual

Barra del

lanzador

Inspector de

propiedades

Ventana de

documento

Selector de

etiquetas

Aspectos básicos de Dreamweaver 73

• El panel Objetos contiene botones para la creación e inserción de diversos tipos

de objetos, como imágenes, tablas, capas y marcos. También puede alternar

entre vista Estándar y de Disposición y obtener acceso a las herramientas de

dibujo de la vista Disposición.

• El inspector de propiedades muestra propiedades del objeto o texto

seleccionado y permite modiﬁcar dichas propiedades. (Las propiedades que

aparecen en el inspector dependen del objeto o texto seleccionado.)

• Dreamweaver ofrece otros muchos inspectores, paneles y ventanas que no se

muestran aquí, como el panel Historial y el inspector de código. Muchos de

estos elementos pueden apilarse (es decir, puede combinar ventanas, inspectores

y paneles en ventanas con ﬁchas).

Para abrir ventanas, inspectores y paneles de Dreamweaver, utilice el menú

Ventana. Una marca de veriﬁcación al lado de un elemento de este menú indica

que el elemento señalado se encuentra abierto, aunque puede estar oculto detrás

de otras ventanas. Para ver un elemento que actualmente no está abierto, elija el

nombre del elemento del menú.

Si un panel o inspector tiene a su lado una marca de veriﬁcación pero no aparece,

elija Ventana > Organizar paneles.

Diferentes vistas de Dreamweaver

Dreamweaver le permite trabajar en su documento de diferentes formas:

utilizando la vista Diseño, utilizando la vista Código o empleando una vista

combinada que muestra el diseño y el código del documento. Puede cambiar la

vista en la que desea trabajar seleccionando una vista en la barra de herramientas

de Dreamweaver. Para obtener más información, consulte “Utilizar la barra de

herramientas” en la página 78.

Trabajar con la vista de Código

Conforme cree y trabaje con los documentos, Dreamweaver generará

automáticamente el código HTML subyacente. Para examinar o editar este

código, utilice uno de los editores de código de Dreamweaver: la vista de Código

de la ventana de documento o el inspector de código. Para obtener más

información, consulte “Utilizar la vista de Código (o el inspector de código)” en la

página 347.

Trabajar con la vista de Diseño

La vista de Diseño de Dreamweaver muestra una representación visual del

documento, en lugar del código subyacente. Cuando trabaje en la vista de Diseño,

podrá optar entre dos vistas para realizar el diseño: vista de Disposición o vista

Estándar. Puede seleccionar estas vistas en el panel Objetos, bajo Ver.

Capítulo 274

En la vista de Disposición, puede diseñar una disposición de página e insertar

gráﬁcos, texto y otros elementos multimedia. Para obtener más información,

consulte “Diseñar la disposición de páginas” en la página 171.

Trabaje en la vista Estándar para insertar capas, crear documentos de marcos, crear

tablas o utilizar otras funciones no disponibles en la vista de Disposición. Para

trabajar en la vista Estándar, haga clic en el icono Vista estándar del panel Objetos.

La ventana de documento

En la vista de Diseño, la ventana de documento muestra el documento actual

aproximadamente igual a como aparecerá en un navegador Web. La barra de título

de la ventana de documento muestra el título de la página y, entre paréntesis, el

nombre de la carpeta raíz, el nombre del archivo y un asterisco si el archivo

contiene cambios no guardados.

La barra de estado, situada en la parte inferior de la ventana de documento,

proporciona información adicional sobre el documento que está creando.

El selector de etiquetas muestra las etiquetas HTML padre que controlan el texto

o los objetos seleccionados. Haga clic en una de estas etiquetas para resaltar su

contenido en la ventana de documento. Haga clic en <body> para seleccionar todo

el cuerpo del documento.

La ventana emergente Tamaño de ventana permite cambiar el tamaño de la

ventana de documento para que adopte dimensiones predeterminadas o

personalizadas. Consulte “Cambiar el tamaño de la ventana de documento” en la

página 75.

A la derecha del menú emergente Tamaño de ventana observará la estimación del

tamaño del documento y del tiempo de descarga de la página, incluidos todos los

archivos dependientes, como imágenes y otros archivos multimedia. Consulte

“Comprobar el tiempo de descarga y el tamaño” en la página 537.

La barra del lanzador aparece a lo largo de la parte inferior de la ventana de

documento. De forma predeterminada, los botones de la barra del lanzador abren

la ventana Sitio, el panel Activos, el panel Estilos HTML, el panel Estilos CSS, el

panel Comportamientos, el panel Historial y el inspector de código. Para

especiﬁcar qué botones deben aparecer en la barra del lanzador (y en el lanzador

ﬂotante), consulte “Personalizar la barra del lanzador” en la página 77.

Menú emergente

Tamaño de ventana

Barra del lanzador

Tamaño del documento y

tiempo de descarga estimado

Selector de

etiquetas

Aspectos básicos de Dreamweaver 75

Cambiar el tamaño de la ventana de documento

La barra de estado de la ventana de documento muestra las dimensiones actuales

de la ventana (en píxeles). Si hace clic en este tamaño de ventana, Dreamweaver

muestra el menú emergente Tamaño de ventana, que permite adaptar las

dimensiones de la ventana a las de varios tamaños de monitor comunes. Para

diseñar una página cuyo mejor aspecto se logra con un tamaño especíﬁco, puede

ajustar la ventana de documento con cualquiera de los tamaños predeterminados,

editar dichos tamaños predeterminados o crear nuevos tamaños.

Nota: El tamaño de la ventana indicado corresponde a las dimensiones internas de la

ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Por

ejemplo, la opción “536 x 196 (640 x 480, Predeterminado)” es el tamaño de ventana que

se debe utilizar si los visitantes van a hacer uso de Microsoft Internet Explorer o Netscape

Navigator en su configuración predeterminada con un monitor de 640 x 480.

Para establecer un tamaño predeterminado para la ventana de documento:

Elija uno de los tamaños del menú emergente situado en la parte inferior de la

ventana de documento.

Para cambiar los valores que aparecen en el menú emergente Tamaño de

ventana:

1 Elija Editar tamaños en el menú emergente Tamaño de ventana.

2 Haga clic en cualquiera de los valores de ancho o alto de la lista de tamaños de

ventana y escriba un valor nuevo.

Para hacer que la ventana de documento se ajuste sólo a un ancho especíﬁco

(sin modiﬁcar el alto), seleccione un valor de alto y elimínelo.

3 Haga clic en el campo Descripción para introducir texto descriptivo sobre un

tamaño especíﬁco.

4 Haga clic en Aceptar para guardar el cambio y regresar a la ventana de

documento.

Capítulo 276

Para añadir un valor al menú emergente Tamaño de ventana:

1 Elija Editar tamaños en el menú emergente Tamaño de ventana.

2 Haga clic en el espacio en blanco situado debajo del último valor de la columna

Ancho.

3 Introduzca valores en Ancho y Alto. Para deﬁnir sólo el Ancho o el Alto,

sencillamente deje un campo vacío.

4 Haga clic en el campo Descripción para introducir el texto descriptivo sobre el

tamaño agregado.

5 Haga clic en Aceptar para guardar el cambio y regresar a la ventana de

documento.

Por ejemplo, puede escribir SVGA o PC estándar junto a la entrada para un

monitor de 800 x 600 píxeles, y Mac 17 pulg. junto a la entrada para un

monitor de 832 x 624 píxeles. Recuerde que la mayoría de los monitores se

pueden ajustar a varias dimensiones de píxeles.

Minimizar y restaurar ventanas y paneles (usuarios de PC

solamente)

Puede minimizar y restaurar todas las ventanas abiertas de Dreamweaver (ventanas

de documentos, inspectores y paneles).

• Para minimizar todas las ventanas de Dreamweaver, presione Mayús+F4 o

seleccione Ventana > Minimizar todo.

• Para restaurar todas las ventanas de Dreamweaver, presione Alt+Mayús+F4. Si

tiene al menos una ventana abierta, podrá seleccionar Ventana > Restaurar todo

para restaurar cualquier otra ventana adicional.

Configurar preferencias de barra de estado

Utilice las preferencias de barra de estado para deﬁnir opciones para la barra de

estado, situada en la parte inferior de la ventana de documento. Para mostrar estas

preferencias, elija Edición > Preferencias y seleccione Barra de estado.

Tamaños de ventana Permite personalizar los tamaños de las ventanas que

aparecen en el menú emergente de la barra de estado. Consulte “Cambiar el

tamaño de la ventana de documento” en la página 75.

Velocidad de conexión Determina la velocidad de conexión (en kilobits por

segundo) empleada para calcular el tamaño de descarga. El tamaño de descarga de

la página se muestra en la barra de estado. El tamaño de descarga de las imágenes y

otros activos se muestra en el inspector de propiedades cuando se selecciona una

imagen.

Aspectos básicos de Dreamweaver 77

Mostrar Lanzador en barra de estado muestra la barra del lanzador en la parte

inferior de la ventana de documento. Los botones de la barra del lanzador

permiten abrir ventanas, paletas e inspectores. El lanzador contiene los mismos

botones (con texto) y funciones. Para obtener más información, consulte

“Personalizar la barra del lanzador” en la página 77.

Utilizar la barra del lanzador

La barra del lanzador contiene botones que permiten abrir y cerrar diversos

inspectores, paneles y ventanas. También puede ver el lanzador, un panel ﬂotante

con idénticos botones.

Para mostrar u ocultar el lanzador:

Elija Ventana > Lanzador.

Si la barra del lanzador no aparece en la parte inferior de la ventana de

documento, active Mostrar Lanzador en barra de estado en las preferencias de

Barra de estado.

Para cambiar la orientación del lanzador de horizontal a vertical:

Haga clic en el icono de orientación situado en la parte inferior derecha.

Para obtener información sobre los elementos que abren los botones

predeterminados del lanzador, consulte “La ventana Sitio” en la página 110,

“Utilizar estilos HTML para aplicar formato a texto” en la página 254, “Utilizar el

panel Estilos CSS” en la página 267, “El panel Comportamientos” en la

página 458, “Automatizar tareas” en la página 164, “Utilizar la vista de Código

(o el inspector de código)” en la página 347, “Administrar e insertar activos” en la

página 229 y “Utilizar el panel Referencia de Dreamweaver” en la página 344.

Personalizar la barra del lanzador

Utilice las preferencias de Paneles para especiﬁcar los elementos que deben

aparecer en la barra del lanzador y en el lanzador.

Para especificar qué botones deben aparecer en la barra del lanzador y en el

lanzador:

1 Elija Edición > Preferencias y, a continuación, seleccione Paneles de la lista de

categorías.

Los elementos seleccionados para mostrar en el lanzador y en la barra del

lanzador aparecerán en el cuadro Mostrar en Lanzador.

Capítulo 278

Para añadir un elemento al lanzador y a la barra del lanzador, haga clic en el

botón con el signo más (+).

3 Para quitar un elemento del lanzador y de la barra del lanzador, resalte el

elemento y haga clic en el botón con el signo menos (-).

4 Para cambiar el orden de los elementos del lanzador o la barra del lanzador,

seleccione un elemento en la lista y haga clic en un botón de ﬂecha.

Por ejemplo, para mover un elemento hacia la derecha en el lanzador, mueva el

elemento hacia abajo en la lista.

5 Haga clic en Aceptar.

El lanzador y la barra del lanzador cambiarán para mostrar los elementos que

haya especiﬁcado.

Utilizar la barra de herramientas

La barra de herramientas de Dreamweaver contiene botones que permiten alternar

entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera

vista que combina las vistas de Código y de Diseño. La barra de herramientas

contiene algunos comandos comunes relacionados con la selección de vistas y el

estado del documento. Los elementos del menú Opciones (botón situado a la

derecha) cambia en función de la vista que seleccione.

• Para ver u ocultar la barra de herramientas, elija Ver > Barra de herramientas.

• Para ver código sólo en la ventana de documento, haga clic en el botón Mostrar

vista de código.

• Para ver una vista que contenga las vistas de Código y de Diseño, haga clic en el

botón Mostrar vistas de código y diseño.

Cuando seleccione esta vista, se encontrará disponible la opción Vista de diseño

arriba del menú Ver. Utilice esta opción para especiﬁcar qué vista debe aparecer

en la parte superior de la ventana de documento.

• Para ver sólo la vista de Diseño, haga clic en el botón Mostrar vista de diseño.

También puede obtener acceso a estas vistas a través del menú Ver.

Vista de Código

Vista de Diseño

Título del documento

Actualizar vista de diseño

Referencia

Navegación por el código

Menú Opciones

Vista de Código y de Diseño

Previsualizar en

el navegador

Estado de archivo

Aspectos básicos de Dreamweaver 79

• Para introducir un título para el documento, utilice el campo Título.

Si el documento ya tiene título, éste aparecerá en dicho campo.

• Para ver el menú emergente Estado de archivo, haga clic en el botón de menú

de estado de archivo.

• Para previsualizar o depurar un documento en un navegador, haga clic en Vista

previa/depurar en navegador y elija uno de los navegadores enumerados en el

menú emergente.

Para agregar o cambiar los navegadores enumerados en el menú, elija Editar

lista de navegadores.

• Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista de

diseño.

• Para obtener acceso al panel Referencia, haga clic en el botón Referencia.

El panel Referencia contiene información de referencia sobre código HTML,

CSS y JavaScript. Para obtener más información, consulte “Utilizar el panel

Referencia de Dreamweaver” en la página 344.

• Para desplazarse por el código, haga clic en el botón Navegación por el código.

Para obtener más información, consulte “Depurar código JavaScript” en la

página 499.

• Para obtener acceso al menú Opciones, haga clic en el botón de menú

Opciones.

En el menú Opciones se enumeran distintas opciones para cada vista. Para

obtener más información sobre las opciones de vista de Código, consulte

“Utilizar la vista de Código (o el inspector de código)” en la página 347. Para

obtener más información sobre las opciones de vista de Diseño, consulte

“Diseñar la disposición de páginas” en la página 171.

Nota: Cuando la ventana de documento muestre ambas vistas, dispondrá de acceso al

menú Opciones de cada una de las vistas haciendo clic en la vista deseada y luego en el

menú Opciones.

Utilizar menús contextuales

Dreamweaver emplea de forma extensiva los menús contextuales, que

proporcionan un método para acceder rápidamente a los comandos y las

propiedades más útiles relacionados con la ventana o el objeto con el que esté

trabajando. En los menús contextuales sólo aparecen los comandos pertinentes

para la selección actual.

Capítulo 280

Para utilizar un menú contextual:

1 Haga clic con el botón derecho del ratón (Windows) o haga clic mientras

presiona la tecla Control (Macintosh) en el objeto o ventana.

Aparecerá el menú contextual para el objeto o la ventana seleccionados.

2 Seleccione el comando del menú contextual y libere el botón del ratón.

Utilizar el panel Objetos

El panel Objetos contiene botones para la creación e inserción de diversos tipos de

objetos, como tablas, capas e imágenes. Para mostrar u ocultar el panel Objetos,

elija Ventana > Objetos.

Para insertar un objeto:

Haga clic en el correspondiente botón del panel Objetos o arrastre el icono del

botón hasta la ventana de documento. Dependiendo del objeto, aparecerá el

correspondiente cuadro de diálogo de inserción de objeto en el que se le pedirá

que seleccione o inserte el archivo u objeto deseado.

Para omitir este cuadro de diálogo e insertar un objeto marcador de posición

vacío:

Mantenga presionada la tecla Control (Windows) u Opción (Macintosh) mientras

inserta el objeto. (Por ejemplo, para insertar un marcador de posición para una

imagen sin especiﬁcar un archivo de imagen, mantenga presionada la tecla

Control u Opción y haga clic en el botón Imagen.)

Nota: Esto no permite omitir todos los cuadros de diálogo. Algunos objetos, como las

barras de navegación, las capas, los botones Flash, los marcos, etc., no insertan

marcadores de espacio.

Aspectos básicos de Dreamweaver 81

El panel Objetos contiene siete categorías de forma predeterminada: Caracteres,

Común, Formularios, Marcos, Head, Invisibles y Especial. También contiene

botones que cambian de vista: Estándar y Disposición.

• El panel Caracteres contiene caracteres especiales, como los símbolos de

símbolos no se muestran correctamente en las versiones anteriores a la 3.0 de

los navegadores (Netscape e IE).

• La categoría Común contiene botones para la creación e inserción de los

objetos más utilizados, como imágenes, tablas y capas.

• La categoría Formularios contiene botones que permiten crear formularios e

insertar elementos de formulario.

• La categoría Marcos contiene estructuras comunes de conjuntos de marcos.

• La categoría Head contiene botones que permiten añadir diversos elementos de

la sección head, como etiquetas meta, keywords y base.

• La categoría Invisibles contiene botones que permiten crear objetos no visibles

en la ventana del navegador, como los puntos de ﬁjación con nombre. Elija Ver

> Ayudas visuales > Elementos invisibles para ver los iconos que marcan la

posición de estos objetos. Haga clic en los iconos de elementos invisibles de la

ventana de documento para seleccionar los objetos y cambiar sus propiedades.

Consulte “Elementos invisibles” en la página 159.

• La categoría Especial contiene botones que permiten insertar elementos

especiales, como applets Java, plug-ins y objetos ActiveX. Para obtener más

información, consulte “Insertar elementos multimedia” en la página 313.

Capítulo 282

• La sección Ver del panel Objetos permite elegir entre vista Estándar

(predeterminada) o de Disposición. Si está seleccionada la vista de Disposición,

también podrá seleccionar las herramientas de Disposición: Dibujar celda de

disposición y Dibujar tabla de disposición. Para obtener más información,

consulte “Diseñar la disposición de páginas” en la página 171.

Para cambiar de categoría, utilice el menú emergente situado en la parte superior

del panel. Puede modiﬁcar cualquier objeto del panel o crear sus propios objetos;

consulte “Modiﬁcar el panel Objetos” en la página 543 y “Crear un objeto simple”

en la página 544. Para obtener información sobre las opciones de cada panel,

consulte los temas relacionados en la Ayuda de Dreamweaver.

Algunas de las preferencias generales afectan al panel Objetos. Para cambiar estas

preferencias, elija Edición > Preferencias y seleccione General.

• Cuando inserte objetos tales como imágenes, tablas, secuencias de comandos y

elementos head, aparecerá un cuadro de diálogo en el que se le solicitará

información adicional. Puede suprimir estos cuadros de diálogo desactivando la

opción Mostrar diálogo al insertar objetos o manteniendo presionada la tecla

Control mientras crea el objeto. Cuando se inserta un objeto con esta opción

desactivada, el objeto recibe valores de atributo predeterminados. Después de

insertar el objeto, utilice el inspector de propiedades para cambiar sus

propiedades.

• Las preferencias del panel Objetos permiten visualizar el contenido del panel

Objetos como texto solamente, iconos solamente o texto e iconos.

Utilizar el inspector de propiedades

El inspector de propiedades permite examinar y editar las propiedades del

elemento de página seleccionado actualmente. (Un elemento de página es un

objeto o texto.) Puede seleccionar elementos de página en la ventana de

documento o en el inspector de código.

Para mostrar u ocultar el inspector de propiedades, elija Ventana > Propiedades.

La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato

en la ventana de documento . (Para algunas propiedades, los cambios no se aplican

hasta que se hace clic fuera de los campos de texto de edición de la propiedad, se

presiona Entrar o se presiona Tab para cambiar a otra propiedad.)

El contenido del inspector de propiedades varía en función del elemento

seleccionado. Para obtener información sobre propiedades concretas, seleccione

un elemento en la ventana de documento y, a continuación, haga clic en el icono

Ayuda, situado en la esquina superior derecha del inspector de propiedades.

Aspectos básicos de Dreamweaver 83

El inspector de propiedades muestra inicialmente las propiedades del elemento

seleccionado que se utilizan con mayor frecuencia. Haga clic en la ﬂecha de

ampliación, situada en la esquina inferior derecha del inspector de propiedades,

para ver más propiedades del elemento. (En algunos pocos casos, determinadas

propiedades ocultas pueden no aparecer incluso en el inspector de propiedades

ampliado; en estos casos, utilice el inspector de código o la vista de Código para

codiﬁcar manualmente dichas propiedades.)

Utilizar paneles flotantes acoplables

La mayoría de los paneles de Dreamweaver pueden acoplarse (es decir, combinarse

en un único panel ﬂotante con múltiples ﬁchas). Esto facilita el acceso a la

información sin saturar el espacio de trabajo. (No obstante, el lanzador, el

inspector de propiedades y la ventana Sitio no se pueden acoplar.) Asimismo, los

paneles e inspectores ahora se "ajustan" automáticamente unos a otros, a los lados

de la pantalla o a la ventana de documento. Esto facilita el desplazamiento y la

organización de los distintos paneles ﬂotantes y ventanas de Dreamweaver.

Para combinar dos o más paneles y crear un panel con fichas de selección:

1 Arrastre la ﬁcha (no la barra de título) de un panel ﬂotante sobre otro panel

ﬂotante. Cuando aparezca un borde resaltado alrededor del panel de destino,

libere el botón del ratón.

2 Haga clic en cualquier ﬁcha del panel de ﬁchas para colocar el panel

correspondiente en primer plano.

Dado que el panel Objetos no tiene ninguna ﬁcha, no puede acoplarse a otro

panel arrastrándolo sobre el otro panel. Sin embargo, sí puede arrastrar la ﬁcha de

otro panel sobre el panel Objetos para combinarlos. No obstante, sí puede mover

paneles con ﬁchas entre paneles ﬂotantes y reorganizarlos para que se adapten a su

ﬂujo de trabajo mediante el proceso descrito más arriba.

Para quitar un panel de un panel con fichas.

Arrastre su ﬁcha fuera de la ventana.

Ficha del panel

Historial

El panel Historial mientras se

arrastra hasta el panel Capas

Capítulo 284

Configurar preferencias de paneles

Utilice las preferencias de paneles para especiﬁcar qué paneles e inspectores deben

aparecer siempre delante de las ventanas de documento y Sitio y qué otras pueden

quedar ocultas. También puede utilizar las preferencias de paneles para especiﬁcar

qué paneles e inspectores deben aparecer en el lanzador y en la barra del lanzador.

Para especificar dónde aparece cada panel en relación con la ventana de

documento:

1 Elija Edición > Preferencias y, a continuación, seleccione Paneles de la lista de

categorías.

De forma predeterminada, todas las ventanas, paneles e inspectores aparecen

sobre la ventana de documento.

2 Desactive la selección de las ventanas, paneles e inspectores que desea situar

detrás de la ventana de documento.

Por ejemplo, si desea permitir que la ventana de documento oculte el inspector

de código, desactive la opción Inspector de código. Ahora el inspector de

código sólo aparecerá sobre la ventana de documento cuando se encuentre

activo.

Del mismo modo, si desea permitir que la ventana de documento oculte los

paneles ﬂotantes que ha añadido al personalizar Dreamweaver, desactive Resto

de paneles.

Panel Historial

El panel Historial muestra una lista de todos los pasos dados en el documento

activo desde que éste se creó o se abrió. (El panel Historial no muestra los pasos

dados en otros marcos, en otras ventanas de documento o en la ventana Sitio.)

Permite deshacer uno o varios pasos, así como repetir pasos y crear nuevos

comandos para automatizar tareas repetitivas.

Control deslizante

Botón Reproducir

Botón Copiar pasos Botón Guardar como comando

Pasos

Aspectos básicos de Dreamweaver 85

El control deslizante, o el pulgar, del panel Historial señala inicialmente el último

paso realizado.

Utilizar el panel Historial

El panel Historial realiza un seguimiento de todos sus pasos de trabajo en

Dreamweaver. Puede utilizar el panel Historial para deshacer múltiples pasos a la

vez.

Si desea deshacer la última operación realizada en un documento, elija Edición >

Deshacer como en cualquier otra aplicación. (El nombre del comando Deshacer

cambiará en el menú Edición para reﬂejar la última operación realizada.)

El panel Historial también permite volver a reproducir pasos ya realizados y

automatizar tareas mediante la creación de nuevos comandos. Para obtener más

información, consulte “Automatizar tareas” en la página 164.

Para abrir el panel Historial:

Elija Ventana > Historial.

Para deshacer el último paso:

Arrastre el control deslizante del panel Historial hasta el paso superior en la lista.

Esta operación tiene el mismo efecto que elegir Edición > Deshacer.

El paso deshecho adopta el color gris.

Para deshacer varias pasos al mismo tiempo, lleve a cabo una de estas

operaciones:

• Arrastre el control deslizante para señalar cualquier paso.

• Haga clic a la izquierda de un paso de la ruta del control deslizante; el control

deslizante se desplazará automáticamente hasta dicho paso y deshará pasos

conforme se desplace.

Capítulo 286

Nota: Para desplazarse automáticamente a un determinado paso, deberá hacer clic a la

izquierda del paso; si hace clic en el paso en sí mismo, se seleccionará el paso. Seleccionar

un paso no es lo mismo que volver a ese paso en el historial de deshacer.

Como ocurre al deshacer un solo paso, si deshace una serie de pasos y, a

continuación, realiza una nueva operación en el documento, no podrá rehacer los

pasos deshechos, pues habrán desaparecido del panel Historial.

El panel Historial también permite repetir los pasos que aparecen en el historial de

pasos, así como automatizar tareas a partir de los pasos dados.Consulte

“Automatizar tareas” en la página 164.

Para definir el número de pasos que el panel Historial mantiene y muestra:

1 Elija Edición > Preferencias y seleccione General en la lista Categoría.

2 Introduzca un número para Número máximo de pasos de historial.

El valor predeterminado suele ser válido para la mayoría de las necesidades de

los usuarios. Cuanto mayor sea el número, más memoria necesitará el panel

Historial. Esto puede afectar al rendimiento y reducir considerablemente la

velocidad de funcionamiento del equipo. Cuando el panel Historial alcanza el

número máximo de pasos, los pasos más antiguos se borran.

Nota: No se puede modificar el orden de los pasos en el panel Historial. El panel Historial

no es un conjunto arbitrario de comandos, sino una forma de ver los pasos en el orden en

que se han dado.

Para borrar la lista de historial para el documento actual:

En el menú contextual del panel Historial, elija Borrar historial.

Este comando también borra toda la información de deshacer del documento

actual. Después de elegir Borrar historial, no podrá deshacer los pasos borrados.

(La opción Borrar historial no deshace los pasos dados, sino que simplemente

quita el registro de esos pasos de la memoria de Dreamweaver.)

Aspectos básicos de Dreamweaver 87

Utilizar otros paneles de Dreamweaver

El área de trabajo de Dreamweaver está compuesto por muchos otros paneles.

Estos son tan sólo algunos:

El inspector de código muestra el código que utilizan los navegadores para mostrar

el documento como una página Web. Para mostrar u ocultar el inspector de

código, elija Ventana > Inspector de código.

Los cambios realizados en la ventana de documento se reﬂejarán inmediatamente

en el inspector de código. Si introduce HTML en el inspector de código y, a

continuación, hace clic fuera del inspector, los cambios correspondientes aparecen

en la ventana de documento. Para obtener más información, consulte “Utilizar la

vista de Código (o el inspector de código)” en la página 347.

Para realizar cambios menores en etiquetas HTML, puede utilizar el Quick Tag

Editor en lugar del inspector de código. Para mostrar el Quick Tag Editor,

presione Control+T (Windows) o Comando +T (Macintosh) o elija Modiﬁcar >

Quick Tag Editor. Para obtener más información, consulte “Editar una etiqueta

HTML en la vista de Diseño” en la página 355.

El panel Referencia proporciona información detallada sobre la etiqueta HTML

en la que está trabajando, incluidos atributos de etiquetas. Puede abrir el panel

Referencia desde el menú Ventana, la barra del lanzador o el inspector de código.

Por ejemplo, puede seleccionar una etiqueta img, hacer clic en el botón Referencia

en la barra de herramientas y averiguar a qué afectan los atributos (align, border,

etc.). Para obtener más información, consulte “Utilizar el panel Referencia de

Dreamweaver” en la página 344.

El depurador JavaScript de Dreamweaver le permite depurar código JavaScript

del lado del cliente (client-side). Puede abrir el depurador JavaScript desde el

menú Ventana. Para obtener más información, consulte “Depurar código

JavaScript” en la página 499.

Capítulo 288

Trabajar con colores

En Dreamweaver, muchos de los cuadros de diálogo, así como el inspector de

propiedades de muchos elementos de página, contienen un cuadro de color que

abre un selector de color. Utilice el selector de color para elegir el color de un

elemento de la página.

Para elegir un color en Dreamweaver:

1 Elija un cuadro de color en cualquier cuadro de diálogo o en el inspector de

propiedades.

Aparecerá el selector de color.

2 Lleve a cabo una de estas operaciones:

• Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de

las paletas Cubos de colores (predeterminado) y Tono continuo son seguros

para la Web; los de otras paletas no lo son.

• Utilice el cuentagotas para seleccionar un color de cualquier punto de la

pantalla, incluso fuera de las ventanas de Dreamweaver. (Si hace clic en el

escritorio u otra aplicación, Dreamweaver recogerá el color donde haya hecho

clic, pero es posible que se active la otra aplicación. En tal caso, haga clic en una

ventana de Dreamweaver para seguir trabajando con este programa, o

mantenga presionado el botón del ratón al moverlo de Dreamweaver al

escritorio para evitar cambiar a otra aplicación.)

• Para ampliar la selección de color, utilice el menú emergente situado en la

esquina superior derecha del selector de color. Puede seleccionar Cubos de

colores, Tono continuo, SO Windows, SO Mac, Escala de grises y Ajustar a

valores seguros para la Web.

Tenga en cuenta que las paletas Cubos de colores y Tono continuo son seguras

para la Web, mientras que SO Windows, SO Mac y Escala de grises no lo son.

Si está utilizando una paleta que no es segura para la Web y luego elige Ajustar

a valores seguros para la Web, Dreamweaver reemplazará el color seleccionado

por el color seguro para la Web más próximo. Dicho de otro modo, es posible

que no consiga el color deseado.

• Para quitar el color actual sin elegir ningún otro color, haga clic en el botón Tachar.

• Para abrir el selector de color del sistema, haga clic en el botón Rueda de color.

Cuadro de color del

inspector de

propiedades

Aspectos básicos de Dreamweaver 89

Colores seguros para la Web

En HTML, los colores se expresan en forma de valores hexadecimales (por

ejemplo, #FF0000) o con nombres (red). Un color seguro para la Web es aquél que

se muestra de la misma forma en Netscape Navigator y en Microsoft Internet

Explorer tanto en Windows como en Macintosh con un modo de 256 colores.

Suele decirse que existen 216 colores comunes y que cualquier valor hexadecimal

que combine los pares 00, 33, 66, 99, CC o FF (valores RGB 0, 51, 102, 153, 204

y 255, respectivamente) representa un color seguro para la Web.

Al realizar pruebas, sin embargo, se descubre que hay sólo 216 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).

Las paletas Cubos de colores (predeterminado) y Tono continuo en Dreamweaver

utilizan la paleta de 216 colores seguros para la Web; al seleccionar un color de

estas paletas, se muestra el valor hexadecimal del color.

Para elegir un color situado fuera de la gama segura para la Web, abra los colores

del sistema haciendo clic en el botón Rueda de color situado en la esquina superior

derecha del selector de color de Dreamweaver. Los colores del sistema no se

limitan a los colores seguros para la Web.

Las versiones de Netscape Navigator para UNIX usan una paleta de colores

distinta a la de las versiones para Windows y Macintosh. Si está desarrollando el

sitio Web para navegadores UNIX exclusivamente (o si los destinatarios serán

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.

Definir preferencias

Dreamweaver incluye parámetros de deﬁnición 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, visualización

de código HTML y JavaScript, editores externos y previsualización de páginas en

navegadores. A lo largo de este manual del usuario se facilita información sobre

opciones de preferencias especíﬁcas, junto con la función o el tema asociados.

En este manual sólo describen las opciones de preferencias más comunes.

Consulte el tema correspondiente en la Ayuda de Dreamweaver para obtener

información sobre opciones de preferencias que no se aborden aquí.

Capítulo 290

Definir preferencias generales

Las preferencias generales controlan la apariencia global de Dreamweaver. Para

cambiar estas preferencias, elija Edición > Preferencias y haga clic en General. Las

preferencias generales se dividen en dos subcategorías: Opciones de archivo y

opciones de edición. Para obtener información detallada sobre estas preferencias,

consulte la Ayuda de Dreamweaver.

Definir preferencias de fuentes/codificación

Utilice las preferencias de fuentes/codiﬁcación para deﬁnir una codiﬁcación de

fuentes predeterminada de documentos nuevos y establecer las fuentes que utiliza

Dreamweaver para mostrar cada codiﬁcación. La codiﬁcación de un documento

determina cómo se muestra éste en un navegador. La conﬁguración de fuentes de

Dreamweaver permite manipular texto con la fuente y el tamaño deseados sin que

ello afecte a la apariencia del documento cuando otros usuarios lo vean en un

navegador.

Para cambiar la codificación del documento actual:

Elija Modiﬁcar > Propiedades de la página y, a continuación, seleccione una

codiﬁcación en el menú emergente Codiﬁcación del doc.

Para cambiar la codificación predeterminada empleada al crear documentos:

Elija Edición > Preferencias, haga clic en Fuentes/codiﬁcación en la lista Categoría

y elija una codiﬁcación en el menú emergente Codiﬁcación pred.

Para definir las fuentes que desea utilizar para cada tipo de codificación:

1 Elija Edición > Preferencias y haga clic en Fuentes/codiﬁcación en la lista

Categoría.

2 Seleccione el tipo de codiﬁcación (por ejemplo, Occidental (Latin1) o Japonés)

en la lista Conﬁg. fuentes y, a continuación, elija las fuentes que desea utilizar

para esa codiﬁcación en los menús emergentes situados debajo de la lista

Conﬁg. fuentes.

Para obtener más información sobre preferencias de Fuentes/codiﬁcación,

consulte la Ayuda de Dreamweaver.

Aspectos básicos de Dreamweaver 91

Utilizar Dreamweaver con otras

aplicaciones

Dreamweaver facilita el proceso de diseño y desarrollo de páginas Web al

permitirle trabajar con otras aplicaciones. Para obtener información sobre cómo

trabajar con otras aplicaciones, como los navegadores, los editores HTML, los

editores de imágenes y las herramientas de animación, consulte los temas

siguientes:

• Para obtener información sobre el uso de Dreamweaver con otros editores

HTML, como HomeSite o BBEdit, consulte “Utilizar editores de HTML

externos” en la página 368.

• Puede especiﬁcar sus navegadores preferidos para previsualizar el sitio. Consulte

“Vista previa en navegadores” en la página 532.

• Puede lanzar un editor de imágenes externo, como Macromedia Fireworks,

desde Dreamweaver. Consulte “Utilizar un editor de imágenes externo” en la

página 291.

• Puede conﬁgurar Dreamweaver para que lance un editor distinto para cada tipo

de archivo. Consulte “Iniciar un editor externo” en la página 314.

• Para obtener información acerca de cómo añadir animación al sitio mediante

películas Flash, consulte “Contenido de Flash” en la página 316.

• Para aprender a añadir interacción al sitio mediante películas Shockwave,

consulte “Películas Shockwave” en la página 326.

Aspectos básicos de la personalización de

Dreamweaver

Existen algunas técnicas básicas que puede utilizar para personalizar Dreamweaver

de forma que se adapte a sus necesidades. Por ejemplo, mediante la deﬁnición de

preferencias, la creación de sus propios métodos abreviados de teclado y la adición

de extensiones, puede conﬁgurar el área de trabajo sin necesidad de conocer

código complejo o editar archivos de texto. Si desea más información sobre

funciones de personalización avanzadas, consulte “Personalizar Dreamweaver” en

la página 541.

Capítulo 292

Utilizar el editor de métodos abreviados de teclado

Utilice el editor de métodos abreviados de teclado para crear sus propias teclas de

método abreviado, editar métodos abreviados existentes o utilizar conjuntos de

métodos abreviados predeﬁnidos.

Para obtener acceso al editor de métodos abreviados de teclado:

Elija Edición > Métodos abreviados de teclado.

Aparecerá el cuadro de diálogo Métodos abreviados de teclado con diversas

opciones que puede seleccionar y comandos que puede editar.

Conjunto actual es un menú que muestra los conjuntos de métodos abreviados

predeﬁnidos incluidos con Dreamweaver, así como cualquier otro conjunto

personalizado que usted haya deﬁnido. De forma predeterminada, el conjunto actual

es el que DW está utilizando en el documento actual. Los conjuntos predeterminados

se enumeran en la parte superior del menú. Si está familiarizado con los métodos

abreviados de Dreamweaver 3, puede utilizarlos eligiendo el conjunto predeﬁnido

Dreamweaver 3. (El conjunto Dreamweaver 3 contiene los métodos abreviados de

Dreamweaver 3 para las funciones de Dreamweaver 3 y los métodos abreviados de

Dreamweaver 4 para las funciones que no existían en Dreamweaver 3.)

Comandos es un menú emergente que le permite seleccionar la categoría de

comando que desea editar. Por ejemplo, puede editar comandos de menú, como el

comando Abrir archivo, o uno de los comandos de edición de código, como

Equilibrar llaves.

Botón Conjunto

repetido

Botón Renombrar

icono

Botón Borrar

conjunto

Botón Guardar como

archivo HTML

Aspectos básicos de Dreamweaver 93

Lista de comandos muestra los comandos asociados a la categoría que ha

seleccionado del menú emergente Comandos junto con los métodos abreviados

asignados. Las categorías de comandos de menú y de menú Sitio muestran esta

lista en forma de vista de árbol que replica la estructura de los menús. Las otras

categorías enumeran los comandos por nombre (por ejemplo, Salir de la

aplicación).

La ventana Métodos abreviados muestra la lista de métodos abreviados asignados

al comando seleccionado.

Pulse tecla muestra la nueva combinación de teclas que usted introduce.

Más añade un nuevo método abreviado al comando actual. Haga clic en el signo

más (+) para activar el campo Métodos abreviados. Introduzca un nuevo comando

de tecla y haga clic en Cambiar para añadir un nuevo método abreviado de teclado

para este comando. Puede asignar dos métodos abreviados de teclado distintos

para cada comando.

Menos borra el método abreviado seleccionado de la lista de métodos abreviados.

Cambiar aplica el nuevo método abreviado al comando y lo añade a la lista de

métodos abreviados.

• Haga clic en el botón Duplicar para duplicar el conjunto actual. Tendrá la

oportunidad de asignar un nombre al conjunto o de conservar el nombre

predeterminado (el nombre del conjunto actual con el suﬁjo “copia”).

• Haga clic en el botón Renombrar para cambiar el nombre del conjunto actual.

• Haga clic en el botón Guardar como archivo HTML para guardar el conjunto

actual en un formato de tabla HTML que le permitirá verlo e imprimirlo

fácilmente. Puede abrir el archivo HTML en su navegador e imprimir los

métodos abreviados para consultarlos más fácilmente.

• Haga clic en el botón Borrar para borrar copias y conjuntos personalizados.

(No puede borrar conjuntos activos.)

Para borrar un método abreviado de un comando:

1 Desde el menú emergente Comandos, seleccione la categoría de comandos que

contiene el método abreviado de comando que desea borrar; por ejemplo,

comandos del menú Sitio.

La lista de comandos muestra los comandos asociados a dicha categoría.

2 Desde la lista de comandos, seleccione el método abreviado de comando que

desea borrar.

Observará una lista de métodos abreviados asignados a los comandos.

3 Seleccione los métodos abreviados que desea borrar.

4 Haga clic en el botón de signo menos (-).

Capítulo 294

Para añadir un método abreviado a un comando:

1 Seleccione la categoría de comandos que contiene el comando deseado.

La lista de comandos muestra los comandos asociados a dicha categoría.

2 Elija el comando de la lista de comandos.

Observará los métodos abreviados, si los hay, que ya estén asignados al

comando en la lista de métodos abreviados.

3 Haga clic en el botón de signo más (+). El campo de introducción Métodos

abreviados se activa y el punto de inserción se desplaza al campo Pulse tecla.

4 Presione la combinación de teclas que desea añadir; la combinación de teclas

aparecerá en el campo Pulse tecla.

Si hay algún problema con el método abreviado (por ejemplo, si la

combinación de teclas ya está asignada a otro comando) aparecerá un aviso que

le permitirá reasignar la combinación de teclas o cancelar la operación.

5 Haga clic en Cambiar. La nueva combinación de teclas se asignará al comando.

Para editar un método abreviado existente:

1 Seleccione la categoría de comandos que contiene el comando deseado.

La lista de comandos muestra los comandos de la categoría elegida.

2 Elija el comando de la lista de comandos.

Observará los métodos abreviados que ya estén asignados al comando en el

campo Nuevo método abreviado. Si hay varios métodos abreviados asignados a

un comando, deberá seleccionar el que desea cambiar.

3 Haga clic en el campo Pulse tecla y escriba la combinación de teclas deseada.

4 Haga clic en el botón Cambiar para cambiar el método abreviado.

Nota: Si hay algún problema con la combinación de teclas, aparecerá un mensaje

explicativo debajo del campo de introducción de Nuevo método abreviado y es posible

que no pueda añadir, borrar o editar el método abreviado. Por ejemplo, si la combinación

de teclas ya está asignada a otro comando, aparecerá un texto de advertencia

inmediatamente debajo del campo de introducción de Nuevo método abreviado.

Aspectos básicos de Dreamweaver 95

Añadir extensiones a Dreamweaver

Las extensiones son nuevas funciones que puede añadir fácilmente a Dreamweaver

4. Puede utilizar muchos tipos de extensiones, por ejemplo, hay extensiones que le

permiten cambiar el formato de las tablas, conectar con bases de datos back-end o

que le ayudan a escribir secuencias de comandos para navegadores.

Para localizar las extensiones más recientes para Dreamweaver, utilice el sitio Web

Macromedia Exchange en http://www.macromedia.com/exchange/dreamweaver/.

Una vez allí, podrá conectar y descargar extensiones (muchas de ellas gratuitas),

incorporarse a grupos de debate, ver caliﬁcaciones y comentarios de los usuarios e

instalar y utilizar Package Manager. Debe instalar Package Manager para poder

descargar extensiones.

Package Manager se ejecuta conjuntamente con Dreamweaver y le permite instalar

y administrar extensiones. Una vez que haya descargado e instalado Package

Manager del sitio Exchange, lance Package Manager directamente desde

Dreamweaver eligiendo Administrar extensiones del menú Comandos.

Capítulo 296

Para instalar y administrar extensiones:

1 Haga clic en el vínculo de descarga correspondiente a la extensión deseada que

encontrará en el sitio Web.

Puede optar por abrirla e instalarla directamente desde el sitio o por guardarla

en disco.

• Si la abre directamente, Package Manager se encargará de realizar la instalación

automáticamente.

• Si la guarda en disco, guarde el archivo de paquete de extensión (.mxp) en la

carpeta de extensiones descargadas dentro de la carpeta de Dreamweaver de su

equipo. (Por ejemplo, Mi PC\c:\Archivos de

programa\Macromedia\Dreamweaver 4\Conﬁguration\Extensions.)

2 Haga doble clic en el archivo de paquete de extensión o elija Instalar extensión

del menú Archivo de Package Manager.

El archivo se instalará en Dreamweaver. Algunas extensiones no se encuentran

accesibles hasta después de reiniciar Dreamweaver; es posible que se le pida que

salga de la aplicación y vuelva a iniciarla.

Utilice Package Manager para eliminar extensiones o para consultar más

información sobre la extensión.

CAPÍTULO 3

.............................................................................................................

Planificar y configurar el sitio

Un sitio Web es un conjunto de documentos vinculados con atributos

compartidos, tales como temas relacionados, un diseño similar o un objetivo

común.

Macromedia Dreamweaver es una herramienta de creación y administración de

sitios, por lo que puede utilizarla para crear sitios Web completos, además de

documentos individuales. Para obtener resultados óptimos, diseñe y planiﬁque el

sitio Web antes de crear las páginas que va a contener el sitio.

Nota: Si desea comenzar a crear documentos inmediatamente, puede probar algunas de

las herramientas de creación de documentos de Dreamweaver y realizar un documento de

muestra. (Consulte “Crear, abrir y guardar documentos HTML” en la página 154.) Sin

embargo, no comience un desarrollo serio del documento hasta que haya configurado el

sitio.

El primer paso a la hora de crear un sitio Web consiste en planiﬁcarlo. Consulte

“Planiﬁcación y diseño de sitios” en la página 97. El paso siguiente consiste en

establecer la estructura básica del sitio. Consulte “Utilizar Dreamweaver para

conﬁgurar un nuevo sitio” en la página 104. Si ya dispone de un sitio en un

servidor Web y desea usar Dreamweaver para editarlo, consulte “Conﬁgurar un

sitio remoto” en la página 128.

Planificación y diseño de sitios

En Dreamweaver, el término sitio puede hacer referencia a un sitio Web o un

emplazamiento local de almacenamiento de documentos pertenecientes a un sitio

Web. Cuando comience a pensar en la creación de un sitio Web, debe seguir una

serie de pasos de planiﬁcación para asegurarse de que el sitio sea un éxito. Incluso

en el caso de que vaya a crear tan sólo una página principal personal que sólo verán

los amigos y la familia, será conveniente planiﬁcar el sitio cuidadosamente para

asegurarse de que todo el mundo pueda utilizarlo correctamente.

Capítulo 398

Determinar los objetivos

Decidir los objetivos del sitio es el primer paso que debe tomar a la hora de crear

un sitio Web. Pregúntese a sí mismo o a sus clientes cuestiones relacionadas con el

sitio. ¿Qué espera conseguir al disponer de un sitio Web? Escriba sus objetivos de

manera que pueda recordarlos durante el proceso de diseño. Los objetivos le

ayudan a centrarse y a adaptar el sitio Web a sus necesidades particulares.

Un sitio Web que ofrece noticias sobre un tema concreto debe tener una

apariencia y una navegación distintas a las de un sitio Web destinado a vender

productos. La complejidad de sus objetivos afectará a la navegación, a los

elementos multimedia que utilice (Flash, Director, etc.), e incluso a la apariencia y

al funcionamiento del sitio.

Elegir la audiencia destino

Después de decidir lo que desea conseguir a través del sitio Web, debe decidir

quién desea que visite el sitio. Esta puede parecer una pregunta estúpida, dado que

la mayoría de la gente quiere que todo el mundo visite su sitio Web. Sin embargo,

es difícil crear un sitio Web que pueda utilizar absolutamente todo el mundo. La

gente utiliza navegadores distintos, se conecta a velocidades diferentes y puede o

puede que no disponga de plug-ins multimedia. Todos estos factores afectan al uso

del sitio. Y ésta es precisamente la razón por la que debe determinar su audiencia

destino.

Piense en la gente que se sentirá atraída hacia su sitio Web o en quién espera poder

atraer. ¿Qué tipo de equipos piensa que van a utilizar y qué plataforma podría ser

dominante (Macintosh, Windows, Linux, etc.)? ¿Cuál es la velocidad de conexión

media (módem a 33,6 o DSL)? ¿Qué tipos de navegadores y tamaños de monitor

utilizarán? ¿Va a crear un sitio de intranet en el que todo el mundo utilizará el

mismo SO y el mismo navegador? Todos estos factores pueden afectar

considerablemente a cómo aparecerá el sitio Web ante los visitantes.

Una vez que haya elegido la audiencia y que haya determinado los tipos de

equipos, velocidades de conexión y navegadores que utilizarán, puede deﬁnir el

diseño.

Por ejemplo, supongamos que su audiencia destino está formada

predominantemente por usuarios de Windows con monitores de 17 pulgadas y

que utilizarán Internet Explorer 3.0 o posterior. Conforme diseñe su página Web,

deberá comprobar que el sitio funciona fundamentalmente con Microsoft Internet

Explorer en un equipo Windows con un tamaño de pantalla de 800 x 600 píxeles.

Un número inferior de visitantes puede que utilice Netscape Navigator en una

plataforma Macintosh, pero también debe asegurarse de que el sitio funciona en

dichos equipos, aunque es posible que no se muestre exactamente igual que para la

audiencia destino.

Planificar y configurar el sitio 99

Crear sitios compatibles con diversos navegadores

A la hora de crear el sitio Web conviene tener en cuenta la diversidad de

navegadores Web que pueden emplear los visitantes. En la medida de lo posible,

diseñe el sitio para ofrecer la máxima compatibilidad con navegadores teniendo en

cuenta otras limitaciones de diseño.

Hay más de veinte navegadores Web distintos en uso, la mayoría de los cuales

están disponibles en varias versiones. Aunque su objetivo sea únicamente ofrecer

compatibilidad con Netscape Navigator y Microsoft Internet Explorer, utilizados

por la mayoría de los usuarios de la Web, no todos los visitantes dispondrán de las

versiones más recientes de esos navegadores. Si su sitio está en la Web, tarde o

temprano alguna persona lo visitará usando Netscape Navigator 2.0 o el

navegador que AOL facilita a sus clientes, o un navegador de sólo texto como

Lynx.

En algunas circunstancias no es necesario crear sitios compatibles con múltiples

navegadores. Por ejemplo, si el sitio sólo está disponible en la intranet de la

empresa y sabe que todos los empleados utilizan el mismo navegador, puede

optimizar el sitio para que aproveche las características de ese navegador. Del

mismo modo, si crea contenido HTML que se va a distribuir en un CD-ROM

que incorpora un navegador, puede dar por hecho que todos los clientes van a

tener acceso a ese navegador.

En la mayoría de los casos, a la hora de diseñar sitios Web para visualización

pública, es deseable que el sitio se pueda ver en tantos navegadores como sea

posible. Seleccione uno o dos navegadores como navegadores de destino y diseñe

el sitio para ellos, pero intente explorar el sitio con otros navegadores y así evitar

una cantidad excesiva de contenido incompatible. También puede pegar un

mensaje en un grupo de debate para pedir a otras personas que vean el sitio. Esta

puede ser una excelente forma de conseguir comentarios de una audiencia amplia.

Cuanto más soﬁsticado sea el sitio —en términos de diseño, animación, contenido

multimedia e interacción—, menos probable será que ofrezca compatibilidad para

distintos navegadores. Por ejemplo, no todos los navegadores pueden ejecutar

JavaScript. Probablemente una página de texto normal que no utilice caracteres

especiales se verá bien en cualquier navegador, pero su atractivo estético será

mucho menor que el de una página que haga un uso correcto de gráﬁcos, diseño e

interacción. Intente llegar a un equilibrio entre conseguir el máximo efecto y

ofrecer la máxima compatibilidad con navegadores.

Un método útil consiste en proporcionar múltiples versiones de algunas páginas

importantes, como la página principal del sitio. Por ejemplo, puede diseñar una

versión de la página con marcos y otra sin ellos. Después puede incluir en la

página Web un comportamiento que lleve automáticamente a los visitantes que

utilicen navegadores sin capacidad para visualizar marcos a una versión sin marcos.

Para obtener más información, consulte “Usar las acciones de comportamiento

incluidas con Dreamweaver” en la página 467.

Capítulo 3100

Organizar la estructura del sitio

Organizar cuidadosamente el sitio desde el primer momento puede ahorrarle

frustración y tiempo más adelante. Si comienza a crear documentos sin pensar en

la jerarquía a la que corresponden, puede terminar con una enorme carpeta llena

de archivos y difícil de administrar, o con archivos relacionados repartidos por

media docena de carpetas con nombres similares.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local

con todos los archivos del sitio (lo que se conoce como sitio local) y crear y editar

los documentos dentro de dicha carpeta. Después podrá copiar dichos archivos en

un servidor Web cuando esté preparado para publicar el sitio y permitir al público

que lo vea. Este enfoque es mejor que crear y editar archivos en el propio sitio Web

en vivo, ya que le permite comprobar cambios en el sitio local antes de hacerlos

públicos y, cuando haya terminado, cargar los archivos del sitio local y actualizar

todo el sitio público de una vez.

Consulte “Utilizar Dreamweaver para conﬁgurar un nuevo sitio” en la página 104

para coordinar el sitio local con Dreamweaver. Una vez que conﬁgure el sitio local

con Dreamweaver, podrá administrar mejor los archivos del sitio, controlar los

vínculos, actualizar las páginas, etc.

Divida el sitio en categorías. Coloque las páginas relacionadas en una misma

carpeta. Por ejemplo, los comunicados de prensa de la compañía, la información

sobre contactos y las ofertas de trabajo pueden colocarse en una carpeta, y las

páginas del catálogo en línea pueden ir en otra. Utilice subcarpetas cuando sea

necesario. Este tipo de organización facilitará el mantenimiento y la navegación

por el sitio.

Planificar y configurar el sitio 101

Decida dónde desea colocar elementos como imágenes y archivos de sonido. Por

ejemplo, es conveniente colocar todas las imágenes en un emplazamiento, a ﬁn de

facilitar su localización cuando quiera insertarlas en una página. Los diseñadores

sitúan a veces todos los elementos que desean utilizar en un sitio y que son ajenos

a HTML en una carpeta llamada Activos. La carpeta puede contener otras

carpetas, como Imágenes, Shockwave y Sonidos. También se puede utilizar una

carpeta Activos distinta para cada grupo de páginas relacionadas, si no hay muchos

activos compartidos entre los grupos.

Utilice la misma estructura para sitios locales y remotos. El sitio local y el sitio

Web remoto deberán tener exactamente la misma estructura. Si crea un sitio local

utilizando Dreamweaver y, a continuación, carga todo en el sitio remoto,

Dreamweaver se asegurará de que la estructura local se duplique con precisión en

el entorno remoto.

my_site1 (root folder)

Site 1

About_the_Company

Catalog

Assets (for whole site)

index.html (home page)

my_site2 (root folder)

Site 2

index.html (home page)

About_the_Company

Assets

Catalog

Assets

Capítulo 3102

Crear su propio diseño

Ahorrará mucho tiempo posteriormente en el proceso si planiﬁca el diseño y la

disposición antes de comenzar a trabajar con Dreamweaver. Puede ser tan sencillo

como crear un boceto en papel de cómo desea que sea la disposición del sitio. Un

enfoque más avanzado sería crear un dibujo compuesto del sitio empleando

aplicaciones de software como Macromedia Freehand o Fireworks. Lo importante

es disponer de un boceto de la disposición y del diseño que pueda seguir

posteriormente a la hora de crear el sitio.

Es importante mantener una coherencia en la disposición y el diseño de la página.

Usted desea que los usuarios puedan hacer clic en las páginas del sitio sin que

acaben confundidos porque todas las páginas tienen una apariencia distinta o

porque la navegación está en un lugar diferente en cada página.

Diseñar el esquema de navegación

Otra área en la que merece la pena planiﬁcar es la navegación. Cuando diseñe su

sitio, piense en la experiencia que le gustaría que tuvieran sus visitantes. Piense en

cómo podrá desplazarse un visitante de un área a otra del sitio. Tenga en cuenta los

siguientes puntos:

“Usted está aquí.” Los visitantes deben conocer fácilmente en qué lugar del sitio se

encuentran y cómo pueden regresar a la página de nivel superior.

Las búsquedas y los índices facilitan a los visitantes la localización de la

información que están buscando.

Los comentarios ofrecen un medio por el que los visitantes pueden ponerse en

contacto con el webmaster (en el caso de que exista) si algo marcha mal en el sitio

o con los responsables de la compañía o el sitio.

Diseñe la apariencia que tendrá la navegación. La navegación debe ser homogénea

en todo el sitio. Si sitúa una barra de navegación a lo largo de la parte superior de

la página principal, intente mantenerla en ese lugar en todas las páginas

vinculadas.

Dreamweaver cuenta con dos herramientas de navegación que puede utilizar para

crear el esquema de navegación. Para obtener más información, consulte “Crear

vínculos y navegar” en la página 371.

Planificar y configurar el sitio 103

Planificar y reunir los activos

Una vez que sepa cómo será el diseño y la disposición, podrá crear y reunir los

activos que va a necesitar. Los activos pueden ser elementos tales como imágenes,

texto o elementos multimedia (Flash, Shockwave, etc.). Asegúrese de que ha

reunido todos estos elementos y de que está preparado antes de comenzar a

desarrollar el sitio. De lo contrario, tendrá que parar continuamente para

encontrar una imagen o para crear un botón.

Si está utilizando imágenes y gráﬁcos de un sitio de diseños gráﬁcos o si los está

creando otra persona, asegúrese de que los reúne en una carpeta de su sitio

(consulte “Organizar la estructura del sitio” en la página 100). Si está creando los

activos usted mismo, asegúrese de que los crea todos antes de comenzar el

desarrollo, incluidas todas imágenes necesarias si va a utilizar imágenes de

sustitución. Después organice los activos de forma que pueda obtener acceso a

ellos fácilmente durante la creación del sitio en Dreamweaver.

Dreamweaver puede facilitarle la reutilización de disposiciones de página y

elementos de página en diversos documentos mediante la utilización de plantillas

y bibliotecas. No obstante, es más sencillo crear nuevas páginas con plantillas y

bibliotecas que aplicarlas a documentos existentes.

Utilice plantillas si muchas de las páginas van a utilizar la misma disposición.

Planiﬁque y diseñe una plantilla para dicha disposición y luego cree nuevas

páginas basadas en dicha plantilla. Si decide cambiar la disposición de todas las

páginas, sólo tendrá que cambiar la plantilla.

Nota: Los cambios que puede realizar en los documentos basados en plantillas están

sujetos a algunas restricciones. Las plantillas se utilizan mejor en entornos de colaboración

con el fin de garantizar que todos los usuarios empleen el mismo diseño de página. Los

elementos de biblioteca pueden brindar una mayor flexibilidad de uso fuera de entornos de

colaboración.

Utilice elementos de biblioteca

si sabe que una determinada imagen u otro

contenido va a aparecer en muchas páginas del sitio; diseñe el contenido con

antelación y conviértalo en un elemento de biblioteca. Si posteriormente cambia

ese elemento, la versión actualizada aparecerá en todas las páginas que lo

contengan.

Para obtener más información sobre la reutilización de diseños y elementos,

consulte “Reutilizar contenido con plantillas y bibliotecas” en la página 395.

Capítulo 3104

Utilizar Dreamweaver para configurar un

nuevo sitio

Una vez que cree la estructura del sitio (consulte “Organizar la estructura del sitio”

en la página 100), deberá establecer el nuevo sitio en Dreamweaver. Establecer este

sitio local en Dreamweaver signiﬁca que puede utilizar Dreamweaver con FTP

para cargar el sitio en el servidor Web, para controlar y mantener

automáticamente los vínculos y para compartir archivos con otras personas que

colaboren con usted. Lo más adecuado es conﬁgurar el sitio local en Dreamweaver

antes de comenzar a crear las páginas.

El sitio local es la estructura del sitio que usted establece en el equipo para que

contenga todas las carpetas, activos y archivos de un sitio concreto (consulte

“Organizar la estructura del sitio” en la página 100).

La carpeta raíz local del sitio deberá ser especíﬁca de ese sitio. Una buena idea es

crear una carpeta llamada Sitios y, posteriormente, crear carpetas raíz locales

dentro de esa carpeta, una para cada sitio con el que trabaje.

Para crear un sitio nuevo:

1 Elija Sitio > Nuevo sitio.

En el cuadro de diálogo Deﬁnición de sitio que aparece estará seleccionada la

categoría Datos locales.

Planificar y configurar el sitio 105

Introduzca las opciones siguientes:

• En el campo Nombre del sitio, introduzca un nombre para el sitio. El nombre

del sitio aparece en la ventana Sitio y en el submenú Sitio > Abrir sitio. Utilice

el nombre que desee, ya que no aparecerá en el navegador y sólo le servirá de

referencia.

• En el campo Carpeta raíz local, especiﬁque la carpeta del disco duro en la que

desea almacenar los archivos, las plantillas y los elementos de biblioteca del

sitio. Cuando Dreamweaver resuelve vínculos relativos a la raíz, lo hace

tomando esta carpeta como raíz (consulte “Rutas relativas a la raíz” en la

página 374). Haga clic en el icono de carpeta para examinar y seleccionar la

carpeta o introduzca una ruta y un nombre de carpeta en el campo de texto. Si

aún no existe la carpeta raíz local, créela desde el cuadro de diálogo que permite

examinar archivos.

• En la opción Actualizar lista archivos locales autom., indique si desea actualizar

automáticamente la lista de archivos locales cada vez que copie archivos en el

sitio local. Si desactiva esta opción, mejorará la velocidad de Dreamweaver a la

hora de copiar esos archivos, pero el panel Local de la ventana Sitio no se

actualizará automáticamente. Para actualizar manualmente la ventana Sitio,

haga clic en el botón Actualizar de la misma. Para actualizar manualmente sólo

el panel Local, elija Ver > Actualizar local en la ventana Sitio (Windows) o Sitio

> Ver archivos del sitio > Actualizar local (Macintosh).

• En el campo Dirección HTTP, introduzca el URL que utilizará el sitio Web

ﬁnalizado, de modo que Dreamweaver pueda veriﬁcar los vínculos del sitio que

utilicen URL absolutos. (Consulte “Comprobar vínculos en una página o un

sitio” en la página 534.) Por ejemplo, la dirección HTTP absoluta del sitio Web

de Macromedia es http://www.macromedia.com.

• En la opción Caché, indique si desea crear un caché local para mejorar la

velocidad de las tareas de administración de vínculos y sitios. Si no selecciona

esta opción, Dreamweaver volverá a preguntarle si desea utilizar un caché antes

de crear el sitio. Es recomendable seleccionar esta opción porque el panel

Activos sólo funciona cuando se ha creado un caché. Para obtener más

información sobre el panel Activos, consulte “Administrar e insertar activos” en

la página 229.

3 Haga clic en Aceptar.

Se abrirá la ventana Archivos del sitio. Para obtener más información sobre la

ventana del sitio y la administración del sitio, consulte “Administración del sitio y

colaboración” en la página 109.

Posteriormente, cuando esté listo para publicar el sitio en un servidor remoto,

deberá añadir información adicional sobre el sitio. Para obtener más información

sobre los sitios remotos, consulte “Conﬁgurar un sitio remoto” en la página 128.

Capítulo 3106

Editar un sitio Web existente

Puede utilizar Dreamweaver para editar un sitio existente en su disco local, aunque

no se haya utilizado Dreamweaver para crear el sitio original.

Para editar un sitio Web existente:

1 Elija Sitio > Deﬁnir sitios y haga clic en Nuevo, o bien elija Sitio > Abrir sitio >

Deﬁnir sitios.

En el cuadro de diálogo Deﬁnición de sitio que aparece estará seleccionada la

categoría Datos locales.

2 Introduzca las opciones siguientes:

• En el campo Nombre del sitio, introduzca un nombre para el sitio. El nombre

del sitio aparece en la ventana Sitio y en el submenú Sitio > Abrir sitio. Utilice

el nombre que desee, ya que no aparecerá en el navegador y sólo le servirá de

referencia.

• En el campo Carpeta raíz local, especiﬁque la carpeta del disco duro en la que se

desea almacenar los archivos, las plantillas y los elementos de biblioteca

existentes del sitio. Haga clic en el icono de carpeta para examinar y seleccionar

la carpeta o introduzca una ruta y un nombre de carpeta en el campo de texto.

• En la opción Actualizar lista archivos locales autom., indique si desea actualizar

automáticamente la lista de archivos locales cada vez que copie archivos en el

sitio local. Si desactiva esta opción, mejorará la velocidad de Dreamweaver a la

hora de copiar esos archivos, pero el panel Local de la ventana Sitio no se

actualizará automáticamente. Para actualizar manualmente la ventana Sitio,

haga clic en el botón Actualizar de dicha ventana. Para actualizar manualmente

sólo el panel Local, elija Ver > Actualizar local en la ventana Sitio (Windows) o

Sitio > Ver archivos del sitio > Actualizar local (Macintosh).

• En el campo Dirección HTTP, introduzca el URL que utilizará el sitio Web

ﬁnalizado, de modo que Dreamweaver pueda veriﬁcar los vínculos del sitio que

utilicen URL absolutos. (Consulte “Comprobar vínculos en una página o un

sitio” en la página 534.) Por ejemplo, la dirección HTTP absoluta del sitio Web

de Macromedia es http://www.macromedia.com.

• En la opción Caché, indique si desea crear un caché local para mejorar la

velocidad de las tareas de administración de vínculos y sitios. Si no selecciona

esta opción, Dreamweaver volverá a preguntarle si desea utilizar un caché antes

de crear el sitio. Es recomendable seleccionar esta opción porque el panel

Activos sólo funciona cuando se ha creado un caché. Para obtener más

información sobre el panel Activos, consulte “Administrar e insertar activos” en

la página 229.

3 Haga clic en Aceptar.

Planificar y configurar el sitio 107

Se abrirá la ventana Archivos del sitio. Para obtener más información sobre la

ventana del sitio y la administración del sitio, consulte “Administración del sitio y

colaboración” en la página 109.

Editar un sitio remoto

Puede utilizar Dreamweaver para copiar un sitio remoto existente (o una rama del

mismo) en el disco local y editarlo, incluso aunque no haya utilizado

Dreamweaver para crear el sitio original.

Aunque sólo tenga la intención de editar una parte del sitio remoto, deberá

duplicar toda la estructura de la rama correspondiente del sitio, desde su carpeta

raíz hasta los archivos que desea editar. Por ejemplo, si la carpeta raíz del sitio

remoto, denominada public_html, contiene dos carpetas, Project1 y Project2, y

desea trabajar únicamente con los archivos HTML de Project1, no será necesario

que descargue los archivos de Project2, pero deberá asignar su carpeta raíz local a

public_html, no a Project1.

Remote site

public_html

Project1

Assets

HTML

Project2

Assets

HTML

Local site

local root folder

(map this to public_html, not to

Project1 or Project1/HTML)

Project1

(must be present on local

site; corresponds to Project1

on remote site)

HTML

(must be present on

local site; corresponds

to Project1/HTML on

remote site)

Capítulo 3108

Para editar un sitio remoto existente:

1 Cree una carpeta local que contenga el sitio existente y conﬁgúrela como

carpeta raíz local del sitio (consulte “Utilizar Dreamweaver para conﬁgurar un

nuevo sitio” en la página 104).

2 Conﬁgure un sitio remoto utilizando información sobre el sitio existente.

Consulte “Conﬁgurar un sitio remoto” en la página 128. Compruebe que elige

la carpeta raíz correcta para el sitio remoto.

3 Conecte con el sitio remoto utilizando el botón Conectar de la ventana Sitio.

4 Según la parte del sitio remoto que desee editar, lleve a cabo una de estas

operaciones:

• Si desea trabajar con el sitio completo, seleccione su carpeta raíz y haga clic en

Obtener para descargar todo el sitio en el disco local.

• Si desea trabajar sólo con uno de los archivos o de las carpetas del sitio,

localícelo en el panel Remoto de la ventana Sitio y haga clic en Obtener para

descargarlo en el disco duro. (Dreamweaver duplica automáticamente la

estructura del sitio remoto que sea necesaria para situar el archivo descargado

en el lugar adecuado de la jerarquía del sitio.) Para editar únicamente una parte

de un sitio, generalmente debe incluir los archivos dependientes.

5 Proceda como si estuviera creando un sitio a partir de cero: edite documentos,

previsualícelos, realice una prueba con ellos y vuelva a cargarlos en el sitio

remoto.

Para obtener más información sobre la administración del sitio, consulte

“Administración del sitio y colaboración” en la página 109.

Quitar un sitio de la lista de sitios

Si no desea seguir trabajando con un sitio en Dreamweaver, puede quitarlo de la

lista de sitios. Los archivos no desaparecen del sitio.

Nota: Cuando se quita un sitio de la lista, toda su información de configuración se pierde

de forma permanente.

Para quitar un sitio de la lista de sitios:

1 Elija Sitio > Deﬁnir sitios.

2 Seleccione el nombre de un sitio.

3 Haga clic en Quitar.

Aparecerá un cuadro de diálogo pidiendo conﬁrmación.

4 Haga clic en Sí para quitar el sitio de la lista.

109

CAPÍTULO 4

.............................................................................................................

Administración del sitio y colaboración

Macromedia Dreamweaver ayuda a organizar los archivos de los sitios local y

remoto mediante la ventana Sitio. Permite duplicar la estructura del sitio local en

un servidor remoto o la estructura de un sitio Web remoto en el sistema local. Los

vínculos relativos creados en el sitio local siguen funcionando después de transferir

los archivos al sitio remoto porque la estructura de ambos sitios es idéntica.

Para crear un sitio local en Dreamweaver, utilice el comando Nuevo sitio con el ﬁn

de crear una carpeta raíz local (o convierta una carpeta existente en la carpeta raíz

local); consulte “Utilizar Dreamweaver para conﬁgurar un nuevo sitio” en la

página 104. El sitio remoto se deﬁne al crear un nuevo sitio, o bien se añade dicha

información posteriormente utilizando el comando Deﬁnir sitios; consulte

“Asociar un servidor remoto a un sitio local” en la página 128.

Dreamweaver incluye una serie de funciones que permiten estructurar un sitio y

transferir los archivos a un servidor remoto. Al transferir archivos entre sitios

locales y remotos, Dreamweaver mantiene estructuras paralelas de archivos y

carpetas entre ambos sitios. Al transferir archivos entre sitios, Dreamweaver crea

automáticamente las carpetas necesarias cuando aún no existen en un sitio.

También puede sincronizar los archivos entre los sitios local y remoto; si es

necesario, Dreamweaver copia los archivos en ambos sentidos y elimina los no

deseados.

Dreamweaver incluye funciones que facilitan el trabajo en colaboración en un sitio

Web. Puede desproteger (depositar) y proteger (retirar) archivos de un servidor

remoto de forma que otros miembros de un equipo Web puedan ver quién está

trabajando en un archivo. Puede añadir Design Notes a los archivos para

compartir información con los miembros del equipo acerca del estado del archivo,

su prioridad, etc. También puede utilizar la función Informes de ﬂujo de trabajo

para ejecutar informes sobre el sitio y ver información sobre el estado de

protección/desprotección, así como para buscar las Design Notes adjuntas a los

archivos.

Capítulo 4110

Dreamweaver puede integrarse con algunas de las aplicaciones más populares de

control de fuente y versiones. Para integración con control de fuente, puede

conectar con bases de datos SourceSafe y otros sistemas de control de fuente que

admitan el protocolo WebDAV. (Sin embargo, Dreamweaver no realiza control de

versiones.)

Una vez que haya publicado su sitio, usted o alguien de su equipo puede continuar

manteniéndolo mediante el uso de estas mismas herramientas. Antes y después de

publicar el sitio, también deseará solucionar los problemas que puedan existir en el

sitio de forma permanente. Para obtener más información, consulte “Comprobar

y publicar un sitio” en la página 529.

La ventana Sitio

Utilice la ventana Sitio para realizar operaciones de mantenimiento estándar,

como crear nuevos documentos HTML; ver, abrir y mover archivos; crear

carpetas; y borrar elementos. También puede utilizar la ventana Sitio para

transferir archivos entre los sitios local y remoto, al tiempo que puede diseñar la

navegación del sitio empleando el mapa del sitio (consulte “Conﬁgurar un sitio

remoto” en la página 128 y “Utilizar el mapa del sitio” en la página 120.)

De forma predeterminada, el sitio remoto o mapa del sitio aparece en el panel

izquierdo, mientras que el sitio local aparece en el derecho. Puede cambiar esta

conﬁguración en las preferencias del sitio. Consulte “Preferencias de Sitio” en la

página 113.

Administración del sitio y colaboración 111

Utilizar los controles de la ventana Sitio

Para abrir la ventana Sitio, elija Ventana > Archivos del sitio. Utilice los botones y

las opciones siguientes de la barra de herramientas de la ventana Sitio para

establecer qué debe mostrar la ventana Sitio y para transferir archivos entre los

sitios local y remoto:

Ver archivos del sitio muestra la estructura de archivos de los sitios remoto y local

en los paneles de la ventana Sitio. (El sitio mostrado en cada panel, derecho o

izquierdo, viene determinado por la conﬁguración de preferencias; consulte

“Preferencias de Sitio” en la página 113.) Ver archivos del sitio es la vista

predeterminada de la ventana Sitio.

Ver mapa del sitio muestra un mapa gráﬁco del sitio basado en cómo están

vinculados los documentos entre sí. Mantenga presionado este botón para elegir

Sólo mapa o Mapa y archivos en el menú emergente.

El menú emergente de sitios enumera los sitios que ha deﬁnido. Para cambiar a

otro sitio, selecciónelo en la lista. Para añadir un sitio o editar la información de

un sitio existente, elija Deﬁnir sitios en la parte inferior del menú (consulte

“Conﬁgurar un sitio remoto” en la página 128).

Conectar/desconectar (disponible con el protocolo FTP y WebDAV y con

SourceSafe)

conecta o desconecta del sitio remoto. De forma predeterminada,

Dreamweaver desconecta del sitio remoto si permanece inactivo durante más de

30 minutos (sólo FTP). Para cambiar el límite de tiempo, elija Edición >

Preferencias y seleccione Sitio.

Actualizar actualiza las listas de los directorios local y remoto. Utilice este botón

para actualizar manualmente las listas de directorios si ha desactivado las opciones

Actualizar lista archivos locales autom. o Actualizar lista archivos remotos autom.

en el cuadro de diálogo Deﬁnición de sitio (consulte “Asociar un servidor remoto a

un sitio local” en la página 128). Por ejemplo, si monta una unidad que contiene

un sitio remoto después de abrir la ventana Sitio, no verá la lista del directorio del

sitio remoto hasta que haga clic en el botón Actualizar.

Obtener archivo(s) copia los archivos seleccionados del sitio remoto al sitio local

(sobrescribiendo la copia local del archivo, si existe). Si está activada la opción

Permitir desproteger y proteger archivo, las copias locales serán de sólo lectura. Los

archivos permanecerán disponibles en el sitio remoto para que otros miembros del

equipo los protejan. Si está desactivada la opción Permitir desproteger y proteger

archivo y se obtiene un archivo, se transferirá una copia de éste con privilegios de

lectura y escritura. Observe que los archivos copiados son los seleccionados en el

panel de la ventana Sitio que esté activo. Si el panel Remoto está activo, los

archivos remotos seleccionados se copiarán en el sitio local. Si, por el contrario, es

el panel Local el que está activo, las versiones remotas de los archivos locales

seleccionados se copiarán en el sitio local. Consulte “Obtener archivos de un

servidor remoto” en la página 147.

Capítulo 4112

Colocar archivo(s) copia los archivos seleccionados desde el sitio local hasta el sitio

remoto. Observe que los archivos copiados son los seleccionados en el panel de la

ventana Sitio que esté activo. Si el panel Local está activo, los archivos locales

seleccionados se copiarán en el sitio remoto. Si, por el contrario, es el panel

Remoto el que está activo, las versiones locales de los archivos remotos

seleccionados se copiarán en el sitio remoto. Consulte “Colocar archivos en un

servidor remoto” en la página 148.

Nota: Si añade un archivo que aún no existe en el sitio remoto y está activada la opción

Permitir desproteger y proteger archivo, el archivo se añadirá al sitio remoto como

“protegido”. Elija la opción Desproteger archivos en lugar de añadir un archivo sin el

estado protegido.

Proteger archivo(s)

transﬁere una copia del archivo desde el servidor remoto hasta

el sitio local (sobrescribiendo la copia local del archivo, si existe) y marca el archivo

como protegido en el servidor. Esta opción no está disponible si está desactivada la

opción Permitir desproteger y proteger archivo para el sitio actual. Consulte

“Desproteger y proteger archivos en un servidor remoto” en la página 137.

Desproteger archivo(s) transﬁere una copia del archivo local al servidor remoto y

permite que otros usuarios la editen. El archivo local se convierte en archivo de

sólo lectura. Esta opción no está disponible si está desactivada la opción Permitir

desproteger y proteger archivo para el sitio actual en el cuadro de diálogo

Deﬁnición de sitio. Consulte “Desproteger y proteger archivos en un servidor

remoto” en la página 137.

Detener tarea actual cancela la actividad en curso, incluidas la obtención y la

colocación de archivos. El botón, con forma de señal de stop roja (octogonal) con

una X blanca, aparece en la esquina inferior derecha de la ventana sólo cuando hay

una tarea en curso. Observe que es posible que el servidor tarde un tiempo en

procesar la solicitud de parada, por lo que la transferencia de archivos no se

detendrá inmediatamente. Este botón aparece sólo cuando hay una tarea en curso.

El botón de triángulo de contracción/ampliación situado en la parte inferior

izquierda de la ventana Sitio, le permite contraer o ampliar la ventana Sitio para

ver uno o dos paneles.

Administración del sitio y colaboración 113

Preferencias de Sitio

Elija Edición > Preferencias y seleccione Sitio. A continuación elija entre las

siguientes preferencias de Sitio para controlar las opciones de transferencia de

archivos disponibles en la ventana Sitio:

Mostrar siempre especiﬁca qué sitio (remoto o local) se muestra siempre y en qué

panel de la ventana Sitio (izquierdo o derecho) aparecen los archivos locales y los

remotos. El sitio local siempre aparece a la derecha de forma predeterminada. El

panel intercambiable será el panel no elegido (el izquierdo de forma

predeterminada): este panel puede mostrar el mapa del sitio o los archivos del otro

sitio (el sitio remoto, de forma predeterminada).

Archivos dependientes muestra un mensaje para transferir archivos dependientes

(como imágenes, hojas de estilos externas y otros archivos a los que se hace

referencia en el archivo HTML) que el navegador carga con el archivo HTML.

Las opciones Mensaje al obtener/proteger y Mensaje al colocar/desproteger están

activadas de forma predeterminada.

Nota: Para que aparezca el mensaje Incluir archivos dependientes incluso cuando estas

opciones están desactivadas, presione Alt (Windows) u Opción (Macintosh) mientras

selecciona los comandos Obtener, Colocar, Desproteger o Proteger.

Conexión FTP

determina si se interrumpe la conexión al sitio remoto cuando

transcurre el número de minutos especiﬁcado sin actividad.

Capítulo 4114

Tiempo de espera FTP especiﬁca el número de segundos durante los que

Dreamweaver intentará establecer una conexión con el servidor remoto. Si no hay

respuesta después del período de tiempo especiﬁcado, Dreamweaver mostrará un

cuadro de diálogo de advertencia.

Servidor de cortafuegos especiﬁca la dirección del servidor proxy con el que

establecerá la conexión con servidores externos si se encuentra al otro lado de un

cortafuegos. Si no está al otro lado de un cortafuegos, deje este espacio en blanco.

Nota: Si se encuentra detrás de un cortafuegos, seleccione la opción Usar cortafuegos en

el cuadro de diálogo Definición de sitio. Consulte “Asociar un servidor remoto a un sitio

local” en la página 128.

Puerto de cortafuegos

especiﬁca el puerto del cortafuegos por el cual se establece

la conexión con el servidor remoto. Si conecta por un puerto distinto del 21

(predeterminado para FTP), introduzca aquí el número.

Opciones de Colocar: Guardar archivos antes de colocar indica que los archivos

no guardados se guardarán automáticamente antes de colocarlos en el sitio

remoto.

Definir sitios abre el cuadro de diálogo Deﬁnir sitios, en el que podrá editar un

sitio existente o crear uno nuevo. Consulte “Asociar un servidor remoto a un sitio

local” en la página 128.

También puede deﬁnir si los tipos de archivos que desea transferir deberán hacerlo

en formato ASCII (texto) o binario. Para ello, abra el archivo

FTPExtensionMap.txt de la carpeta Dreamweaver/Conﬁguration (en Mac,

FTPExtensionMapMac.txt). Puede modiﬁcar y borrar la lista de tipos de archivos

que se transﬁeren en cada formato, así como añadir sus propios tipos de archivos.

Si una extensión de archivo no está deﬁnida en este archivo, Dreamweaver

transferirá automáticamente el archivo en formato binario.

Nota: En Macintosh, el archivo FTPExtensionMapMac.txt también contiene información

sobre la asignación de extensiones de archivos a creadores y tipos de archivo Macintosh.

Esta asignación permite establecer el icono correcto para los archivos descargados, así

como abrirlos con la aplicación correspondiente cuando se hace doble clic en ellos en el

Finder.

Observe que cuando un archivo se transﬁere en formato ASCII se ignora la

conﬁguración de salto de línea que se haya deﬁnido. Consulte “Conﬁgurar

preferencias de formato de código” en la página 360.

Administración del sitio y colaboración 115

Ver y abrir archivos en la ventana Sitio

Utilice la ventana Sitio para ver sitios locales y remotos, añadir o eliminar

documentos y diseñar la estructura de navegación del sitio con un mapa del sitio.

Para obtener más información, consulte “La ventana Sitio” en la página 110.

Puede deﬁnir las dos vistas de la ventana Sitio para que muestren el sitio local, el

sitio remoto o un mapa gráﬁco del sitio local. Por ejemplo, puede ver el sitio local

en un panel y el remoto en el otro, o bien el sitio local en Ver archivos del sitio en

un panel y Ver mapa del sitio en el otro. Para obtener más información sobre

mapas de sitios, consulte “El mapa del sitio” en la página 120.

Ver sitios locales

La ventana Sitio permite mostrar el contenido de sitios locales y remotos. Los

sitios locales pueden verse en la ventana Sitio como una lista de archivos, como

mapa visual o de ambas formas. Los sitios remotos sólo se muestran como una

lista de archivos. (Para ver un sitio remoto, deberá conﬁgurarlo; consulte

“Conﬁgurar un sitio remoto” en la página 128.)

Para ver los archivos de un sitio local, lleve a cabo una de estas operaciones:

• Elija Ventana > Archivos del sitio.

• En la ventana Sitio, si se muestra el mapa del sitio, haga clic en el botón

Archivos del sitio.

La ventana Sitio muestra dos conjuntos de archivos: una parte de la ventana

enumera los archivos del sitio local, mientras que la otra enumera los archivos

asociados al sitio remoto.

Nota: Si está viendo un sitio local que carece de correspondencia con un sitio remoto,

la vista de Sitio remoto estará vacía.

Capítulo 4116

Para ver el mapa y los archivos del sitio, lleve a cabo una de estas operaciones:

• Elija Ventana > Mapa del sitio. (Si anteriormente sólo ha visto el mapa, sin los

archivos del sitio, se mostrará el mapa únicamente.)

• En la ventana Sitio, haga clic en el botón Mapa del sitio o mantenga presionado

el botón del ratón con el puntero sobre el botón Mapa del sitio y seleccione

Mapa y archivos en el menú emergente.

La ventana Sitio muestra dos vistas: el sitio local como un mapa, con la etiqueta

Navegación del sitio; y, en función de cómo deﬁna sus preferencias, los archivos

del sitio local (con la etiqueta Carpeta local) o los archivos del sitio remoto (con

la etiqueta Sitio remoto).

Para ver sólo el mapa del sitio:

Mantenga presionado el botón del ratón con el puntero sobre el botón Mapa del

sitio y seleccione Sólo mapa en el menú emergente. Para obtener más

información, consulte “Utilizar el mapa del sitio” en la página 120.

Administración del sitio y colaboración 117

Cambiar la disposición de la ventana Sitio

De forma predeterminada, el sitio remoto (o el mapa del sitio local) aparece en la

parte izquierda de la ventana Sitio y el sitio local, en la derecha. Puede alternar

estas visualizaciones.

Para cambiar la disposición de la ventana Sitio:

1 Elija Edición > Preferencias y seleccione la categoría Sitio.

2 Lleve a cabo una de estas operaciones:

• Seleccione Archivos locales en el menú Mostrar siempre y especiﬁque si los archivos

locales deben mostrarse en la parte derecha de la ventana Sitio o en la izquierda.

El sitio local aparecerá en el lado seleccionado y el sitio remoto (o el mapa del sitio),

en el lado opuesto. Al elegir esta opción, los archivos del sitio local se muestran

siempre en la ventana Sitio, incluso cuando la ventana se reduce a un panel.

• Seleccione Archivos remotos en el menú Mostrar siempre y especiﬁque si los

archivos remotos deben mostrarse en el lado derecho o en el izquierdo.

El sitio local aparecerá en el lado seleccionado y el sitio remoto (o el mapa del

sitio, que es siempre local), en el lado opuesto. Al elegir esta opción, los

archivos del sitio remoto se muestran siempre en la ventana Sitio, incluso

cuando la ventana se reduce a un panel.

3 Haga clic en Aceptar para cerrar el cuadro de diálogo Preferencias.

Para cambiar el área de visualización:

En la ventana Sitio, lleve a cabo una de estas operaciones:

• Arrastre la barra que separa las dos vistas para aumentar o reducir el área de

visualización del lado derecho o izquierdo de la ventana.

• Utilice las barras de desplazamiento situadas en la parte inferior de la ventana

Sitio para desplazarse por el contenido de las vistas.

• En el mapa del sitio, arrastre la ﬂecha situada encima de un archivo para

cambiar el espacio entre archivos.

Para contraer la ventana Sitio a una sola vista:

Haga clic en el pequeño botón de triángulo blanco situado en la parte inferior

izquierda de la ventana Sitio.

Nota: La vista que permanece visible es la que ha elegido para mostrar siempre en el

cuadro de diálogo Preferencias del sitio.

Para obtener más información sobre las preferencias del sitio, consulte

“Preferencias de Sitio” en la página 113.

Capítulo 4118

Trabajar con archivos en Ver archivos del sitio

Use Ver archivos del sitio para ver los sitios local y remoto como listas de archivos,

para abrir archivos, para renombrar los archivos, para añadir nuevas carpetas o

archivos a un sitio o para actualizar la vista de un sitio después de realizar cambios.

También puede utilizar Ver archivos del sitio para determinar qué archivos (de

ambos sitios) se han actualizado desde la última vez que se transﬁrieron. Para

obtener información sobre la sincronización del sitio local con el remoto, consulte

“Sincronizar los archivos de los sitios local y remoto” en la página 150.

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 botón Archivos del sitio.

Para abrir un archivo en Ver archivos del sitio:

Haga doble clic en el icono del archivo.

Para añadir una nueva carpeta a un sitio:

1 Compruebe que el archivo o la carpeta está seleccionado en la ventana Sitio. La

carpeta se creará dentro de la carpeta seleccionada o en la carpeta donde se

encuentra el archivo seleccionado actualmente.

2 Elija Archivo > Nueva carpeta en la ventana Sitio (Windows) o Sitio > Ver

archivos del sitio > Nueva carpeta (Macintosh).

También puede obtener acceso a esta opción desde el menú contextual dentro

de la ventana Sitio.

3 Introduzca un nombre para la nueva carpeta.

Para añadir un nuevo archivo a un sitio:

1 Compruebe que el archivo o la carpeta están seleccionados en la ventana Sitio.

El archivo se creará dentro de la carpeta seleccionada o en la carpeta donde se

encuentra el archivo seleccionado actualmente.

2 Elija Archivo > Nuevo archivo en la ventana Sitio (Windows) o Sitio > Ver

archivos del sitio > Nuevo archivo (Macintosh).

También puede obtener acceso a esta opción desde el menú contextual dentro

de la ventana Sitio.

3 Introduzca un nombre para el nuevo archivo.

Administración del sitio y colaboración 119

Para renombrar un archivo o una carpeta de un sitio:

1 En la ventana Sitio, seleccione el archivo o carpeta cuyo nombre desea cambiar

y lleve a cabo una de estas operaciones para activar el campo de nombre situado

junto al archivo o carpeta:

• Elija Archivo > Cambiar nombre (Windows) o Sitio > Cambiar nombre

(Macintosh)

• Haga clic en el archivo, haga una pausa, y luego haga clic en él de nuevo.

2 Escriba el nuevo nombre y presione Entrar.

Para actualizar la ventana Ver archivos del sitio después de realizar cambios fuera

de Dreamweaver:

Lleve a cabo una de estas operaciones:

• Elija Ver > Actualizar local en la ventana Sitio (Windows) o Sitio > Ver archivos

del sitio > Actualizar local (Macintosh).

• Elija Ver > Actualizar remoto en la ventana Sitio (Windows) o Sitio > Ver

archivos del sitio > Actualizar remoto (Macintosh).

• Haga clic en el botón Actualizar de la ventana Sitio para actualizar los dos

paneles.

Para localizar y seleccionar los archivos protegidos:

Elija Edición > Seleccionar archivos protegidos en la ventana Sitio (Windows) o

Sitio > Ver archivos del sitio > Seleccionar archivos protegidos (Macintosh).

Para localizar y seleccionar los archivos locales más recientes:

Elija Edición > Seleccionar local más reciente en la ventana Sitio (Windows) o

Sitio > Ver archivos del sitio > Seleccionar local más reciente (Macintosh).

Para localizar y seleccionar los archivos remotos más recientes:

Elija Edición > Seleccionar remoto más reciente en la ventana Sitio (Windows) o

Sitio > Ver archivos del sitio > Seleccionar remoto más reciente (Macintosh).

Para obtener más información acerca de la manipulación de sitios locales y

remotos, consulte “Utilizar Desproteger/proteger” en la página 135.

Capítulo 4120

El mapa del sitio

Use el mapa del sitio para ver un sitio local en forma de mapa visual de iconos

vinculados, para añadir nuevos archivos a un sitio o para añadir, modiﬁcar o quitar

vínculos. El mapa del sitio resulta idóneo para establecer la estructura de un sitio.

Puede conﬁgurar rápidamente la estructura completa del sitio y, seguidamente,

obtener una imagen gráﬁca del mapa.

Nota: El mapa del sitio sólo es aplicable a los sitios locales. Si desea crear un mapa de un

sitio remoto, copie el contenido del sitio remoto en un carpeta de su disco local y utilice el

comando Definir sitios para definir el sitio como un sitio local.

Utilizar el mapa del sitio

Debe deﬁnir una página principal para el sitio para poder ver el mapa del sitio. La

página principal del sitio es el punto de partida del mapa.

Para definir una página principal del sitio:

1 Elija Sitio> Deﬁnir sitios.

2 Elija Nuevo o Editar para deﬁnir un sitio nuevo o abrir un sitio existente.

Aparecerá el cuadro de diálogo Deﬁnición de sitio.

3 Seleccione Disposición mapa del sitio

4 Haga clic en el icono de carpeta para buscar una página principal para el sitio o

escriba una ruta de archivo en el campo Página principal.

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 botón Mapa del sitio.

Nota: Si no se ha definido ninguna página principal, o si Dreamweaver no encuentra

ninguna página index.html o index.htm en el sitio actual para utilizarla como página

principal, aparecerá un cuadro de diálogo en el que se le pedirá que seleccione una página

principal haciendo clic en Definir sitios. Elija el sitio que desee y luego haga clic en Editar.

Después seleccione Disposición mapa del sitio en el cuadro de diálogo Definición de sitio.

Administración del sitio y colaboración 121

El mapa del sitio muestra los archivos HTML y el resto del contenido de la página

como iconos. Los vínculos se muestran en el mismo orden en el que se encuentran

en el código HTML.

• El texto que se muestra en rojo indica que se trata de un vínculo roto.

• El texto en azul y marcado con un icono de globo terráqueo indica que se trata

de un archivo de otro sitio o un vínculo especial (como un vínculo de correo

electrónico o de secuencia de comandos).

• Una marca de veriﬁcación verde indica que se trata de un archivo protegido por

usted.

• Una marca de veriﬁcación roja indica que se trata de un archivo protegido por

otro usuario.

• Un icono de candado indica que se trata de un archivo de sólo lectura

(Windows) o bloqueado (Macintosh).

De forma predeterminada, el mapa del sitio muestra dos niveles de la estructura

del sitio comenzando por la página principal actual. Haga clic en los signos más

(+) y menos (-) situados junto a una página para mostrar u ocultar las páginas

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 página ajeno al código

HTML, como imágenes, plantillas y archivos Shockwave y Flash. Consulte

“Modiﬁcar la disposición del mapa del sitio” en la página 122 y “Mostrar y ocultar

archivos de mapa de un sitio” en la página 125.

Capítulo 4122

Modificar la disposición del mapa del sitio

Use las opciones de Disposición mapa del sitio para personalizar la apariencia del

mapa del sitio. Puede especiﬁcar la página principal, el número de columnas

mostradas, si las etiquetas de los iconos deben mostrar el nombre del archivo o el

título de página y si deben mostrarse los archivos ocultos y dependientes.

Para modificar la disposición del mapa del sitio:

1 Abra el cuadro de diálogo Deﬁnición de sitio mediante uno de estos métodos:

• Elija Sitio > Deﬁnir sitios y haga clic en Editar. Seleccione Disposición mapa

del sitio en la lista Categoría situada a la izquierda.

• Elija Ver > Diseño (Windows) o Sitio > Ver mapa del sitio > Diseño

(Macintosh).

2 Haga clic en el icono de carpeta para buscar una página principal para el sitio o

escriba una ruta de archivo en el campo Página principal. La página principal

debe estar en el sitio local.

Si no especiﬁca ninguna página principal y Dreamweaver no logra localizar

ningún archivo denominado index.html o index.htm en la raíz, le pedirá que

seleccione una página principal al abrir el mapa del sitio.

3 Elija entre las opciones de Columna:

• En el campo Número de columnas, escriba el número de páginas que deben

mostrarse por cada ﬁla en la ventana del mapa.

• En el campo Ancho columna, escriba un número para especiﬁcar el ancho en

píxeles de las columnas del mapa del sitio.

4 En la sección Etiquetas de icono, seleccione si el nombre que se muestra bajo

los iconos de documento en el mapa del sitio se representarán como nombres

de archivo o como títulos de página.

5 En la sección Opciones, seleccione qué archivos desea mostrar en el mapa del

sitio:

• Elija Mostrar archivos marcados como ocultos para mostrar los archivos

HTML marcados como ocultos por el usuario en el mapa del sitio. Si hay una

página oculta, su nombre y los vínculos que contenga se mostrarán en cursiva.

Para obtener información sobre cómo ocultar archivos, consulte “Mostrar y

ocultar archivos de mapa de un sitio” en la página 125.

• Elija Mostrar archivos dependientes para mostrar todos los archivos

dependientes en la jerarquía del sitio. Un archivo dependiente es una imagen u

otro contenido ajeno al código HTML que carga el navegador al cargar la

página principal.

Administración del sitio y colaboración 123

Trabajar con páginas en el mapa del sitio

Al trabajar en el mapa del sitio, podrá seleccionar páginas, abrir una página para

editarla, añadir nuevas páginas al sitio, crear vínculos entre archivos y cambiar el

título de una página.

Para seleccionar múltiples páginas en el mapa del sitio, lleve a cabo una de estas

operaciones:

• Haga clic mientras presiona la tecla Mayús para seleccionar múltiples páginas.

• Comenzando desde un lugar vacío de la vista, arrastre el puntero alrededor de

un grupo de archivos para seleccionarlos.

• Haga clic mientras presiona la tecla Control (Windows) o Comando

(Macintosh) para seleccionar páginas que no son contiguas.

Para abrir una página que desea editar, lleve a cabo una de estas operaciones:

• Haga doble clic en el archivo.

• Seleccione el archivo y elija Archivo > Abrir selección (Windows) o Sitio >

Abrir (Macintosh).

Para añadir 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 colóquelo sobre un archivo del mapa del sitio. La página se añadirá al sitio y

se creará un vínculo entre ella y el archivo sobre el que la ha colocado.

• Seleccione Sitio > Vincular a archivo existente (Windows) o Sitio > Ver mapa

del sitio > Vincular a archivo existente (Macintosh).

Para crear un nuevo archivo y añadir un vínculo:

1 Seleccione un archivo HTML en el mapa del sitio y lleve a cabo una de estas

operaciones:

• Elija Sitio > Vincular a nuevo archivo (Windows) o Sitio > Ver mapa del sitio >

Vincular a nuevo archivo (Macintosh).

• Elija Vincular a nuevo archivo en el menú contextual.

2 En el campo Archivo del cuadro de diálogo Vincular a nuevo archivo, escriba

un nombre de archivo.

3 En el campo Título, escriba un título de página para el archivo.

4 En el campo Texto vínculo, escriba el texto del vínculo que conecta el archivo

seleccionado con el nuevo archivo. El vínculo aparecerá en el archivo

seleccionado.

Capítulo 4124

Haga clic en Aceptar.

El archivo se guardará en la misma carpeta que el archivo seleccionado. Si se

añade un archivo a una rama oculta, el nuevo archivo también se encontrará

oculto. Consulte “Mostrar y ocultar archivos de mapa de un sitio” en la

página 125.

Para modificar el título de una página:

1 Asegúrese de que está activada la opción Mostrar títulos de páginas.

Elija Ver > Mostrar títulos de páginas (Windows) o Sitio > Ver mapa del sitio >

Mostrar títulos de páginas (Macintosh).

2 Lleve a cabo una de estas operaciones:

• Seleccione una página y haga clic en su título. Cuando el título se convierta en

un campo editable, escriba el nuevo título del documento.

• Seleccione una página y elija Archivo > Cambiar nombre (Windows) o Sitio >

Cambiar nombre (Macintosh).

Nota: Al trabajar en la ventana Sitio, Dreamweaver actualiza automáticamente todos los

vínculos con archivos cuyos nombres han cambiado.

Para cambiar la página principal, lleve a cabo una de estas operaciones:

• En la vista Carpeta local de la ventana Sitio, haga clic en el archivo que desea

convertir en la página principal y elija Establecer como página principal en el

menú contextual.

• Seleccione un archivo en el mapa del sitio y elija Sitio > Nueva página principal

(Windows) o Sitio > Ver mapa del sitio > Nueva página principal (Macintosh)

para crear una nueva página principal.

• En la vista Carpeta local de la ventana Sitio, haga clic en el archivo que desea

convertir en la página principal y elija Sitio > Establecer como página principal

(Windows) o Sitio > Ver mapa del sitio > Establecer como página principal

(Macintosh) para convertir una página existente en página principal.

• Elija Sitio > Deﬁnir sitios y haga clic en Editar. Seleccione Disposición mapa

del sitio en el cuadro de diálogo Deﬁnición de sitio.

Para actualizar la visualización del mapa del sitio después de realizar cambios:

1 Haga clic en cualquier lugar del mapa del sitio para anular la selección de

archivos.

2 Elija Ver > Actualizar local (Windows) o Sitio > Ver mapa del sitio > Actualizar

local (Macintosh).

Administración del sitio y colaboración 125

Mostrar y ocultar archivos de mapa de un sitio

Puede modiﬁcar el diseño 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.

Para ocultar un archivo utilizando el mapa del sitio, primero deberá marcarlo

como oculto. Cuando oculta un archivo, también se ocultan sus vínculos. Al

mostrar un archivo marcado como oculto, el icono y sus vínculos se encontrarán

visibles en el mapa del sitio, aunque los nombres aparecerán en cursiva.

Para marcar archivos como ocultos:

1 En el mapa del sitio, seleccione uno o más archivos.

2 Elija Ver > Mostrar/ocultar vínculo (Windows) o Sitio > Ver mapa del sitio >

Mostrar/ocultar vínculo (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 > Disposición (Windows) o Sitio > Ver mapa del sitio >

Disposición (Macintosh) para abrir el cuadro de diálogo Deﬁnición de sitio y

active la opción Mostrar archivos marcados como ocultos.

De forma predeterminada, los archivos dependientes están ocultos. Puede

especiﬁcar si se muestran o no en el mapa del sitio.

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 > Disposición (Windows) o Sitio > Ver mapa del sitio >

Disposición (Macintosh) para abrir el cuadro de diálogo Deﬁnición de sitio y

active la opción Mostrar archivos dependientes.

Para marcar archivos como ocultos:

1 En el mapa del sitio, seleccione uno o más archivos.

2 Elija Ver > Mostrar archivos marcados como ocultos (Windows) o Sitio > Ver

mapa del sitio > Mostrar archivos marcados como ocultos (Macintosh).

3 Elija Ver > Mostrar/ocultar vínculo (Windows) o Sitio > Ver mapa del sitio >

Mostrar/ocultar vínculo (Macintosh).

Capítulo 4126

Ver el sitio desde una rama

Puede ver los detalles de una sección especíﬁca de un sitio convirtiendo una rama

en el centro del mapa del sitio.

Para ver una rama distinta:

Seleccione la página que desea ver y elija Ver > Ver como raíz (Windows) o Sitio >

Ver mapa del sitio > Ver como raíz (Macintosh).

El mapa del sitio se vuelve a trazar en la ventana como si la página especiﬁcada

fuera la raíz del sitio. El campo Navegación del sitio, situado encima del mapa del

sitio, muestra la ruta desde la página principal hasta la página especiﬁcada.

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 el signo más (+) y en el signo menos (–) para ampliar o contraer la

rama.

Guardar el mapa del sitio

Puede guardar el mapa del sitio con formato de imagen para verlo (o imprimirlo)

desde un editor de imágenes.

Para crear un archivo de imagen del mapa del sitio actual:

1 En el mapa del sitio, lleve a cabo una de estas operaciones:

• En Windows, elija Archivo > Guardar mapa del sitio. En el cuadro de diálogo

Guardar mapa del sitio, introduzca un nombre en el campo Archivo. En el

menú emergente Tipo de archivo, seleccione .bmp o .png.

• Si utiliza Macintosh, seleccione Sitio > Ver mapa del sitio > Guardar mapa del

sitio > Guardar mapa del sitio como PICT o Sitio > Ver mapa del sitio >

Guardar mapa del sitio > Guardar mapa del sitio como JPEG.

2 Introduzca una ubicación y un nombre para la imagen y haga clic en Guardar.

Administración del sitio y colaboración 127

Buscar archivos en la ventana Sitio

Puede buscar un archivo en los sitios local y remoto desde la ventana de

documento o la ventana Sitio. Para obtener más información sobre cómo buscar y

reemplazar archivos, consulte “Buscar y reemplazar texto, etiquetas y atributos” en

la página 270.

Para mostrar la ventana Sitio, elija Ventana > Archivos del sitio.

Para buscar un archivo en el sitio local:

1 Seleccione el archivo en la vista de Sitio remoto de la ventana Sitio o ábralo en

una ventana de documento.

2 Elija Sitio > Localizar en sitio local. (Sólo en Windows: si la ventana Sitio está

activa, elija Editar > Localizar en sitio local.)

El archivo se resalta en el Carpeta local de la ventana Sitio.

Para buscar un archivo en el sitio remoto:

1 Seleccione el archivo en la Carpeta local de la ventana Sitio o ábralo en una

ventana de documento.

2 Elija Sitio > Localizar en sitio remoto. (Sólo en Windows: si la ventana Sitio

está activa, elija Edición > Localizar en sitio remoto.) También puede

seleccionar el archivo en la Carpeta local y hacer clic con el botón derecho del

ratón (Windows) presionar control mientras hace clic (Macintosh) y elegir

Localizar en sitio remoto del menú contextual.

El archivo se resalta en la vista de Sitio remoto de la ventana Sitio.

Nota: Si selecciona Sitio > Localizar en sitio local o Sitio > Localizar en sitio remoto mientras

la ventana de documento está activa y el archivo actual no forma parte del sitio abierto

actualmente, Dreamweaver intentará determinar a cuál de los sitios definidos localmente

pertenece el archivo actual. Si pertenece a un solo sitio local, Dreamweaver abrirá ese sitio

y localizará el archivo dentro.

Capítulo 4128

Configurar un sitio remoto

Antes de conﬁgurar un sitio remoto, cree un sitio local (que posteriormente

asociará con el sitio remoto). Consulte “Utilizar Dreamweaver para conﬁgurar un

nuevo sitio” en la página 104.

El paso siguiente a la hora de conﬁgurar un sitio remoto consiste en determinar

dónde se va a situar el sitio, es decir, qué servidor lo albergará. Su cliente, su

empresa o su proveedor de servicios Internet (ISP) disponen probablemente de un

servidor conﬁgurado para albergar páginas Web (Internet o intranet). Pregunte al

administrador del sistema o a su cliente el nombre de dicho servidor y cómo se

realizan las transferencias de archivos.

En particular, averigüe si se utiliza FTP para conectar con el servidor o si puede

montar el servidor como una unidad de disco con acceso de red desde su

escritorio. Si conecta utilizando FTP, averigüe el nombre del servidor FTP y

determine el directorio del servidor, así como la información de conexión y de

contraseña.

Cuando reúna esta información, utilice el comando Deﬁnir sitios para asociar el

servidor al sitio local. Si surgen problemas a la hora de conﬁgurar el sitio remoto,

consulte “Solución de problemas de conﬁguración de sitios remotos” en la

página 134.

Una vez conﬁgurado el sitio remoto, puede cargar o descargar archivos si dispone

de ellos en el sitio. Consulte “Utilizar Desproteger/proteger” en la página 135 y

“Obtener y colocar archivos” en la página 147.

Asociar un servidor remoto a un sitio local

Después de crear un sitio local, use el comando Deﬁnir sitios para añadir o

cambiar la información del servidor remoto asociado y las preferencias de

desprotección/protección.

Para asociar un servidor remoto a un sitio local existente:

1 Elija Deﬁnir sitios en el menú emergente de sitios actuales de la ventana Sitio, o

bien elija Sitio > Deﬁnir sitios.

Administración del sitio y colaboración 129

Aparecerá un cuadro de diálogo con los sitios deﬁnidos actualmente. Seleccione

un sitio existente y haga clic en Editar.

Si no dispone de sitios deﬁnidos actualmente, cree un sitio local antes de

continuar; consulte “Utilizar Dreamweaver para conﬁgurar un nuevo sitio” en

la página 104.

3 En la lista Categoría de la izquierda, haga clic en Datos remotos.

4 Elija una de las siguientes opciones de Acceso al servidor:

• Utilice Ninguno si no tiene previsto cargar el sitio en un servidor. A

continuación, haga clic en Aceptar y omita el resto de este procedimiento.

• Utilice Local/red si el servidor Web está montado como unidad de red

(Windows) o como servidor AppleTalk o NFS (Macintosh), o si lo está

ejecutando en el equipo local. Haga clic en el icono de carpeta para localizar y

seleccionar la carpeta del servidor donde se almacenan los archivos. Si desea que

el panel Remoto de la ventana Sitio se actualice automáticamente a medida que

se añadan y borren archivos, seleccione la opción Actualizar lista archivos

remotos autom. Para aumentar la velocidad de transferencia de archivos al sitio

remoto, deje esta opción desactivada. Para actualizar manualmente la ventana

Sitio en cualquier momento, haga clic en el botón Actualizar de dicha ventana.

Haga clic en Aceptar y omita el resto de este procedimiento.

Nota: Para actualizar manualmente sólo el panel Remoto, elija Ver > Actualizar remoto

en la ventana Sitio (Windows) o Sitio > Ver archivos del sitio > Actualizar remoto

(Macintosh).

• Utilice FTP si conecta con el servidor Web a través de FTP.

Para conectar con un servidor Web mediante FTP:

1 Introduzca el nombre del servidor FTP en el que cargará los archivos del sitio

Web.

El nombre del servidor FTP es el nombre completo en Internet de un sistema

informático, como ftp.mindspring.com. Introduzca el nombre completo del

servidor sin texto adicional. Sobre todo, no añada un nombre de protocolo

delante del nombre del servidor. Por ejemplo:

• Correcto: ftp.mindspring.com

• Incorrecto: ftp://ftp.mindspring.com

• Incorrecto: mindspring.com

2 Introduzca el nombre del directorio del servidor del sitio remoto donde se

almacenan los documentos visibles para el público. Consulte “Determinar el

directorio del servidor del sitio remoto (sólo FTP)” en la página 130.

Capítulo 4130

Introduzca el nombre de conexión y la contraseña que utiliza para conectar con

el servidor FTP.

Dreamweaver guarda la contraseña de forma predeterminada. Desactive

Guardar si preﬁere que el sistema le solicite la contraseña cada vez que conecte

con el servidor remoto.

4 Seleccione las opciones deseadas de cortafuegos para el sitio:

• Active la opción Usar cortafuegos si conecta con el servidor remoto desde el

otro lado de un cortafuegos. Para obtener más información sobre las opciones

de cortafuegos, consulte “Asociar un servidor remoto a un sitio local” en la

página 128.

• Si su conﬁguración de cortafuegos requiere el uso de FTP pasivo (que permite

que el software local conﬁgure la conexión FTP en lugar de solicitárselo al

servidor remoto), seleccione Utilizar FTP pasivo. Si no está seguro, consulte al

administrador del sistema.

5 Haga clic en Aceptar.

Determinar el directorio del servidor del sitio remoto (sólo

FTP)

El directorio de servidor que especiﬁque en el cuadro de diálogo Deﬁnición de

sitio deberá ser la carpeta raíz del sitio local. Si la estructura del sitio remoto no

coincide con la del sitio local, los archivos se cargarán en el lugar incorrecto y los

visitantes del sitio no podrán verlos. Además, se romperán las rutas de imágenes y

vínculos.

El directorio raíz remoto deberá haberse creado antes de que Dreamweaver intente

conectar con él. Si no dispone de directorio raíz en el servidor remoto para el sitio,

créelo antes de intentar conectar. Si no puede hacerlo usted mismo, solicite al

administrador del servidor que lo haga.

Debería ser Directorio

del servidor

No debería ser

Directorio del servidor

En este caso no debería ser

Directorio del Servidor

sí

Administración del sitio y colaboración 131

Si no está seguro de lo que debe introducir en el campo Directorio del servidor,

déjelo en blanco. En algunos servidores, el directorio raíz es el directorio con el

que se conecta en primer lugar a través de FTP. Para averiguar si es así, conecte con

el servidor. Si aparece en la vista de Archivo remoto de la ventana Sitio una carpeta

con un nombre del tipo public_html o www o el nombre de conexión que usted

utiliza, probablemente ése sea el directorio que debe usar en el campo Directorio

del servidor. Anote el nombre del directorio, desconecte y vuelva a abrir el cuadro

de diálogo Deﬁnición de sitio. Introduzca el nombre del directorio en el campo

Directorio del servidor y vuelva a conectar.

Integración con WebDAV y SourceSafe

Dreamweaver le permite obtener acceso a aplicaciones de control de fuente y

versiones desde la ventana Sitio. Puede conectar con bases de datos y servidores

SourceSafe o con sistemas de control de fuente que admitan el protocolo

WebDAV.

A través del cuadro de diálogo Deﬁnición de sitio, puede seleccionar un tipo de

conexión o sistema de control de fuente. Una vez conectado, podrá utilizar las

funciones de compartición de archivos de Dreamweaver, como Desproteger/

Proteger, Actualizar, Obtener y Colocar y Design Notes para obtener acceso a las

correspondientes opciones de su propio sistema de control de fuente.

Nota: Para utilizar esta función, deberá tener Visual SourceSafe instalado en el sistema o

disponer de acceso a un sistema compatible con WebDAV.

Utilizar Dreamweaver con el protocolo WebDAV

Puede utilizar Dreamweaver para conectar utilizando el protocolo WebDAV

(Web-based Distributed Authoring and Versioning: creación y control de

versiones distribuido basado en la Web) si dispone de un sistema compatible con

dicho protocolo. Dos ejemplos de servidores WebDAV actualmente disponibles

son Microsoft Internet Information Server (IIS) 5.0 y Apache Web Server.

Para conectar con un sitio utilizando el protocolo WebDAV:

1 Elija Sitio> Deﬁnir sitio.

2 En el cuadro de diálogo Deﬁnir sitios, seleccione Editar.

3 En el cuadro de diálogo Deﬁnición de sitio, seleccione la categoría Datos

remotos.

4 En el menú emergente Acceso, elija WebDAV.

5 Si lo desea, seleccione Proteger archivos al abrir para proteger los archivos

automáticamente al abrirlos.

Capítulo 4132

Haga clic en Información.

Aparecerá el cuadro de diálogo de conexión WebDAV.

7 En el campo URL, introduzca el URL completo de acceso al directorio en el

servidor WebDAV con el que desea conectar.

Este URL incluye el protocolo, puerto y directorio (si no es el directorio raíz):

por ejemplo, http://apache1/WebDAV/mysite.

8 Introduzca su nombre de usuario y su contraseña en los campos

correspondientes.

Esta información se utiliza para la autenticación en el servidor y no está

relacionada con Dreamweaver. Si no está seguro de su nombre de usuario y su

contraseña, consulte al administrador del sistema o webmaster.

9 En el campo de correo electrónico, introduzca su dirección de correo

electrónico.

Ésta es obligatoria y se utiliza para identiﬁcar la propiedad en el servidor

WebDAV, al tiempo que aparece en la ventana Sitio para ﬁnes de contacto.

10 Haga clic en Guardar contraseña para almacenar la contraseña de salida de

Dreamweaver.

Cada vez que inicie una nueva sesión, la contraseña continuará estando

guardada.

11 Haga clic en Aceptar.

12 Elija Sitio > Conectar o haga clic en el botón Conectar de la barra de

herramientas de la ventana Sitio para conectar con el sitio remoto. Para

desconectar, elija Sitio > Desconectar o haga clic en el botón Desconectar.

Una vez que haya conectado, podrá utilizar las funciones de compartición de

archivos de Dreamweaver (Obtener y Colocar archivos, Design Notes, etc.)

Puede cambiar la información de conexión en cualquier momento siguiendo los

pasos enumerados anteriormente e introduciendo la nueva información en el

cuadro de diálogo de conexión WebDAV.

Administración del sitio y colaboración 133

Utilizar Dreamweaver con Visual SourceSafe

Puede obtener acceso a una base de datos de Visual SourceSafe (VSS) existente

empleando la ventana Sitio de Dreamweaver. Una vez conectado, podrá utilizar las

funciones de transferencia de archivos de Dreamweaver.

Nota: Para utilizar esta función con Windows, debe tener instalado Microsoft Visual

SourceSafe Client versión 6. Para utilizar esta función en Macintosh, debe tener instalado

MetroWerks SourceSafe versión 1.1.0 Client. Los usuarios de MetroWerks Visual

SourceSafe pueden obtener acceso a las bases de datos de Microsoft SourceSafe

versión 5.0, pero no a las bases de datos de la versión 6.0. Si desea asegurarse de que

todo su equipo logra el acceso a cualquier base de datos VSS desde cualquier plataforma,

utilice una base de datos de la versión 5.0. Para obtener más información, consulte la

documentación de SourceSafe.

Para conectar con una base de datos SourceSafe:

1 En el cuadro de diálogo Deﬁnición de sitio, seleccione la categoría Datos

remotos.

2 En el menú emergente Acceso, elija SourceSafe.

3 Si lo desea, seleccione Proteger archivos al abrir para proteger los archivos

automáticamente al abrirlos.

4 Haga clic en Información.

Aparecerá el cuadro de diálogo Abrir base de datos SourceSafe.

5 En el campo Ruta de base de datos, haga clic en Examinar para la base de datos

VSS que desee, o bien introduzca la ruta completa de acceso al archivo.

El archivo que elija se convertirá en el archivo srcsafe.ini y se utilizará para

inicializar SourceSafe.

6 En el campo Proyecto, introduzca el proyecto dentro de la base de datos VSS

que desea utilizar como directorio raíz del sitio remoto.

7 En los campos Nombre de usuario y Contraseña, introduzca su nombre de

usuario y su contraseña de conexión a la base de datos seleccionada.

Si no conoce su nombre de usuario y su contraseña, consulte al administrador

del sistema.

Capítulo 4134

Haga clic en Aceptar para regresar a la ventana Sitio.

9 Elija Sitio > Conectar o haga clic en el botón Conectar de la barra de

herramientas de la ventana Sitio para conectar con el sitio remoto. Para

desconectar, elija Sitio > Desconectar o haga clic en el botón Desconectar.

Solución de problemas de configuración de

sitios remotos

Un servidor Web se puede conﬁgurar de varias formas. En esta sección se ofrece

información sobre algunos problemas comunes que pueden surgir a la hora de

conﬁgurar un sitio remoto, así como sobre la forma de solucionarlos.

• Es posible que la implementación FTP de Dreamweaver no funcione

correctamente con algunos servidores proxy, cortafuegos multinivel y otras

formas de acceso indirecto al servidor. Si surgen problemas con el acceso FTP,

solicite ayuda al administrador del sistema local.

• La implementación FTP de Dreamweaver es distinta a algunas aplicaciones

FTP comunes. En concreto, debe conectar con la carpeta raíz del sitio remoto y

no puede navegar por el sistema de archivos remoto. (En muchas aplicaciones,

puede conectar con cualquier directorio remoto y luego navegar por el sistema

de archivos remoto para localizar el directorio deseado.)

• Si tiene algún problema para conectar y ha especiﬁcado el directorio del

servidor utilizando una sola barra inclinada (/), es posible que tenga que

especiﬁcar una ruta relativa desde el directorio con el que está conectando y la

carpeta raíz remota. Por ejemplo, si la carpeta raíz remota es un nivel de

directorio superior, puede que tenga que especiﬁcar ../../ para el directorio

servidor.

• Con algunas conexiones lentas, el intervalo de espera FTP de 60 segundos

genera un número excesivo de temporizaciones. Incremente este valor (en las

preferencias del sitio) si experimenta temporizaciones frecuentes. Sin embargo,

no lo aumente excesivamente o, de lo contrario, tendrá que esperar mucho

tiempo cuando realmente no se pueda establecer una conexión. En general, los

intervalos de espera de 30 a 120 segundos son los más útiles.

• Los nombres de archivo y carpeta que contienen espacios y caracteres especiales

suelen ocasionar problemas en las transferencias a sitios remotos. Utilice

caracteres de subrayado en lugar de espacios y evite los caracteres especiales en

los nombres de archivo y carpeta siempre que esto sea posible. En concreto,

pueden causar problemas en los nombres de archivo o de carpeta signos como

los dos puntos, el guión, el punto y el apóstrofe. Los caracteres especiales en los

nombres de archivo o carpeta también pueden impedir que Dreamweaver cree

un mapa del sitio.

Administración del sitio y colaboración 135

• En Macintosh, los nombres de archivo no pueden superar los 31 caracteres. Si

experimenta algún problema con los nombres de archivo largos, cambie sus

nombres por otros más cortos.

• Muchos servidores utilizan vínculos simbólicos (UNIX), accesos abreviados

(Windows) o alias (Macintosh) para conectar una carpeta de una parte del

disco del servidor con otra carpeta situada en otro emplazamiento. Por ejemplo,

el subdirectorio public_html del directorio principal del servidor puede ser en

realidad un vínculo con cualquier parte del servidor. En la mayoría de los casos,

esos alias no tienen ninguna repercusión sobre la capacidad de conectar con la

carpeta o el directorio correspondientes, pero si puede conectar con una parte

del servidor y no con otra, es posible que haya una discrepancia de alias.

• En general, cuando surja un problema con una transferencia FTP, examine el

registro FTP. Para ello, elija Ventana > Registro FTP de sitio en la ventana Sitio

(Windows) o Sitio > Registro FTP (Macintosh). Si aparece un mensaje de error

del tipo “no se puede colocar archivo”, es posible que el sitio remoto se haya

quedado sin espacio. Examine el registro FTP para obtener información más

detallada.

Utilizar Desproteger/proteger

Si trabaja en colaboración con otros usuarios, puede desproteger y proteger los

archivos de servidores locales y remotos y utilizar Design Notes para añadir

comentarios y notas para el equipo. Proteger un archivo equivale a decir: “Estoy

trabajando con este archivo. ¡No lo toquen!” Cuando un archivo está protegido,

Dreamweaver muestra una marca de veriﬁcación al lado de su icono en la ventana

Sitio. Una marca de veriﬁcación 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 también aparece en el ventana Sitio.

Al desproteger un archivo, éste queda a disposición de otros miembros del equipo,

que podrán protegerlo y editarlo. La versión local se convierte en versión de sólo

lectura para impedir que usted efectúe cambios en el archivo mientras otro usuario

lo tiene protegido.

Dreamweaver no convierte los archivos protegidos en archivos de sólo lectura en el

servidor remoto. Si transﬁere archivos con una aplicación 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 jerarquía de archivos para ayudar a evitar errores de ese

tipo.

Puede activar la desprotección o la protección para algunos sitios y desactivarla

para otros. Para obtener información sobre la transferencia de archivos entre sitios

locales y remotos sin desprotegerlos ni protegerlos, consulte “Obtener archivos de

un servidor remoto” en la página 147 y “Colocar archivos en un servidor remoto”

en la página 148.

Capítulo 4136

Configurar el sistema de desprotección/protección

Antes de utilizar el sistema de desprotección/protección, deberá asociar el sitio

local a un servidor de red o FTP remoto (consulte “Asociar un servidor remoto a

un sitio local” en la página 128). Después deberá conﬁgurar las siguientes

opciones:

Para configurar las opciones de desprotección/protección:

1 Elija Sitio > Deﬁnir sitios, seleccione un sitio y haga clic en Editar.

2 En la lista Categoría de la izquierda, haga clic en Datos remotos.

3 Lleve a cabo una de estas operaciones:

• Active la opción Permitir desproteger y proteger archivo si trabaja en

colaboración (o si trabaja en solitario con varios sistemas).

Esta opción resulta útil para advertir a otros usuarios de que usted ha protegido

un archivo para editarlo. También puede servir para recordar que ha dejado una

versión más reciente de un archivo en otro equipo. Consulte “Utilizar

Desproteger/proteger” en la página 135.

• Active la opción Proteger archivos al abrir si desea proteger automáticamente

los archivos cuando haga doble clic en ellos para abrirlos desde la ventana Sitio.

(Si utiliza Archivo > Abrir para abrir un archivo, éste no quedará protegido

aunque esté activada esta opción.)

• Introduzca un nombre de protección.

El nombre de protección es el que 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 protección en cada equipo (por ejemplo, JoseR-MacCasa

y JoseR-PCOﬁcina) para saber dónde se encuentra la última versión del archivo

si olvida volver a desprotegerlo.

• Introduzca una dirección de correo electrónico.

Si introduce una dirección de correo electrónico y luego protege un archivo, su

nombre aparecerá en la ventana Sitio junto al archivo como vínculo en el que es

posible hacer clic (azul y subrayado). Si un miembro del equipo hace clic en el

vínculo, su programa de correo electrónico predeterminado aparecerá con un

nuevo mensaje. El campo Para: contendrá la dirección de correo electrónico,

mientras que el campo Asunto contendrá el nombre del archivo y del sitio

correspondientes.

Administración del sitio y colaboración 137

Desproteger y proteger archivos en un servidor remoto

Utilice la ventana Sitio o el menú Sitio de la ventana de documento para

desproteger y proteger archivos en un servidor remoto.

Si ha protegido un archivo pero decide no editarlo (o decide descartar los cambios

realizados), puede deshacer la protección para que el archivo esté a disposición de

los otros miembros del equipo.

Nota: Si selecciona Sitio > Desproteger o Sitio > Proteger mientras la ventana de

documento está activa y el archivo actual no forma parte del sitio abierto actualmente,

Dreamweaver intentará determinar a cuál de los sitios definidos localmente pertenece el

archivo actual. Si pertenece a un solo sitio local, Dreamweaver abrirá ese sitio y realizará la

operación de desprotección o de protección.

Para proteger archivos de un servidor remoto:

1 Elija el sitio deseado en el menú emergente de sitios actuales de la parte

superior de la ventana Sitio.

2 Proteja archivos utilizando uno de los métodos siguientes:

• Seleccione uno o más archivos y haga clic en el icono Proteger de la parte

superior de la ventana Sitio.

• Elija Proteger en el menú contextual o el menú Sitio.

3 Para descargar archivos dependientes junto con los archivos seleccionados, haga

clic en Sí. Para evitar que se descarguen los archivos dependientes, haga clic en

No.

Para desproteger archivos de un servidor remoto:

1 Elija el sitio deseado en el menú emergente de sitios actuales de la parte

superior de la ventana Sitio.

2 Seleccione uno o más archivos protegidos o nuevos en el panel Local y lleve a

cabo una de estas operaciones:

• Haga clic en el icono Desproteger de la parte superior de la ventana Sitio.

• Elija Desproteger en el menú contextual o el menú Sitio.

Los archivos que usted haya protegido aparecerán con una marca de

veriﬁcación verde. Si un archivo tiene una marca de veriﬁcación roja a su lado,

ello indica que se encuentra protegido actualmente por otro usuario. No

desproteja esos archivos.

Un símbolo de candado indica que el archivo es de sólo lectura (Windows) o

está bloqueado (Macintosh).

Los archivos nuevos no tienen marca de veriﬁcación ni símbolo de candado a su

lado.

Capítulo 4138

Para cargar archivos dependientes junto con el archivo seleccionado, haga clic

en Sí. Para evitar que se carguen los archivos dependientes, haga clic en No.

Suele resultar conveniente cargar archivos dependientes cuando se desprotege

un archivo nuevo, pero si las últimas versiones de los archivos dependientes ya

se encuentran en el servidor remoto, no es preciso volver a cargarlos.

Para deshacer una protección:

Seleccione el archivo deseado y elija Sitio> Deshacer proteger o haga clic con el

botón derecho del ratón en el archivo (Windows) o presione la tecla Control

mientras hace clic en el archivo (Macintosh) y elija Deshacer proteger en el menú

contextual. La copia local del archivo se convertirá en copia de sólo lectura y se

perderán los cambios realizados.

Para desproteger o proteger un archivo activo actualmente:

En la ventana de documento, elija Sitio > Desproteger o Sitio > Proteger o utilice

los iconos de la barra de herramientas.

Si protege el archivo activo, la nueva versión protegida sobrescribirá la versión del

archivo abierta actualmente. Si desprotege el archivo activo, es posible que éste se

guarde automáticamente antes de desprotegerse. Dependerá de las opciones que

haya conﬁgurado (consulte “Preferencias de Sitio” en la página 113).

Design Notes

Utilice el comando Design Notes para mantener información adicional asociada a

los documentos, como los nombres de los archivos de imagen y comentarios sobre

el estado del archivo.

Por ejemplo, si copia un documento de un sitio a otro, puede añadir Design Notes

sobre ese documento, con el comentario de que el documento original se

encuentra en la carpeta del otro sitio. Posteriormente, si actualiza ese documento

(o si lo hace otro usuario), sabrá que también tiene que actualizar la página

original.

También puede emplear Design Notes para realizar un seguimiento de la

información sensible que no puede introducir en un documento por motivos de

seguridad. Por ejemplo, puede incluir información sobre cómo se creó el

documento, cómo se calculó un determinado precio o se estableció una

conﬁguración o qué factores de marketing han intervenido en una decisión de

diseño. Puede averiguar qué archivos tienen Design Notes adjuntas en la ventana

Sitio: aparece un icono de Design Notes en la columna Notas de Ver archivos del

sitio.

Administración del sitio y colaboración 139

Guardar información sobre archivos en Design Notes

Puede crear un archivo de Design Notes para cada documento o plantilla del sitio.

(Observe que si añade Design Notes a una plantilla, los documentos creados con

dicha plantilla no heredarán las Design Notes.) También puede crear Design

Notes para applets, controles ActiveX, imágenes, películas Flash, objetos

Shockwave y campos de imagen en sus documentos.

Para configurar Design Notes para el sitio:

1 Elija Sitio > Deﬁnir sitios, seleccione un sitio y haga clic en Editar.

2 En la lista Categoría de la izquierda, haga clic en Design Notes.

• Active Design Notes para el sitio seleccionando la opción Mantener Design

Notes (si no está seleccionada).

Cuando está activada la opción Mantener Design Notes, puede crear Design

Notes para los archivos del sitio. Cada vez que copie, mueva, cambie de nombre

o borre un archivo, el archivo de Design Notes asociado sufrirá la misma

operación.

• Elija si desea que las Design Notes asociadas al sitio se carguen con el resto de

los documentos. Para ello, active o desactive Cargar Design Notes para

compartir.

Cuando está activada la opción Cargar Design Notes para compartir, puede

compartir Design Notes con el resto del equipo de colaboradores. Cuando

coloca u obtiene un archivo, Dreamweaver coloca u obtiene automáticamente

el archivo de Design Notes asociado. Si trabaja en solitario, puede desactivar

esta opción para mejorar el rendimiento en la transferencia de archivos.

Cuando la opción está desactivada, las Design Notes se mantienen localmente,

pero no se cargan con los archivos.

3 Haga clic en Aceptar.

Para añadir Design Notes a un documento:

1 Mientras el documento se encuentra activo en la ventana de documento, elija

Archivo > Design Notes.

También puede seleccionar el archivo en la ventana Sitio y, a continuación,

elegir Archivo > Design Notes, o bien hacer doble clic en la columna Notas. Si

el archivo reside en un sitio remoto, en primer lugar deberá protegerlo u

obtenerlo y, a continuación, seleccionarlo en la carpeta local. Consulte

“Desproteger y proteger archivos en un servidor remoto” en la página 137 o

“Obtener y colocar archivos” en la página 147.

Capítulo 4140

En la ﬁcha Información básica, añada notas de varios tipos:

• Elija el estado del documento en el menú emergente Estado.

• Escriba comentarios en el campo de texto Notas.

• Haga clic en el icono de fecha (justo por encima del campo de texto Notas)

para insertar la fecha local actual.

• Para hacer que el archivo de Design Notes aparezca cada vez que se abre el

archivo, seleccione Mostrar al abrir el archivo.

3 En la ﬁcha Toda la información, añada otras claves y valores que puedan

resultar útiles para otros desarrolladores del sitio. Por ejemplo, puede asignar el

nombre Autor (en el campo Nombre) a una clave y deﬁnir el valor como Heidi

(en el campo Valor). Haga clic en el botón más (+) para añadir un nuevo par

clave/valor; seleccione un par y haga clic en el botón menos (–) para quitarlo.

4 Haga clic en Aceptar para guardar las notas.

Las notas que introduzca se guardarán en una subcarpeta llamada _notes en la

misma ubicación que el archivo actual. El nombre de archivo será el nombre

del documento más la extensión .mno. Por ejemplo, si el nombre del archivo es

index.html, el archivo de Design Notes asociado se llamará index.html.mno.

Para añadir Design Notes a un objeto:

1 Elija Design Notes en el menú contextual del objeto. (Abra el menú contextual

del objeto haciendo clic con el botón izquierdo del ratón (Windows) o

haciendo clic mientras presiona la tecla Control (Macintosh) en el objeto.)

2 Siga los pasos 2 a 4 para añadir Design Notes a un documento.

Observe que el archivo de Design Notes de un objeto se guarda en la subcarpeta

_notes, dentro del mismo directorio que el archivo de origen del objeto, que no

se encuentra necesariamente en el mismo directorio que el documento donde

aparece el objeto.

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

operaciones:

• Seleccione el archivo en la ventana Sitio o abra el archivo en sí y luego elija

Archivo > Design Notes. Se abrirán las Design Notes asociadas a dicho archivo.

• En la columna Notas de la ventana Sitio, haga doble clic en el icono amarillo de

Design Notes.

Administración del sitio y colaboración 141

Para asignar un estado que no figure en el menú emergente Estado:

1 Abra Design Notes para un archivo u objeto.

2 Haga clic en la ﬁcha Toda la información.

3 Haga clic en el botón más (+).

4 En el campo Nombre, escriba la palabra estado.

5 En el campo Valor, introduzca el estado.

Si ya existe un valor de estado, será sustituido por el nuevo.

6 Haga clic en la ﬁcha Información básica y observe que el nuevo valor de estado

aparece en el menú emergente Estado.

Nota: Sólo puede tener simultáneamente un valor nuevo en el menú de estado. Si sigue

este procedimiento otra vez, el nuevo valor de estado que introdujo la primera vez será

sustituido por el valor que introduzca la segunda vez.

Para desactivar Design Notes:

1 Elija Sitio> Deﬁnir sitios.

2 En el cuadro de diálogo Deﬁnir sitios, seleccione el sitio y haga clic en Editar.

3 En el cuadro de diálogo Deﬁnición de sitio, haga clic en Design Notes.

4 Desactive Mantener Design Notes.

Al desactivar esta opción se desactivará la función Design Notes. Si desactiva

esta opción y, a continuación, hace clic en Limpiar, se borrarán todos los

archivos de Design Notes del sitio.

5 Haga clic en Aceptar.

Aparecerá un cuadro de diálogo en el que se le preguntará si desea borrar los

archivos de Design Notes existentes. Haga clic en Sí para borrar los archivos o

en No para dejarlos en su sitio.

Para utilizar Design Notes a nivel local únicamente:

1 Elija Sitio> Deﬁnir sitios.

2 En el cuadro de diálogo Deﬁnir sitios, seleccione el sitio y haga clic en Editar.

3 En el cuadro de diálogo Deﬁnición de sitio, seleccione Mantener Design Notes

dentro del cuadro Design Notes.

4 Desactive Cargar para compartir.

Las Design Notes no se transferirán al sitio remoto cuando desproteja/coloque

los archivos. Podrá seguir añadiendo y modiﬁcando las Design Notes del sitio a

nivel local.

Capítulo 4142

Para borrar del sitio las Design Notes no asociadas:

1 Elija Sitio> Deﬁnir sitios.

2 En el cuadro de diálogo Deﬁnir sitios, seleccione el sitio y haga clic en Editar.

3 En el cuadro de diálogo Deﬁnición de sitio, haga clic en Design Notes.

4 Haga clic en Limpiar. Dreamweaver le pedirá que conﬁrme que desea borrar las

Design Notes que ya no están asociadas a ningún archivo del sitio. Si utiliza

Dreamweaver para borrar un archivo que tiene una archivo de Design Notes

asociado, también se borrará el archivo de Design Notes. Por tanto, sólo

pueden producirse archivos de Design Notes huérfanos si borra o cambia el

nombre de un archivo fuera de Dreamweaver.

Nota: Si desactiva la opción Mantener Design Notes antes de hacer clic en Limpiar,

Dreamweaver borrará todos los archivos de Design Notes del sitio.

Utilizar las columnas de la vista de archivo con Design Notes

Puede personalizar las columnas mostradas en las listas de Carpeta local y Sitio

remoto de la ventana Sitio. Puede reordenar columnas, añadir nuevas (hasta un

máximo de 10 columnas), borrar columnas, ocultarlas, asociar Design Notes a los

datos de una columna y designar columnas para compartirlas con todos los

usuarios conectados a un sitio. Las columnas predeterminadas son Nombre,

Notas, Tamaño, Tipo, Modiﬁcado y Protegido por. Puede ordenar por cualquier

columna haciendo clic en el encabezado de la columna en la ventana Sitio. Al

hacer clic más de una vez en una columna, se invierte el orden (ascendente o

descendente) de la columna.

Nota: No es posible borrar ni renombrar una columna incorporada (Nombre, Notas,

Tamaño, Tipo, Modificado, Protegido por) ni asociar a ellas Design Notes. Puede cambiar

el orden y la alineación de estas columnas, así como ocultarlas, a excepción de la columna

Nombre, que no puede ocultarse.

Administración del sitio y colaboración 143

Para obtener acceso a las opciones de Columnas vista archivo, lleve a cabo una de

estas operaciones:

• Elija Ver > Columnas vista archivo en la ventana Sitio (Windows) o Sitio > Ver

archivos del sitio > Columnas vista archivo (Mac).

• Elija Sitio > Deﬁnir sitios, seleccione un sitio y haga clic en Editar. Después

seleccione Columnas vista archivo del cuadro de diálogo Deﬁnición de sitio.

• En la ventana Sitio, haga clic con el botón derecho del ratón en una columna

(Windows) o haga clic en una columna mientras mantiene presionada la tecla

Control (Macintosh) y seleccione Columnas vista archivo.

Aparecerá el cuadro de diálogo Deﬁnición de sitio con las opciones de Columnas

vista archivo.

Para cambiar el orden de las columnas:

1 Desde la visualización de Columnas vista archivo del cuadro de diálogo

Deﬁnición de sitio, seleccione un nombre de columna.

2 Haga clic en el botón de ﬂecha arriba o abajo para cambiar la posición de la

columna seleccionada.

Puede cambiar el orden de cualquier columna salvo el de la columna Nombre,

que siempre aparece en primera posición.

Capítulo 4144

Para añadir una nueva columna:

1 En la visualización de Columnas vista archivo del cuadro de diálogo Deﬁnición

de sitio, haga clic en el botón de signo más (+).

2 En el campo Nombre de columna, introduzca un nombre para la columna.

3 Elija un valor del menú emergente Asociar a Design Note o introduzca el que

desee.

Debe asociar una nueva columna a una Design Note para que se muestren

datos en la ventana Sitio.

4 Elija una opción de alineación: izquierda, derecha o centro. Esto determina

cómo la alineación del texto dentro de la columna.

5 Para mostrar u ocultar la columna, seleccione o anule la selección de la opción

Mostrar.

6 Para compartir la columna con todos los usuarios conectados al sitio, seleccione

la opción Compartir con todos los usuarios de este sitio.

Para borrar una columna añadida:

1 Seleccione la columna que desea eliminar.

2 Haga clic en el botón de signo menos (-).

Nota: La columna se borra inmediatamente y sin confirmación, por lo que debe asegurarse

de que desea borrar la columna antes de hacer clic en el botón de signo menos (-).

Utilizar Design Notes en Fireworks y Dreamweaver

Si abre un gráﬁco en Macromedia Fireworks 4,0 y lo exporta a otro formato,

Fireworks guardará automáticamente el nombre del archivo original en un archivo

de Design Notes. Por ejemplo, si abre myhouse.png en Fireworks y lo exporta

como myhouse.gif, Fireworks creará automáticamente un archivo Design Notes

llamado myhouse.gif.mno que contendrá el nombre del archivo original como un

archivo absoluto: URL. Por ejemplo, las Design Notes para myhouse.gif podrían

contener esta línea:

fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"

Si la imagen contiene zonas interactivas o imágenes de sustitución, el código

HTML de esos elementos también se añadirá al archivo de Design Notes.

Cuando importe el gráﬁco a Dreamweaver, el archivo de Design Notes se copiará

automáticamente en el sitio junto con el gráﬁco. Al seleccionar la imagen en

Dreamweaver y editarlo usando Fireworks (consulte “Iniciar un editor externo” en

la página 314), Fireworks abrirá el archivo original para editarlo. Para obtener más

información, consulte “Uso conjunto de Fireworks y Dreamweaver” en la

página 295.

Administración del sitio y colaboración 145

Utilizar informes para mejorar el flujo de

trabajo

Utilice el comando Sitio > Informes para mejorar la colaboración entre los

miembros del equipo de desarrollo Web. Puede ejecutar informes de ﬂujo de

trabajo que muestren quién ha protegido un archivo y qué archivos tienen

asociadas Design Notes. Puede generar informes de Design Notes más precisos

especiﬁcando parámetros de nombre/valor. Para obtener información sobre la

ejecución de otros tipos de informes, consulte “Utilizar informes para comprobar

un sitio” en la página 538.

Nota: Debe tener definida una conexión con el sitio remoto para ejecutar informes de Flujo

de trabajo.

Para ejecutar un informe de Protegido por:

1 Elija Sitio > Informes.

Aparecerá el cuadro de diálogo Informes.

2 Elija una opción del menú emergente Informe sobre. Puede generar informes

sobre un documento, sobre un sitio completo, sobre archivos seleccionados de

un sitio o sobre una carpeta concreta.

3 Bajo Flujo de trabajo, seleccione Protegido por.

4 Haga clic en el botón Conﬁguración de informe.

Aparecerá el cuadro de diálogo Protegido por.

5 Introduzca el nombre de un miembro del equipo y haga clic en Aceptar.

Capítulo 4146

Haga clic en Ejecutar.

Se ejecutará el informe y el cuadro de diálogo Informes mostrará un resumen de

los archivos que han sido protegidos por la persona especiﬁcada.

Para ejecutar un informe sobre Design Notes específicas:

1 Elija Sitio > Informes.

Aparecerá el cuadro de diálogo Informes.

2 Elija una opción del menú emergente Informe sobre. Puede generar informes

sobre un documento, sobre un sitio completo, sobre archivos seleccionados de

un sitio o sobre una carpeta concreta.

3 Bajo Flujo de trabajo, seleccione Design Notes.

Se encontrará disponible el botón Conﬁguración de informe.

4 Haga clic en el botón Conﬁguración de informe.

Aparecerá el cuadro de diálogo Design Notes.

5 Introduzca uno o varios pares de nombre y valor y seleccione valores de

comparación de los correspondientes menús emergentes.

Por ejemplo, si especiﬁca “estado contiene borrador”, el informe buscará los

archivos cuyas Design Notes tengan el estado “borrador”.

6 Haga clic en Aceptar para regresar al cuadro de diálogo Informes.

7 Haga clic en Ejecutar para ejecutar el informe.

Administración del sitio y colaboración 147

Obtener y colocar archivos

Si trabaja en colaboración con otros usuarios, use el sistema de desprotección/

protección para transferir archivos entre los sitios local y remoto (consulte

“Utilizar Desproteger/proteger” en la página 135). Sin embargo, si es usted la

única persona que trabaja en el sitio remoto, puede utilizar los comandos Obtener

y Colocar para transferir los archivos sin desprotegerlos ni protegerlos.

Nota: Si selecciona Sitio > Obtener o Colocar mientras la ventana de documento está

activa y el archivo actual no forma parte del sitio abierto actualmente, Dreamweaver

intentará determinar a cuál de los sitios definidos localmente pertenece el archivo actual. Si

pertenece a un solo sitio local, Dreamweaver abrirá ese sitio y realizará la operación de

Obtener o Colocar.

Obtener archivos de un servidor remoto

Al obtener archivos, éstos se copian desde el sitio remoto hasta el sitio local.

Si utiliza el sistema de desprotección/protección (es decir, si está activada la opción

Permitir desproteger y proteger archivo), el comando Obtener generará una copia

local del archivo de sólo lectura; el archivo permanecerá disponible en el sitio

remoto para que otros miembros del equipo lo protejan. Si está desactivada la

opción Permitir desproteger y proteger archivo y se obtiene un archivo, se

transferirá una copia de éste con privilegios de lectura y escritura. Consulte

“Utilizar Desproteger/proteger” en la página 135.

Nota: Si trabaja en colaboración con otros usuarios en los mismos archivos, no es

recomendable desactivar la opción Permitir desproteger y proteger archivo. En particular,

si otros usuarios utilizan el sistema de desprotección/protección con el sitio, usted deberá

emplear también ese sistema.

Observe que los archivos que se copian al hacer clic en Obtener son los que están

seleccionados en el panel activo de la ventana Sitio. Si el panel Remoto está activo,

los archivos remotos seleccionados se copiarán en el sitio local. Si, por el contrario,

es el panel Local el que está activo, las versiones remotas de los archivos locales

seleccionados se copiarán en el sitio local.

Si no trabaja en colaboración con otros usuarios y desea obtener archivos con

privilegios de lectura/escritura, desactive la opción Permitir desproteger y proteger

archivo para el sitio (consulte “Asociar un servidor remoto a un sitio local” en la

página 128).

Para obtener sólo aquellos archivos cuya versión remota sea más reciente que la

versión local, use el comando Sincronizar (consulte “Sincronizar los archivos de

los sitios local y remoto” en la página 150).

Capítulo 4148

Para obtener archivos de un servidor remoto:

1 Elija Ventana > Archivos del sitio para abrir la ventana Sitio.

2 Elija el sitio deseado en el menú emergente de sitios actuales de la parte

superior de la ventana Sitio.

3 Si utiliza FTP para transferir archivos, haga clic en Conectar para abrir una

conexión con el servidor remoto.

Si ya hay una conexión abierta (lo que se indica mediante la visualización del

botón Desconectar), omita este paso. Si los archivos remotos son visibles en el

panel Remoto de una conexión anterior, no es necesario hacer clic en Conectar.

Cuando haga clic en Obtener, Dreamweaver conectará automáticamente.

4 Seleccione los archivos que desea descargar. Generalmente se seleccionan en el

panel Remoto, pero, si lo preﬁere, puede seleccionar los archivos

correspondientes en el panel Local.

5 Haga clic en Obtener o elija Obtener en el menú contextual o el menú Sitio. Si

el archivo está abierto en una ventana de documento, puede elegir Sitio >

Obtener en la ventana de documento.

6 Para descargar archivos dependientes, haga clic en Sí. Para omitirlos, haga clic

en No. (Si ya dispone de copias locales de los archivos dependientes, haga clic

en No.) Para evitar que vuelva a aparecer la pregunta sobre archivos

dependientes en futuras transferencias, active la opción No volver a preguntar.

Nota: Para detener la transferencia de archivos en cualquier momento, haga clic en el

botón Detener tarea actual (la señal roja de “stop” con la X blanca en la esquina inferior

derecha de la ventana Sitio) o presione la tecla Esc (Windows) o Comando+punto

(Macintosh). Es posible que la transferencia no se detenga inmediatamente.

Dreamweaver registra toda la actividad de transferencia de archivos FTP. Si se

produce un error mientras transﬁere un archivo con FTP, el registro de FTP del

sitio podrá ayudarle a determinar el problema. Para mostrar el registro, elija

Ventana > Registro FTP de sitio en la ventana Sitio (Windows) o Sitio > Registro

FTP de sitio (Macintosh).

Colocar archivos en un servidor remoto

El comando Colocar copia archivos desde el sitio local hasta el sitio remoto,

generalmente sin cambiar su estado de protección. Hay dos situaciones frecuentes

en las que se utiliza Colocar en lugar de Desproteger: cuando no trabaja en

colaboración con otros usuarios ni utiliza el sistema de desprotección/protección o

cuando desea colocar la versión actual del archivo en el servidor pero va a seguir

editándolo.

Nota: Si coloca un archivo que anteriormente no estaba presente en el sitio remoto y utiliza

el sistema de desprotección/protección, el archivo se copiará en el sitio remoto y, a

continuación, quedará protegido para usted de modo que pueda seguir editándolo.

Administración del sitio y colaboración 149

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 página 137.

Para colocar sólo aquellos archivos cuya versión local sea más reciente que la

versión remota, consulte “Sincronizar los archivos de los sitios local y remoto” en

la página 150.

Nota: No utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos

puntos, guiones o puntos) en los nombres de los archivos que tiene previsto colocar en un

servidor remoto. Muchos servidores convierten estos caracteres durante el proceso de

transferencia, lo que rompe los vínculos con los archivos.

Para colocar archivos en un servidor remoto:

1 Elija Ventana > Archivos del sitio para abrir la ventana Sitio.

2 Elija el sitio deseado en el menú emergente de sitios de la parte superior de la

ventana Sitio.

3 Si utiliza FTP para transferir archivos, puede hacer clic en Conectar para abrir

una conexión con el servidor remoto, lo que permitirá ver lo que hay en el sitio

remoto antes de realizar la transferencia. Sin embargo, no es necesario hacer clic

en Conectar, ya que al seleccionar la opción Colocar, Dreamweaver establece la

conexión de forma automática.

4 Seleccione los archivos que desea cargar. (Generalmente se seleccionan en el

panel Local, pero, si lo preﬁere, puede seleccionar los archivos correspondientes

en el panel Remoto.)

5 Haga clic en Colocar o elija Colocar en el menú contextual o el menú Sitio.

6 Si el archivo no se ha guardado, aparecerá un cuadro de diálogo (siempre que

haya establecido esta opción en el panel Sitio del cuadro de diálogo

Preferencias), lo que le permitirá guardar el archivo antes de colocarlo en el

servidor remoto. Para guardar el archivo, haga clic en Sí. Para colocar la versión

guardada anteriormente en el servidor remoto, haga clic en No.

Si decide no guardar el archivo, los cambios realizados no se cargarán en el

servidor remoto. Sin embargo, si el archivo permanece abierto, podrá guardar

los cambios después de colocar el archivo en el servidor si lo desea.

7 Para cargar archivos dependientes, haga clic en Sí. Para omitirlos, haga clic en

No. (Si el sitio remoto ya dispone de copias de los archivos dependientes, haga

clic en No.) Para evitar que vuelva a aparecer la pregunta sobre archivos

dependientes en futuras transferencias, active la opción No volver a preguntar.

Nota: Para detener la transferencia de archivos en cualquier momento, haga clic en el

botón Detener tarea actual (la señal roja de “stop” con la X blanca en la esquina inferior

derecha de la ventana Sitio) o presione la tecla Esc (Windows) o Comando+punto

(Macintosh). Es posible que la transferencia no se detenga inmediatamente.

Capítulo 4150

Si el archivo está abierto en una ventana de documento, puede elegir Sitio >

Colocar en la ventana de documento.

Dreamweaver registra toda la actividad de transferencia de archivos FTP. Si se

produce un error mientras transﬁere un archivo con FTP, 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).

Sincronizar los archivos de los sitios local y

remoto

Después de crear archivos en los sitios local y remoto, puede sincronizar los

archivos de ambos sitios. Utilice el comando Sitio > Sincronizar para transferir las

versiones más recientes de los archivos desde y hacia el sitio remoto.

Si el sitio remoto es un servidor FTP (en lugar de un servidor de red), utilice FTP

para sincronizar los archivos. Si desea más información sobre el uso de FTP,

consulte “Asociar un servidor remoto a un sitio local” en la página 128.

Antes de sincronizar los archivos, Dreamweaver le permite veriﬁcar cuáles desea

colocar u obtener del servidor remoto. Dreamweaver también conﬁrma qué

archivos se han actualizado después de ﬁnalizar la sincronización.

Para ver qué archivos son más recientes en el sitio local o en el remoto, sin

sincronizar, elija Edición > Seleccionar local más reciente o Edición > Seleccionar

remoto más reciente (Windows, desde la ventana Sitio) o Sitio > Ver archivos del

sitio > Seleccionar local más reciente o Sitio > Ver archivos del sitio > Seleccionar

remoto más reciente (Macintosh).

Para sincronizar los archivos:

1 Si desea sincronizar archivos o carpetas especíﬁcas en lugar del sitio completo,

elija los archivos o las carpetas en el panel Local o Remoto de la ventana Sitio.

2 Elija Sitio > Sincronizar en la ventana Sitio (Windows) o desde la barra de

menú (Macintosh).

3 Para sincronizar el sitio completo, elija Todo el sitio nombre del sitio en el menú

emergente Sincronizar. Para sincronizar sólo archivos seleccionados, elija

Archivos locales seleccionados solamente (o Archivos remotos seleccionados

solamente si la selección más reciente la ha realizado en el panel Remoto).

Administración del sitio y colaboración 151

Elija en qué sentido quiere copiar los archivos:

• Elija Colocar archivos más nuevos en remoto si desea cargar todos los archivos

locales que tengan fechas de modiﬁcación más recientes que sus

correspondientes parejas remotas.

• Elija Obtener archivos más nuevos de remoto si desea descargar todos los

archivos remotos que tengan fechas de modiﬁcación más recientes que sus

correspondientes parejas locales.

• Elija Obtener y colocar archivos más nuevos para situar las versiones más

recientes de todos los archivos tanto en el sitio local como en el remoto.

5 Elija si desea borrar los archivos del sitio de destino que no tengan su

correspondiente pareja en el sitio de origen. (Esta opción no estará disponible si

ha seleccionado “Obtener y colocar”.)

Si elige Colocar archivos más nuevos en remoto y selecciona la opción Borrar,

Dreamweaver borrará todos los archivos del sitio remoto que tengan su

correspondiente archivo local. Si elige Obtener archivos más nuevos de remoto,

Dreamweaver borrará todos los archivos del sitio local que tengan su

correspondiente archivo remoto.

6 Haga clic en Previsualizar.

Si la versión más reciente de cada archivo elegido se encuentra ya en ambos

emplazamientos y no es preciso borrar nada, aparecerá un mensaje advirtiendo

de que no es necesario realizar la sincronización.

7 En el cuadro de diálogo Sincronizar archivos, veriﬁque qué archivos desea

borrar, colocar y obtener. Si no desea que Dreamweaver borre, coloque u

obtenga un determinado archivo, desactive la casilla de veriﬁcación situada a su

izquierda (en la columna Acción).

8 Haga clic en Aceptar. Los archivos se transferirán automáticamente (o, en su

caso, se borrarán) y Dreamweaver actualizará el cuadro de diálogo Sincronizar

archivos con el estado en curso.

9 Para guardar la información de veriﬁcación en un archivo local, haga clic en

Guardar registro.

Capítulo 4152

153

CAPÍTULO 5

.............................................................................................................

Configurar un documento

Una vez creado el sitio local, puede crear documentos para colocarlos en él. Si no

ha conﬁgurado un sitio todavía, consulte “Utilizar Dreamweaver para conﬁgurar

un nuevo sitio” en la página 104. Un documento, es decir, una página del sitio

Web, puede contener texto e imágenes, además de elementos soﬁsticados, como

animación, vídeos, vínculos con otros documentos y sonido. Conforme cree y

trabaje con los documentos, Dreamweaver generará automáticamente el código

HTML y JavaScript subyacente. Para examinar o editar este código, utilice uno de

los editores de código de Dreamweaver: la vista de Código de la ventana de

documento o el inspector de código. (Para obtener información detallada,

consulte “Utilizar la vista de Código (o el inspector de código)” en la página 347.

En Dreamweaver puede crear documentos a partir de páginas HTML en blanco o

de plantillas. También puede abrir y modiﬁcar documentos HTML creados en

otras aplicaciones. (Consulte “Crear, abrir y guardar documentos HTML” en la

página 154.)

Al conﬁgurar un documento, puede deﬁnir los elementos básicos de la página. Por

ejemplo, el título de la página identiﬁca al documento ante el visitante; éste aparece

normalmente en la barra de título de la ventana del navegador. Las imágenes de

fondo, los colores de fondo y los colores del texto y los vínculos personalizan la

página y permiten distinguir el texto normal del hipertexto. Las propiedades de

márgenes permiten especiﬁcar los márgenes superior e izquierdo de la página.

(Consulte “Conﬁgurar las propiedades del documento” en la página 156.)

Conforme añada contenido, podrá seleccionar y modiﬁcar 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 página que no están visibles en la

ventana de documento, como los comentarios o las secuencias de comandos.

(Consulte “Seleccionar elementos en la ventana de documento” en la página 158.)

Al crear documentos, puede realizar las mismas tareas muchas veces utilizando el

panel Historial. (Consulte “Automatizar tareas” en la página 164.)

Capítulo 5154

Crear, abrir y guardar documentos HTML

Macromedia Dreamweaver ofrece diversas formas de crear un documento. Puede

crear documentos HTML nuevos y vacíos; abrir un documento HTML existente,

aunque no haya sido creado con Dreamweaver; o bien crear un nuevo documento

basado en una plantilla.

También puede abrir archivos de texto no HTML, como archivos JavaScript,

archivos de correo electrónico de texto normal o archivos de texto guardados con

procesadores de texto o editores de texto. No podrá utilizar todas las herramientas

de edición de documentos de Dreamweaver en un documento de texto normal,

pero sí podrá utilizar funciones básicas de edición de texto. Entre las posibles

razones para abrir un documento de texto ﬁguran editar y depurar código

JavaScript, consultar el contenido del archivo de conﬁguración de Dreamweaver o

abrir un correo electrónico que contiene un fragmento de código HTML para

copiar el código y pegarlo en otro documento.

Para crear un documento HTML vacío en una nueva ventana de documento,

realice una de estas operaciones:

• En Windows, elija Archivo > Nuevo desde una ventana de documento existente

o elija Archivo > Nueva ventana desde la ventana Sitio.

• En Macintosh, elija Archivo > Nuevo.

Si abre la vista de Código (en la ventana de documento) o el inspector de código,

podrá ver que el nuevo documento no está totalmente vacío, pues contiene

etiquetas html, head y body para que pueda comenzar a trabajar. Mientras escriba en

la vista de Diseño de la ventana de documento o inserte objetos tales como tablas

e imágenes, podrá dejar abierto un editor de código y observar cómo se crea el

código HTML. Para obtener más información sobre los editores de código,

consulte “Utilizar la vista de Código (o el inspector de código)” en la página 347.

Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones:

• Seleccione Archivo > Abrir.

• Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar >

Importar HTML de Word.

Si elige Importar HTML de Word, Dreamweaver abre el archivo y le permite

especiﬁcar opciones para eliminar código ajeno a HTML generado por Word.

(Microsoft Word 97 y las versiones posteriores cuentan con el comando

Guardar como HTML, que añade código HTML innecesario al convertir un

documento a este formato.) Para obtener más información, consulte “Limpiar

HTML de Microsoft Word” en la página 366.

Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) a

Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y

guarde el archivo como HTML antes de importar el archivo HTML resultante a

Dreamweaver.

Configurar un documento 155

Para crear un nuevo documento basado en una plantilla:

1 Elija Archivo > Nuevo de plantilla.

Aparecerá un cuadro de diálogo con las plantillas disponibles para el sitio

actual. Deberá crear plantillas antes de crear documentos basados en ellas

(consulte “Crear plantillas” en la página 397).

Cuando crea un documento basado en una plantilla, algunas partes del

documento quedan bloqueadas para que no puedan editarse. (El archivo de

plantilla determina qué partes son editables y cuáles no.) Esto garantiza la

coherencia en el uso de la plantilla en múltiples documentos de un mismo sitio.

2 Seleccione una plantilla y haga clic en Seleccionar.

Se creará un nuevo documento basado en la plantilla. De forma

predeterminada, las partes editables del nuevo documento quedan rodeadas por

un borde azul. Todo el documento queda rodeado por un borde amarillo (de

forma predeterminada) para recordarle que está basado en una plantilla y que,

por tanto, algunas de sus partes están bloqueadas. (Para personalizar los colores

de los bordes, consulte “Deﬁnir preferencias de la plantilla” en la página 403.)

Para modiﬁcar una parte editable de la plantilla, seleccione el contenido del

marcador de posición en la región editable y sobrescríbalo. En algunos casos, no

hay ningún contenido de marcador de posición en la región editable; en este

caso, haga clic dentro de la región editable.

Para conocer más detalles sobre el diseño y la manipulación de plantillas, consulte

“Reutilizar contenido con plantillas y bibliotecas” en la página 395.

Para guardar un documento:

1 Seleccione Archivo > Guardar.

2 Proporcione un nombre para el archivo y vaya hasta el lugar en el que desea

guardar el archivo.

Nota: Dreamweaver añade automáticamente .htm (Windows) o .html (Macintosh) al

nombre del archivo cuando aparece el cuadro de diálogo. (Puede controlar la extensión de

archivo que debe añadirse utilizando una opción de las preferencias generales.) Para

guardar un archivo como texto normal en Windows, asígnele la extensión de nombre de

archivo .txt. Para guardar un archivo como texto normal en Macintosh, sencillamente borre

.html del nombre del archivo Macintosh. (Para que Dreamweaver vea el archivo como

HTML de nuevo, guárdelo otra vez con la extensión .html o .htm.) Después de guardar un

archivo como texto, Dreamweaver no interpreta ningún código HTML del archivo.

Cuando guarde los documentos, evite utilizar espacios y caracteres especiales en

los nombres de archivos y carpetas siempre que sea posible. En concreto, no

utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos

puntos, barras inclinadas o puntos) en los nombres de archivos que desee

colocar en un servidor remoto; muchos servidores cambian estos caracteres

durante la carga, lo que provoca que se rompan los vínculos existentes con los

archivos. Asimismo, no comience los nombres de los archivos con números.

3 Haga clic en el botón Guardar para guardar el archivo.

Capítulo 5156

Configurar las propiedades del documento

Los títulos de página, las imágenes y colores de fondo y los colores del texto y los

vínculos son propiedades básicas de todos los documentos HTML. El título de

página identiﬁca y da nombre al documento. Una imagen o un color de fondo

deﬁne la apariencia global del documento. Los colores del texto y los vínculos

ayudan a los usuarios a distinguir entre el texto normal y el hipertexto, así como a

reconocer qué vínculos han visitado y cuáles no.

Cambiar el título de una página

El título de una página HTML ayuda a los visitantes del sitio a realizar un

seguimiento de lo que ven mientras navegan, al tiempo que identiﬁca la página en

listas de historial y de marcadores. Si no asigna ningún título a una página, ésta

aparecerá en la ventana del navegador y en las listas de marcadores y de historial

como Untitled Document. Asignar un nombre de archivo al documento (al

guardarlo) no equivale a asignar un título a la página. Para localizar todos los

documentos sin título del sitio, utilice el comando Sitio > Informes; consulte

“Crear informes” en la página 538.

Para cambiar el título de una página:

1 Lleve a cabo una de estas operaciones:

• Elija Modiﬁcar > Propiedades de la página.

• Haga clic en un espacio vacío de la página para asegurarse de que no hay nada

seleccionado. Luego elija Propiedades de la página en el menú contextual

haciendo clic con el botón izquierdo del ratón (Windows) o presionando

Control mientras hace clic (Macintosh) en la ventana de documento.

• Elija Ver > Contenido de Head y haga clic en el botón Título cuando aparezca

éste; luego abra el inspector de propiedades.

• Elija Ver > Barra de herramientas.

2 Introduzca el título de la página en el cuadro de texto Título.

3 Si está editando el título en el cuadro de diálogo Propiedades de la página, haga

clic en Aceptar.

El título aparecerá en la barra de título de la ventana de documento (y en la

barra de herramientas si ésta se encuentra visible). El nombre de archivo de la

página y la carpeta en la que está guardado el archivo aparecen entre paréntesis

junto al título en la barra de título. Un asterisco indica que el documento

contiene cambios que no se han guardado aún.

Configurar un documento 157

Definir una imagen de fondo o un color de página

Para deﬁnir una imagen o un color para el fondo de la página, utilice el cuadro de

diálogo Propiedades de la página. Si utiliza tanto una imagen como un color de

fondo, el color aparecerá mientras se descarga la imagen y luego la imagen cubrirá

el color. Si la imagen de fondo contiene píxeles transparentes, el color de fondo se

verá a través de ellos.

Para definir una imagen o un color de fondo:

1 Elija Modiﬁcar > Propiedades de la página o seleccione Propiedades de la

página en el menú contextual de la vista Diseño de la ventana de documento.

2 Para deﬁnir una imagen de fondo, haga clic en el botón Examinar, vaya hasta la

imagen y selecciónela. Como alternativa, introduzca la ruta de acceso a la

imagen de fondo en el cuadro Imagen de fondo.

Dreamweaver forma un mosaico con la imagen de fondo (la repite) si ésta no

ocupa toda la ventana del navegador. (Para evitar que se forme un mosaico con

la imagen de fondo, utilice CSS -hojas de estilos en cascada- para desactivar la

formación de mosaicos con la imagen. Consulte “Utilizar hojas de estilos CSS”

en la página 259.)

3 Para deﬁnir un color de fondo, haga clic en el cuadro Color de fondo y seleccione

un color del selector de color. (Consulte “Trabajar con colores” en la página 88.)

Definir colores predeterminados de texto

Deﬁna colores predeterminados para el texto normal, los vínculos, los vínculos

visitados y los vínculos activos en el cuadro de diálogo Propiedades de la página, o

bien elija una combinación de colores preestablecida para deﬁnir los colores del

fondo de la página y del texto. (Consulte “Trabajar con colores” en la página 88.)

Nota: El color del vínculo activo es el que adopta el vínculo cuando se hace clic en él. Es

posible que algunos navegadores Web no utilicen el color especificado.

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

operaciones siguientes:

• Elija Modiﬁcar > Propiedades de la página y, seguidamente, seleccione colores

para las opciones Color del texto, Color de los vínculos, Vínculos visitados y

Vínculos activos.

• Elija Comandos > Deﬁnir combinación de colores y seleccione un color de

fondo y una combinación de colores de texto y vínculos.

El cuadro de muestra da una idea de cuál será la apariencia de la combinación

de colores en el navegador.

Nota: Las personas daltónicos pueden tener dificultades para ver determinadas

combinaciones de bajo contraste entre el color del texto y el color de fondo. Es

recomendable mostrar la página a una persona daltónica para determinar si resulta legible.

Capítulo 5158

Seleccionar elementos en la ventana de

documento

Para seleccionar un elemento de la vista de Diseño de la ventana de documento,

normalmente tendrá que hacer clic en él. Si un elemento es invisible, tendrá que

convertirlo en visible para poder seleccionarlo.

Para seleccionar elementos, utilice estas técnicas:

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

el elemento o arrastre sobre el elemento.

• Para seleccionar un elemento invisible, elija Ver > Ayudas visuales > Elementos

invisibles (si no está seleccionado) y haga clic en el marcador del elemento en la

ventana de documento.

Algunos objetos aparecen en un lugar de la página distinto a aquél en el que se

ha insertado el código. Por ejemplo, una capa puede situarse en cualquier lugar

de la página, pero el código que deﬁne la capa se encuentra en un lugar ﬁjo.

Cuando se encuentran visibles los elementos invisibles, Dreamweaver muestra

marcadores en la ventana de documento para indicar la posición del código

correspondiente a los elementos invisibles. Al seleccionar un marcador, se

selecciona el elemento completo; por ejemplo, al seleccionar el marcador de

una capa se selecciona la capa completa. (Consulte “Elementos invisibles” en la

página 159.)

• Para seleccionar una etiqueta completa (incluido su contenido, si lo hay), haga clic

en una etiqueta del selector de etiquetas, situado en la parte inferior izquierda de la

ventana de documento. (El selector de etiquetas aparece sólo cuando está activa la

vista de Diseño.) El selector de etiquetas siempre muestra las etiquetas que rodean a

la selección actual o al punto de inserción. La etiqueta situada más a la izquierda es

la etiqueta más externa que contiene la selección actual o el punto de inserción. La

siguiente etiqueta está contenida en la etiqueta más externa, y así sucesivamente; la

etiqueta situada más a la derecha es la etiqueta más interna que contiene la selección

actual o el punto de inserción.

Por ejemplo, si deﬁne un vínculo para una imagen, el código HTML tendrá

una apariencia semejante a ésta:

Al hacer clic en la imagen en la ventana de documento, el selector de etiquetas

cambia para reﬂejar las etiquetas de la selección:

Selector de etiquetas

Configurar un documento 159

Dado que la imagen está seleccionada, la etiqueta <img> del selector de etiquetas

aparece en negrita. Hacer clic en la etiqueta del selector de etiquetas equivale a

seleccionar <img src="agraphic.gif"> en un editor de código.

Para seleccionar el vínculo (la etiqueta a y todo lo que contiene) en lugar de en

la imagen, haga clic en la imagen en la ventana de documento y luego haga clic

en <a> en el selector de etiquetas.

Para ver el código HTML asociado al texto u objeto seleccionado, realice una de

las siguientes operaciones:

• Para ver la vista de Código en la ventana de documento, elija Ver > Código o Ver >

Código y Diseño. Para obtener más información sobre la vista de Código, consulte

“Utilizar la vista de Código (o el inspector de código)” en la página 347.

• Para abrir el inspector de código (en una ventana independiente), elija Ventana

> Inspector de código.

Cuando seleccione algo en el editor de código (la vista de Código o el inspector de

código), normalmente también se seleccionará en la ventana de documento. Es

posible que tenga que sincronizar las dos vistas antes de que aparezca la selección;

consulte “Utilizar la vista de Código (o el inspector de código)” en la página 347.

Elementos invisibles

Algunos códigos HTML no tienen representación visible en los navegadores. Por

ejemplo, las etiquetas comment no aparecen en los navegadores. No obstante,

mientras crea una página, puede resultar útil poder seleccionar este tipo de

elementos invisibles, editarlos, moverlos o borrarlos. Dreamweaver le permite

especiﬁcar si debe mostrar iconos que marquen la ubicación de los elementos

invisibles en la vista de Diseño de la ventana de documento.

Para mostrar u ocultar iconos de marcadores para elementos invisibles, elija Ver >

Ayudas visuales > Elementos invisibles. Al mostrar elementos invisibles, podrá

seleccionarlos y cambiar sus propiedades en el inspector de propiedades; al

ocultarlos, podrá ver la página de forma más parecida a como aparecerá en un

navegador. Tenga en cuenta que, al mostrar elementos invisibles, puede cambiar

ligeramente la disposición de la página, ya que se desplazarán otros elementos

unos pocos píxeles; de manera que, para lograr una disposición precisa, oculte los

elementos invisibles.

Para indicar los marcadores de elementos que deben aparecer cuando elija Ver >

Ayudas visuales > Elementos invisibles, puede deﬁnir opciones en las preferencias

de Elementos invisibles. Por ejemplo, puede especiﬁcar que sean visibles los

puntos de ﬁjación con nombre, pero no los saltos de línea.

Puede crear determinados elementos invisibles (como comentarios, puntos de ﬁjación

con nombre y secuencias de comandos) utilizando los botones de la categoría Invisibles

del panel Objetos (consulte “Utilizar el panel Objetos” en la página 80). Después

podrá modiﬁcar estos elementos utilizando el inspector de propiedades.

Capítulo 5160

Configurar preferencias de Elementos invisibles

Utilice las preferencias de Elementos invisibles para seleccionar qué tipos de

elementos estarán visibles al seleccionar Ver > Ayudas visuales > Elementos

invisibles.

Para cambiar las preferencias de Elementos invisibles:

1 Elija Edición > Preferencias y, a continuación, haga clic en Elementos invisibles.

2 Seleccione los elementos que deberán ser visibles. Una marca de veriﬁcación

junto al nombre del elemento en el cuadro de diálogo indica que ese elemento

se encontrará visible cuando seleccione Ver > Ayudas visuales > Elementos

invisibles.

Para obtener una descripción de cada una de las preferencias de Elementos

invisibles, consulte la Ayuda de Dreamweaver.

Utilizar guías visuales en el proceso de

diseño

Dreamweaver proporciona varios tipos de guías visuales para ayudarle a diseñar

documentos y predecir (de forma aproximada) cuál será su apariencia en los

navegadores. Puede llevar a cabo todas las operaciones siguientes:

• Ajustar instantáneamente el tamaño deseado para una ventana de documento y

comprobar si caben los elementos en la página. Consulte “Cambiar el tamaño

de la ventana de documento” en la página 75.

• Utilizar reglas que sirvan de pista visual para la colocación y el cambio de

tamaño de las capas o las tablas.

• Utilizar una imagen de rastreo como fondo de la página para ayudarle a copiar

un diseño creado en una aplicación de edición de ilustraciones o imágenes

como Macromedia Fireworks.

• Utilizar la cuadrícula para lograr una mayor precisión en la colocación y ajuste

del tamaño de las capas. Las marcas de cuadrícula de la página le ayudan a

alinear las capas y, cuando está activada la función de ajuste, permiten ajustar

automáticamente las capas con el punto más próximo de la cuadrícula al

moverlas o ajustar su tamaño. (Los demás objetos, como las imágenes y los

párrafos, no se ajustan a la cuadrícula.) El ajuste funciona independientemente

de que la cuadrícula esté visible. Consulte “Ajustar capas a la cuadrícula” en la

página 436.

Configurar un documento 161

Mostrar reglas

Las reglas pueden mostrarse en los bordes izquierdo y superior de la página

expresadas en píxeles, pulgadas o centímetros.

Para cambiar la configuración de la regla, lleve a cabo una de estas operaciones:

• Para activar y desactivar las reglas, elija Ver > Reglas > Mostrar.

• Para cambiar el origen, arrastre el icono de origen de la regla hasta cualquier

lugar de la página. (Este icono aparece en la esquina superior izquierda de la

vista de Diseño de la ventana de documento cuando están visibles las reglas.)

Para restaurar el origen a su posición predeterminada, elija Ver > Reglas >

Restablecer origen.

• Para cambiar la unidad de medida, elija Píxeles, Pulgadas o Centímetros en el

submenú Ver > Reglas.

Utilizar una imagen de rastreo

Utilice una imagen de rastreo como guía para la recreación del diseño de una

página diseñada en una aplicación gráﬁca. Una imagen de rastreo es una imagen

JPEG, GIF o PNG que se sitúa en el fondo de la ventana de documento. Puede

ocultar la imagen, conﬁgurar su opacidad y cambiar su posición.

La imagen de rastreo sólo se encuentra visible en Dreamweaver. Ésta nunca puede

verse en la página desde un navegador. Cuando está visible la imagen de rastreo, la

imagen y el color de fondo reales no están visibles en la ventana de documento; no

obstante, se encontrarán visibles cuando la página se muestre en un navegador.

Para colocar una imagen de rastreo en la ventana de documento:

1 Lleve a cabo una de estas operaciones:

• Seleccione Ver > Imagen de rastreo > Cargar.

• Elija Modiﬁcar > Propiedades de la página y haga clic en el botón Examinar

situado junto al cuadro de texto Imagen de rastreo.

2 En el cuadro de diálogo que aparece, seleccione un archivo de imagen y haga

clic en Seleccionar (Windows) o Elegir (Macintosh).

3 Aparecerá el cuadro de diálogo Propiedades de la página. Especiﬁque la

transparencia para la imagen arrastrando el control deslizante Transparencia

imagen y, a continuación, haga clic en Aceptar.

Para cambiar a otra imagen de rastreo o cambiar la transparencia de la imagen

de rastreo actual en cualquier momento, elija Modiﬁcar > Propiedades de la

página.

Capítulo 5162

Para mostrar u ocultar la imagen de rastreo:

Seleccione Ver > Imagen de rastreo > Mostrar.

Para cambiar la posición de una imagen de rastreo:

Seleccione Ver > Imagen de rastreo > Ajustar posición. A continuación, lleve a

cabo una de estas operaciones:

• Para especiﬁcar de forma precisa la posición de la imagen de rastreo, introduzca

valores de coordenadas en los cuadros X e Y.

• Para mover la imagen de píxel en píxel, utilice las teclas de ﬂecha.

• Para mover la imagen de cinco en cinco píxeles, presione Mayús y una tecla de

ﬂecha.

Para restablecer la posición de la imagen de rastreo:

Seleccione Ver > Imagen de rastreo > Restablecer posición. La imagen de rastreo

regresará a la esquina superior izquierda de la ventana de documento (0,0).

Para alinear la imagen de rastreo con un elemento seleccionado:

1 Seleccione un elemento de la ventana de documento.

2 Elija Ver > Imagen de rastreo > Alinear con selección.

La esquina superior izquierda de la imagen de rastreo se alineará con la esquina

superior izquierda del elemento seleccionado.

Ver y editar el contenido de la sección head

Los archivos HTML constan de dos secciones principales: la sección head y la

sección body. La sección body es la parte principal del documento, la parte visible

que contiene texto, imágenes, etc. La sección head es invisible, salvo el título del

documento, que aparece en las barras de título de las ventanas en los navegadores y

en Dreamweaver. Asigne un título a todas las páginas que cree.

La sección head también contiene otra información importante, incluido el tipo de

documento, la codiﬁcación de idioma, las funciones y variables JavaScript y

VBScript, las palabras clave y los indicadores de contenido para motores de

búsqueda y las deﬁniciones de estilo. No es necesario suministrar todos estos

elementos para cada página. Por ejemplo, puede deﬁnir palabras clave e

indicadores de contenido para la página principal únicamente. Puede ver los

elementos en la sección head utilizando el menú Ver, la vista de Código de la

ventana de documento o el inspector de código.

Configurar un documento 163

Para ver los elementos de la sección head de un documento:

Elija Ver > Contenido de Head. Por cada elemento del contenido de la sección

head, aparecerá un icono en la parte superior de la vista de Diseño de la ventana de

documento.

Nota: Si la ventana de documento está configurada para mostrarse sólo en la vista de

Código, la opción Ver > Contenido de Head aparecerá atenuada.

Para insertar un elemento en la sección

head de un documento:

1 Lleve a cabo una de estas operaciones:

• Elija Head en el menú emergente situado en la parte superior del panel Objetos

y haga clic en uno de los botones de objeto.

• Elija un elemento en el submenú Insertar > Head.

2 Introduzca opciones para el elemento en el cuadro de diálogo que aparece a

continuación o en el inspector de propiedades.

Para editar un elemento de la sección head de un documento:

1 Elija Ver > Contenido de Head.

2 Haga clic en uno de los iconos de la sección head para seleccionarlo.

3 Deﬁna o modiﬁque las propiedades del elemento en el inspector de

propiedades.

Para obtener información acerca de las propiedades de elementos concretos de la

sección head, consulte los temas siguientes en la Ayuda de Dreamweaver:

• Propiedades Meta

• Propiedades de título

• Propiedades de palabras clave

• Propiedades de descripción

• Propiedades de actualización

• Editar una secuencia de comandos

• Propiedades de base

• Propiedades de vínculo

Capítulo 5164

Automatizar tareas

Al crear documentos, es posible que desee realizar la misma tarea muchas veces. En

esta sección se explica cómo utilizar el panel Historial para automatizar tareas

repetitivas.

Para repetir una serie de pasos una o dos veces, reprodúzcalos directamente desde

el panel Historial, que graba los pasos conforme trabaja en un documento. (Para

obtener información básica sobre el panel Historial, consulte “Panel Historial” en

la página 84.) Para automatizar una tarea que realiza a menudo, puede crear un

nuevo comando que lleve a cabo esa tarea de manera automática.

Algunos movimientos del ratón, como hacer clic o arrastrar para seleccionar algún

elemento de la ventana de documento, no se pueden reproducir ni guardar como

parte de comandos guardados. Al realizar un movimiento de ese tipo, aparece una

línea negra en el panel Historial (si bien esa línea no es visible hasta que realice

otra acción). Para evitar movimientos que no pueden reproducirse, utilice las

teclas de ﬂecha en lugar del ratón para mover el punto de inserción dentro de la

ventana de documento. Para realizar o ampliar una selección, mantenga

presionada la tecla Mayús mientras presiona una tecla de ﬂecha.

Nota: Si aparece una línea negra que indica un movimiento del ratón mientras está

realizando una tarea y desea repetirla más tarde, puede deshacer este paso e intentarlo de

otra forma, quizá mediante la utilización de las teclas de flecha.

Hay otros pasos que tampoco pueden repetirse, como arrastrar un elemento a otro

lugar de la página. Al dar un paso de ese tipo, aparece un icono de comando de

menú con una pequeña X roja en el panel Historial.

Los pasos se reproducen exactamente tal y como se han realizado originalmente;

no puede modiﬁcar los pasos mientras los reproduce. Por ejemplo, si

anteriormente ha cambiado a rojo el color de la celda de una tabla y aplica ese paso

a otra celda de la tabla, también cambiará el color de dicha celda. Sin embargo, no

puede especiﬁcar un color distinto al aplicar el paso a una nueva celda.

Repetir pasos

Para repetir el último paso realizado, utilice el comando Edición > Repetir, o

utilice el método abreviado de teclado Control+Y (Windows) o Comando+Y

(Macintosh). El nombre de este comando cambia en el menú Edición para reﬂejar

el último paso que ha dado. Por ejemplo, si ha escrito texto, el nombre del

comando será Repetir Escritura. (No se puede utilizar el comando Repetir

inmediatamente después de una operación de deshacer o de rehacer.)

Para repetir pasos que no sean el más reciente o para repetir varios pasos al mismo

tiempo, utilice el panel Historial.

Observe que al reproducir pasos, los que se reproducen son los que están

seleccionados (resaltados), no necesariamente el que está señalado actualmente por

el dispositivo deslizante.

Configurar un documento 165

Para repetir un paso:

En el panel Historial, seleccione el paso y haga clic en el botón Reproducir. El paso

se reproducirá y aparecerá una copia suya en el panel Historial.

Para repetir una serie de pasos adyacentes:

1 Seleccione los pasos en el panel Historial mediante una de estas operaciones:

• Arrastre desde un paso hasta otro. (No arrastre el dispositivo deslizante, sino tan

sólo desde la etiqueta de texto de un paso hasta la etiqueta de texto de otro

paso.)

• Seleccione el primer paso y luego haga clic en el último paso mientras mantiene

presionada la tecla Mayús, o bien seleccione el último paso y luego haga clic en

el primer paso mientras mantiene presionada la tecla Mayús.

Nota: Aunque puede seleccionar una serie de pasos que incluyan una línea negra que

indica el movimiento del ratón, dicho movimiento del ratón se omitirá cuando se

reproduzcan los pasos.

2 Haga clic en Reproducir.

Los pasos se reproducirán en orden y aparecerá un nuevo paso en el panel

Historial con la etiqueta Reproducir pasos.

Para repetir pasos no adyacentes:

1 Seleccione un paso y, a continuación, haga clic en otros pasos mientras presiona

la tecla Control (Windows) o la tecla Comando (Macintosh).

También puede hacer clic mientras mantiene presionada la tecla Control o

Comando para anular la selección de un paso seleccionado.

2 Haga clic en Reproducir.

Los pasos seleccionados se reproducirán en orden y aparecerá un nuevo paso en

el panel Historial con la etiqueta Reproducir pasos.

Aplicar pasos a otro objeto

Puede aplicar una serie de pasos del panel Historial a cualquier objeto de la

ventana de documento.

Para aplicar los pasos del panel Historial a un objeto nuevo:

1 Seleccione el objeto.

2 Seleccione el paso o los pasos relevantes en el panel Historial y, a continuación,

haga clic en Reproducir.

Capítulo 5166

Aplicar pasos a múltiples objetos

Si selecciona múltiples objetos en un documento y, a continuación, les aplica

pasos desde el panel Historial, los objetos se considerarán como una única

selección a la que Dreamweaver intentará aplicar los pasos. Por ejemplo, no puede

seleccionar cinco imágenes y aplicar el mismo cambio de tamaño a cada una de

ellas a la vez; el cambio de tamaño es una operación que debe aplicarse a cada

imagen individual y no a una combinación colectiva de imágenes.

Para aplicar una serie de pasos a cada objeto de un conjunto de objetos,

compruebe que el último paso de la serie selecciona el siguiente objeto del

conjunto. El siguiente procedimiento demuestra este principio en un escenario

concreto: establecer el espaciado vertical y horizontal de una serie de imágenes:

Para establecer el espaciado vertical y horizontal de una serie de imágenes:

1 Comience con un documento en el que cada línea contenga una pequeña

imagen (por ejemplo, una viñeta gráﬁca o un icono) seguida de texto. El

objetivo es separar las imágenes del texto y de otras imágenes situadas por

encima y por debajo de ellas.

2 Seleccione la primera imagen.

3 En el inspector de propiedades, haga clic en el botón de ampliación (la ﬂecha

de la esquina inferior derecha) si es necesario para ver todas las propiedades de

la imagen.

4 Introduzca números en los cuadros de texto Espacio V y Espacio H para deﬁnir

el espaciado de la imagen.

5 Haga clic en la barra de título de la ventana de documento (en lugar de hacerlo

dentro de la ventana de documento) para que se encuentre activa la ventana de

documento sin mover el punto de inserción.

6 Presione la tecla Flecha izquierda para mover el punto de inserción a la

izquierda de la imagen. A continuación, presione la tecla Flecha abajo para

mover el punto de inserción una línea hacia abajo, dejándolo justo a la

izquierda de la segunda imagen de la serie. Seguidamente, presione

Mayús+Flecha derecha para seleccionar esa segunda imagen.

Nota: No seleccione la imagen haciendo clic en ella. De lo contrario, no podrá

reproducir todos los pasos.

Configurar un documento 167

Seleccione en el panel Historial los pasos correspondientes al cambio de

espaciado de la imagen y la selección de la imagen siguiente. Haga clic en el

botón Reproducir para reproducir esos pasos.

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

8 Siga haciendo clic en Reproducir hasta que haya establecido correctamente el

espaciado de todas las imágenes.

Para aplicar pasos a un objeto de otro documento, utilice el botón Copiar pasos.

Copiar y pegar pasos entre documentos

Todos los documentos abiertos tienen su propio historial de pasos. Puede copiar

los pasos de un documento y pegarlos en otro.

Nota: Copiar pasos (un botón del panel Historial) es diferente a Copiar (en el menú

Edición). No se puede utilizar Edición > Copiar para copiar pasos, aunque sí se utiliza

Edición > Pegar para pegarlos.

Al cerrar un documento se borra su historial. Si sabe que va a querer utilizar los

pasos de un documento después de cerrarlo, cópielos con Copiar pasos (o

guárdelos como un comando; consulte “Crear comandos nuevos a partir del

historial” en la página 168) antes de cerrar el documento.

Hay que tener cuidado al copiar pasos que incluyan los comandos Copiar o Pegar.

• No utilice Copiar pasos si uno de los pasos es un comando Copiar, ya que es

posible que no pueda pegar dichos pasos de la manera deseada.

• Si entre los pasos ﬁgura un comando Pegar, no podrá pegar dichos pasos a no

ser que los pasos también incluyan un comando Copiar antes del comando

Pegar.

Si pega pasos en un editor de texto o en la vista de Código o el inspector de

código, aparecerán como código JavaScript. Esta opción puede resultar útil para

aprender a escribir secuencias de comandos. Para obtener más información sobre

el uso de JavaScript en Dreamweaver, consulte “Ampliar Dreamweaver: principios

básicos” en la página 564.

Capítulo 5168

Para reutilizar los pasos de un documento en otro:

1 Comience desde el documento que contiene los pasos que desea reutilizar.

2 Seleccione los pasos del panel Historial.

3 Haga clic en el botón Copiar pasos del panel Historial para copiar dichos pasos.

4 Abra el otro documento.

5 Coloque el punto de inserción donde desee o seleccione un objeto para

aplicarle los pasos.

6 Elija Edición > Pegar para pegar los pasos.

Los pasos se reproducirán a medida que se peguen en el panel Historial del

documento. El panel Historial los muestra como un solo paso, denominado

Pegar pasos.

Crear comandos nuevos a partir del historial

Puede guardar un conjunto de pasos de historial como un comando con nombre y

acceder a él desde el menú Comandos.

Cree y guarde un comando si es posible que vaya a utilizar un conjunto

determinado de pasos en el futuro, especialmente si desea usar esos pasos la

próxima vez que inicie Dreamweaver. Los comandos guardados se conservan de

manera permanente (a menos que los borre), mientras que los comandos grabados

se borran al salir de Dreamweaver y las secuencias copiadas de los pasos se

eliminan al copiarlas en otro lugar.

Puede editar los nombres de comandos que ha colocado en el menú Comandos y

borrarlos del menú Comandos utilizando Comandos > Editar lista de comandos.

Es más complicado editar y borrar comandos incorporados en el menú Comandos

(es decir, que usted no ha añadido explícitamente); consulte “Personalizar menús

de Dreamweaver” en la página 545.

Para crear un comando:

1 Seleccione un paso o un conjunto de pasos en el panel Historial.

2 Haga clic en el botón Guardar como comando o elija Guardar como comando

en el menú contextual del panel Historial.

3 Introduzca un nombre para el comando y haga clic en Aceptar.

El comando aparecerá en el menú Comandos.

Nota: El comando se guardará como archivo JavaScript (o, en ocasiones, como un

archivo HTML) en la carpeta Dreamweaver/Configuration/Commands.

Configurar un documento 169

Para utilizar un comando guardado:

1 Seleccione un objeto al que aplicar el comando o coloque el punto de inserción

donde desee.

2 Elija el comando en el menú Comandos.

Para editar los nombres de comandos del menú Comandos.

1 Elija Comandos > Editar lista de comandos.

2 Seleccione un comando para cambiar su nombre e introduzca un nombre

nuevo.

3 Haga clic en Cerrar.

Para borrar un nombre del menú Comandos:

1 Elija Comandos > Editar lista de comandos.

2 Seleccione un comando.

3 Haga clic en Borrar y, seguidamente, en Cerrar.

Grabar comandos

Dreamweaver permite grabar un comando temporal para usarlo a corto plazo. La

diferencia principal entre este sistema y la reproducción de pasos desde el panel

Historial (consulte “Repetir pasos” en la página 164) consiste en lo siguiente:

• Los pasos se graban a medida que los ejecuta, por lo que no tiene que

seleccionarlos en el panel Historial antes de reproducirlos.

• Durante la grabación, Dreamweaver le impide realizar movimientos del ratón

que no se pueden grabar (como hacer clic para seleccionar algo en una ventana

o arrastrar un elemento de página a otra ubicación).

• Si cambia a otro documento mientras está grabando, Dreamweaver no grabará

los cambios realizados en el otro documento. Observe el puntero para

determinar si en un determinado momento está grabando o no.

Dreamweaver sólo conserva un comando grabado simultáneamente. En cuanto

comience a grabar otro, se perderá el antiguo. Para guardar un comando sin perder

otro grabado, guárdelo desde el panel Historial.

Una vez grabado un comando, puede guardarlo si lo desea utilizando el panel

Historial.

Capítulo 5170

Para grabar temporalmente una serie de pasos usados con frecuencia:

1 Elija Comandos > Iniciar grabación o presione Control+Mayús+X (Windows)

o Comando+Mayús+X (Macintosh).

El puntero cambiará para indicar que se está grabando un comando.

2 Cuando termine de grabar, elija Comandos > Detener grabación o presione

Control+Mayús+X (Windows) o Comando+Mayús+X (Macintosh).

Para reproducir un comando grabado:

Elija Comandos > Reproducir comando grabado o presione Control+P

(Windows) o Comando+P (Macintosh).

Para guardar un comando grabado:

1 Elija Comandos > Reproducir comando grabado para volver a ejecutar el

comando.

En la lista de pasos del panel Historial aparecerá un paso llamado Ejecutar

comando.

2 Seleccione el paso Ejecutar comando y haga clic en el botón Guardar como

comando.

3 Introduzca un nombre para el comando y haga clic en Aceptar.

El comando aparecerá en el menú Comandos.

171

CAPÍTULO 6

.............................................................................................................

Diseñar la disposición de páginas

La disposición de páginas es una parte fundamental del diseño Web. El término

disposición de páginas hace referencia a la apariencia de las páginas en el navegador,

es decir, a aspectos tales como la ubicación de los menús o las imágenes.

Macromedia Dreamweaver ofrece distintos métodos para crear y controlar la

disposición de las páginas Web.

Un método frecuente para diagramar una página consiste en utilizar tablas

HTML. Sin embargo, las tablas pueden resultar difíciles de utilizar, pues su

función original no era facilitar el diseño de las páginas Web, sino presentar datos

en forma tabular.

Para simpliﬁcar el uso de tablas en la disposición de páginas, Dreamweaver ofrece

la vista de Disposición. En ella puede diseñar una página utilizando tablas como

estructura subyacente al tiempo que evita las diﬁcultades tradicionales que plantea

el uso de tablas. Por ejemplo, puede dibujar fácilmente celdas de tablas en una

página y, a continuación, personalizarlas y colocarlas donde preﬁera. La

disposición puede tener un ancho ﬁjo u ocupar toda la ventana del navegador

(consulte “Conﬁgurar el ancho de la disposición” en la página 183).

También puede diagramar las páginas utilizando las tablas de la manera tradicional

(consulte “Utilizar tablas para presentar contenido” en la página 189) o utilizando

capas y convirtiéndolas en tablas (consulte “Usar tablas y capas para diseño” en la

página 443). Sin embargo, la vista de Disposición de Dreamweaver es la forma

más sencilla de preparar la disposición de una página.

Para utilizar la vista de Disposición, deberá salir de la vista Estándar de

Dreamweaver.

Capítulo 6172

Para cambiar a la vista de Disposición:

Elija Ver > Vista de tabla> Vista de disposición o haga clic en el botón Vista de

disposición del panel Objetos.

La opción Mostrar ﬁchas de tabla de disposición está activada automáticamente en

la vista de Disposición. Para desactivar las ﬁchas de tabla cuando se encuentra en la

vista de Disposición, elija Ver > Vista de tabla > Mostrar ﬁchas de tabla de

disposición.

Nota: Si crea una tabla en la vista Estándar de Dreamweaver y cambia a la vista de

Disposición, la tabla contendrá celdas de disposición vacías que quizá deba borrar antes

de crear nuevas celdas.

Celdas y tablas de disposición

Cuando cambia a la vista de Disposición, puede añadir celdas de disposición a la

página. Estas celdas le ayudarán a bloquear la disposición de la página. Por

ejemplo, puede dibujar una celda en la parte superior de la página para insertar un

menú, en la parte derecha para insertar submenús o en un lado para presentar

contenido. A la hora de diseñar la página, piense en términos de una cuadrícula de

ﬁlas y columnas.

Icono de vista de Disposición

Icono Dibujar celda de disposición

Icono Dibujar tabla de disposición

Diseñar la disposición de páginas 173

Cuando usted crea una celda de disposición en una página, Dreamweaver crea

automáticamente una tabla de disposición como contenedor de dicha celda. Una

celda de disposición no puede existir fuera de una tabla de disposición. Puede

diseñar la página utilizando varias celdas de disposición de una tabla de

disposición o utilizar múltiples tablas de disposición para conseguir una

disposición más avanzada.

El uso de múltiples tablas de disposición aísla secciones de la disposición para

evitar que se vean afectadas por otras. Resulta especialmente útil cuando el

contenido de una celda de disposición puede cambiar y hacer que aumente de

tamaño. A medida que la celda crece, afecta a las celdas próximas, ya que no se

pueden superponer. Si ha creado una disposición con múltiples tablas, las ﬁlas y

columnas de una tabla no afectarán a otras tablas.

También puede anidar tablas de disposición (insertando una tabla de disposición

en otra ya existente). Las celdas de una tabla anidada no están restringidas por las

ﬁlas y columnas de la tabla externa. Consulte “Dibujar una tabla de disposición

anidada” en la página 176.

Dibujar celdas y tablas de disposición

En la vista de Disposición puede dibujar celdas y tablas de disposición en la

página. Si crea una celda de disposición, se insertará automáticamente una tabla

de disposición que actuará como contenedor de dicha celda. Una celda de

disposición siempre se encontrará en una tabla de disposición.

Nota: La tabla de disposición que crea automáticamente Dreamweaver tiene el ancho de

la ventana de documento. Puede cambiar su tamaño o hacer que sea autoampliable si es

necesario.

Para dibujar una celda de disposición:

1 Sitúese en la vista de Disposición y, a continuación, haga clic en el botón

Dibujar celda de disposición en la categoría Disposición del panel Objetos. El

puntero del ratón se convertirá en un signo más (+).

2 Sitúe el puntero del ratón en la parte de la página donde desee que comience la

celda y, a continuación, arrastre para crear la celda de disposición. Para crear

varias celdas sin necesidad de hacer clic repetidamente en el botón de celda de

disposición, mantenga presionada la tecla Control (Windows) o Comando

(Macintosh).

La celda aparecerá en la página con un contorno azul. El azul es el color

predeterminado del contorno de las celdas de disposición (consulte “Conﬁgurar

las preferencias de la vista de Disposición” en la página 188 para cambiarlo). El

tamaño de cada celda se muestra en el área de encabezado de la columna, en la

parte superior de la celda. Para obtener más información sobre el ancho, consulte

“Conﬁgurar el ancho de la disposición” en la página 183.

Capítulo 6174

La disposición de la página utiliza una cuadrícula con columnas y ﬁlas, por lo que

las celdas pueden extenderse a lo largo de varias ﬁlas o columnas, pero nunca

superponerse. Dreamweaver ayuda a mantener esta estructura ajustando

automáticamente las nuevas celdas a las celdas existentes si se dibujan próximas

entre sí (a una distancia de ocho píxeles). Las celdas también se ajustarán

automáticamente a un lado de la página si se dibujan cerca del borde (a una

distancia de ocho píxeles). Para desactivar temporalmente el ajuste, mantenga

presionada la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra la

celda por la página.

Esto no signiﬁca que todas las celdas deban tener el mismo tamaño o ancho.

Puede haber celdas de distinto ancho en la misma columna o celdas de distinto

alto en la misma ﬁla.

Diseñar la disposición de páginas 175

Para dibujar una tabla de disposición:

1 Sitúese en la vista de Disposición y, a continuación, haga clic en el botón

Dibujar tabla de disposición en la categoría Disposición del panel Objetos. El

puntero del ratón se convertirá en un signo más (+).

2 Sitúe el puntero del ratón en la página y, a continuación, haga clic y arrastre el

ratón para crear la tabla de disposición. Si es la primera tabla que dibuja en la

página, se colocará automáticamente en la esquina superior izquierda de la

página.

Para crear varias tablas sin necesidad de hacer clic repetidamente en el botón de

tabla de disposición, mantenga presionada la tecla Control (Windows) o

Comando (Macintosh).

La tabla aparecerá en la página con un contorno verde. El verde es el color

predeterminado del contorno de las celdas de disposición (consulte “Conﬁgurar

las preferencias de la vista de Disposición” en la página 188 para cambiarlo).

También aparecerá una ﬁcha Tabla de disposición en la parte superior de cada

tabla dibujada, que le ayudará a distinguir y seleccionar la tabla. El tamaño de

cada tabla se muestra en el área de encabezado de la columna, en la parte superior

de la tabla.

Para obtener más información sobre el ancho, consulte “Conﬁgurar el ancho de la

disposición” en la página 183.

Las tablas no se pueden superponer. La disposición de la página utiliza una

cuadrícula con columnas y ﬁlas, por lo que las tablas pueden extenderse a lo largo

de varias ﬁlas o columnas, pero nunca pueden superponerse. Dreamweaver ayuda

a mantener esta estructura ajustando automáticamente las nuevas tablas a las

tablas o celdas existentes si se dibujan próximas entre sí (a una distancia de ocho

píxeles). Las tablas también se ajustarán automáticamente a un lado de la página si

se dibujan cerca del borde (a una distancia de ocho píxeles). Para desactivar el

ajuste, mantenga presionada la tecla Alt (Windows) u Opción (Macintosh)

mientras arrastra la tabla por la página.

Puede crear tablas de disposición en áreas vacías de la página, en una tabla de

disposición existente (anidadas) o alrededor de celdas y tablas de disposición

existentes. Cuando se crea una tabla de disposición en un documento en blanco,

ésta se ajusta automáticamente a la esquina superior izquierda de la ventana de

documento.

Nota: Si la página ya tiene contenido, sólo podrá dibujar la tabla de disposición debajo del

contenido.

Capítulo 6176

Para dibujar una tabla de disposición alrededor de tablas o celdas existentes:

1 Sitúese en la vista de Disposición y, a continuación, haga clic en el botón

Dibujar tabla de disposición en la categoría Disposición del panel Objetos. El

puntero del ratón se convertirá en un signo más (+).

2 Haga clic y arrastre el ratón alrededor de las celdas o tablas de disposición

existentes. La tabla de disposición abarcará las celdas o tablas existentes.

Dibujar una tabla de disposición anidada

Puede dibujar una tabla de disposición en una tabla de disposición existente. De

este modo, se creará una tabla anidada. Las celdas de una tabla anidada no están

restringidas por las ﬁlas y columnas de la tabla externa. Puede insertar múltiples

tablas anidadas.

Para dibujar una tabla anidada:

1 Haga clic en el botón Dibujar tabla de disposición en la categoría Disposición

del panel Objetos. El puntero del ratón se convertirá en un signo más (+).

2 Sitúe el puntero del ratón dentro del espacio gris de una tabla de disposición

existente y, a continuación, haga clic y arrastre el ratón para crear la tabla de

disposición anidada.

Una tabla de disposición anidada no puede ser mayor que la tabla que la contiene.

Diseñar la disposición de páginas 177

Utilizar la cuadrícula de Dreamweaver

Puede activar la cuadrícula de Dreamweaver para utilizarla como guía al dibujar la

disposición. También puede hacer que la disposición se ajuste automáticamente a

la cuadrícula y cambiar la cuadrícula o controlar el comportamiento de ajuste

especiﬁcando la conﬁguración de la cuadrícula.

Para mostrar u ocultar la cuadrícula en la ventana de documento:

Elija Ver > Cuadrícula > Mostrar cuadrícula o seleccione Cuadrícula en el menú

desplegable Opciones de la barra de herramientas.

Para cambiar la configuración de la cuadrícula:

1 Haga clic en Ver > Cuadrícula > Editar cuadrícula para abrir el cuadro de

diálogo Conﬁguración de cuadrícula.

2 Lleve a cabo una de estas operaciones:

• Haga clic en la ﬂecha situada junto a la muestra de color y seleccione un color

de la paleta o escriba el número hexadecimal en la celda. Este valor controlará el

color de las líneas de la cuadrícula.

• Seleccione Mostrar cuadrícula para ver la cuadrícula en la ventana de

documento.

• Seleccione Ajustar a cuadrícula para activar el ajuste.

• Escriba la cantidad de espaciado que desea y seleccione Píxeles, Pulgadas o

Centímetros en el menú emergente. Este valor controlará la separación entre las

líneas de la cuadrícula.

• Elija líneas o puntos para las líneas de la cuadrícula.

3 Haga clic en Aplicar para ver los cambios y, a continuación, haga clic en

Aceptar para cerrar el cuadro de diálogo.

Añadir contenido a una celda

En la vista de Disposición puede añadir texto, imágenes y otros elementos a las

celdas de disposición de la misma forma que en la presentación normal de

Dreamweaver (vista Estándar). Haga clic en la celda donde desee insertar

contenido y, a continuación, escriba el texto o inserte otros archivos.

Sólo se puede insertar contenido en celdas de disposición, por lo que deberá en

primer lugar crearlas (consulte “Dibujar celdas y tablas de disposición” en la

página 173). Los espacios grises de la página indican las áreas que no están

disponibles para añadir contenido a menos que inserte una celda de disposición en

ellas.

Capítulo 6178

La celda de disposición se amplía automáticamente cuando se añade material más

grande que ella. A medida que se amplía la celda, aumenta de tamaño la columna

en la que se encuentra la celda y, además, pueden verse afectadas las celdas

adyacentes.

Para añadir texto a una celda:

Haga clic en la celda de disposición donde desee añadir texto y lleve a cabo una de

estas operaciones:

• Escriba texto en la celda. La celda aumentará automáticamente de tamaño a

medida que escribe.

• Pegue el texto copiado de otro documento. Utilice el comando Pegar. Para

obtener más información, consulte “Insertar texto y objetos” en la página 244.

Para añadir una imagen a una celda:

1 Haga clic en la celda de disposición donde desee añadir la imagen.

2 Haga clic en el botón Insertar imagen del panel Objetos, elija Insertar > Imagen

o arrastre el botón Insertar imagen desde el panel Objetos hasta la página.

3 En el cuadro de diálogo Seleccionar imagen, seleccione un archivo de imagen.

Para obtener más información, consulte “Conﬁgurar propiedades de imágenes” en

la página 281.

Borrar el alto automático de las celdas

Después de insertar contenido en las celdas, puede borrar el alto de las celdas para

eliminar su conﬁguración. Dreamweaver crea automáticamente las celdas con un

alto especiﬁcado, pero una vez añadido el contenido a la celda, dejará de necesitar

el alto especiﬁcado.

Diseñar la disposición de páginas 179

Para borrar el alto, lleve a cabo una de estas operaciones:

• Seleccione Borrar alto de celda en el menú Encabezado de columna. Se borrará

el alto y es posible que se reduzca el tamaño de algunas ﬁlas.

• Seleccione una tabla de disposición (haga clic en la ﬁcha o el borde de la tabla)

y, a continuación, haga clic en el botón Borrar alto de ﬁla del inspector de

propiedades.

Mover y cambiar el tamaño de celdas y

tablas de disposición

Todas las celdas y tablas se pueden mover o cambiar de tamaño, lo que permite

ajustar fácilmente la disposición de la página. Para utilizar la cuadrícula de

Dreamweaver como guía para mover o cambiar el tamaño de celdas y tablas,

consulte “Utilizar la cuadrícula de Dreamweaver” en la página 177.

Para cambiar el tamaño de una celda:

1 Haga clic en el borde de la celda o mantenga presionada la tecla Control

(Windows) o Comando (Macintosh) y haga clic en cualquier punto de la celda.

Aparecerán manejadores de selección alrededor de la celda.

2 Utilice los manejadores de selección para arrastrar la celda hasta obtener el

tamaño deseado.

La celda se ajustará automáticamente a las celdas existentes (cuando se encuentre a

una distancia de ocho píxeles de sus bordes). Una celda de disposición no se puede

superponer a otras celdas y no se puede ajustar su tamaño fuera de los límites de su

tabla de disposición. Una celda de disposición siempre tendrá como mínimo el

tamaño de su contenido.

Capítulo 6180

Para mover una celda:

1 Haga clic en el borde de la celda.

2 Arrastre o utilice las teclas de ﬂecha para mover la celda hasta el lugar de la

página que desee. La tecla de ﬂecha la mueve de píxel en píxel; si mantiene

presionada la tecla Mayús, se moverá de 10 en 10 píxeles.

Para cambiar el tamaño de una tabla:

1 Haga clic en la ﬁcha de tabla.

Aparecerán manejadores de selección alrededor de la tabla de disposición.

2 Utilice los manejadores de selección para arrastrar la tabla hasta obtener el

tamaño deseado.

La tabla se ajustará automáticamente a las celdas y tablas existentes (cuando se

encuentre a una distancia de ocho píxeles de la celda existente). El tamaño de la

tabla de disposición no puede quedar por debajo del límite de las celdas que

contiene. La tabla tampoco puede superponerse a las tablas o celdas adyacentes.

Para mover una tabla:

1 Haga clic en la ﬁcha de tabla.

2 Arrastre o utilice las teclas de ﬂecha para mover la tabla hasta el lugar de la

página que desee. La tecla de ﬂecha la mueve de píxel en píxel; si mantiene

presionada la tecla Mayús, se moverá de 10 en 10 píxeles.

Aplicar formato a celdas y tablas de

disposición

Puede cambiar la apariencia de cualquier celda o tabla de disposición en el

inspector de propiedades.

Aplicar formato a una celda de disposición

Puede establecer la alineación de contenido, el ancho y el alto y los colores de

fondo en el inspector de propiedades.

Para aplicar formato a una celda de disposición en el inspector de propiedades:

1 Haga clic en el borde de la celda o mantenga presionada la tecla Control

(Windows) o Comando (Macintosh) y haga clic en cualquier punto de la celda.

Diseñar la disposición de páginas 181

Elija Ventana > Propiedades para abrir el inspector de propiedades.

3 Dispone de las siguientes opciones de apariencia:

• Para cambiar el ancho, elija Fijo y escriba un valor en píxeles en el cuadro, o

elija Autoampliar (consulte “Conﬁgurar el ancho de la disposición” en la

página 183).

• Para cambiar el alto, especiﬁque un valor en píxeles en el cuadro de texto.

• Para establecer un color de fondo para la celda de disposición, elija un color en

el selector de colores desplegable o escriba el código hexadecimal del color

deseado en el cuadro de texto.

• Para establecer la alineación horizontal, selecciónela en el menú emergente

Horiz. Puede establecer la alineación del contenido de la celda de disposición

como Izquierda, Centro, Derecho o Predeterminado.

• Para establecer la alineación vertical, selecciónela en el menú emergente Vert.

Puede establecer la alineación del contenido de la celda de disposición como

Superior, Medio, Inferior, Línea de base o Predeterminado.

• Seleccione No aj. para evitar que se ajuste el texto. Si selecciona esta opción, la

celda de disposición se ampliará para dar cabida a todo el contenido sin pasar a

una nueva línea.

Aplicar formato a tablas de disposición

Puede deﬁnir el ancho, alto, relleno, espaciado, etc. en el inspector de

propiedades.

Para aplicar formato a una tabla de disposición:

1 Haga clic en la ﬁcha o el borde de la tabla.

2 Elija Ventana > Propiedades para abrir el inspector de propiedades.

3 Dispone de las siguientes opciones de apariencia:

• Para cambiar el ancho, elija Fijo y escriba un valor en píxeles en el cuadro o elija

Autoampliar (consulte “Conﬁgurar el ancho de la disposición” en la

página 183).

• Para cambiar el alto, especiﬁque un valor en píxeles en el campo de texto.

Capítulo 6182

• Para establecer el relleno de celdas, especiﬁque el número de píxeles en el

campo Rell. celda. El relleno de celdas es la cantidad de espacio que habrá entre

el contenido de una celda de disposición y el límite de la misma. Si establece

este valor por encima de 0, todas las celdas de la tabla de disposición que ha

seleccionado tendrán este espaciado. Si aparecen dos números en el área de

encabezado de la columna, utilice la opción Igualar ancho.

• Para establecer el espaciado de celdas, especiﬁque el número de píxeles en el

campo Esp. celda. El espaciado de celdas es la cantidad de espacio que habrá

entre cada celda de disposición. Si establece este valor por encima de 0, todas las

celdas de disposición de la tabla que ha seleccionado tendrán este espaciado. Si

aparecen dos números en el área de encabezado de la columna, utilice la opción

Igualar ancho.

• Para borrar los valores de alto de todas las celdas de la tabla de disposición que

ha seleccionado, haga clic en el botón Borrar atributos de alto. Si no hay

elementos en la tabla, ésta se contraerá completamente.

• Si hay celdas de ancho ﬁjo, haga clic en el botón Igualar ancho. De este modo

se restablecerá automáticamente el ancho HTML de cada celda para que

coincida con el contenido de la celda. Por ejemplo, si deﬁne el ancho en 200

píxeles y, a continuación, añade contenido que amplía el ancho a 250,

aparecerán estos dos números en la barra superior de la tabla: 250 entre

comillas y 200 entre paréntesis. Si hace clic en Igualar ancho, desaparecerá el

valor de 200 píxeles y se mantendrá el de 250.

• Para eliminar las imágenes de espaciador (imágenes transparentes que se

utilizan para controlar el espaciado de la disposición) en la tabla de disposición,

haga clic en el botón Quitar todos los espaciadores. (Para obtener más

información, consulte “Utilizar las imágenes de espaciador” en la página 186.)

• Si la tabla de disposición seleccionada está anidada dentro de otra tabla de

disposición, haga clic en Desanidar para eliminar la tabla anidada sin perder su

contenido. La tabla de disposición desaparecerá y las celdas de disposición y su

contenido pasarán a formar parte de la tabla principal.

Diseñar la disposición de páginas 183

Configurar el ancho de la disposición

En la vista de Disposición puede utilizar dos tipos de anchos: ﬁjo y autoampliable.

El ancho aparece en el área de encabezado de la columna, en la parte superior de

cada columna. El ancho ﬁjo es un número especíﬁco, como 300 píxeles, y se

muestra como un número. La opción Autoampliar conﬁgura el ancho para que

cambie automáticamente según el tamaño de la ventana y se muestre como una

línea ondulada. Con esta opción, la disposición siempre llena la ventana del

navegador, independientemente del tamaño de ventana que haya establecido el

usuario. Si bien el ancho ﬁjo es la opción predeterminada, generalmente

establecerá algunas celdas o tablas de disposición con ancho ﬁjo y una con ancho

autoampliable. La conﬁguración elegida afectará a todas las celdas o tablas de esa

columna. En una disposición sólo se puede deﬁnir una columna como

autoampliable.

Capítulo 6184

Por ejemplo, supongamos que la disposición tiene una barra de menú en la parte

izquierda de la página, el título en la parte superior y el área de contenido

principal en la parte derecha. Puede deﬁnir la columna izquierda con ancho ﬁjo y

el área de contenido principal con ancho autoampliable.

Diseñar la disposición de páginas 185

Para definir un ancho autoampliable, lleve a cabo una de estas operaciones:

• Acceda a la parte superior de la columna que desea deﬁnir como autoampliable

y seleccione Hacer que la columna sea autoampliable en el menú Encabezado

de columna. Sólo se puede deﬁnir una columna como autoampliable.

• Seleccione la columna y, a continuación, haga clic en Autoampliar en el

inspector de propiedades.

Cuando usted deﬁne una columna como autoampliable, Dreamweaver inserta

imágenes de espaciador en las columnas de ancho ﬁjo para controlar la

disposición. Una imagen de espaciador es una imagen transparente que no es

visible en la ventana del navegador, pero que se utiliza para controlar el espaciado.

Consulte “Utilizar las imágenes de espaciador” en la página 186 para obtener más

información.

Para definir un ancho fijo, lleve a cabo una de estas operaciones:

• Acceda a la parte superior de la columna que desea deﬁnir como ﬁja y

seleccione Hacer que la columna tenga ancho ﬁjo en el menú Encabezado de

columna.

Hacer que la columna tenga ancho ﬁjo establece automáticamente el ancho de

la columna para que coincida con el ancho del contenido de esa columna.

• En el inspector de propiedades, haga clic en Fijo y escriba un valor numérico.

Si introduce un valor numérico menor que el ancho del contenido,

Dreamweaver establecerá automáticamente el ancho con el tamaño de píxeles

correcto.

Algunas veces aparecen dos números en el menú Encabezado de columna: el

ancho real de la columna y el ancho que aparece en el código HTML. Esto

deberse a varias razones, por ejemplo, a que ha insertado contenido más amplio

que el ancho dibujado o especiﬁcado. Conviene que el ancho sea igual para que

sólo aparezca un número.

Para igualar el ancho (de modo que sólo se especifique el ancho real):

Seleccione Igualar ancho de celdas en el menú Encabezado de columna.

Capítulo 6186

Utilizar las imágenes de espaciador

Una imagen de espaciador es una imagen transparente que no es visible en la

ventana del navegador, pero que se utiliza para controlar el espaciado en tablas

autoampliables. La imagen de espaciador mantiene el ancho establecido para cada

tabla y celda de la página. Si decide no utilizar imágenes de espaciador en tablas

autoampliables, las columnas cambiarán de tamaño o incluso desaparecerán por

completo si no tienen contenido.

Puede insertar y eliminar imágenes de espaciador en cada columna o dejar que

Dreamweaver las añada automáticamente al crear una columna autoampliable. Las

columnas que contienen imágenes de espaciador presentan una barra doble en la

parte superior.

Al insertar una imagen de espaciador en una columna o al deﬁnir una columna

autoampliable, aparece un cuadro de diálogo para que conﬁgure el archivo de

imagen de espaciador. Si ya ha deﬁnido una imagen de espaciador para el sitio en

las preferencias de Dreamweaver, no aparecerá este cuadro de diálogo. Consulte

“Conﬁgurar las preferencias de la vista de Disposición” en la página 188.

Para configurar la imagen de espaciador:

1 Deﬁna una columna como autoampliable o elija Agregar imagen de espaciador

en el menú Encabezado de columna.

2 En el cuadro de diálogo que aparece dispone de las siguientes opciones:

• Indicar a Dreamweaver dónde crear el archivo de imagen de espaciador: Si

selecciona esta opción y hace clic en Aceptar, aparecerá otro cuadro de diálogo

que le permitirá acceder al directorio del sitio donde desee almacenar el archivo

de imagen de espaciador, por ejemplo, una carpeta de imágenes. Ésta es la

opción recomendada.

• Acceder a archivo de imagen de espaciador existente: Si ya ha creado un archivo

de imagen de espaciador para el sitio, elija esta opción y, a continuación, acceda

a la imagen de espaciador en el cuadro de diálogo que aparece. La imagen de

espaciador deberá ser un GIF transparente de 1 x 1 píxel.

Diseñar la disposición de páginas 187

• Desactivar imágenes de espaciador para columnas autoampliables: Si selecciona

esta opción, aparecerá un cuadro de diálogo que le advertirá que las otras

columnas de disposición pueden adoptar un ancho pequeño. Si opta por no

utilizar imágenes de espaciador, el ancho de las columnas será tan pequeño

como su contenido. Las columnas sin contenido desaparecerán. Las imágenes

de espaciador ayudan a mantener la estructura de la disposición tal como se

trazó originalmente.

Puede insertar y eliminar imágenes de espaciador en columnas especíﬁcas o

eliminar todas las imágenes de espaciador de la página.

Para insertar una imagen de espaciador en una columna:

Seleccione Agregar imagen de espaciador en el menú Encabezado de columna. La

imagen de espaciador se insertará en la columna. La imagen no se verá, pero es

posible que la columna se desplace ligeramente y aparezca una barra doble en la

parte superior.

Para eliminar una imagen de espaciador de una columna:

Seleccione Quitar imagen de espaciador en el menú Encabezado de columna. La

imagen de espaciador desaparecerá y es posible que la columna se desplace.

Para eliminar todas las imágenes de espaciador de la página:

Seleccione Quitar todas las imágenes de espaciador en el menú Encabezado de

columna o haga clic en el botón Quitar todos los espaciadores en el inspector de

propiedades de la tabla de disposición. La disposición puede cambiar ligera o

espectacularmente, según el contenido. Si no hay contenido en algunas columnas,

éstas pueden desaparecer por completo.

Capítulo 6188

Configurar las preferencias de la vista de

Disposición

Utilice la categoría Vista de Disposición de Preferencias para establecer o

modiﬁcar la ubicación y los archivos de imagen de espaciador, así como los colores

que utiliza la vista de Disposición para dibujar las tablas y celdas, etc.

Para abrir las preferencias de la vista de Disposición:

Elija Edición > Preferencias y, a continuación, seleccione Vista de disposición en la

lista de categorías.

Autoinsertar espaciadores especiﬁca si Dreamweaver deberá insertar

automáticamente imágenes de espaciador cuando se deﬁna una columna como

autoampliable.

Imagen de espaciador establece el archivo de imagen de espaciador para los sitios.

Elija un sitio en el menú desplegable y, a continuación, cree una nueva imagen de

espaciador o acceda a una ya existente en ese sitio.

Contorno de celda establece el color empleado para dibujar el contorno de celda.

Resalto de celda establece el color que resalta la celda cuando se mueve el cursor

sobre ella o se selecciona.

Contorno de tabla establece el color empleado para dibujar el contorno de tabla.

Fondo de tabla establece el color de fondo de la ventana de documento.

189

CAPÍTULO 7

.............................................................................................................

Utilizar tablas para presentar contenido

Las tablas son una herramienta extremadamente potente para presentar datos e

imágenes en páginas HTML. Las tablas proporcionan a los diseñadores Web

formas de añadir estructura vertical y horizontal a una página.

Las tablas constan de tres componentes básicos:

• Filas (espacio horizontal)

• Columnas (espacio vertical)

• Celdas (los contenedores que se originan en las intersecciones de las ﬁlas y las

columnas).

Utilice las tablas para presentar datos tabulares, diseñar columnas en una página o

disponer texto o gráﬁcos en una página Web. Una vez creada una tabla, podrá

modiﬁcar fácilmente tanto su apariencia como su estructura. Podrá añadir

contenido; añadir, eliminar, dividir y combinar ﬁlas y columnas; modiﬁcar las

propiedades de tabla, de ﬁlas o de celdas para añadir color y alineaciones, así como

copiar y pegar celdas.

Capítulo 7190

Nota: Se recomienda utilizar la vista de Disposición para diseñar páginas (consulte

“Diseñar la disposición de páginas” en la página 171). La vista de Disposición permite

aplicar fácilmente el diseño a las páginas utilizando tablas como estructura subyacente.

Utilice tablas en Dreamweaver para añadir datos tabulares a la página.

Insertar una tabla

Utilice el panel Objetos o el menú Insertar para crear una tabla.

Para insertar una tabla:

1 Lleve a cabo una de estas operaciones:

• Sitúe el punto de inserción en el lugar de la ventana de documento donde desea

que aparezca la tabla y haga clic en el botón Tabla de la categoría Común, en el

panel Objetos, o elija Insertar > Tabla.

• Arrastre el botón Tabla desde el panel Objetos hasta la posición deseada de

la página.

Aparecerá el cuadro de diálogo Insertar tabla.

2 Acepte los valores actuales de este cuadro de diálogo o escriba otros nuevos.

Nota: El cuadro de diálogo Insertar tabla mantiene los valores de la configuración más

reciente introducida para una tabla.

• En el campo Filas, especiﬁque el número de ﬁlas de la tabla.

• En el campo Columnas, especiﬁque el número de columnas de la tabla.

• En el campo Relleno celda, especiﬁque el número de píxeles que habrá entre el

contenido de la celda y el límite de ésta. El valor predeterminado de relleno es 1

píxel. Introduzca 0 para especiﬁcar que no desea relleno.

• En el campo Espacio celda, especiﬁque el número de píxeles que debe haber

entre las celdas de la tabla. El valor predeterminado es 2 píxeles. Introduzca 0

para especiﬁcar que no desea espaciado.

Utilizar tablas para presentar contenido 191

• En el campo Ancho, especiﬁque el ancho de la tabla como un número de

píxeles o como porcentaje de la ventana del navegador.

• En el campo Borde, especiﬁque el ancho en píxeles del borde de la tabla.

Introduzca 0 si no desea que la tabla tenga borde.

3 Haga clic en Aceptar para crear la tabla.

Si desea insertar una tabla sin especiﬁcar previamente estas opciones, desactive la

opción Mostrar diálogo al insertar objetos en las preferencias generales. Consulte

“Deﬁnir preferencias” en la página 89.

Añadir contenido a una celda de una tabla

Puede añadir texto e imágenes a las celdas de una tabla.

Para añadir texto a una tabla:

1 Haga clic en una celda en la que desee añadir texto y lleve a cabo una de estas

operaciones:

• Escriba el texto en la tabla. Las celdas de la tabla aumentarán de tamaño

automáticamente a medida que escriba.

• Pegue el texto copiado de otro documento. Consulte “Insertar texto y objetos”

en la página 244.

2 Presione la tecla Tab para pasar a la celda siguiente o presione Mayús+Tab para

volver a la celda anterior. Si presiona la tecla Tab en la última celda de una tabla

se añadirá otra ﬁla a la tabla de manera automática.

También puede usar las teclas de ﬂecha para moverse entre las celdas.

Capítulo 7192

Para añadir una imagen a una tabla:

1 Haga clic en la celda en la que desea añadir la imagen.

2 Haga clic en el botón Insertar imagen de la categoría Común, en el panel

Objetos, o elija Insertar > Imagen.

3 En el cuadro de diálogo Seleccionar origen de imagen, seleccione un archivo de

imagen.

Para obtener información sobre la conﬁguración de las propiedades de imágenes,

consulte “Conﬁgurar propiedades de imágenes” en la página 281.

Importar datos de una tabla

Los datos creados en otra aplicación (como Microsoft Excel) y guardados en un

formato delimitado (separado por tabuladores, comas, dos puntos, puntos y

comas u otros delimitadores) se pueden importar a Dreamweaver y aplicarles

formato de tabla.

Para importar datos de una tabla:

1 Lleve a cabo una de estas operaciones:

• Elija Archivo > Importar > Importar datos de tabla.

• Elija Insertar > Datos de tabla.

Aparecerá el cuadro de diálogo Importar datos de tabla o Insertar datos

tabulares, en función de la opción elegida. Salvo el título, estos dos cuadros de

diálogo son idénticos.

2 En el campo Archivo de datos, introduzca el nombre del archivo que desea

importar.

Utilizar tablas para presentar contenido 193

En el menú desplegable Delimitador, seleccione el formato de delimitador que

corresponda al formato del documento que va a importar.

Si selecciona Otro, aparecerá un campo a la derecha del menú desplegable.

Introduzca el delimitador utilizado para separar los datos de la tabla.

Nota: Si no selecciona (o especifica) el delimitador utilizado cuando se guardó el

archivo, éste no se importará correctamente y los datos de la tabla tendrán un formato

incorrecto. No aparecerá ningún error ni ningún mensaje de advertencia para indicarle

que existe un problema.

4 En Ancho de tabla, seleccione una de las siguientes opciones:

• Seleccione Ajustar a los datos para crear una tabla que se ajuste al texto más

largo de cada columna de la tabla.

• Seleccione Deﬁnir para especiﬁcar un ancho de tabla como porcentaje de la

ventana del navegador o como un número de píxeles.

5 Seleccione las opciones de formato de la tabla:

• En el campo Relleno celda, especiﬁque el número de píxeles que habrá entre el

contenido de la celda y el límite de ésta.

• En el campo Espacio celda, especiﬁque el número de píxeles que debe haber

entre las celdas de la tabla.

• En el campo Formatear primera ﬁla, seleccione una de las cuatro opciones de

formato posibles: Sin formato, Negrita, Cursiva o Negrita cursiva.

• En el campo Borde, especiﬁque el ancho en píxeles del borde de la tabla.

Introduzca 0 si no desea que la tabla tenga borde.

6 Haga clic en Aceptar.

Capítulo 7194

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, puede llevar a cabo las siguientes operaciones:

• Modiﬁcar la apariencia de las celdas seleccionadas o del texto que contienen.

Consulte “Aplicar formato a tablas y celdas” en la página 196.

• Copiar y pegar celdas contiguas. Consulte “Copiar y pegar celdas” en la

página 206.

También puede seleccionar múltiples celdas no contiguas de una tabla y modiﬁcar

las propiedades de dichas celdas. No se pueden copiar ni pegar selecciones de

celdas no contiguas.

Para seleccionar toda la tabla, lleve a cabo una de estas operaciones:

• Haga clic en la esquina superior izquierda de la tabla o en cualquier punto del

borde derecho o inferior.

• Haga clic en la tabla y elija Modiﬁcar > Tabla > Seleccionar tabla.

• Haga clic en la tabla y elija Edición > Seleccionar todo.

• Sitúe el punto de inserción en cualquier lugar dentro de la tabla y seleccione la

etiqueta <table> en el selector de etiquetas situado en la esquina inferior

izquierda de la ventana de documento.

Aparecerán manejadores de selección alrededor de la tabla cuando ésta esté

seleccionada.

Utilizar tablas para presentar contenido 195

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

• Sitúe el punto de inserción en el margen izquierdo de una ﬁla o en la parte

superior de una columna. Haga clic cuando aparezca la ﬂecha de selección.

• 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 continuación, presione la tecla Mayús y haga clic en

otra celda. Todas las celdas de la región rectangular quedarán seleccionadas.

Para seleccionar un conjunto de celdas no contiguas, lleve a cabo una de estas

operaciones:

• Presione la tecla Control (Windows) o Comando (Macintosh) y haga clic en la

tabla para añadir celdas, ﬁlas o columnas a la selección.

• Seleccione varias celdas de la tabla y, a continuación, presione la tecla Control

(Windows) o Comando (Macintosh) y haga clic en las celdas, ﬁlas o columnas

para desactivar la selección de celdas individuales.

Capítulo 7196

Aplicar formato a tablas y celdas

Puede cambiar la apariencia de una tabla conﬁgurando las propiedades de la tabla

y de sus celdas o aplicándole un diseño predeﬁnido. Consulte “Conﬁgurar

propiedades de tablas” en la página 197, “Conﬁgurar propiedades de columnas,

ﬁlas y celdas” en la página 198 y “Utilizar un esquema de diseño para aplicar

formato a una tabla” en la página 200.

Para aplicar formato al texto de la tabla, puede aplicar un formato al texto

seleccionado o utilizar estilos. Consulte “Insertar y aplicar formato a texto” en la

página 243.

Etiquetas de tablas

A la hora de aplicar formato a tablas en la ventana de documento, puede deﬁnir

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 tipo de

alineación, se deﬁne de una forma para toda la tabla y de otra para celdas

individuales de la misma, resulta útil comprender cómo Dreamweaver interpreta

el código HTML.

Cuando se deﬁne 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 especiﬁca un color de fondo azul para una

sola celda y, a continuación, 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.

<tr>

</tr>

</table>

Utilizar tablas para presentar contenido 197

Configurar propiedades de tablas

El inspector de propiedades muestra las propiedades de tabla cuando hay una tabla

seleccionada.

También puede utilizar el comando Formatear tabla para aplicar rápidamente un

diseño predeﬁnido a la tabla seleccionada. Consulte “Utilizar un esquema de

diseño para aplicar formato a una tabla” en la página 200.

Para especificar las propiedades de una tabla:

1 Seleccione la tabla.

2 Elija Ventana > Propiedades para abrir el inspector de propiedades. Haga clic en

la ﬂecha de ampliación, situada en la esquina inferior derecha, para ver todas las

propiedades.

Para asignar un nombre a la tabla:

• En el campo Tabla, introduzca un nombre para la tabla.

Para seleccionar opciones de disposición de tabla:

• En los campos Filas y Cols, especiﬁque el número de ﬁlas y columnas de

la tabla.

• En los campos An y Al, especiﬁque el ancho y el alto de la tabla como un

número de píxeles o como porcentaje de la ventana del navegador.

Normalmente no es preciso especiﬁcar el alto de una tabla.

• Utilice el campo Alinear para especiﬁcar cómo debe alinearse una tabla con

otros elementos del mismo párrafo, como pueden ser texto o imágenes.

Izquierda alinea la tabla a la izquierda de otros elementos, Derecha alinea la

tabla a la derecha de otros elementos y Centro centra la tabla. Puede alinear la

tabla a la izquierda, a la derecha o al centro en relación con otros elementos.

También puede elegir la alineación predeterminada del navegador.

• Utilice los botones Borrar alto de ﬁla y Borrar ancho de columna para borrar

todos los valores de alto de ﬁla y ancho de columna de la tabla.

• Utilice el botón Convertir ancho de tabla a píxeles para convertir el ancho de la

tabla expresada en forma de porcentaje de la ventana del navegador a su ancho

actual expresado en píxeles.

• Utilice el botón Convertir ancho de tabla a porcentaje para convertir el ancho

de la tabla expresado en píxeles a un porcentaje de la ventana del navegador.

Capítulo 7198

Para establecer el relleno y el espaciado de las celdas dispone de las siguientes

opciones:

• En el campo Rell. celda, especiﬁque el número de píxeles que habrá entre el

contenido de la celda y el límite de ésta.

• En el campo Esp. celda, especiﬁque el número de píxeles que debe haber entre

las celdas de la tabla.

Cuando no se asignan valores especíﬁcos 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.

Para establecer los bordes de la tabla dispone de las siguientes opciones:

• En el campo Borde, especiﬁque el ancho del borde de la tabla en píxeles. La

mayoría de los navegadores muestran el borde como una línea tridimensional.

Si utiliza la tabla para la disposición de la página, especiﬁque 0 como valor de

borde. Para ver los límites de celda y tabla cuando el borde está deﬁnido como

0, elija Ver > Ayudas visuales > Bordes de tabla.

• Utilice el campo Col. borde para seleccionar un color de borde para toda la

tabla.

• Utilice las opciones Color fondo para establecer la imagen de fondo o el color

de fondo de la tabla.

• Utilice el campo Im. fondo para establecer la imagen de fondo de la tabla.

Configurar propiedades de columnas, filas y celdas

Seleccione cualquier combinación de celdas y, a continuación, 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 página 194. Para aplicar formato a toda la tabla, consulte “Conﬁgurar

propiedades de tablas” en la página 197.

Para aplicar formato a una fila, una columna o una celda:

1 Seleccione cualquier combinación de celdas de la tabla.

2 Elija Ventana > Propiedades para abrir el inspector de propiedades y haga clic

en la ﬂecha de ampliación que se encuentra en la esquina inferior derecha para

ver todas las propiedades.

Utilizar tablas para presentar contenido 199

Dispone de las siguientes opciones de apariencia:

• Utilice el menú emergente Horiz para conﬁgurar la alineación horizontal del

contenido de una celda, una columna o una ﬁla. Puede alinear el contenido a la

izquierda, a la derecha o al centro, o bien con el valor predeterminado del

navegador (generalmente a la izquierda para celdas normales y centro para

celdas de encabezado).

• Utilice el menú emergente Vert para conﬁgurar la alineación vertical del

contenido de una celda, una columna o una ﬁla. Puede alinear el contenido con

la parte superior, media, inferior, con la línea de base o con el valor

predeterminado del navegador (generalmente alineación al medio).

• En los campos An y Al, especiﬁque en píxeles el ancho y el alto de las celdas

seleccionadas. Para usar porcentajes, introduzca el símbolo de porcentaje (%)

tras el valor.

• Para deﬁnir una imagen de fondo para una celda, columna o ﬁla, utilice el

campo Fnd. Haga clic en el icono de carpeta para localizar una imagen.

También puede escribir la ruta de la imagen o utilizar el icono de señalización.

• Para deﬁnir el color de fondo para una celda, columna o ﬁla, utilice el campo

Fnd. Puede utilizar el selector de colores o escribir el código hexadecimal

correspondiente al color deseado.

• Para establecer un color de borde para las celdas, utilice la opción Borde.

4 Dispone de las siguientes opciones de disposición:

• Haga clic en el botón Combinar celdas para combinar las celdas, ﬁlas o

columnas seleccionadas y crear una celda. Consulte “Dividir y combinar celdas”

en la página 204.

• Haga clic en el botón Dividir celda para dividir una celda y convertirla en dos

celdas. Consulte “Dividir y combinar celdas” en la página 204.

• Seleccione No aj. para evitar que se ajuste el texto. Esto hace que las celdas sean

más anchas para dar cabida a todos los datos conforme los escribe o los pega en

una celda. (Generalmente, las celdas se amplían en horizontal para dar cabida a

la palabra más larga y, a continuación, se amplían en vertical.)

• Seleccione Encab. para aplicar formato de encabezado de tabla a las celdas o

ﬁlas seleccionadas. El contenido de las celdas de encabezado de la tabla aparece

en negrita y centrado de forma predeterminada.

Capítulo 7200

Utilizar un esquema de diseño para aplicar formato a una

tabla

Utilice el comando Formatear tabla para aplicar rápidamente un diseño

predeﬁnido a la tabla. Seguidamente, podrá seleccionar opciones para personalizar

más el diseño.

Para utilizar un diseño predefinido:

1 Seleccione la tabla y elija Comandos > Formatear tabla.

2 En el cuadro de diálogo que aparece, elija un esquema de diseño en la lista de la

izquierda. La tabla se actualizará para presentar una muestra del diseño.

3 Para personalizar el diseño, realice cambios en las opciones Colores de las ﬁlas,

Primera ﬁla y Col. izquierda.

4 Para modiﬁcar el ancho del borde, introduzca un valor en el campo Borde.

Introduzca 0 si no desea que la tabla tenga borde.

5 Para aplicar el diseño a las celdas de la tabla (etiquetas td) en lugar de a las ﬁlas

(etiquetas tr), seleccione la opción Aplicar atributos a etiquetas TD, no a

etiquetas TR.

El formato de las celdas de la tabla anulará el formato especiﬁcado para la ﬁla en

la que se encuentra la celda. Sin embargo, si desea que todas las celdas de la ﬁla

se formateen de la misma manera, le conviene aplicar formato a la ﬁla de la

tabla en lugar de cada una de las celdas. De este modo obtendrá un código

HTML más limpio y conciso. Consulte “Aplicar formato a tablas y celdas” en la

página 196.

6 Haga clic en Aplicar o en Aceptar para dar formato a la tabla con el diseño

seleccionado.

Utilizar tablas para presentar contenido 201

Cambiar el tamaño de tablas y celdas

Puede cambiar el tamaño de una tabla completa o de ﬁlas y columnas

individuales. Al cambiar el tamaño de toda la tabla, todas sus celdas cambiarán

proporcionalmente.

Para cambiar el tamaño de la tabla:

1 Seleccione la tabla.

2 Arrastre uno de los manejadores de selección para cambiar el tamaño de la tabla

en esa dimensión. Al arrastrar el manejador de la esquina se cambian ambas

dimensiones.

Para cambiar el tamaño de una fila o una columna, lleve a cabo una de estas

operaciones:

• Para cambiar el alto de la ﬁla, arrastre el borde inferior de la ﬁla.

• Para cambiar el ancho de la columna, arrastre el borde derecho de la columna.

Cambiar el ancho de una columna

El inspector de propiedades permite especiﬁcar el ancho de una columna de tres

formas distintas.

Para establecer el ancho de la columna:

1 Haga clic en una de las celdas de la columna o seleccione la columna.

2 Elija Ventana > Propiedades para abrir el inspector de propiedades.

3 En el campo An, lleve a cabo una de estas operaciones:

• Introduzca un número para establecer el ancho de la columna de acuerdo con el

valor especiﬁcado en píxeles.

• Introduzca un número seguido de un símbolo de porcentaje (%) para establecer

la columna como porcentaje del ancho de la tabla.

• Deje el campo en blanco (predeterminado) para permitir que el navegador y

Dreamweaver determinen el ancho adecuado de acuerdo con el contenido de la

celda y del ancho de las otras columnas. Generalmente se asigna espacio de

acuerdo con la línea más larga o la imagen más ancha. Por esta razón algunas

veces una columna resulta mucho más grande que otras columnas de la tabla

cuando se le añade contenido.

Capítulo 7202

Restablecer el ancho y el alto

La forma más sencilla de establecer el ancho de una columna y el alto de una ﬁla

consiste en arrastrar los bordes de la tabla. Al arrastrar el borde de una columna o

una ﬁla se establecen automáticamente valores especíﬁcos para todas las columnas

o ﬁlas, en píxeles o como porcentaje de las dimensiones actuales de la tabla, según

se haya especiﬁcado el ancho de la tabla.

Si no consigue el resultado deseado arrastrando los bordes de la tabla, puede borrar

el ancho de la columna y volver a empezar.

Para cambiar el ancho y el alto, lleve a cabo una de estas operaciones:

• Seleccione la tabla, elija Modiﬁcar > Tabla, y seleccione Borrar alto de celda o

Borrar ancho de celda.

• Cambie a la vista de Código (o al inspector de código) y cambie directamente el

ancho y el alto en el código HTML.

• En el inspector de propiedades, introduzca los valores especíﬁcos de ancho y

alto en los cuadros An y Al.

Añadir y eliminar filas y columnas

Utilice los comandos del submenú Modiﬁcar > Tabla o los comandos del menú

contextual para añadir y eliminar ﬁlas y columnas de una tabla.

Para añadir filas o columnas:

1 Haga clic en una celda donde desea que aparezca la nueva ﬁla o columna.

2 Lleve a cabo una de estas operaciones:

• Para añadir una ﬁla, elija Modiﬁcar > Tabla > Insertar ﬁla o elija Tabla > Insertar

ﬁla en el menú contextual.

• Para añadir una columna, elija Modiﬁcar > Tabla > Insertar columna o elija

Tabla > Insertar columna en el menú contextual.

• Para añadir ﬁlas y columnas, elija Modiﬁcar > Tabla > Insertar ﬁlas o columnas,

o elija Tabla > Insertar ﬁlas o columnas en el menú contextual.

3 En el cuadro de diálogo que aparece a continuación, introduzca el número de

ﬁlas o columnas que desea añadir y especiﬁque si las nuevas ﬁlas o columnas

deben aparecer antes o después de la ﬁla o columna seleccionada.

4 Haga clic en Aceptar.

Utilizar tablas para presentar contenido 203

Para eliminar una fila o una columna:

1 Haga clic en una celda de la ﬁla o la columna que desea eliminar.

2 Elija una de las siguientes opciones:

• Para eliminar una ﬁla, elija Modiﬁcar > Tabla > Eliminar ﬁla o elija Tabla >

Eliminar ﬁla en el menú contextual.

• Para eliminar una columna, elija Modiﬁcar > Tabla > Eliminar columna o elija

Tabla > Eliminar columna en el menú contextual.

Para añadir o eliminar filas o columnas de las partes inferior y derecha de una

tabla:

1 Seleccione toda la tabla. (Haga clic en la esquina superior izquierda de la tabla,

o bien haga clic una vez en la tabla y elija Modiﬁcar > Tabla > Seleccionar

tabla.)

2 En el inspector de propiedades, lleve a cabo una de estas operaciones:

• Aumente el valor de ﬁla o columna para añadir ﬁlas.

• Reduzca el valor de ﬁla o columna para eliminar ﬁlas.

Dreamweaver añade o elimina ﬁlas desde la parte inferior de la tabla y añade y

elimina columnas desde la derecha. Dreamweaver no avisa si las ﬁlas o las

columnas que desea eliminar contienen datos.

Capítulo 7204

Anidar tablas

Una tabla anidada es una tabla que está dentro de otra tabla. Puede conﬁgurar una

tabla anidada como cualquier otra tabla; no obstante, su ancho vendrá limitado

por el ancho de la celda en la que aparece.

Para anidar una tabla en una celda de otra 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 insertar la segunda tabla.

• Arrastre el botón Tabla de la categoría Común, en el panel Objetos, hasta la

celda donde desea insertar la segunda tabla.

2 Especiﬁque las propiedades de la tabla en el cuadro de diálogo Insertar tabla y

haga clic en Aceptar.

Dividir y combinar celdas

Utilice el inspector de propiedades o los comandos del submenú Modiﬁcar > Tabla

para dividir o combinar celdas. Puede combinar cualquier número de celdas

adyacentes —siempre que la selección entera 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 había combinado.

Dreamweaver reestructura automáticamente la tabla (añade los correspondientes

atributos

COLSPAN o ROWSPAN) para crear la disposición especiﬁcada.

En la ilustración siguiente, las celdas en la mitad de las dos primeras columnas se

han combinado para ocupar dos ﬁlas.

Utilizar tablas para presentar contenido 205

Para combinar dos o más celdas en una tabla:

1 Seleccione las celdas que desea combinar. Las celdas seleccionadas deberán ser

contiguas y tener forma rectangular.

Esta selección tiene forma rectangular, por lo que las celdas se pueden combinar.

Esta selección de tabla no tiene forma rectangular, por lo que las celdas no se pueden

combinar.

2 Elija Modiﬁcar > Tabla > Combinar celdas o haga clic en el botón Combinar

celdas del inspector de propiedades.

El contenido de las celdas individuales se sitúa en la celda combinada

resultante. Las propiedades de la primera celda seleccionada se aplicarán a la

celda combinada.

Para dividir una celda combinada:

1 Haga clic en la celda o seleccione una celda.

2 Elija Modiﬁcar > Tabla > Dividir celda o haga clic en el botón Dividir celda del

inspector de propiedades.

3 En el cuadro de diálogo Dividir celda, elija si desea dividir la celda en ﬁlas o en

columnas y, a continuación, introduzca el número de ﬁlas o columnas.

Capítulo 7206

Copiar y pegar celdas

Puede copiar y pegar al mismo tiempo varias celdas de una tabla conservando su

formato o copiar y pegar únicamente el contenido de la celda.

Las celdas se pueden pegar en un punto de inserción o en el lugar de una selección

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 selección de la

tabla en la que se va a pegar.

Para cortar o copiar celdas en una tabla:

1 Seleccione una o más celdas de la tabla.

Para cortar o copiar celdas, la selección debe tener forma rectangular. (Consulte

“Seleccionar elementos de tabla” en la página 194.

Selección correcta: Las celdas se pueden cortar o copiar.

Selección incorrecta: Estas celdas no se pueden cortar ni copiar.

2 Corte o copie las celdas utilizando los comandos del menú Edición.

Si selecciona toda una ﬁla o columna y elige Edición > Cortar, la ﬁla o la

columna desaparecerán de la tabla.

Para pegar celdas de tabla:

1 Elija dónde desea pegar las celdas.

• Para pegar celdas antes o encima de una celda concreta, haga clic en dicha

celda.

• Para crear una tabla nueva con las celdas pegadas, haga clic en el lugar en el que

desea que aparezca la tabla (siempre que no sea dentro de otra tabla).

Utilizar tablas para presentar contenido 207

Elija Edición > Pegar.

Si pega ﬁlas o columnas completas en una tabla existente, éstas se añadirán a la

tabla. Si pega una celda individual, se reemplazará el contenido de la celda

seleccionada. Si pega fuera de una tabla, las ﬁlas, columnas o celdas se utilizarán

para deﬁnir una tabla nueva.

Para eliminar el contenido y dejar las celdas intactas:

1 Seleccione una o más celdas.

2 Elija Edición > Borrar o presione Supr.

Nota: Si selecciona todas las celdas de una fila o una columna, la fila o la columna (no sólo

su contenido) se eliminarán de la tabla.

Ordenar tablas

Puede ordenar una tabla de una manera sencilla de acuerdo con el contenido de

una columna. También puede realizar una operación más compleja ordenándola

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 más detalles sobre las celdas combinadas,

consulte “Dividir y combinar celdas” en la página 204.)

Para ordenar una tabla:

1 Seleccione la tabla y elija Comandos > Ordenar tabla.

2 En el cuadro de diálogo que aparece dispone de las siguientes opciones:

• Seleccione la columna que desea ordenar en la opción Ordenar por.

• Seleccione si desea ordenar la columna alfabéticamente o numéricamente en la

opción Orden.

Esta opción resulta importante cuando el contenido de una columna es

numérico. Una clasiﬁcación alfanumérica aplicada a una lista de números de

uno y dos dígitos generará un orden alfanumérico (como 1, 10, 2, 20, 3, 30) en

lugar de un orden estrictamente numérico (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 clasiﬁcación.

3 Para realizar una clasiﬁcación secundaria en otra columna, especiﬁque las

opciones de orden en el menú emergente Después por.

4 Seleccione la opción 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 opción sin seleccionar.

5 Haga clic en Aplicar o en Aceptar para ordenar la tabla.

Capítulo 7208

Exportar datos de tabla

Para exportar datos creados en Dreamweaver, deberá guardarlos en un formato de

archivo que acepte los datos delimitados. Los delimitadores que puede utilizar son

las comas, los dos puntos, los puntos y comas o los espacios.

No se pueden seleccionar partes de una tabla para su exportación; al exportar una

tabla, ésta se exporta entera. Si desea exportar algunos datos concretos de una tabla

(por ejemplo, las primeras seis ﬁlas o las primeras seis columnas), copie la

información en una nueva tabla y expórtela.

Para exportar una tabla:

1 Sitúe el punto de inserción en cualquier celda de la tabla que va a exportar.

2 Elija Archivo > Exportar > Exportar tabla.

Aparecerá el cuadro de diálogo Exportar tabla.

3 En el menú emergente Delimitador, seleccione un valor de delimitador para los

datos de la tabla.

4 En el menú emergente Saltos de línea, seleccione los saltos de línea para el

sistema operativo al que va a exportar el archivo (Windows, Macintosh o

UNIX).

5 Haga clic en Exportar.

6 En el cuadro de diálogo que aparece, asigne un nombre al archivo y haga clic en

Guardar.

209

CAPÍTULO 8

.............................................................................................................

Utilizar marcos

Los marcos se utilizan para dividir una página Web en múltiples páginas HTML.

Por ejemplo, una página Web consta de tres marcos: un marco delgado a un lado

que contiene un menú de desplazamiento, un marco que se extiende por la parte

superior y contiene el logotipo y el título del sitio Web, y un marco grande que

ocupa el resto de la página y presenta el contenido principal. Cada uno de ellos

constituye una página HTML independiente. Estos marcos funcionan

coordinadamente en la página gracias al uso de uno o más conjuntos de marcos, es

decir, de páginas HTML que deﬁnen la estructura y las propiedades de la página

Web, incluida la información sobre el número de marcos que aparecen en una

página, el tamaño de los marcos, el origen de la página cargada en un marco y

otras propiedades. La página de conjunto de marcos no se muestra en los

navegadores; se limita a almacenar información sobre cómo deben mostrarse los

marcos en una página. Sin embargo, es la página que se muestra al utilizar Vista

previa en el navegador.

Capítulo 8210

En este ejemplo, el marco superior permanecería estático y no cambiaría en las

páginas del sitio. El menú del marco lateral tendría vínculos que cambiarían el

contenido del área del marco principal aunque, por lo demás, permanecería

estático. El área del marco principal es el área dinámica, que cambiaría según el

elemento de menú elegido.

Puede aplicar formato a todos los marcos y conjuntos de marcos de la página a

través del inspector de propiedades. Puede activar o desactivar el desplazamiento,

establecer el ancho y el alto, asignar un nombre a cada página, etc. Para obtener

más información, consulte “Propiedades de marcos y conjuntos de marcos” en la

página 218.

Una página Web que contiene tres marcos consta de cuatro páginas HTML

distintas: el archivo de conjunto de marcos y los tres archivos que albergan el

contenido que aparece dentro de los marcos. Al diseñar una página utilizando

conjuntos de marcos, deberá guardar cada uno de estos cuatro archivos para que la

página funcione correctamente en el navegador. Para obtener más información

sobre la creación de páginas Web con marcos, consulte “Crear páginas Web

basadas en marcos” en la página 211.

Cuándo utilizar marcos

El uso más común de los marcos es la navegación. Una página Web puede utilizar

un marco para albergar el menú de navegación y otro marco para el contenido de

la página. Dado que el menú de navegación se encuentra en un marco, los

visitantes pueden hacer clic en un elemento del menú y el contenido aparecerá en

el marco de contenido sin que cambie el menú de navegación. De este modo, el

visitante podrá orientarse perfectamente en el sitio.

Utilizar marcos 211

Sin embargo, los marcos pueden ser difíciles de aplicar y a menudo es posible crear

una página Web sin marcos que consiga los mismos objetivos que una página con

marcos. Por ejemplo, si desea que la navegación se realice en la parte izquierda de

la página, puede dividir la página en dos marcos o, simplemente, incluir la

navegación izquierda en todas las páginas del sitio. La diferencia radica en que con

marcos sólo necesitará crear la navegación una vez. Si decide utilizar marcos en el

sitio Web, deberá conocer la relación entre los marcos y los conjuntos de marcos,

pues el establecimiento de vínculos con marcos puede resultar confuso.

Crear páginas Web basadas en marcos

Los marcos pueden ser una excelente herramienta para los diseñadores Web, pero

deben aplicarse correctamente para que funcionen. Siga los pasos que se detallan a

continuación para conseguir que la página Web funcione correctamente (no

necesariamente en un determinado orden):

• Cree el conjunto de marcos y los marcos de la página. Consulte “Crear marcos”

en la página 211.

• Guarde todos los archivos utilizados en el sitio. Recuerde que cada marco y

conjunto de marcos es una página HTML independiente y que es necesario

guardar cada página. Consulte “Guardar archivos de marcos y conjuntos de

marcos” en la página 216.

• Deﬁna las propiedades de cada marco y conjunto de marcos, incluidos sus

nombres, opciones de desplazamiento y no desplazamiento, etc. Consulte

“Propiedades de marcos y conjuntos de marcos” en la página 218.

• Compruebe que todos los vínculos incluyen su destino de modo que el

contenido vinculado aparezca en el área correcta. Consulte “Controlar el

contenido del marco con vínculos” en la página 225.

Crear marcos

Hay dos formas de crear un conjunto de marcos en Dreamweaver: puede diseñarlo

usted mismo o seleccionarlo de una serie de conjuntos de marcos predeﬁnidos. Si

elige un conjunto de marcos predeﬁnido se conﬁgurarán automáticamente todos

los conjuntos de marcos y marcos necesarios para crear la disposición. Ésta es la

forma más sencilla de insertar rápidamente un diseño de marcos en la página. Sólo

se pueden crear marcos en la vista Diseño de la ventana de documento.

Capítulo 8212

Insertar un conjunto de marcos predefinido

Los conjuntos de marcos predeﬁnidos facilitan la selección del tipo de conjunto de

marcos que desea crear.

Los iconos de conjuntos de marcos predeﬁnidos de la categoría Marcos del panel

Objetos proporcionan una representación visual de cada conjunto de marcos al

aplicarse a un documento seleccionado.

El conjunto de marcos seleccionado rodea al documento actual (el documento en

el que se encuentra el punto de inserción). El área azul de un icono de conjunto de

marcos predeﬁnido representa la página o el marco seleccionado actualmente en

un documento, mientras que el área blanca representa el nuevo o los nuevos

marcos.

Para insertar un conjunto de marcos predefinido:

1 Sitúe el punto de inserción en el documento.

2 A continuación, lleve a cabo una de estas operaciones:

• En la categoría Marcos del panel Objetos, seleccione un conjunto de marcos

predeﬁnido. Para insertar el conjunto de marcos, puede hacer clic en un icono

o arrastrar un icono directamente al documento.

• Para seleccionar un conjunto de marcos predeﬁnido, elija Insertar > Marcos >

Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda,

Izquierda superior o Dividir.

Utilizar marcos 213

Diseñar e insertar un conjunto de marcos

Antes de crear un conjunto de marcos o trabajar con marcos, haga visibles los

bordes de los marcos en la ventana de documento.

Para ver los bordes de los marcos de un documento, elija Ver > Ayudas visuales >

Bordes de marco.

Cuando se muestran los bordes de los marcos, se añade espacio alrededor del

borde del documento, lo que sirve de indicador visual de las áreas de marcos del

documento.

Para crear un conjunto de marcos, lleve a cabo una de estas operaciones:

• Elija Modiﬁcar > Conjunto de marcos > Dividir marco a la izquierda, a la

derecha, hacia arriba o hacia abajo.

• Arrastre uno de los bordes del marco a la ventana de documento para dividir el

documento vertical u horizontalmente. Arrastre un borde del marco por una de

las esquinas para dividir el documento en cuatro marcos nuevos.

• Presione la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra el

ratón si desea dividir un marco interior.

Para eliminar un marco:

Arrastre el borde del marco fuera de la página o hasta el borde del marco padre.

Capítulo 8214

Crear un conjunto de marcos anidado

Un conjunto de marcos dentro de otro conjunto recibe el nombre de conjunto de

marcos anidado. Cada nuevo conjunto de marcos creado incluye su propio

documento HTML de conjunto de marcos y sus documentos de marcos. La

mayoría de las páginas Web con marcos utilizan en realidad marcos anidados y

varios de los conjuntos de marcos predeﬁnidos en Dreamweaver también utilizan

la anidación.

Por ejemplo, un documento con tres marcos puede mostrar el logotipo de una

empresa en un marco en la parte superior del documento, controles de navegación

en otro marco en el lado izquierdo del documento y contenido en un tercer

marco.

Para crear un conjunto de marcos anidado:

1 Sitúe el punto de inserción en el marco en el que desea insertar el conjunto de

marcos anidado.

2 Lleve a cabo una de estas operaciones:

• Elija Modiﬁcar > Conjunto de marcos > Dividir marco hacia arriba, hacia

abajo, a la izquierda o a la derecha.

• En la categoría Marcos del panel Objetos, seleccione un icono de conjunto de

marcos.

• Elija Insertar > Marcos > Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba,

Superior izquierda, Izquierda superior o Dividir.

Conjunto de marcos

principal

El marco de menú y el

marco de contenido

se anidan en el

conjunto de marcos

principal

Utilizar marcos 215

Seleccionar un marco o un conjunto de

marcos

Los marcos y los conjuntos de marcos son documentos HTML individuales. Para

realizar cambios en un marco o en el conjunto de marcos, comience seleccionando

el marco o conjunto de marcos que desea cambiar. Puede seleccionar un marco o

un conjunto de marcos en la ventana de documento o utilizando el panel Marcos.

Cuando seleccione un marco o el conjunto de marcos, aparecerán líneas de

selección en el panel Marcos y en la ventana de documento.

Utilizar el panel Marcos

El panel Marcos proporciona una representación visual de los marcos del

documento. Puede hacer clic en un marco o conjunto de marcos en el panel

Marcos para seleccionarlo en el documento y, seguidamente, ver o editar las

propiedades del elemento seleccionado en el inspector de propiedades. Consulte

“Propiedades de marcos y conjuntos de marcos” en la página 218.

El panel Marcos también muestra la jerarquía de la estructura del conjunto de

marcos de una manera que puede no percibirse en la ventana de documento. En el

panel Marcos, el conjunto de marcos está rodeado por un borde grueso

tridimensional; los marcos están rodeados por una línea delgada gris; mientras que

los distintos marcos se identiﬁcan a través de sus nombres.

Para mostrar el panel Marcos, lleve a cabo una de estas operaciones:

• Elija Ventana > Marcos.

• Presione Ctrl+F10 (Windows) o Comando+F10 (Macintosh).

Para seleccionar un marco en el panel Marcos:

Haga clic en el marco en el panel Marcos.

Para seleccionar un conjunto de marcos en el panel Marcos:

Haga clic en el borde que rodea a los marcos en el panel Marcos.

Capítulo 8216

Seleccionar un marco o un conjunto de marcos en la ventana

de documento

En la ventana de documento, cuando se selecciona un marco, sus bordes se

muestran con un contorno de línea de puntos; cuando se selecciona un conjunto

de marcos, todos los bordes de los marcos contenidos en el conjunto de marcos se

muestran con un contorno de línea de puntos.

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 marcos y conjuntos de marcos” en la

página 218.

Para seleccionar un marco en la ventana de documento:

Haga clic dentro de un marco mientras mantiene presionada la tecla Alt

(Windows) o las teclas Opción-Mayús (Macintosh).

Para seleccionar un conjunto de marcos en la ventana de documento:

Haga clic en el borde de un marco de la ventana de documento.

Para mover la selección a otro marco, lleve a cabo alguna de estas operaciones:

• Para mover la selección al marco siguiente, mantenga presionada la tecla Alt

(Windows) o Comando (Macintosh) mientras presiona la tecla de ﬂecha

izquierda o derecha.

• Para mover la selección al conjunto de marcos padre (que contiene los marcos

anidados), mantenga presionada la tecla Alt (Windows) o Comando

(Macintosh) mientras presiona la tecla de ﬂecha arriba.

• Para mover la selección al marco hijo (el marco que está anidado en otro),

mantenga presionada la tecla Alt (Windows) o Comando (Macintosh) mientras

presiona la tecla de ﬂecha abajo.

Guardar archivos de marcos y conjuntos de

marcos

Es preciso guardar un archivo de conjunto de marcos y sus archivos relacionados

para poder previsualizar la página en un navegador. Puede guardar de forma

individual una página del conjunto de marcos o una página de marco, o bien

guardar todos los archivos de marco abiertos y la página de conjunto de marcos.

Cuando se utiliza Dreamweaver para crear documentos de marcos, cada nuevo

documento de marco recibe un nombre de archivo temporal (por ejemplo,

UntitledFrame_1 para la página de conjunto de marcos, Untitled-1, Untitled-2,

etc. para las páginas de marcos).

Utilizar marcos 217

Al seleccionar alguna de las opciones de almacenamiento, se abre el cuadro de

diálogo Guardar archivo para que pueda guardar el documento con su nombre de

archivo temporal. Dado que todos los archivos tienen por nombre “untitled” (sin

título), es difícil precisar qué archivo de marco se está guardando. Observe las

líneas de selección de marcos en la ventana de documento para identiﬁcar el

documento que se está guardando actualmente. El área seleccionada identiﬁca el

marco al que se hace referencia actualmente en el cuadro de diálogo Guardar

archivo. El nombre de archivo del marco o conjunto de marcos seleccionado

también aparece en la barra de título.

Para guardar un archivo de conjunto de marcos:

1 Seleccione el conjunto de marcos en el panel Marcos o en la ventana de

documento.

2 Lleve a cabo una de estas operaciones:

• Para guardar el archivo de conjunto de marcos, elija Archivo > Guardar

conjunto de marcos.

• Para guardar el archivo de conjunto de marcos como un archivo nuevo, elija

Archivo > Guardar conjunto de marcos como.

Para guardar un documento que está dentro de un marco:

Haga clic en el marco para seleccionarlo y, a continuación, elija Archivo > Guardar

marco o Archivo > Guardar marco como.

Capítulo 8218

Para guardar todos los archivos de un conjunto de marcos:

Elija Archivo > Guardar todos los marcos.

De este modo se guardarán todos los documentos abiertos, incluidos los

documentos individuales, los documentos de marcos y los documentos de

conjunto de marcos.

Nota: Utilice las líneas de selección de marcos de la ventana de documento para

identificar los documentos de conjunto de marcos o los documentos de marcos al guardar

los archivos.

Propiedades de marcos y conjuntos de

marcos

Los marcos y los conjuntos de marcos disponen de su propio inspector de

propiedades.

• Las propiedades de marco determinan el nombre del marco, el archivo de

origen, los márgenes, el desplazamiento, el cambio de tamaño y los bordes de

los distintos marcos de un conjunto de marcos.

• Las propiedades de conjuntos de marcos controlan las dimensiones de los

marcos y el color y el ancho de los bordes entre los marcos.

Para ver las propiedades de un marco:

1 Elija Ventana > Propiedades para que aparezca el inspector de propiedades si es

que no está ya abierto.

2 Lleve a cabo una de estas operaciones:

• Haga clic en un marco mientras presiona la tecla Alt (Windows) o las teclas

Opción-Mayús (Macintosh).

• Haga clic en un marco en el panel Marcos.

Utilizar marcos 219

Configurar propiedades de marcos

Utilice el inspector de propiedades para asignar un nombre a un marco y deﬁnir

sus bordes y sus márgenes. Para ver todas las propiedades del marco, haga clic en la

ﬂecha de ampliación que se encuentra en el ángulo inferior derecho del inspector

de propiedades. Es necesario asignar un nombre a cada uno de los marcos para que

los vínculos de la página funcionen correctamente.

Para especificar propiedades de marco:

1 Seleccione un marco llevando a cabo una de estas operaciones:

• Haga clic en un marco en el panel Marcos.

• Haga clic en un marco en la ventana de documento mientras presiona la tecla

Alt (Windows) o las teclas Opción-Mayús (Macintosh).

2 Elija Ventana > Propiedades para abrir el inspector de propiedades. Haga clic en

la ﬂecha de ampliación, situada en la esquina inferior derecha, para ver todas las

propiedades.

3 Para asignar un nombre al marco, escríbalo en el campo Marco.

Nota: Marco determina el nombre del marco actual que se utilizará como destino de

hipervínculos 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. Los nombres de marcos deben comenzar con una letra (no con

un número). No utilice palabras reservadas de JavaScript (como

top

navigator

) para

los nombres de los marcos.

Capítulo 8220

Elija una de las siguientes opciones de marco:

• Orig 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. También puede abrir un archivo en un marco colocando el puntero en

el marco y eligiendo Archivo > Abrir en marco.

• Desplaz. determina si aparecerán barras de desplazamiento cuando no haya

suﬁciente espacio para mostrar todo el contenido del marco actual. La

conﬁguración predeterminada de la mayoría de los navegadores es Automático.

• Mismo tamaño restringe el tamaño del marco actual e impide que los usuarios

puedan arrastrar los bordes del marco. Siempre podrá cambiar el tamaño de los

marcos en la ventana de documento; sin embargo, si esta seleccionada esta

opción, los usuarios no podrán cambiar el tamaño de los marcos en sus

navegadores.

• Bordes controla el borde del marco actual. Las opciones posibles son Sí, No y

Predeterminado. Si elige la opción Bordes, se anulará la conﬁguración de

bordes deﬁnida para el conjunto de marcos. (Consulte “Conﬁgurar

propiedades de conjuntos de marcos” en la página 221.) La conﬁguración

predeterminada de la mayoría de los navegadores es Sí. Un borde sólo puede

desactivarse cuando todos los marcos contiguos están deﬁnidos como No o,

cuando están deﬁnidos como Predeterminado con el conjunto de marcos padre

deﬁnido como No.

• Color de borde establece un color de borde para todos los bordes contiguos al

marco actual. Esta opción de conﬁguración anula el color de borde del

conjunto de marcos.

5 Conﬁgure las siguientes opciones de márgenes (si las opciones de márgenes no

están visibles, haga clic en la ﬂecha de ampliación situada en la esquina inferior

derecha).

Ancho del margen Establece en píxeles el ancho de los márgenes izquierdo y

derecho (es decir, del espacio que hay entre el borde del marco y su contenido).

Alto del margen Establece en píxeles el alto de los márgenes superior e inferior

(es decir, del espacio que hay entre el borde del marco y su contenido).

Utilizar marcos 221

Configurar propiedades de conjuntos de marcos

Utilice las propiedades de conjuntos de marcos para establecer los bordes y el

tamaño de los marcos. Al conﬁgurar una propiedad de borde, se anula la

conﬁguración de dicha propiedad correspondiente a un conjunto de marcos. Por

ejemplo, al conﬁgurar las propiedades de bordes de un marco, se anulan las

propiedades de bordes establecidas en un conjunto de marcos.

Los conjuntos de marcos predeﬁnidos se utilizan para aplicar rápidamente un

conjunto de marcos a un documento. Los conjuntos predeﬁnidos comparten los

siguientes valores predeterminados de propiedades: sin bordes, sin barras de

desplazamiento y sin cambio de tamaño de marcos al mostrarse en un navegador.

Para cambiar los valores predeterminados, seleccione las opciones deseadas en el

inspector de propiedades:

Para ver las propiedades de un conjunto de marcos:

1 Elija Ventana > Propiedades para que aparezca el inspector de propiedades si es

que no está ya abierto.

2 Lleve a cabo una de estas operaciones:

• Haga clic en un borde situado entre dos marcos de la ventana de documento.

• Haga clic en el borde que rodea a los marcos en el panel Marcos.

3 Para ver todas las propiedades del conjunto de marcos, haga clic en la ﬂecha de

ampliación, situada en la esquina inferior derecha del inspector de propiedades.

Capítulo 8222

Para especificar propiedades de conjuntos de marcos:

1 Seleccione un conjunto de marcos.

2 En el menú emergente Bordes, seleccione si desea que se muestren los bordes

alrededor de los marcos cuando el documento se vea en un navegador.

• Si desea que se muestren los bordes, seleccione Sí.

• En caso contrario, seleccione No.

• Si desea que el navegador determine si deben mostrarse o no los bordes,

seleccione Predeterminado.

3 En el campo Ancho del borde, escriba un número para especiﬁcar el ancho de

los bordes en el conjunto de marcos actual.

4 En el campo Color de borde, utilice el selector de colores para elegir el color del

borde o escriba el valor hexadecimal de un color.

5 Para seleccionar las opciones de tamaño de marco, haga clic en las ﬁchas del

cuadro Selección Fila Col para seleccionar una ﬁla o en las ﬁchas de la parte

superior para elegir una columna. A continuación escriba un número en el

campo Valor para establecer el tamaño de la ﬁla o columna seleccionada y, en el

menú emergente Unidades, deﬁna la unidad de medida en la que se expresa el

número del campo Valor.

Asignar nombre a un conjunto de marcos

Para añadir un título a una página de conjunto de marcos, utilice la opción

Propiedades de la página.

Para asignar un nombre a una página de conjunto de marcos:

1 Seleccione un conjunto de marcos llevando a cabo una de estas operaciones:

• Haga clic en el borde del conjunto de marcos en el panel Marcos.

• Haga clic en un marco en la ventana de documento mientras presiona la tecla

Alt (Windows) o las teclas Opción-Mayús (Macintosh). Puede que tenga que

mantener presionada la tecla Alt (Windows) o Comando (Macintosh) mientras

presiona la tecla de ﬂecha arriba para seleccionar el conjunto de marcos.

2 Elija Modiﬁcar > Propiedades de la página.

3 En el campo Título, introduzca un nombre para el documento.

Utilizar marcos 223

Especificar tamaños de marco

Arrastre el borde de un marco en la ventana de documento para establecer los

tamaños aproximados de los marcos; luego, use el inspector de propiedades para

especiﬁcar la cantidad de espacio que el navegador debe asignar a un marco

cuando el tamaño de la pantalla no permita mostrar los marcos con su tamaño

completo.

Para especificar los tamaños de los marcos:

1 Haga clic en el borde de un marco para seleccionar el conjunto de marcos.

Elija Ver > Ayudas visuales > Bordes de marco si los bordes no están visibles.

2 En el inspector de propiedades, haga clic en la ﬂecha de ampliación para ver

todas las propiedades.

3 En el cuadro Selección Fila Col, haga clic en la ﬁla o columna que desea

modiﬁcar.

4 Para especiﬁcar cómo debe asignarse el espacio cuando se cambia el tamaño de

la ventana del navegador, introduzca un número en el campo Valor y elija una

unidad entre las siguientes opciones:

• Píxeles establece el tamaño de la columna o ﬁla seleccionada en un valor

absoluto. Esta opción es la mejor de las posibles para un marco que siempre

tiene que tener el mismo tamaño, como una barra de navegación. Si se

establece una opción de Unidades diferente para otros marcos, a éstos

solamente se les asignará espacio cuando los marcos que se han especiﬁcado en

píxeles ya tengan su tamaño exacto.

• Porcentaje indica que el marco actual debe representar un porcentaje

especiﬁcado del conjunto de marcos al que pertenece. A los marcos

especiﬁcados con la opción Porcentaje como unidad, se les asigna espacio

después de aquellos especiﬁcados en píxeles, pero antes de los marcos con la

opción Relativo como unidad.

• Relativo indica que al marco actual se le asignará espacio proporcionalmente al

asignado a otros marcos. A los marcos con las unidades establecidas en Relativo

se les asigna espacio después de asignárselo a los marcos con el tamaño

especiﬁcado en píxeles y en porcentaje, pero ocuparán todo el espacio restante

de la ventana del navegador.

Capítulo 8224

Configurar bordes de marcos y conjuntos de marcos

Puede especiﬁcar la apariencia que los bordes de los marcos y los conjuntos de

marcos deben tener en un documento. Cuando se especiﬁcan 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 mantiene presionada la tecla Alt

(Windows) o las teclas Opción-Mayús (Macintosh) o haga clic en el marco en

el panel Marcos.

2 Conﬁgure las siguientes opciones en el inspector de propiedades:

• Bordes controla el borde de los marcos actuales. Las opciones posibles son Sí,

No y Predeterminado. La conﬁguración predeterminada de la mayoría de los

navegadores es Sí. Un borde sólo puede desactivarse si todos los marcos

contiguos están conﬁgurados con la opción No (o con la opción

Predeterminado, y el conjunto de marcos padre conﬁgurado en No).

• Color de borde establece un color de borde para todos los bordes contiguos al

marco actual.

Para definir bordes de conjuntos 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

panel Marcos.

2 Conﬁgure las siguientes opciones en el inspector de propiedades:

• 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

navegador determine cómo mostrar los bordes. La conﬁguración

predeterminada de la mayoría de los navegadores es Sí.

• Color de borde establece un color para todos los bordes en el conjunto de

marcos actual. Este parámetro puede anularse para un marco concreto

mediante la conﬁguración de un color de borde para el marco en cuestión.

• Ancho del borde especiﬁca el ancho de los bordes en el conjunto de marcos

actual. Introduzca 0 para especiﬁcar que no desea bordes.

Utilizar marcos 225

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 puntero en el marco y elija Modiﬁcar > Propiedades de la página.

• Haga clic con el botón derecho (Windows) o haga clic manteniendo presionada

la tecla Control (Macintosh) dentro del marco y elija Propiedades de la página

en el menú contextual.

2 Haga clic en el menú emergente Fondo para seleccionar un color.

Controlar el contenido del marco con vínculos

Para utilizar vínculos en marcos, deberá establecer un destino para el vínculo. El

destino es el marco en el que se abrirá el contenido vinculado. Por ejemplo, si el

menú de navegación se encuentra en el marco izquierdo y desea que el material

vinculado aparezca el marco de contenido principal, deberá utilizar destinos para

todos los vínculos del menú de navegación. El destino tendrá el nombre del marco

de contenido principal, por ejemplo, marco_principal. Cuando el usuario haga

clic en un vínculo de navegación, el contenido se abrirá en el marco principal.

Si desea seleccionar un marco para abrir un archivo en él, deberá utilizar el menú

emergente Destino en el inspector de propiedades. Puede establecer la apertura de

un archivo en un nuevo marco, sustituir información en el marco del vínculo o

sustituir información en otro marco. También puede hacer que el contenido

vinculado sobrescriba el marco actual (para ello, no seleccione un destino) o que

aparezca en una ventana de navegador totalmente nueva.

Para establecer un marco como destino:

1 Seleccione texto o un objeto.

2 En el campo Vínculo del inspector de propiedades, lleve a cabo una de estas

operaciones:

• Escriba el nombre del archivo con el que debe establecerse el vínculo.

• Haga clic en el icono de carpeta y seleccione el archivo con el que debe

establecerse el vínculo.

• Haga clic en el icono de señalización de archivo y arrástrelo para seleccionar el

archivo con el que debe establecerse el vínculo.

Para especiﬁcar un punto de ﬁjación (lugar especíﬁco) en el archivo con el que

debe establecerse el vínculo, introduzca un signo de almohadilla (#) antes del

nombre del punto de ﬁjación. Consulte “Crear un vínculo con un lugar

especíﬁco dentro de un documento” en la página 380.

Capítulo 8226

En el menú emergente Destino, elija la ubicación en la que debería aparecer el

documento vinculado.

• Si ha asignado nombres a los marcos en el inspector de propiedades, aparecerán

en este menú. Seleccione un marco con nombre para abrir el documento

vinculado en el marco seleccionado.

• _blank abre el documento vinculado en una nueva ventana del navegador y

conserva la ventana actual.

• _parent abre el documento vinculado en el conjunto de marcos padre del

enlace.

• _self abre el vínculo en el marco actual y sustituye el contenido de dicho

marco.

• _top abre el vínculo en el conjunto de marcos de nivel más alto del documento

actual y sustituye todos los marcos.

Manipular navegadores que no pueden

mostrar marcos

Dreamweaver permite especiﬁcar contenido para visualizar en navegadores

antiguos o basados en texto que no admiten marcos. Dreamweaver inserta el

contenido especiﬁcado en el documento del conjunto de marcos mediante una

instrucción similar a la siguiente:

este es el contenido sin marcos.

</body></noframes>

Cuando un navegador que no admite marcos carga un archivo de conjunto de

marcos, solamente mostrará el contenido que va entre etiquetas noframes.

Para definir contenido para navegadores que no admiten marcos:

1 Elija Modiﬁcar > Conjunto de marcos > Editar contenido sin marcos.

Dreamweaver borra la ventana de documento, al tiempo que aparecen las

palabras “Contenido sin marcos” en la parte superior del área del cuerpo del

documento.

2 Para crear el contenido sin marcos, lleve a cabo una de estas operaciones:

• En la ventana de documento, escriba o inserte el contenido.

• Elija Ventana > Inspector de código y escriba el contenido o el código HTML

del contenido entre las etiquetas noframes.

3 Elija de nuevo Modiﬁcar > Conjunto de marcos > Editar contenido sin marcos

para volver a la vista normal del documento de conjunto de marcos.

Utilizar marcos 227

Usar comportamientos con marcos

Puede aplicar diversos comportamientos que aprovechan el funcionamiento de los

marcos. Los marcos se utilizan generalmente cuando el diseñador de la página

Web desea controlar la forma en que se muestra el contenido en una página Web.

Existen diversos comportamientos que facilitan el cambio del contenido de un

marco.

• Definir texto de marco reemplaza el contenido y el formato de un marco con el

contenido que usted especiﬁque. Dicho contenido puede incluir cualquier

código HTML. Utilice esta acción para mostrar información de forma

dinámica. Consulte “Deﬁnir texto de marco” en la página 486.

• Ir a URL abre una nueva página en la ventana actual o en el marco especiﬁcado.

Esta acción resulta especialmente útil para cambiar el contenido de dos o más

marcos con un solo clic. Consulte “Ir a URL” en la página 479.

• Insertar barra de navegación se utiliza para dirigir a un usuario hacia páginas

concretas de un sitio Web. Puede añadir comportamientos a las imágenes de la

barra de navegación y deﬁnir la imagen que debe mostrarse en función de las

acciones del usuario. Por ejemplo, puede que desee mostrar una imagen de

botón en su estado presionando y sin presionar para indicar al usuario qué

página del sitio está viendo. Consulte “Insertar una barra de navegación” en la

página 391.

• Insertar menú de salto le permite conﬁgurar una lista de menú emergente con

vínculos que abren archivos en una ventana del navegador al hacer clic en ellos.

También puede deﬁnir como destino una ventana o un marco concreto para

que se abra en él el documento. Consulte “Insertar un menú de salto” en la

página 387.

Capítulo 8228

229

CAPÍTULO 9

.............................................................................................................

Administrar e insertar activos

Los activos son elementos, como imágenes o archivos de película, que se utilizan a

la hora de crear una página o un sitio.

El panel Activos ayuda a administrar y organizar los activos del sitio de forma más

sencilla que la ventana Sitio. El panel muestra los activos del sitio, divididos en las

categorías siguientes:

• Imágenes

• Colores

• URL

• Películas Flash

• Películas Shockwave

• Películas MPEG y QuickTime

• Secuencias de comandos

• Plantillas

• Elementos de biblioteca

Nota: En el panel Activos sólo se muestran los archivos que corresponden a estas

categorías. Hay otros tipos de archivos que a veces se denominan activos, pero que no se

muestran en este panel.

Si aún no ha reunido activos para el sitio, puede obtenerlos de varias fuentes. Por

ejemplo, puede crear activos en una aplicación como Macromedia Fireworks o

Macromedia Flash, se los puede proporcionar un compañero o un cliente o los

puede copiar de un CD de ilustraciones. Para obtener más información sobre

cómo planiﬁcar y reunir activos, consulte “Planiﬁcación y diseño de sitios” en la

página 97.

Capítulo 9230

Puede utilizar el panel Activos de dos formas distintas: como una lista fácilmente

accesible de los activos del sitio (la lista Sitio) o como una forma de organizar los

activos que utiliza con más frecuencia (la lista Favoritos). El panel Activos sitúa

automáticamente los activos del sitio en la lista Sitio. En un principio, la lista

Favoritos está vacía y puede añadirle los activos que desee.

La mayor parte de las operaciones del panel Activos son iguales en la lista Sitio y

en la lista Favoritos. Sin embargo, hay algunas tareas que sólo se pueden realizar en

la lista Favoritos (consulte “Utilizar activos favoritos” en la página 238).

Las plantillas y los elementos de biblioteca se abordan con más detalle en

“Reutilizar contenido con plantillas y bibliotecas” en la página 395.

Utilizar el panel Activos

El panel Activos ofrece dos formas de ver los activos: la lista Sitio, que muestra

todos los activos del sitio (que reconoce el panel), y la lista Favoritos, que sólo

muestra los activos seleccionados de manera explícita. La mayoría de los

procedimientos siguientes se pueden llevar a cabo en la lista Sitio o en la lista

Favoritos.

En ambas listas, los activos se dividen en categorías. Elija la categoría de activos

que desea incluir en las listas haciendo clic en uno de los botones de categoría de la

parte izquierda del panel. Tanto la lista Sitio como la lista Favoritos están

disponibles para todas las categorías de activos, salvo las plantillas y los elementos

de biblioteca.

La lista Sitio muestra todos los activos (de las categorías reconocidas) que se

encuentran presentes en el sitio como archivos (tanto si hay algún documento que

los utilice como si no), así como todos los colores y URL empleados en cualquier

documento del sitio.

Puede trabajar con las siguientes categorías de activos:

Imágenes son archivos de imagen en formato GIF, JPEG o PNG. Para obtener

información sobre las imágenes, consulte “Insertar imágenes” en la página 279.

Colores son los colores utilizados en documentos y hojas de estilos del sitio,

incluidos los colores del texto, el fondo y los vínculos.

URL son los URL externos a los que están vinculados los documentos del sitio.

Esta categoría incluye los siguientes tipos de vínculos: FTP, gopher, HTTP,

HTTPS, JavaScript, correo electrónico (mailto) y archivo local (file://).

Películas Flash son archivos de cualquier versión del formato Flash de

Macromedia. El panel Activos muestra los archivos SWF (Flash comprimidos),

pero no los FLA (Flash de origen). Consulte “Contenido de Flash” en la

página 316.

Películas Shockwave son archivos de cualquier versión del formato Shockwave de

Macromedia. Consulte “Películas Shockwave” en la página 326.

Administrar e insertar activos 231

Películas son archivos de películas en formato QuickTime o MPEG. Consulte

“Insertar elementos multimedia” en la página 313.

Secuencias de comandos son archivos JavaScript o VBScript. Las secuencias de

comandos de archivos HTML no aparecen en el panel Activos, a diferencia de las

incluidas en archivos JavaScript o VBScript independientes. Para obtener

información sobre el uso de JavaScript en Dreamweaver, consulte “Depurar

código JavaScript” en la página 499.

Plantillas permiten utilizar la misma disposición en múltiples páginas, así como

modiﬁcar fácilmente el diseño de todas las páginas a la vez. Consulte “Reutilizar

contenido con plantillas y bibliotecas” en la página 395.

Elementos de biblioteca son elementos que se utilizan en múltiples páginas.

Cuando se modiﬁca un elemento de biblioteca, se actualizan todas las páginas que

contienen ese elemento. Consulte “Reutilizar contenido con plantillas y

bibliotecas” en la página 395.

Para abrir el panel Activos:

Elija Ventana > Activos. Aparecerá el panel Activos.

El panel puede tardar unos segundos en crear la lista Sitio, pues tiene que leer la

caché del sitio.

Nota: Deberá definir un sitio y crear una caché del sitio antes de utilizar el panel Activos.

Consulte “Utilizar Dreamweaver para configurar un nuevo sitio” en la página 104.

Capítulo 9232

Algunos cambios no aparecen inmediatamente en el panel Activos.

• Al añadir o eliminar un activo del sitio, los cambios no se reﬂejan en el panel

Activos hasta que se actualiza la lista Sitio haciendo clic en el botón Actualizar

lista del sitio. Si añade o elimina un activo fuera de Dreamweaver, utilizando el

Explorador de Windows o el Finder, por ejemplo, deberá volver a generar la

caché del sitio para hacer que el cambio se reﬂeje en el panel Activos.

• Al eliminar la única aparición de un determinado color o URL en el sitio, o al

guardar un archivo nuevo que contiene un color o URL que no se usaba

anteriormente en el sitio, los cambios no se reﬂejarán en el panel Activos hasta

que actualice la lista Sitio.

Para actualizar manualmente la lista Sitio:

1 Haga clic en Sitio en la parte superior del panel Activos para asegurarse de que

se muestra la lista Sitio.

2 Haga clic en el botón Actualizar lista del sitio en la parte inferior del panel

Activos.

Si es necesario, la caché del sitio se crea o actualiza y el panel Activos se actualiza

para mostrar todos los activos reconocidos del sitio.

Para volver a generar manualmente la caché del sitio partiendo de cero y

actualizar la lista Sitio:

Presione Control (Windows) o Comando (Macintosh) mientras hace clic en el

botón Actualizar lista del sitio en la parte inferior del panel Activos.

Para ver la lista Favoritos:

Haga clic en Favoritos en la parte superior del panel Activos.

La lista Favoritos permanece vacía hasta que expresamente le añada activos.

Para ver la lista Sitio:

Haga clic en Sitio en la parte superior del panel Activos.

Nota: En las categorías Plantillas y Biblioteca, las opciones Sitio y Favoritos no están

disponibles.

Para mostrar activos de una determinada categoría:

Haga clic en el icono de la categoría correspondiente y en Sitio o Favoritos. Por

ejemplo, para mostrar todas las imágenes del sitio, haga clic en el icono Imágenes

y, a continuación, en Sitio.

Administrar e insertar activos 233

Para previsualizar un activo:

Seleccione el activo en el panel Activos.

En el área de la parte superior del panel se previsualiza el activo.

Cuando se selecciona un activo de película, el área de previsualización muestra un

icono. Para ver la película, haga clic en el botón Reproducir (el triángulo verde) en

la esquina superior derecha del área de previsualización.

Para cambiar el tamaño del área de previsualización:

Arrastre la barra de separación (entre el área de previsualización y la lista de

activos) hacia arriba o hacia abajo.

Para añadir activos a la lista Favoritos:

1 Seleccione uno o más activos de la lista Sitio.

2 Haga clic en el botón Añadir a Favoritos.

Los activos se añadirán a la lista Favoritos. Para ver la lista Favoritos, haga clic

en Favoritos en la parte superior del panel.

Para obtener información sobre otros métodos de añadir activos a la lista

Favoritos, consulte “Añadir y eliminar activos de la lista Favoritos” en la

página 238.

Nota: No hay listas Favoritos para plantillas y elementos de biblioteca.

Añadir un activo a una página

La mayoría de los tipos de activos se insertan en el documento arrastrándolos a la

ventana de documento en la vista de Diseño o utilizando el botón Insertar. Puede

insertar colores y URL o aplicarlos al texto seleccionado en la vista de Diseño. Los

URL también se pueden aplicar a otros elementos, como las imágenes, en la vista

de Diseño. Las plantillas se aplican a todo el documento.

Para insertar un activo en un documento:

1 Sitúe el punto de inserción en la vista de Diseño donde desea que aparezca el

activo.

2 Elija Ventana > Activos para abrir el panel Activos si aún no está abierto.

3 Seleccione la categoría del activo.

Seleccione cualquier categoría salvo Plantillas. Las plantillas sólo se pueden

aplicar al documento completo, no se pueden insertar en el documento.

Capítulo 9234

Seleccione Sitio o Favoritos y localice el activo deseado.

No hay listas Sitio o Favoritos para elementos de biblioteca. Omita este paso si

desea insertar un elemento de biblioteca.

5 Lleve a cabo una de estas operaciones:

• Arrastre el activo desde el panel hasta la vista de Diseño. Con activos de

secuencias de comandos, puede arrastrarlos al área de contenido de encabezado

de la ventana de documento. Si no se muestra esa área, elija Ver > Contenido de

Head en primer lugar.

• Seleccione el activo en el panel y haga clic en Insertar.

El activo se insertará en el documento. Si el activo es un color, se aplicará a

partir del punto de inserción. Es decir, lo próximo que escriba aparecerá con ese

color.

Para cambiar el color del texto seleccionado en un documento:

1 Seleccione la categoría Colores en el panel Activos.

2 Seleccione el color que desea aplicar.

3 Haga clic en Aplicar.

Para añadir un vínculo a la selección actual en un documento:

1 Seleccione la categoría URL en el panel Activos y localice el URL que desea

aplicar.

2 Lleve a cabo una de estas operaciones:

• Arrastre el URL desde el panel hasta la selección en la vista de Diseño.

• Seleccione el URL y haga clic en el botón Aplicar.

Para aplicar una plantilla al documento activo.

1 Seleccione la categoría Plantilla en el panel Activos y localice la plantilla que

desea aplicar.

2 Lleve a cabo una de estas operaciones:

• Arrastre la plantilla desde el panel hasta la vista de Diseño.

• Seleccione la plantilla y haga clic en el botón Aplicar.

Administrar e insertar activos 235

Cambiar el orden de los activos

De forma predeterminada, los activos de una determinada categoría aparecen

ordenados alfabéticamente por nombre. El nombre del activo puede ser un

nombre de archivo (por ejemplo, para imágenes), un número hexadecimal (por

ejemplo, para colores) o un URL. Puede ordenar la lista de activos por otros

criterios.

Para presentar los activos en un orden distinto:

Haga clic en uno de los encabezados de columna.

Por ejemplo, para ordenar la lista de imágenes por tipo (de modo que todas las

imágenes GIF, JPEG, etc. aparezcan juntas), haga clic en el encabezado de

columna Tipo.

Para cambiar el ancho de una columna:

1 Sitúe el puntero sobre la línea que separa los dos encabezados de columna.

2 Arrastre la línea para cambiar el ancho de la columna.

Seleccionar y editar activos

El panel Activos permite seleccionar múltiples activos simultáneamente.

Asimismo, constituye un método rápido para comenzar a editar activos.

Para seleccionar múltiples activos:

1 Seleccione uno de los activos haciendo clic en él. A continuación, seleccione los

otros activos de una de estas formas:

• Presione la tecla Mayús mientras hace clic para seleccionar una serie de activos

consecutivos.

• Presione Control (Windows) o Comando (Macintosh) mientras hace clic para

añadir un activo individual a la selección (aunque no sea adyacente a la

selección existente). Presione Control o Comando mientras hace clic en un

activo seleccionado para dejar de seleccionarlo.

Capítulo 9236

Para editar un activo:

1 Lleve a cabo una de estas operaciones:

• Haga doble clic en el activo.

• Seleccione el activo y, a continuación, haga clic en Edición.

La edición de algunos tipos de activos, como las imágenes, inicia una aplicación

de edición externa. La edición de activos de colores y URL sólo permite

cambiar su valor en la lista Favoritos. No se pueden editar colores y URL en la

lista Sitio. La edición de activos de plantillas y elementos de biblioteca permite

realizar cambios en el activo dentro de Dreamweaver.

Si no se abre el editor externo correspondiente a un activo, elija Edición >

Preferencias, seleccione la categoría Tipos de archivo/editores y compruebe que

dispone de un editor externo deﬁnido para el tipo de archivo del activo.

Consulte “Iniciar un editor externo” en la página 314.

2 Cambie el activo como desee.

3 Cuando termine de editar el activo, lleve a cabo uno de estos procedimientos:

• Si el activo está basado en archivos (cualquier activo salvo un color o un URL),

guárdelo (utilizando el editor que empleó para editarlo) y ciérrelo.

• Si el activo es un URL, haga clic en Aceptar cuando termine de editarlo en el

cuadro de diálogo Editar URL.

Si el activo es un color, el selector de colores de Dreamweaver se ocultará

automáticamente cuando elija un color. Para ocultar el selector de colores sin

elegir un color, presione Esc.

Trabajar con activos y sitios

En la ventana Sitio puede localizar el archivo que corresponde a un activo del

panel Activos. Esto puede resultar útil, por ejemplo, para obtener o enviar un

activo a un sitio remoto.

El panel Activos muestra todos los activos (de tipos reconocidos) presentes en el

sitio actual. El sitio actual es el que contiene el documento activo. Para utilizar un

activo del sitio actual en otro sitio, deberá copiarlo. Puede copiar un activo

individual, un conjunto de activos individuales o toda la carpeta Favoritos al

mismo tiempo.

Nota: La ventana Sitio puede mostrar un sitio distinto del que aparece en el panel Activos.

Esto se debe a que el panel Activos está asociado al documento activo. Para conocer qué

sitio muestra el panel Activos, mire la barra de título del panel.

Administrar e insertar activos 237

Para localizar el archivo de un activo en la ventana Sitio:

Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) en el nombre o el icono del activo del panel Activos y elija Localizar

en sitio en el menú contextual.

Aparecerá la ventana Sitio, con el archivo del activo seleccionado.

La opción Localizar en sitio no está disponible para colores o URL, pues no

corresponden a archivos del sitio.

Dicha opción localiza el archivo correspondiente al activo, no un archivo que hace

uso de éste.

Para copiar activos desde la lista Sitio o Favoritas hasta otro sitio:

1 Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) en el icono o el nombre del activo o activos que desea copiar.

En la lista Favoritos, puede copiar una carpeta Favoritos y activos individuales.

2 En el menú contextual, elija Copiar en el sitio y elija el nombre del sitio de

destino en el submenú. El submenú muestra todos los sitios que ha deﬁnido.

Los activos se copiarán en el sitio especiﬁcado, en las ubicaciones

correspondientes al sitio actual. Si es necesario, Dreamweaver crea nuevas

carpetas en la jerarquía del sitio de destino.

Los activos también se añaden a la lista Favoritos del sitio especiﬁcado.

Cuando se abre un documento en el sitio de destino, el panel Activos cambia a

ese sitio y muestra el activo copiado.

Nota: Si el activo que ha copiado es un color o un URL, sólo aparecerá en la lista

Favoritos del otro sitio, no en la lista Sitio. Esto se debe a que no hay un archivo

correspondiente al color o al URL, por lo que no hay ningún archivo que copiar en el

otro sitio.

Capítulo 9238

Utilizar activos favoritos

La mayor parte de las operaciones del panel Activos son iguales en la lista Favoritos

y en la lista Sitio (consulte “Utilizar el panel Activos” en la página 230). Sin

embargo, hay algunas tareas que sólo se pueden realizar en la lista Favoritos.

Dado que la lista Sitio del panel Activos siempre muestra todos los activos

reconocidos en el sitio, puede estar sobrecargada en los sitios grandes. Si añade

activos usados a menudo a la lista Favoritos, puede agrupar activos relacionados,

asignarles apodos para recordar su función y localizarlos rápidamente en el panel

Activos.

Nota: Los activos favoritos no se almacenan como archivos aparte en el disco, ya que son

referencias a los activos de la lista Sitio. Dreamweaver realiza un seguimiento de los

activos de la lista Sitio que se muestran en la lista Favoritos.

Añadir y eliminar activos de la lista Favoritos

Hay varias formas de añadir activos a la lista Favoritos del sitio.

Para añadir activos a la lista Favoritos, lleve a cabo una de estas operaciones:

• Seleccione uno o más activos en la lista Sitio y haga clic en el botón Añadir a

Favoritos.

• Seleccione uno o más activos en la lista Sitio y elija Añadir a Favoritos en el

menú contextual.

• Haga clic con el botón derecho (Windows) o mientras presiona Control

(Macintosh) en un elemento en la vista de Diseño de la ventana de documento

y elija el comando del menú contextual para añadir el elemento a la categoría

Favoritos correspondiente.

Por ejemplo, puede seleccionar una imagen y elegir Añadir a imágenes favoritas

en el menú contextual. Observe que el menú contextual para texto contiene

Añadir a colores favoritos o Añadir a URL favoritos, en función de si el texto

tiene un vínculo o no. Cabe destacar asimismo que sólo los elementos que

corresponden a una de las categorías del panel Activos se pueden añadir a la

lista Favoritos.

• Seleccione uno o más archivos en la ventana Sitio y elija Añadir a Favoritos en

el menú contextual. Se ignorarán los archivos que no correspondan a una

categoría del panel Activos.

Cualquiera que sea el método elegido, los activos se añadirán a la lista Favoritos y

el panel Activos mostrará la lista Favoritos.

Nota: No hay listas Favoritos para plantillas y elementos de biblioteca.

Administrar e insertar activos 239

Para eliminar activos de la lista Favoritos:

1 Seleccione uno o más activos (o una carpeta Favoritos) en la lista Favoritos.

2 Haga clic en el botón Quitar de favoritos en la parte inferior del panel Activos.

Los activos se eliminarán de la lista Favoritos, pero seguirán presentes en la lista

Sitio. Si elimina una carpeta Favoritos, tanto la carpeta como todos los activos

que contiene desaparecerán de la lista Favoritos.

Crear un apodo para un activo favorito

Puede asignar apodos a los activos de la lista Favoritos. El apodo se mostrará en

lugar del nombre de archivo o el valor del activo. Por ejemplo, si tiene un color

llamado #999900, puede emplear un apodo más descriptivo, como

ColorFondoPágina o ColorTextoImportante.

Sólo puede asignar apodos a los activos de la lista Favoritos. En la lista Sitio, los

activos se muestran con sus nombres de archivo reales (o valores, en el caso de

colores o URL).

Para asignar un apodo a un activo favorito:

1 Haga clic en la categoría que contiene el activo.

2 Haga clic en Favoritos para mostrar la lista Favoritos.

3 Lleve a cabo una de estas operaciones:

• Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) en el nombre o el icono del activo en el panel Activos y elija Editar

apodo en el menú contextual.

• Haga clic en el nombre del activo, espere y vuelva a hacer clic. No haga doble

clic.

4 Escriba un apodo para el activo y, a continuación, presione Entrar (Windows) o

Retorno (Macintosh).

El apodo aparecerá en la columna Apodo.

Capítulo 9240

Agrupar activos en una carpeta Favoritos

En una categoría de la lista Favoritos puede crear grupos de activos con nombre,

que se denominan carpetas Favoritos. Por ejemplo, si tiene una serie de imágenes

que utiliza en muchas páginas de catálogo de un sitio de comercio electrónico,

puede agruparlas en una carpeta llamada ImágenesCatálogo.

Nota: Al colocar un activo en una carpeta Favoritos no cambia la ubicación del archivo del

activo en el disco.

Para crear una carpeta Favoritos:

1 Haga clic en Favoritos (en la parte superior del panel Activos) para mostrar la

lista Favoritos.

2 Haga clic en el botón Nueva carpeta de favoritos.

3 Asigne un nombre a la carpeta.

4 Arrastre los activos a la carpeta.

Crear un color, URL, plantilla o elemento de biblioteca

Puede utilizar el panel Activos para crear colores, URL, plantillas y elementos de

biblioteca. No se pueden añadir nuevos colores o URL a la lista Sitio, pues ésta

contiene únicamente los activos que ya están en uso en el sitio.

Para crear un color:

1 Haga clic en el botón de la categoría Colores.

2 Haga clic en Favoritos para mostrar la lista Favoritos.

3 Haga clic en el botón Nuevo color.

4 Seleccione un color utilizando el selector de colores.

Para salir del selector de colores sin elegir un color, presione Esc o haga clic en la

barra gris situada en la parte superior del selector de colores. Para obtener más

información sobre el uso del selector de colores, consulte “Trabajar con colores”

en la página 88.

5 Si lo desea, asigne un apodo al color.

Administrar e insertar activos 241

Para crear un URL:

1 Haga clic en el botón de la categoría URL.

2 Haga clic en Favoritos para mostrar la lista Favoritos.

3 Haga clic en el botón Nuevo URL.

4 Introduzca un URL y un apodo en el cuadro de diálogo Añadir URL y haga

clic en Aceptar.

Para crear una plantilla:

1 Haga clic en el botón de la categoría Plantillas.

2 Haga clic en el botón Nueva plantilla.

Para obtener más información sobre cómo crear plantillas, consulte “Reutilizar

contenido con plantillas y bibliotecas” en la página 395.

Para crear un elemento de biblioteca, lleve a cabo una estas operaciones:

• Haga clic en el botón de la categoría Biblioteca y, a continuación, haga clic en el

botón Nuevo elemento de biblioteca.

• Seleccione un elemento o texto en la vista de Diseño de la ventana de

documento y, a continuación, arrastre ese elemento o texto al panel Activos.

Independientemente del tipo de elemento que arrastre, se creará un nuevo

elemento de biblioteca que contendrá ese elemento.

Para obtener más información sobre cómo crear elementos de biblioteca, consulte

“Reutilizar contenido con plantillas y bibliotecas” en la página 395.

Capítulo 9242

243

CAPÍTULO 10

.............................................................................................................

Insertar y aplicar formato a texto

Las opciones de formato de Dreamweaver son similares a las de los programas

estándar de tratamiento de texto. Utilice el submenú Texto > Formato de párrafo o

el menú desplegable Formato del inspector de propiedades para establecer el estilo

predeterminado (Párrafo, Preformateado, Encabezado 1, Encabezado 2, etc.) de

un bloque de texto. Para cambiar la fuente, el tamaño, el color y la alineación del

texto seleccionado, use el menú Texto o el inspector de propiedades. Para aplicar

formato como negrita, cursiva, código, subrayado, etc., utilice el submenú Texto >

Estilo.

También puede combinar varias etiquetas HTML estándar para formar un estilo,

denominado estilo HTML. Por ejemplo, puede aplicar formato HTML

manualmente utilizando una combinación de etiquetas y atributos y, a

continuación, guardar ese formato como un estilo HTML que se almacenará en el

panel Estilos HTML. La próxima vez que quiera aplicar formato a texto

utilizando esa combinación de etiquetas HTML, lo único que tendrá que hacer

será seleccionar el estilo guardado en el panel Estilos HTML. Los estilos HTML

son compatibles con casi todos los navegadores Web y permiten un ahorro de

tiempo considerable en comparación con la aplicación manual de formato de

texto.

Otro tipo de estilo, denominado CSS (hojas de estilos en cascada), permite aplicar

formato a texto y páginas, con la ventaja de que se actualiza de manera

automática. Puede almacenar estilos CSS directamente en el documento o, si

desea tener mayor control y ﬂexibilidad, en una hoja de estilos externa. Si adjunta

una hoja de estilos externa a varias páginas Web, todas las páginas reﬂejarán

automáticamente los cambios realizados en la hoja. Para acceder a estilos CSS, use

el panel Estilos CSS.

Capítulo 10244

La aplicación manual de formato HTML y los estilos HTML utilizan etiquetas

HTML estándar (como

b, font y code) que reconocen los navegadores Web más

utilizados. Los estilos CSS deﬁnen el formato del texto de una determinada clase o

redeﬁnen el formato de una etiqueta especíﬁca (como

h1, h2, p o li). Los estilos

CSS sólo son compatibles con los siguientes navegadores Web: Netscape

Navigator 4.0 y Microsoft Internet Explorer 4.0 o versiones posteriores.

Puede utilizar estilos CSS, estilos HTML y opciones de formato manual HTML

en la misma página. El formato manual HTML prevalece sobre el formato

aplicado por un estilo HTML o CSS. Por tanto, aunque resulte un poco más

laborioso, puede resultar un método conveniente para modiﬁcar formato aplicado

por estilos HTML o CSS. Asimismo, los estilos CSS de nivel de página prevalecen

sobre los estilos CSS externos. Consulte “Utilizar hojas de estilos CSS” en la

página 259.

Insertar texto y objetos

Añada contenido a las páginas escribiendo o pegando texto e insertando objetos

tales como imágenes, tablas y capas.

Para añadir texto al documento, lleve a cabo una de estas operaciones:

• Escriba texto directamente en la ventana de documento.

• Copie texto de otra aplicación, cambie a Dreamweaver, coloque el punto de

inserción en la vista de Diseño de la ventana de documento y elija

Edición > Pegar. Dreamweaver no mantiene el formato de texto aplicado en la

otra aplicación, pero conserva los saltos de línea.

Para insertar tablas, datos tabulares, imágenes y otros objetos en el documento,

lleve a cabo una de estas operaciones:

• Use los comandos del menú Insertar para insertar los objetos especiﬁcados en el

punto de inserción del documento.

• Elija Ventana > Objetos para abrir el panel Objetos. Localice el tipo de objeto

que desea y haga clic en el objeto o arrástrelo para insertarlo en la ventana de

documento.

Con la mayoría de los objetos aparece un cuadro de diálogo en el que puede

seleccionar opciones o un archivo. Para omitir estos cuadros de diálogo, elija

Edición > Preferencias, seleccione General y desactive la opción Mostrar

diálogo al insertar objetos.

Nota: Para insertar múltiples espacios consecutivos, utilice Insertar > Caracteres especiales

> Espacio indivisible (Ctrl+Mayús+Espacio) o presione Entrar/Retorno. Pero si lo que desea

es alinear los elementos en columnas, utilice un tabla.

Insertar y aplicar formato a texto 245

Puede importar datos tabulares en el documento guardando en primer lugar los

archivos de origen (por ejemplo, de Microsoft Excel o de base de datos) en

formato de texto delimitado.

Para importar datos tabulares:

1 Elija Archivo > Importar > Importar datos de tabla o elija Insertar > Datos

tabulares.

Aparecerá el cuadro de diálogo Importar datos de tabla.

2 Localice el archivo deseado o introduzca su nombre en el campo de texto.

3 Seleccione el delimitador empleado cuando se guardó el archivo como texto

delimitado. Las opciones disponibles son: Tab, Coma, Punto y coma, Dos

puntos y Otro.

• Si selecciona Otro, aparecerá un campo en blanco al lado de la opción.

Introduzca el carácter empleado como delimitador.

4 Utilice las restantes opciones para aplicar formato o deﬁnir la tabla en la que se

importarán los datos.

5 Haga clic en Aceptar cuando termine.

Insertar fechas

Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual

con el formato que preﬁera (con o sin la hora) y ofrece la posibilidad de

actualizarla cada vez que guarde el archivo.

Nota: Las fechas y horas que aparecen en el cuadro de diálogo Insertar fecha no son las

actuales y tampoco reflejan las que verá el usuario cuando visite el sitio. Sólo son ejemplos

de la forma en que se puede presentar esta información.

Para insertar la fecha actual en un documento:

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde

desea insertar la fecha.

2 Lleve a cabo una de estas operaciones:

• Elija Insertar > Fecha.

• Abra el panel Objetos eligiendo Ventana> Objetos y, a continuación, abra la

categoría Común y haga clic en el botón Fecha.

3 En el cuadro de diálogo que aparece, seleccione el formato de día de la semana,

fecha y hora.

Capítulo 10246

Si desea que la fecha insertada se actualice cada vez que guarde el documento,

seleccione Actualizar automáticamente al guardar. Si desea que la fecha se

convierta en texto normal cuando se inserte y no se actualice automáticamente,

desactive esa opción.

5 Haga clic en Aceptar para insertar la fecha.

Sugerencia: Si ha seleccionado Actualizar automáticamente al guardar, puede editar el

formato de fecha después de insertarlo en el documento haciendo clic en el texto

formateado y seleccionando Edit ar formato de fecha en el inspector de propiedades.

Caracteres especiales

Algunos caracteres especiales se representan en HTML mediante un nombre o un

número, denominado entidad. HTML incluye nombres de entidad para caracteres

como el símbolo de copyright (©) el signo & (&) y el símbolo de marca

comercial registrada (®). Cada entidad tiene un nombre (como —) y un

equivalente numérico (como ).

Sugerencia: HTML utiliza paréntesis angulares <> en el código, pero quizá necesite

expresar los caracteres especiales “mayor que” y “menor que” sin que Dreamweaver los

interprete como código. En este caso, utilice > para mayor que (>) y ⁢ para menor que

(<).

Desgraciadamente, muchos navegadores (especialmente, los productos más

desfasados y de marcas distintas que Navigator e Internet Explorer) no muestran

correctamente muchas de las entidades con nombre. La mayoría de los

navegadores muestran las entidades numéricas más utilizadas, pero resulta más

difícil recordar el número de una entidad que su nombre.

Insertar caracteres especiales de texto

Puede insertar varios caracteres especiales (en forma de entidades HTML)

eligiendo la categoría Caracteres en el menú desplegable del panel Objetos.

Para insertar un carácter especial en un documento:

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde

desea insertar un carácter especial.

2 Lleve a cabo una de estas operaciones:

• Elija el nombre del carácter en el submenú Insertar > Caracteres.

• Abra el panel Objetos (eligiendo Ventana > Objectos), elija la categoría

Caracteres en el menú desplegable y seleccione el carácter deseado.

Hay otros muchos caracteres especiales. Para seleccionar uno de ellos, elija Insertar

> Caracteres > Más y seleccione un carácter. A continuación, haga clic en Aceptar.

Insertar y aplicar formato a texto 247

Copiar y pegar código HTML en Dreamweaver

Puede copiar y pegar código HTML desde otra aplicación o desde la vista de

Código. Puede copiar y pegar el código HTML como texto o como código con las

etiquetas intactas.

Para copiar el código HTML y pegarlo en la vista de Código:

1 Copie el código desde otra aplicación (como BBEdit o HomeSite) o desde la

vista de Código o el inspector de código de Dreamweaver y sitúe el punto de

inserción en la vista de Código.

2 Elija Edición > Pegar y seleccione Actualizar vista de diseño en la barra de

herramientas.

Por ejemplo, copie el código HTML para una tabla desde BBEdit y péguelo en

la vista de Código de Dreamweaver para que aparezca como una tabla en la

vista de Diseño.

Si desea que el código HTML aparezca como texto, sitúe directamente el punto de

inserción en la vista de Diseño y elija Edición > Pegar. Puede utilizar este

procedimiento si el documento de Dreamweaver contiene instrucciones para

escribir HTML y quiere que el código aparezca como texto.

Para copiar y pegar código HTML:

1 Seleccione y copie el código desde otra aplicación.

2 Sitúe el punto de inserción en la vista de Diseño y elija

Edición > Pegar HTML.

También puede seleccionar un elemento en la vista de Diseño, como, por ejemplo,

una tabla, y elegir Edición > Copiar HTML. A continuación puede pegarlo en

otra aplicación como código HTML. Para obtener más información sobre la

edición de código HTML, consulte “Escribir y editar código” en la página 350.

Capítulo 10248

Crear listas

Puede crear listas numeradas (ordenadas), listas con viñetas (sin ordenar) y listas

de deﬁnición a partir de texto existente o de texto nuevo que escriba en la ventana

de documento. Las listas de deﬁnición no utilizan caracteres iniciales como puntos

de viñeta o números y suelen utilizarse en glosarios o descripciones. Además, las

listas se pueden anidar, es decir, contener otras listas. Por ejemplo, en algunos

casos puede resultar conveniente anidar una lista ordenada o con viñetas en otra

numerada u ordenada.

Para crear una lista:

1 En la vista de Diseño, sitúe el punto de inserción en la línea donde desea añadir

una lista de elementos nuevos.

2 Haga clic en los botones Lista con viñetas o Lista numerada del inspector de

propiedades o elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin

ordenar (con viñetas), Lista ordenada (numerada) o Lista de deﬁnición.

Puede insertar una lista en la vista de Código utilizando el menú Texto, pero

Dreamweaver sólo añadirá la primera y la última etiquetas HTML de lista y

usted deberá introducir manualmente el código de los elementos individuales

de la lista.

3 Comience a escribir la lista, presionando Entrar (Windows) o Retorno

(Macintosh) para pasar a otro elemento de la lista.

4 Para terminar la lista, presione dos veces Entrar (Windows) o Retorno

(Macintosh).

Para crear una lista usando texto existente:

1 Seleccione una serie de párrafos para convertirlos en una lista.

2 Haga clic en los botones Lista con viñetas o Lista numerada del inspector de

propiedades o elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin

ordenar, Lista ordenada o Lista de deﬁnición.

Para crear una lista anidada:

1 Seleccione los elementos de lista que desea anidar.

2 Haga clic en el botón Sangría del inspector de propiedades o elija Texto >

Sangría.

Dreamweaver sangrará el texto y creará una lista distinta con los atributos

HTML de la lista original.

3 Aplique un nuevo estilo o tipo de lista al texto sangrado siguiendo el

procedimiento detallado.

Insertar y aplicar formato a texto 249

Configuración de fuentes, estilos, color y

alineación

Puede aplicar formato de texto HTML a una letra o crear un sitio completo

utilizando los comandos de Texto > Formato de párrafo o las opciones del

inspector de propiedades. Este tipo de formato manual prevale sobre el establecido

por un estilo HTML o CSS.

Al aplicar formato de texto HTML se utiliza el inspector de propiedades y los

comandos del menú Texto, como Texto > Formato de párrafo y Texto > Estilo.

Configurar y cambiar fuentes y estilos

Utilice el inspector de propiedades o el menú Texto para establecer o cambiar las

características de fuente del texto seleccionado.

Para establecer o cambiar las características de fuente:

1 Seleccione el texto. Si no hay texto seleccionado, el cambio se aplicará al texto

que escriba a continuación.

2 Dispone de las opciones siguientes:

• Para cambiar la fuente, elija una combinación de fuentes en el inspector de

propiedades o en el submenú Texto > Fuente.

Los navegadores muestran el texto utilizando la primera fuente de la

combinación que esté instalada en el sistema del usuario. Si ninguna de las

fuentes de la combinación está instalada, el navegador mostrará el texto de

acuerdo con su propia conﬁguración. Consulte también “Modiﬁcar

combinaciones de fuentes” en la página 252. Elija Predeterminada para quitar

los tipos de fuente aplicados anteriormente y aplicar la fuente predeterminada

al texto seleccionado (la fuente predeterminada del navegador o la fuente

asignada a la etiqueta en la hoja de estilos CSS).

• Para cambiar el estilo de fuente, haga clic en Negrita o Cursiva en el inspector

de propiedades o elija un estilo de fuente (Negrita, Cursiva, Subrayado, etc.)

en el submenú Texto > Estilo.

Capítulo 10250

• Para cambiar el tamaño de fuente, elija un tamaño (de 1 a 7) en el inspector de

propiedades o en el submenú Texto > Tamaño.

Las tamaños de fuente HTML son tamaños relativos, no de puntos. Los

usuarios establecen el tamaño de puntos de la fuente predeterminada para sus

navegadores. Éste será el tamaño de fuente que verán cuando elijan

Predeterminado o 3 en el inspector de propiedades o el submenú Texto >

Tamaño. Los tamaños 1 o 2 aparecerán más pequeños que el tamaño de fuente

predeterminado; los tamaños 4 a 7 aparecerán más grandes. Asimismo, las

fuentes suelen aparecer con un mayor tamaño en Windows que en Macintosh,

si bien Macintosh Internet Explorer 5 utiliza el mismo tamaño predeterminado

que Windows.

• Para aumentar o reducir el tamaño del texto seleccionado, elija un tamaño

relativo (desde + o –1 hasta +4 o –3) en el inspector de propiedades o en el

menú Texto > Cambio de tamaño.

Nota: Una forma de asegurar el uso del mismo tamaño de fuente consiste en utilizar

estilos CSS con el tamaño de fuente definido en píxeles. Para obtener más información

sobre CSS, consulte “Utilizar hojas de estilos CSS” en la página 259.

Estos números indican una diferencia relativa respecto al tamaño de la fuente

base. El valor predeterminado de la fuente base es 3. Por tanto, un valor de +4

produce un tamaño de fuente de 3 + 4, es decir, 7. El 7 es el valor máximo del

tamaño de fuente. Si intenta deﬁnir uno más alto, aparecerá como 7.

Dreamweaver no muestra la etiqueta basefont (que se encuentra en la sección

head ), aunque el tamaño de fuente se mostrará correctamente en un navegador.

Para comprobarlo, compare el texto deﬁnido en 3 con el texto deﬁnido en +3.

Utilizar párrafos y encabezados

Utilice el menú Formato del inspector de propiedades o el submenú Texto >

Formato de párrafo para aplicar las etiquetas estándar de párrafo y encabezado.

Para redeﬁnir la apariencia de las etiquetas de párrafo y encabezado, utilice hojas

de estilos CSS (consulte “Utilizar hojas de estilos CSS” en la página 259).

Para aplicar una etiqueta de párrafo o encabezado:

1 Sitúe el punto de inserción en el párrafo o seleccione parte del texto del

párrafo.

2 En el submenú Texto > Formato de párrafo o el menú desplegable Formato del

inspector de propiedades, elija una opción:

• Elija un formato de párrafo (por ejemplo, Encabezado 1, Encabezado 2,

Preformateado, etc.). La etiqueta HTML asociada con el estilo seleccionado

(por ejemplo, h1 para Encabezado 1, h2 para Encabezado 2, pre para

Preformateado, etc.) se aplicará a todo el párrafo.

• Elija Ninguno para quitar un formato de párrafo.

Insertar y aplicar formato a texto 251

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 página. Si no se ha

establecido ningún color de texto en Propiedades de la página, se utilizará el negro

como color predeterminado.

Para cambiar el color del texto:

1 Seleccione el texto.

2 Dispone de las opciones siguientes:

• Elija un color en la paleta de colores válidos para los navegadores haciendo clic

en el selector de colores del inspector de propiedades.

• Elija Texto > Color. Aparecerá el cuadro de diálogo del selector de colores del

sistema. Seleccione un color y haga clic en Aceptar.

• Escriba el nombre del color o un número hexadecimal directamente en el

campo del inspector de propiedades.

• Para deﬁnir el color predeterminado del texto, utilice el comando Modiﬁcar >

Propiedades de la página. Consulte “Deﬁnir colores predeterminados de texto”

en la página 157.

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 válidos para los navegadores.

2 Haga clic en el botón Tachado (el botón cuadrado blanco y atravesado por una

línea roja que se encuentra en la esquina superior derecha).

Alinear texto

Puede alinear texto en la página utilizando el inspector de propiedades o el

submenú Texto > Alinear. Asimismo, puede centrar cualquier elemento en una

página usando el comando Texto > Alinear > Centro.

Para alinear texto:

1 Seleccione el texto que desea alinear o, simplemente, inserte el puntero al

principio del texto.

2 Haga clic en una opción de alineación (Izquierda, Derecha o Centro) del

inspector de propiedades o elija Texto > Alinear y seleccione un comando.

Capítulo 10252

Para centrar elementos:

1 Seleccione el elemento que desea centrar (imagen, plug-in, tabla u otro

elemento de página).

2 Elija Texto > Alinear > Centro.

Nota: Se pueden alinear y centrar bloques completos de texto, pero no partes de un

encabezado o de un párrafo.

Para aplicar y quitar sangría al texto:

1 Seleccione el texto deseado.

2 Haga clic en el botón Sangría o Anular sangría del inspector de propiedades,

elija Texto > Sangría o Anular sangría, o elija Lista > Sangría o Anular sangría

en el menú contextual.

De este modo se aplicará o eliminará la etiqueta blockquote cuando el texto

seleccionado sea un párrafo o un encabezado, y se añadirá o quitará una

etiqueta adicional ul u ol cuando el texto seleccionado sea una lista.

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 submenú Texto > Fuente.

Las combinaciones de fuentes determinan cómo muestra un navegador el texto de

la página Web. Un navegador utiliza la primera fuente de la combinación que se

encuentre en el sistema del usuario; si no está instalada ninguna de las fuentes de

la combinación, el navegador mostrará el texto de acuerdo con las preferencias que

tenga deﬁnidas.

Para modificar las combinaciones de fuentes:

1 Elija Texto > Fuente > Editar lista de fuentes.

2 Seleccione la combinación de fuentes en la lista de la parte superior del cuadro

de diálogo.

Las fuentes de la combinación seleccionada aparecerán en la lista Fuentes

elegidas, situada en la esquina inferior izquierda del cuadro de diálogo. A la

derecha de ésta se encuentra una lista con todas las fuentes disponibles

instaladas en el sistema.

Insertar y aplicar formato a texto 253

Dispone de las opciones siguientes:

• Para añadir o quitar fuentes de una combinación, haga clic en el botón << o >>

entre las listas Fuentes elegidas y Fuentes disponibles.

• Para añadir o quitar una combinación de fuentes, haga clic, respectivamente, en

los botones más (+) y menos (-) de la parte superior del cuadro de diálogo.

• Para añadir 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 botón << para añadirla a la combinación. Añadir una fuente que no está

instalada en el sistema resulta útil, por ejemplo, para especiﬁcar una fuente sólo

para Windows cuando se trabaja con Macintosh.

• Para desplazarse por la lista de combinaciones de fuentes, haga clic en los

botones de ﬂecha de la parte superior del cuadro de diálogo.

Para añadir una nueva combinación a la lista de fuentes:

1 Elija Texto > Fuente > Editar lista de fuentes.

2 Seleccione una fuente de la lista de Fuentes disponibles y haga clic en el botón

<< para añadir la fuente a la lista de Fuentes elegidas.

3 Repita el paso 2 con cada fuente de la combinación.

Para añadir una fuente que no está instalada en el sistema, escriba el nombre de

la fuente en el campo de texto situado bajo la lista Fuentes disponibles y haga

clic en el << botón para añadirla a la combinación. Añadir una fuente que no

está instalada en el sistema resulta útil, por ejemplo, para especiﬁcar una fuente

sólo para Windows cuando se trabaja con Macintosh.

4 Cuando termine de seleccionar fuentes especíﬁcas, seleccione una familia

genérica de fuentes en el menú Fuentes disponibles y haga clic en el botón <<

para pasar la familia genérica de fuentes a la lista Fuentes elegidas.

Las familias genéricas de fuentes son: cursiva, fantasía, 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 genérica de fuentes. Por ejemplo, la fuente monoespacio

predeterminada en la mayoría de los sistemas es Courier.

Capítulo 10254

Utilizar reglas horizontales

Las reglas horizontales (líneas) son útiles para organizar la información. Puede

separar visualmente el texto y los objetos de una página con una o más reglas.

Para crear una regla horizontal:

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde

desea insertar una regla horizontal.

2 Lleve a cabo una de estas operaciones:

• Elija Insertar > Regla horizontal.

• Elija Ventana > Objetos para abrir el panel Objetos y, seguidamente, haga clic

en el botón Regla horizontal de la categoría Común.

Para modificar una regla horizontal:

1 En la ventana de documento, seleccione la regla horizontal.

2 Elija Ventana > Propiedades para abrir el inspector de propiedades y modiﬁcar

las propiedades que desee.

Utilizar estilos HTML para aplicar formato a

texto

Un estilo HTML se deﬁne mediante una o más etiquetas HTML (como b, i,

font, y center) que aplican formato al texto. La especiﬁcación HTML 4.0

emitida por el World Wide Web Consortium (W3C) a principios de 1998

desalentaba el uso de etiquetas de formato HTML en favor de las hojas de estilos

CSS. Sin embargo, en la práctica, las etiquetas de formato HTML, a pesar de que

ofrecen un control más limitado sobre la apariencia que las hojas de estilos CSS y

tardan más en cargarse, son compatibles con una gama más amplia de navegadores

que las hojas de estilos CSS. Por esta razón, es probable que sigan formando parte

de las herramientas de los desarrolladores Web mientras los navegadores 3.0 y

anteriores constituyan un porcentaje considerable del tráﬁco de la Web.

Para obtener información especíﬁca sobre la aplicación de formato con etiquetas

HTML, consulte uno de los temas siguientes:

• “Conﬁgurar y cambiar fuentes y estilos” en la página 249

• “Cambiar el color del texto” en la página 251

• “Alinear texto” en la página 251

Insertar y aplicar formato a texto 255

Las etiquetas HTML que deﬁnen la estructura del documento más que su

apariencia, por ejemplo, encabezados, párrafos y listas, siguen formando una parte

considerable de la especiﬁcación HTML. De hecho, aunque tenga previsto utilizar

hojas de estilos CSS para deﬁnir las características de fuentes de la página,

conviene utilizar etiquetas estándar de encabezado, ya que ayudan a conservar la

estructura de la página en los navegadores que no admiten hojas de estilos CSS. Si

desea un ejemplo de esto, vea la Ayuda de Dreamweaver en un navegador 3.0.

Consulte “Utilizar párrafos y encabezados” en la página 250.

Utilizar estilos HTML

Utilice estilos HTML para guardar formato de texto y párrafo que desea utilizar

en otras partes de los documentos. Una vez creado un estilo HTML basado en una

o más etiquetas HTML, puede volver a aplicar ese formato a cualquier texto de

cualquier documento utilizando el panel Estilos HTML.

A diferencia de los estilos CSS, el formato de los estilos HTML sólo afecta al texto

al que se aplica o al que se crea usando un estilo HTML seleccionado. Si cambia el

formato de un estilo HTML que ha creado, no se actualizará el texto que haya

formateado originalmente con ese estilo. Si desea poder cambiar el formato y

actualizar automáticamente todas las apariciones de ese formato, use estilos CSS

(consulte “Utilizar hojas de estilos CSS” en la página 259).

Para mostrar la guía de referencia HTML de O’Reilly incluida con Dreamweaver,

haga clic en el botón Referencia de la barra de herramientas y elija O’Reilly

HTML Reference en el menú desplegable.

Puede utilizar el panel Estilos HTML para registrar los estilos HTML que usa en

el sitio y, posteriormente, compartirlos con otros usuarios o sitios locales y

remotos.

Para mostrar el panel Estilos HTML, lleve a cabo una de estas operaciones:

• Elija Ventana > Estilos HTML.

• Haga clic en el icono Estilos HTML en la barra del lanzador o en el lanzador.

Aplicación

automática

Nuevo estilo

Menú contextual

Eliminar estilo

Capítulo 10256

Para ver un estilo HTML existente:

1 En el panel Estilos HTML, seleccione un estilo.

Observe que Borrar estilo del párrafo y Borrar estilo de la selección se utilizan

en el texto que tiene un estilo aplicado, pero no son estilos y no se pueden ver

ni editar.

2 En el panel Estilos HTML, haga clic con el botón derecho (Windows) o mientras

presiona la tecla Control (Macintosh) y elija Editar en el menú contextual o haga

doble clic en el estilo HTML y elija Editar en el menú contextual.

3 En el cuadro de diálogo Deﬁnir estilo HTML, especiﬁque la conﬁguración del

estilo.

Las opciones de Aplicar a determinan si el estilo se aplica al texto seleccionado

(Selección) o al bloque de texto actual (Párrafo). Las opciones de Al aplicar

determinan si la conﬁguración del estilo se añade al formato de texto original

(Añadir a existente) o se elimina del formato existente y se sustituye por la

nueva conﬁguración (Borrar estilo existente).

Para aplicar un estilo HTML existente:

En el panel Estilos HTML, seleccione un estilo.

• Si la casilla de veriﬁcación Aplicación automática de la parte inferior del panel

está seleccionada, haga clic en el estilo.

• Si no está seleccionada, haga clic en el estilo y, a continuación, en Aplicar.

Para borrar el formato de texto del documento:

1 Seleccione el texto formateado.

2 En el panel Estilos HTML, haga clic en Borrar estilo del párrafo o Borrar estilo

de la selección.

Borrar estilo del párrafo elimina el formato del bloque de texto actual en el

documento. Borrar estilo de la selección elimina el formato del texto

seleccionado.

Nota: Puede utilizar Borrar estilo del párrafo y Borrar estilo de la selección para eliminar todo el

formato (salvo el formato CSS), independientemente de cómo se aplicó originalmente (por

ejemplo, a través del panel Estilos HTML o del inspector de propiedades).

Para eliminar un estilo del panel Estilos HTML:

1 En el panel Estilos HTML, desactive la casilla de veriﬁcación para inhabilitar la

opción Aplicación automática.

2 Seleccione un estilo HTML.

3 Haga clic en el icono Eliminar estilo (papelera de reciclaje) situado en la

esquina inferior derecha del panel.

Insertar y aplicar formato a texto 257

Para crear un estilo HTML basado en texto existente:

1 En el documento, seleccione o cree texto que tenga el formato que desea

utilizar como base para el nuevo estilo HTML. Puede utilizar el inspector de

propiedades para ver y aplicar formato.

2 En el panel Estilos HTML, haga clic en el icono Nuevo estilo (signo más)

situado en la esquina inferior derecha.

3 En el cuadro de diálogo Deﬁnir estilo HTML, asigne un nombre al estilo y

ajuste el formato si lo desea.

• Seleccione si desea aplicar el estilo HTML a texto seleccionado o a todo el

párrafo. Observe que un estilo de párrafo se aplica a todo el bloque de texto en

el que está situado el punto de inserción, independientemente de qué parte del

texto esté seleccionada.

• Seleccione si desea aplicar el estilo HTML además del estilo existente (CSS o

HTML) del texto o el párrafo seleccionado o si preﬁere borrar el formato de la

selección o el párrafo y sustituirlo por el nuevo estilo. Tenga en cuenta la

jerarquía para aplicar estilos: los estilos HTML tienen prioridad sobre los estilos

CSS, que a su vez tienen prioridad sobre los estilos CSS externos. Consulte

“Utilizar hojas de estilos CSS” en la página 259.

Observe que las opciones de formato del panel Estilos HTML coinciden con

las del inspector de propiedades.

4 Haga clic en Aceptar.

Para crear un estilo HTML basado en un estilo HTML existente:

1 Compruebe que no hay texto seleccionado en la ventana de documento.

2 En el panel Estilos HTML, seleccione un estilo y lleve a cabo una de estas

operaciones:

• Haga clic en el triángulo de la esquina superior derecha del panel para mostrar

el menú desplegable contextual.

• Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) y, a continuación, elija Duplicar en el menú contextual.

Aparecerá el cuadro de diálogo Deﬁnir estilo HTML. Para restablecer las

opciones predeterminadas, haga clic en Borrar.

3 Siga los pasos 3 y 4 de las instrucciones para crear un estilo nuevo basado en el

texto existente.

Capítulo 10258

Para crear un estilo HTML a partir de cero:

1 En el panel Estilos HTML, haga clic en el icono Nuevo estilo. También puede

elegir Texto > Estilos de HTML > Nuevo estilo.

Aparecerá el cuadro de diálogo Deﬁnir estilo HTML.

2 Siga los pasos 3 y 4 de las instrucciones para crear un estilo nuevo basado en el

texto existente.

Haga clic en Borrar para restablecer las opciones predeterminadas del cuadro de

diálogo.

3 Haga clic en Aceptar.

Para editar un estilo HTML existente:

1 Compruebe que no hay texto seleccionado en la ventana de documento.

2 En el panel Estilos HTML, compruebe que la casilla de veriﬁcación Aplicación

automática está desactivada.

Si está activada, el estilo HTML se aplicará cuando lo seleccione en el panel

Estilos HTML.

3 En el panel Estilos HTML, haga clic con el botón derecho (Windows) o

mientras presiona la tecla Control (Macintosh) en el estilo y, a continuación,

elija Editar en el menú contextual.

Aparecerá el cuadro de diálogo Deﬁnir estilo HTML. Para restablecer las

opciones predeterminadas, haga clic en Borrar.

Al editar un estilo HTML, Dreamweaver no actualiza automáticamente el texto

formateado anteriormente con ese estilo. Si desea actualizar el formato aplicado

con un estilo, utilice una hoja de estilos CSS (consulte “Utilizar hojas de estilos

CSS” en la página 259).

Para compartir los estilos HTML con otros sitios o usuarios:

1 Elija Ventana > Archivos del sitio para abrir la ventana Sitio en Ver archivos del

sitio.

2 En el panel derecho, abra la carpeta raíz del sitio y, a continuación, abra la

carpeta Library.

Observe que hay un archivo llamado styles.xml. Este archivo contiene todos los

estilos HTML del sitio. Puede colocar, desproteger, proteger y copiar este

archivo como lo haría con cualquier otro archivo del sitio. También puede crear

Design Notes para el archivo styles.xml. Recuerde que deberá proteger el

archivo styles.xml antes de crear o editar un estilo para un sitio remoto.

Para obtener más información sobre el uso de estas opciones, consulte

“Conﬁgurar un sitio remoto” en la página 128.

Insertar y aplicar formato a texto 259

Utilizar hojas de estilos CSS

Un estilo es un grupo de atributos de formato que controla la apariencia de un

rango de texto en un documento. Una hoja de estilos en cascada (CSS) se puede

emplear para controlar muchos documentos al mismo tiempo e incluye todos los

estilos de un documento. La ventaja de utilizar una hoja de estilos CSS sobre el

uso de un estilo HTML estriba en que, además de estar vinculada a múltiples

documentos, cuando se actualiza o cambia un estilo CSS, se actualiza

automáticamente el formato de todos los documentos que utilizan esa hoja de

estilos.

Por ejemplo, imaginemos un sitio Web muy grande como Yahoo o

Macromedia.com. Utilizando los estilos CSS puede realizar cambios de fuente y

formato en todo el sitio o en muchas páginas de forma rápida y precisa. Asimismo,

los estilos CSS permiten deﬁnir muchas propiedades que no se pueden controlar

utilizando sólo HTML. Por ejemplo, puede asignar viñetas de lista personalizadas

y especiﬁcar distintos tamaños y unidades de fuente (píxeles, puntos, etc.). Si

utiliza estilos CSS y deﬁne el tamaño de fuente en píxeles, conseguirá un

tratamiento más coherente de la disposición y el diseño de las páginas en múltiples

navegadores.

Los estilos CSS existen desde hace algún tiempo, pero muchos diseñadores y

creadores de sitios Web se han mostrado reacios a usarlos debido a que no siempre

son compatibles con los navegadores. Sin embargo, si los usuarios del sitio utilizan

navegadores que reconocen los estilos CSS (versión 4.0 y posteriores), debería

aprovechar la potencia y el control que ofrecen.

Los estilos CSS se identiﬁcan mediante un nombre o una etiqueta HTML, lo que

permite cambiar el atributo de un estilo y ver cómo se reﬂeja el cambio

inmediatamente en todo el texto al que se aplica dicho estilo. Los estilos CSS en

documentos HTML pueden controlar la mayoría de los atributos tradicionales de

formato de texto, como fuente, tamaño y alineación. También pueden especiﬁcar

atributos exclusivos de HTML, como posición, efectos especiales e imágenes

dinámicas.

Las hojas de estilos CSS residen en el área head del documento. Los estilos CSS

pueden deﬁnir los atributos de formato de etiquetas HTML, rangos de texto

identiﬁcados por un atributo class o texto que cumpla los criterios de la

especiﬁcación de hojas de estilos en cascada (CSS). Dreamweaver reconoce los

estilos deﬁnidos en documentos existentes siempre que se ajusten a las directrices

de los estilos CSS.

Las hojas de estilos CSS funcionan en navegadores 4.0 y posteriores. Internet

Explorer 3.0 reconoce algunas hojas de estilos CSS, pero la mayoría de los

navegadores anteriores las ignoran.

Capítulo 10260

Hay tres tipos de hojas de estilos CSS en Dreamweaver:

• Los estilos CSS personalizados son similares a los que se emplean en los

programas de tratamiento de texto, salvo que no distinguen entre estilo de

carácter y de párrafo. Puede aplicar estilos CSS personalizados a cualquier rango

o bloque de texto. Si el estilo CSS se aplica a un bloque de texto (por ejemplo,

un párrafo completo o una lista sin ordenar), se añadirá un atributo

class a la

etiqueta del bloque (por ejemplo, p class=“miEstilo” o ul class=“miEstilo”). Si

el estilo CSS se aplica a un rango de texto, se insertarán alrededor del texto

seleccionado etiquetas span que contengan el atributo class.. Consulte “Aplicar

un estilo CSS personalizado (clase)” en la página 265.

• Los estilos de etiquetas HTML redeﬁnen el formato de una determinada

etiqueta, como

h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1,

todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.

Nota: Tenga cuidado al redefinir etiquetas en una CSS vinculada, pues puede cambiar la

disposición de muchas páginas. Por ejemplo, si redefine la etiqueta

table para que tenga

una determinada apariencia, se modificará la disposición de otras páginas que utilicen

tablas.

• Los estilos del selector CSS redeﬁnen el formato de una determinada

combinación 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 especíﬁco (por ejemplo, #miEstilo se aplica a todas las

etiquetas que contienen el par atributo-valor ID=“miEstilo”).

La aplicación manual de formato HTML prevalece sobre el formato aplicado con

estilos CSS (o HTML). Para que los estilos CSS controlen el formato de un

párrafo, deberá quitar todos los estilos HTML y el formato HTML manual.

Si bien puede establecer un número ilimitado de atributos de estilo CSS deﬁnidos

por la especiﬁcación CSS1 en Dreamweaver, no todos los atributos aparecerán en

la ventana de documento. Los atributos que no aparecen se marcarán con un

asterisco (*) en el cuadro de diálogo Deﬁnición 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 ningún navegador.

Nota: Para mostrar la guía de referencia CSS de O’Reilly incluida con Dreamweaver, haga

clic en el botón Referencia de la barra de herramientas y elija O’Reilly CSS Reference en el

menú desplegable.

Insertar y aplicar formato a texto 261

Propiedades de los estilos CSS

El World Wide Web Consortium es responsable de la especiﬁcación de hojas de

estilos en cascada (CSS1), donde se deﬁnen las propiedades de estilos CSS (por

ejemplo, fuente, color, relleno, margen, espaciado entre palabras) que controlan la

apariencia de elementos de la página Web. Dreamweaver permite establecer

cualquier propiedad CSS1.

En Internet Explorer 4.0 y posteriores puede utilizar un lenguaje de secuencia de

comandos como JavaScript o VBScript para cambiar las propiedades de posición y

estilo CSS de los elementos después de cargar la página. En Netscape Navigator

4.0 y posteriores no se pueden cambiar las propiedades de estilos CSS después de

cargar la página, pero sí las de posición.

Crear y establecer vínculos con una hoja de estilos CSS

externa

Una hoja de estilos CSS es un archivo de texto externo que contiene estilos y

especiﬁcaciones de formato. Si edita una hoja de estilos CSS externa, todos los

documentos vinculados a esa hoja se actualizarán para reﬂejar los cambios. Puede

exportar los estilos CSS de un documento para crear una nueva hoja de estilos

CSS, así como adjuntar o vincular dichos estilos a una hoja de estilos externa para

aplicarlos.

La Ayuda de Dreamweaver está formada por páginas HTML que utilizan una hoja

de estilos CSS vinculada llamada help.css. Abra este archivo (situado en la carpeta

Help/html) en un editor de texto para ver los códigos de deﬁniciones de estilos

CSS. Abra alguno de los archivos de temas (los que comienzan por número) para

ver cómo se vincula la hoja de estilos CSS al documento utilizando una etiqueta

link y cómo se aplican los estilos especíﬁcos. También puede copiar el archivo

help.css en la carpeta raíz local y aplicar sus estilos a una página de prueba.

Capítulo 10262

Para adjuntar una hoja de estilos CSS externa:

1 Elija Ventana > Estilos CSS o haga clic en el icono Estilos CSS del lanzador.

2 En el panel Estilos CSS, haga clic con el botón derecho (Windows) o mientras

presiona la tecla Control (Macintosh) y elija Adjuntar hoja de estilos en el

menú emergente. También puede hacer clic en el icono Adjuntar hoja de estilos

situado en la parte inferior del panel Estilos CSS.

3 En el cuadro de diálogo Seleccionar archivo de hoja de estilos, introduzca el

nombre de archivo en el campo URL o localice el archivo deseado.

4 Seleccione un documento o una ruta relativa a la raíz del sitio. Consulte

“Ubicación y rutas de documentos” en la página 372.

5 Haga clic en Abrir. La hoja de estilos se adjuntará al documento de

Dreamweaver y sus estilos aparecerán en el panel Estilos CSS.

Para establecer vínculos o crear una hoja de estilos CSS externa:

1 Elija Ventana > Estilos CSS o haga clic en el icono Estilos CSS del lanzador.

2 En el panel Estilos CSS, haga clic con el botón derecho (Windows) o mientras

presiona la tecla Control (Macintosh) y elija Editar hoja de estilos en el menú

desplegable.

3 En el cuadro de diálogo Editar hoja de estilos, haga clic en Vínculo.

4 En el cuadro de diálogo Vincular hoja de estilos externa, lleve a cabo una de

estas operaciones:

• Haga clic en Examinar (Windows) o Seleccionar (Macintosh) para localizar una

hoja de estilos CSS externa o introduzca la ruta de la hoja de estilos en cuadro

Archivo/URL. Se recomienda utilizar el botón Examinar o Seleccionar, ya que

permite localizar la ruta correcta de la hoja de estilos.

• Cree una hoja de estilos CSS externa introduciendo un nombre de archivo

nuevo (que no exista en la ubicación especiﬁcada). El nombre de archivo debe

tener la extensión .css.

5 Elija la opción Vincular o Importar para especiﬁcar y crear la etiqueta empleada

para adjuntar la hoja de estilos CSS externa al documento y, a continuación,

haga clic en Aceptar.

Importar lleva la información del archivo de hoja de estilos CSS externa al

documento actual, mientras que Vincular accede a la información y la

transmite sin transferirla. Si bien tanto Importar como Vincular llaman a todos

los estilos de la hoja externa al documento actual, Vincular ofrece más

posibilidades y funciona con más navegadores.

El nombre de la hoja de estilos CSS externa aparece con el identiﬁcador

(vincular o importar) en la lista de estilos del cuadro de diálogo Editar hoja de

estilos. Siga estos pasos para crear o editar los estilos deﬁnidos en la hoja de

estilos CSS externa.

Insertar y aplicar formato a texto 263

En el cuadro de diálogo Editar hoja de estilos, seleccione el nombre de la hoja

externa y haga clic en Editar.

Se abrirá el cuadro de diálogo Editar hoja de estilos para esa hoja de estilos.

7 Haga clic en Nuevo para deﬁnir estilos en la hoja de estilos CSS externa.

8 En el cuadro de diálogo Nuevo estilo, deﬁna el nuevo estilo. Consulte “Crear

un estilo CSS en Dreamweaver” en la página 264.

9 Haga clic en Guardar cuando termine de deﬁnir los estilos.

Editar una hoja de estilos CSS externa

Al editar una hoja de estilos CSS que controla el texto del documento, cambiará

inmediatamente el formato de todo el texto controlado por dicha hoja de estilos.

Los cambios realizados afectarán a todos los documentos vinculados a la hoja de

estilos.

Para editar una hoja de estilos CSS externa:

1 Abra cualquier documento vinculado a la hoja de estilos CSS externa que

desea modiﬁcar.

2 Lleve a cabo una de estas operaciones:

• Elija Ventana > Estilos CSS o haga clic en Estilos CSS en el lanzador. En el

panel Estilos CSS, haga clic con el botón derecho (Windows) o mientras

presiona la tecla Control (Macintosh) y elija Editar hoja de estilos en el menú

desplegable.

• Elija Texto > Estilos CSS > Editar hoja de estilos.

3 En el cuadro de diálogo Editar hoja de estilos, seleccione el nombre de la hoja

externa y haga clic en Editar.

Aparecerá un segundo cuadro de diálogo Editar hoja de estilos mostrando los

estilos de la hoja externa. Seleccione el estilo que desea editar.

4 Edite el estilo. Consulte “Crear un estilo CSS en Dreamweaver” en la

página 264.

5 Haga clic en Guardar cuando termine de editar los estilos.

Capítulo 10264

Crear un estilo CSS en Dreamweaver

Cree un estilo CSS para automatizar la aplicación de formato a etiquetas HTML o

a rangos de texto identiﬁcados mediante un atributo class.

Para crear un estilo CSS:

1 Elija Ventana > Estilos CSS y, en el panel Estilos CSS, haga clic con el botón

derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija

Nuevo estilo en el menú emergente. También puede hacer clic en el icono

Nuevo estilo situado en la parte inferior del panel Estilos CSS.

2 Dispone de las siguientes opciones de estilos CSS:

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 Redeﬁne el formato predeterminado de una etiqueta

HTML especiﬁcada. Recuerde que, al redeﬁnir una etiqueta, puede alterar la

disposición de muchas páginas.

Usar selector CSS deﬁne el formato de una determinada combinación de

etiquetas o de todas las etiquetas que contienen un atributo 1d especíﬁco.

3 Introduzca un nombre, una etiqueta o un selector para el nuevo estilo:

• Los nombres de estilo (clase) personalizados deben comenzar por un punto. Si

no introduce el punto, lo hará Dreamweaver. Estos nombres pueden contener

cualquier combinación de letras y números, el punto debe ir seguido de una

letra. Por ejemplo, .miencabezado1.

• Para redeﬁnir un estilo de etiqueta HTML, introduzca una etiqueta HTML o

elija una en el menú emergente.

• Para un selector CSS, introduzca criterios válidos para selectores (por ejemplo,

td o #miEstilo), o elija un selector en el menú emergente. Los selectores

disponibles en el menú son a:activos, a:activable, a:vínculo y a:visitado.

4 Seleccione la ubicación donde se deﬁnirá el estilo: Nuevo archivo de hojas de

estilos (externo) o Sólo este documento.

5 Haga clic en Aceptar. Aparecerá el cuadro de diálogo Deﬁnición de estilo.

6 Elija la conﬁguración de formato del nuevo estilo CSS. Deje los atributos en

blanco si no son importantes para el estilo.

Los atributos que no aparecen en la ventana de documento se marcarán con un

asterisco (*) en el cuadro de diálogo Deﬁnición 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 ningún navegador.

Insertar y aplicar formato a texto 265

Haga clic en Aceptar o Aplicar.

Consulte los temas siguientes en la Ayuda de Dreamweaver para obtener

información sobre conﬁguraciones especíﬁcas:

• Panel Tipo de Deﬁnición de estilo

• Panel Fondo de Deﬁnición de estilo

• Panel Bloque de Deﬁnición de estilo

• Panel Cuadro de Deﬁnición de estilo

• Panel Borde de Deﬁnición de estilo

• Panel Lista de Deﬁnición de estilo

• Panel Posición de Deﬁnición de estilo

• Panel Extensiones de Deﬁnición de estilo

Cuando se crea un estilo personalizado (clase), aparece en el panel Estilos CSS y en

el submenú Texto > Estilos CSS. Los estilos de etiquetas HTML y del selector CSS

no aparecen en el panel Estilos CSS porque no se pueden aplicar. Estos estilos se

reﬂejan en la ventana de documento automáticamente cada vez que aparece la

etiqueta o el selector.

Aplicar un estilo CSS personalizado (clase)

Los estilos CSS personalizados (clase) son los únicos que se pueden aplicar a

cualquier texto del documento, independientemente de las etiquetas que

controlen dicho texto. El panel Estilos CSS muestra los nombres de todos los

estilos disponibles.

No confunda los estilos CSS con opciones como Negrita o Variable del submenú

Texto > Estilo. Estas opciones son atributos de formato predeﬁnidos que

corresponden a etiquetas HTML especíﬁcas.

Cuando se aplican dos o más estilos CSS al mismo texto, éstos pueden entrar en

conﬂicto y producir resultados imprevistos. Consulte “Estilos en conﬂicto” en la

página 266.

Capítulo 10266

Para aplicar un estilo CSS personalizado:

1 Elija Ventana > Estilos CSS.

2 Seleccione el texto al que desea aplicar un estilo CSS.

Sitúe el punto de inserción en un párrafo para aplicar el estilo a todo el párrafo.

Para especiﬁcar la etiqueta exacta a la que se deberá aplicar el estilo CSS,

selecciónela con el selector de etiquetas situado en la parte inferior izquierda de

la ventana de documento. También puede seleccionar la etiqueta exacta en el

selector de etiquetas, hacer clic con el botón derecho (Windows) o mientras

presiona la tecla Control (Macintosh) para mostrar un menú contextual y elegir

Establecer clase para ver una lista de estilos CSS para aplicar.

Si selecciona un rango de texto dentro de un párrafo, el estilo CSS sólo afectará

al rango seleccionado.

3 Haga clic en el nombre de un estilo del panel Estilos CSS.

También puede aplicar un estilo CSS siguiendo este procedimiento: elija un

nombre de estilo en el submenú Texto > Estilos CSS o haga clic con el botón

derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija el

nombre de estilo en el submenú Estilos CSS del menú contextual. La etiqueta de

la selección actual aparecerá al lado del comando Estilo personalizado.

Exportar estilos para crear una hoja de estilos CSS

Puede exportar estilos desde un documento para crear una nueva hoja de estilos

CSS. A continuación, puede establecer vínculos con otros documentos para

aplicar estos estilos.

Para exportar estilos CSS desde un documento y crear una hoja de estilos CSS:

1 Elija Archivo > Exportar > Exportar estilos CSS o elija Texto > Exportar hoja de

estilos. Aparecerá el cuadro de diálogo Exportar estilos como archivo CSS.

2 Introduzca un nombre para el estilo y haga clic en Guardar. El estilo se guardará

como una hoja de estilos CSS.

Estilos en conflicto

Cuando se aplican dos o más estilos CSS al mismo texto, éstos pueden entrar en

conﬂicto y producir resultados imprevistos. Los navegadores aplican atributos de

estilo de acuerdo con las reglas siguientes:

• Si se aplican dos estilos al mismo texto, el navegador muestra todos los

atributos de ambos estilos a menos que entren en conﬂicto. Por ejemplo, un

estilo puede especiﬁcar azul como color de texto y el otro estilo puede

especiﬁcar rojo.

Insertar y aplicar formato a texto 267

• Si los atributos de dos estilos aplicados al mismo texto entran en conﬂicto, el

navegador mostrará el atributo del estilo más interno (el más próximo al texto).

• Si hay un conﬂicto directo, los atributos de estilos CSS (estilos aplicados con el

atributo class) prevalecerán sobre los atributos correspondientes a estilos de

etiquetas HTML.

En el ejemplo siguiente, el estilo deﬁnido para h1 podría especiﬁcar la fuente, el

tamaño y el color de todos los párrafos h1, pero el estilo CSS personalizado .Blue

aplicado a este párrafo prevalece sobre la conﬁguración de color del estilo H1. El

segundo estilo CSS personalizado .Red prevalece sobre .Blue porque se encuentra

dentro del estilo .Blue.

<h1><span class="Blue">Este párrafo está controlado por el estilo

personalizado .Blue y el estilo de la

etiqueta HTML h1.<span class="Red">Excepto esta frase, que está controlada por

el estilo .Red.

</span>

Ahora volvemos al estilo .Blue.</span></h1>

Utilizar el panel Estilos CSS

Utilice el panel Estilos CSS para aplicar estilos CSS personalizados a la selección

actual. El panel Estilos CSS sólo muestra estilos CSS personalizados (clase). Los

estilos de las etiquetas HTML redeﬁnidas y del selector CSS no aparecen en el

panel Estilos CSS porque se aplican automáticamente a cualquier texto controlado

por la etiqueta o el selector especiﬁcados. Si lo único que quiere es cortar y pegar

estilos reutilizables, pero que no se puedan actualizar ni personalizar, utilice el

panel Estilos HTML.

Elija Ventana > Estilos CSS para mostrar el panel Estilos CSS.

Aplicar muestra la etiqueta de la selección actual. Si desea seleccionar otra etiqueta,

elíjala en el menú.

Nuevo estilo abre el cuadro de diálogo Nuevo estilo. Cree un estilo para un

determinado documento o cree una hoja de estilos externa.

Adjuntar hoja de estilos abre el cuadro de diálogo Seleccionar archivo de hoja de

estilos. Seleccione una hoja de estilos externa para adjuntar al documento actual.

Editar hoja de estilos abre el cuadro de diálogo Editar hoja de estilos. Edite los

estilos en el documento actual o en una hoja de estilos externa.

Consulte también “Utilizar hojas de estilos CSS” en la página 259.

Nota: Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) en el panel Estilos CSS para abrir un menú contextual que incluye los

comandos Editar, Duplicar, Borrar, Aplicar, Nuevo estilo, Editar hoja de estilos y Adjuntar

hoja de estilos.

Capítulo 10268

Configurar preferencias de estilos CSS

Las preferencias de estilos CSS controlan la forma en que Dreamweaver escribe el

código que deﬁne los estilos CSS. Los estilos CSS se pueden escribir en una forma

abreviada que resulta más fácil para algunos usuarios. Algunas versiones antiguas

de los navegadores no interpretan correctamente la forma abreviada. A menos que

desee que Dreamweaver escriba los estilos en forma abreviada, no hay ninguna

razón para cambiar las preferencias de estilos CSS.

Elija Edición > Preferencias y seleccione Estilos CSS para mostrar las preferencias

de Formato Hoja Estilos CSS. Consulte también “Utilizar hojas de estilos CSS” en

la página 259.

Forma abreviada para determina qué atributos de estilos CSS escribe

Dreamweaver en forma abreviada.

Al editar estilos CSS 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 están. Elija Según conﬁguración anterior

para que Dreamweaver reescriba los estilos en forma abreviada de acuerdo con los

atributos especiﬁcados en las casillas de veriﬁcación de Forma abreviada para.

Convertir estilos CSS a etiquetas HTML

Si ha utilizado estilos CSS para especiﬁcar opciones de formato de texto (como

familia, tamaño, color y decoración de fuentes) y, posteriormente, decide que

desea que las opciones de formato se puedan ver en un navegador 3.0, puede

utilizar el comando Archivo > Convertir > Compatible con navegador 3.0 para

convertir toda la información posible de estilos a etiquetas HTML.

Nota: No se pueden convertir todos los estilos CSS a HTML, pues las etiquetas HTML no

cubren ni reconocen todos los atributos posibles en CSS.

Para convertir un archivo que utiliza estilos CSS en un archivo compatible con

navegadores 3.0:

1 Elija Archivo > Convertir > Compatible con navegador 3.0.

2 En el cuadro de diálogo que aparece, seleccione Estilos CSS a formato HTML.

Si elige la opción Tablas a capas, Dreamweaver reemplazará todas las capas por

una sola tabla que conservará la posición 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 conversión de CSS a formato HTML” en la página 269 para obtener

información sobre los estilos que se convierten y los que se eliminan.

3 Haga clic en Aceptar. Dreamweaver abrirá el archivo convertido en una ventana

nueva y sin título.

Insertar y aplicar formato a texto 269

Nota: Es imprescindible realizar este procedimiento de conversión cada vez que cambia el

archivo original para actualizar el archivo compatible con navegadores 3.0. Por este

motivo, recomendamos no llevar a cabo la operación hasta estar completamente

satisfecho con el archivo original.

Tabla de conversión de CSS a formato HTML

Los atributos CSS que ﬁguran en la tabla siguiente se convierten a formato

HTML con el comando Archivo > Convertir > Compatible con navegador 3.0.

(Consulte “Convertir estilos CSS a etiquetas HTML” en la página 268.) Los

atributos que no ﬁguran en ella se eliminan.

Atributo CSS Convertido a

color FONT COLOR

font-family FONT FACE

font-size FONT SIZE="[1-7]"

font-style: oblique I

font-style: italic I

font-weight B

list-style-type: square UL TYPE="square"

list-style-type: circle UL TYPE="circle"

list-style-type: disc UL TYPE="disc"

list-style-type: upper-roman OL TYPE="I"

list-style-type: lower-roman OL TYPE="i"

list-style-type: upper-alpha OL TYPE="A"

list-style-type: lower-alpha OL TYPE="a"

list-style UL u OL con TYPE, según el caso

text-align P ALIGN o DIV ALIGN, según el caso

text-decoration: underline U

text-decoration: line-through STRIKE

Capítulo 10270

Comprobar la ortografía

Utilice el comando Ortografía del menú Texto para comprobar la ortografía del

documento actual. El comando Ortografía no tiene en cuenta las etiquetas

HTML ni los valores de atributo.

De forma predeterminada, el corrector ortográﬁco utiliza el diccionario de inglés

de Estados Unidos. Para cambiar de diccionario, elija Edición > Preferencias >

General y seleccione otro diccionario en el menú. Se pueden descargar

diccionarios de otros idiomas desde el Centro de servicio técnico de Dreamweaver.

Comprobar la ortografía utilizando el cuadro de diálogo

Ortografía

Utilice las siguientes opciones del cuadro de diálogo Ortografía para comprobar la

ortografía del documento. Para mostrar el cuadro de diálogo, elija Texto >

Ortografía.

Añadir 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. Ese archivo se encuentra en Dreamweaver 4/Conﬁguration/Dictionaries.

Omitir ignora esta aparición de la palabra no reconocida.

Omitir todas ignora todas las apariciones de la palabra no reconocida.

Cambiar sustituye esta aparición de la palabra no reconocida por el texto que usted

escriba en el cuadro Cambiar por o por la selección de la lista Sugerencias.

Cambiar todas reemplaza de la misma manera todas las apariciones de la palabra

no reconocida.

Buscar y reemplazar texto, etiquetas y

atributos

Puede realizar búsquedas 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. Observe que se utilizan comandos distintos para buscar archivos y

para buscar texto (y/o etiquetas HTML 1) dentro de los archivos: Localizar en

sitio local y Localizar en sitio remoto buscan archivos, mientras que Edición >

Buscar y reemplazar busca texto y etiquetas dentro de los archivos.

Insertar y aplicar formato a texto 271

Para buscar texto y/o HTML dentro de los documentos:

1 Dispone de las opciones siguientes:

• En la vista de Diseño, desde la ventana de documento o Sitio, elija Edición >

Buscar y reemplazar.

• En la vista de Código, haga clic con el botón derecho (Windows) o mientras

presiona la tecla Control (Macintosh) y elija Buscar y reemplazar en el menú

contextual.

2 En el cuadro de diálogo Buscar y reemplazar que aparece, use la opción Buscar

en para especiﬁcar los archivos en los que desea buscar:

• Documento actual limita la búsqueda al documento activo. Esta opción sólo

está disponible cuando se elige Buscar y reemplazar con la ventana de

documento activa o en el menú contextual del inspector de código.

• Todo el sitio local amplía la búsqueda a todos los documentos HTML, los

archivos de biblioteca y los documentos de texto del sitio actual. Después de

elegir Sitio actual, el nombre del sitio actual aparecerá a la derecha del menú

emergente. Si no es éste el sitio en el que desea buscar, elija otro en el menú

emergente de sitios actuales de la ventana Sitio.

• Archivos seleccionados del sitio limita la búsqueda a los archivos y las carpetas

seleccionados en la ventana Sitio. Esta opción sólo está disponible cuando se

elige Buscar y reemplazar con la ventana Sitio activa (es decir, delante de la

ventana de documento).

• Carpeta limita la búsqueda a un grupo de archivos especíﬁco. Después de elegir

Carpeta, haga clic en el icono de carpeta para localizar y seleccionar el

directorio deseado.

3 Utilice la opción Buscar para especiﬁcar el tipo de búsqueda que desea realizar.

• Código permite buscar cadenas de texto especíﬁcas en el código HTML.

Consulte “Búsqueda de código HTML” en la página 272.

• Texto permite buscar cadenas de texto especíﬁcas en la ventana de documento. La

búsqueda de texto ignora el código HTML que interrumpe la cadena. Por

ejemplo, si busca the black dog, encontrará the black dog y the <i>black</i> dog.

• Texto (avanzado) permite buscar cadenas de texto especíﬁcas que se encuentran

dentro o fuera de una o varias etiquetas. Por ejemplo, en un documento que

contiene el código HTML siguiente, si busca intenta fuera de i, sólo

encontrará la segunda aparición de la palabra intenta. Juan <i>intenta</i>

hacer su trabajo a tiempo, pero no siempre lo consigue. Lo intenta con

energía. Consulte “Buscar texto entre etiquetas especíﬁcas” en la página 274.

• Etiqueta permite buscar etiquetas, atributos y valores de atributo especíﬁcos,

como todas las etiquetas td con valign deﬁnido como top. Consulte “Buscar

etiquetas y atributos HTML” en la página 273.

Capítulo 10272

Nota: Al presionar Control+Entrar o Mayús+Entrar (Windows), o bien Control+Retorno,

Mayús+Retorno o Comando+Retorno (Macintosh), se añadirán saltos de línea en los

campos de búsqueda de texto, lo que le permite buscar un carácter de retorno.

Desactive la opción Ignorar diferencias de espacios en blanco cuando realice esta

búsqueda si no utiliza expresiones regulares. Observe que este método busca un

carácter de retorno en particular, no la aparición de un salto de línea. Por ejemplo, no

busca etiquetas

<br> o <p>. Los caracteres de retorno aparecen como espacios en la

vista de Diseño, no como saltos de línea.

4 Utilice las opciones siguientes para ampliar o limitar la búsqueda:

• La opción Coincidir mayúsculas y minúsculas limita la búsqueda al texto que

coincide exactamente con el uso de mayúsculas y minúsculas del texto buscado.

Por ejemplo, si busca aguas azules, no encontrará Aguas Azules.

Nota: La opción Ignorar diferencias de espacios en blanco considera todos los

espacios en blanco como un solo espacio a efectos de búsqueda. Por ejemplo, si esta

opción está seleccionada,

este texto coincidirá con este texto, pero no con

estetexto. Esta opción no está disponible cuando está activada la opción Usar

expresiones regulares; en este caso es necesario escribir explícitamente la expresión

regular para ignorar el espacio en blanco. Observe que las etiquetas

<p> y <br> no se

consideran espacios en blanco.

• La opción Usar expresiones regulares considera algunos caracteres y cadenas

cortas (por ejemplo, ?, *, \w y \b) de la cadena de búsqueda 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

página 276.

Nota: Si está trabajando en la vista de Código, realiza cambios en el documento e intenta

buscar y reemplazar elementos que no son código, aparecerá un cuadro de diálogo

informándole de que Dreamweaver está sincronizando las dos vistas antes de realizar la

búsqueda. Para obtener más información sobre la sincronización de vistas, consulte

“Utilizar la vista de Código (o el inspector de código)” en la página 347.

Búsqueda de código HTML

Utilice la opción Código en el cuadro de diálogo Buscar y reemplazar para buscar

cadenas especíﬁcas de texto en el código HTML. Por ejemplo, si busca perro

negro en el código 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 más de un perro negro en el parque. El perro

<a href="barnaby.html">negro</a> que más nos gustó se llamaba Barnaby.

El término perro negro también aparece en la segunda frase, pero no coincide con

el texto buscado porque está cortado por un vínculo.

Consulte “Buscar y reemplazar texto, etiquetas y atributos” en la página 270 para

obtener instrucciones detalladas sobre la realización de búsquedas.

Insertar y aplicar formato a texto 273

Buscar etiquetas y atributos HTML

Utilice la opción Etiqueta especíﬁca en el cuadro de diálogo Buscar y reemplazar

para buscar etiquetas, atributos y valores de atributos especíﬁcos. Por ejemplo,

puede buscar todas las etiquetas img sin atributo alt. Consulte “Buscar y

reemplazar texto, etiquetas y atributos” en la página 270 para obtener información

sobre los distintos tipos de búsqueda.

Para realizar una búsqueda de etiqueta:

1 Elija Edición > Buscar y reemplazar y especiﬁque qué archivos desea buscar, tal

como se explica en “Buscar y reemplazar texto, etiquetas y atributos” en la

página 270.

2 Elija Etiqueta especíﬁca en el menú emergente Buscar.

3 Elija una etiqueta especíﬁca en el menú emergente situado junto al menú

Buscar o elija [cualquier etiqueta].

Si sólo desea buscar todas las apariciones de la etiqueta especiﬁcada, presione el

botón menos (-) y continúe con el paso 6. En caso contrario, continúe con el

paso 4.

4 Limite la búsqueda con uno de los siguientes modiﬁcadores de etiqueta:

• Con atributo permite elegir un atributo que debe encontrarse en la etiqueta

para que ésta coincida. Puede especiﬁcar un valor determinado para el atributo

o elegir [cualquier valor].

• Sin atributo permite elegir un atributo que no debe encontrarse en la etiqueta

para que ésta coincida. Por ejemplo, elija esta opción para buscar todas las

etiquetas IMG sin atributo ALT.

• Contiene especiﬁca texto o una etiqueta que deba encontrarse dentro de la

etiqueta original para que ésta coincida. Por ejemplo, en el código <b><font

face="Arial">heading 1</font></b>, la etiqueta font se encuentra dentro de la

etiqueta b .

• No contiene especiﬁca texto o una etiqueta que no debe encontrarse dentro de

la etiqueta original para que ésta coincida.

• En etiqueta especiﬁca una etiqueta dentro de la cual debe encontrarse la

etiqueta buscada para que ésta coincida.

• No está en etiqueta especiﬁca una etiqueta dentro de la cual no debe

encontrarse la etiqueta buscada para que ésta coincida.

5 Haga clic en el botón más (+) y repita el paso 4 para limitar la búsqueda.

Capítulo 10274

Inicie la búsqueda:

• Haga clic en Buscar siguiente para resaltar la siguiente aparición del texto

buscado en el documento actual.

• Haga clic en Buscar todos para generar una lista de todas las apariciones del

texto buscado en el documento actual.

• Haga clic en Buscar siguiente para resaltar la siguiente aparición del texto

buscado en el documento actual o, si no hay otra aparición, para abrir el

siguiente documento que contiene el texto buscado.

• Haga clic en Buscar todos para generar una lista de todas las apariciones del

texto buscado en el documento actual o, si está buscando en un directorio o

sitio, generar una lista de doumentos que contienen el texto buscado.

Buscar texto entre etiquetas específicas

Utilice la opción Texto (avanzado) en el cuadro de diálogo Buscar o Reemplazar

para buscar cadenas especíﬁcas de texto que se encuentren dentro o fuera de una

serie de etiquetas contenedoras. Por ejemplo, puede buscar la palabra Untitled

entre etiquetas <title> para localizar todas las páginas sin título del sitio. Consulte

“Buscar y reemplazar texto, etiquetas y atributos” en la página 270 para obtener

información sobre los distintos tipos de búsqueda.

Para llevar a cabo una búsqueda de texto avanzada:

1 Elija Edición > Buscar y reemplazar y especiﬁque qué archivos desea buscar, tal

como se explica en “Buscar y reemplazar texto, etiquetas y atributos” en la

página 270.

2 Elija Texto (avanzado) en el menú emergente Buscar.

3 Introduzca el texto que desea buscar en el campo de texto situado junto al

menú emergente Buscar.

Por ejemplo, escriba el término Untitled.

4 Elija En etiqueta o No está en etiqueta y, a continuación, elija una etiqueta en el

menú emergente que aparece al lado.

Por ejemplo, elija En etiqueta y, seguidamente, title.

5 Haga clic en el botón más (+) para restringir la búsqueda a etiquetas con un

atributo o atributos especíﬁcos.

Dado que la etiqueta <title >no tiene atributos, no necesitará emplear esta

opción para buscar en todas las páginas sin título del sitio.

6 Haga clic en Buscar siguiente para abrir el siguiente documento que contenga

el texto buscado, o haga clic en Buscar todos para generar una lista de

documentos que contengan este texto.

Insertar y aplicar formato a texto 275

Guardar modelos de búsqueda

Puede guardar modelos de búsqueda y utilizarlos posteriormente haciendo clic en

el botón Guardar consulta en el cuadro de diálogo Buscar y reemplazar. Conviene

guardar consultas si realiza periódicamente las mismas búsquedas y no desea

generar una y otra vez el mismo modelo de búsqueda. Por ejemplo, puede guardar

modelos para quitar etiquetas no estándar en documentos creados con otro editor

visual HTML o para conﬁrmar que todas las imágenes de un archivo tienen

atributos height, width y alt antes de enviar el documento a la Web.

Para guardar un modelo de búsqueda:

1 Conﬁgure los parámetros de la búsqueda siguiendo los pasos que se describen

en “Buscar y reemplazar texto, etiquetas y atributos” en la página 270.

Si realiza una búsqueda avanzada de texto o de etiquetas, consulte “Buscar

etiquetas y atributos HTML” en la página 273 o “Buscar texto entre etiquetas

especíﬁcas” en la página 274 para obtener información sobre la conﬁguración

de parámetros adicionales de búsqueda.

2 Haga clic en el botón Guardar consulta (identiﬁcado con un icono de disco).

La ubicación predeterminada para guardar las consultas es la carpeta

Conﬁguration/Queries, incluida dentro de la carpeta de la aplicación

Dreamweaver.

3 En el cuadro de diálogo que aparece, asigne un nombre de archivo que

identiﬁque la consulta y haga clic en Guardar.

Por ejemplo, si el modelo de búsqueda busca etiquetas img sin atributo alt,

puede asignar el nombre img_sin_alt.dwr a la consulta. Las consultas de

búsqueda tienen la extensión .dwq, mientras que las consultas de sustitución

tienen la extensión .dwr.

Para activar un modelo de búsqueda:

1 Elija Edición > Buscar y reemplazar.

2 Haga clic en el botón Cargar consulta (identiﬁcado con un icono de carpeta).

El cuadro de diálogo Cargar consulta se abrirá automáticamente en la carpeta

Conﬁguration/Queries. Si ha guardado las consultas en otra carpeta, puede

acceder a ella.

3 Seleccione un archivo de consulta y haga clic en Abrir.

En el cuadro de diálogo Buscar sólo están disponibles las consultas de búsqueda

(archivos .dwq). En el cuadro de diálogo Reemplazar están disponibles las

consultas de búsqueda (archivos .dwq) y de sustitución (archivos .dwr).

4 Haga clic en Buscar siguiente, Buscar todos, Reemplazar o Reemp. todos para

iniciar la búsqueda.

Capítulo 10276

Expresiones regulares

Las expresiones regulares son modelos que describen las combinaciones de

caracteres en el texto. Utilícelas en las búsquedas para describir conceptos como

“frases que comiencen por ‘El’” y “valores de atributo que contengan un número”.

La tabla siguiente contiene los caracteres especiales de las expresiones regulares, su

signiﬁcado y ejemplos de uso.

Para buscar texto que contenga uno de los caracteres especiales de la tabla, anule el

valor del carácter colocando una barra invertida delante de él. Por ejemplo, para

buscar el asterisco en la frase se aplican algunas condiciones*, el modelo de

búsqueda 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 sólo las que van seguidas de asterisco.

Carácter Texto buscado Ejemplo

^ Principio de entrada o línea.

encontrará “T” en “Tierras ricas”,

pero no “La cabaña del tío Tom”

$ Fin de entrada o línea.

encontrará “j” en “reloj”, pero no en

“ajuar”

* El carácter anterior cero o más veces.

in*

encontrará “in” en “fin”, “inn” en

“innato” e “i” en “hito”

+ El carácter anterior una o más veces.

in+

encontrará “in” en “fin” e “inn” en

“innato”, pero no encontrará “hito”

? El carácter anterior una vez como

máximo (es decir, indica que el carácter

anterior es opcional).

st?on

encontrará “son” en “Johnson”

y “ston” en “Johnston”, pero no

encontrará “Appleton” ni “tension”

. Cualquier carácter individual, salvo el

de salto de línea.

.an

encontrará “ran” y “can” en la frase

“bran muffins can be tasty”

x|y x o y.

FF0000|0000FF

encontrará

“FF0000” en

bgcolor=”#FF0000”

“0000FF’” en

font

color=”#0000FF”

{n} Exactamente n apariciones del

carácter anterior.

n{2}

encontrará “nn” en “innato” y las

dos primeras enes de “nnno”, pero no

encontrará “inane”

{n,m} Como mínimo n y como máximo m

apariciones del carácter anterior.

F{2,4}

encontrará “FF” en

“#FF0000” y las cuatro primeras efes

de #FFFFFF

[abc] Cualquiera de los caracteres entre

corchetes. Especifique un rango de

caracteres con un guión (por ejemplo,

[a-f] es equivalente a [abcdef]).

[e-g]

encontrará “e” en “sed”, “f” en

“folio” y “g” en “guardia”

Insertar y aplicar formato a texto 277

[^abc] Cualquier carácter que no esté entre

corchetes. Especifique un intervalo de

caracteres con un guión (por ejemplo,

[^a-f] es equivalente a [^abcdef]).

[^aeiou]

encontrará inicialmente “r”

en “orangután”, “b” en “biblia” y “h” en

“aah!”

\b Límite de palabra (como un espacio o

un retorno de carro).

\bb

encontrará “b” en “biblia”, pero no

en “abajo” ni en “esnob”

\B Ausencia de límite de palabra.

\Bb

encontrará “b” en “abajo”, pero no

en “biblia”

\d Cualquier carácter de dígito.

Equivalente a [0-9].

encontrará “3” en “C3PO” y “2” en

“apartamento 2G”

\D Cualquier carácter que no sea de dígito.

Equivalente a [^0-9].

encontrará “S” en “900S” y “Q” en

“Q45”

\f Salto de página. -

\n Salto de línea. -

\r Retorno de carro. -

\s Cualquier carácter individual de

espacio en blanco (espacios,

tabulaciones, saltos de página o saltos

de línea).

\slibre

encontrará “libre” en “Cuba

libre”, pero no en “cubalibre”

\S Cualquier carácter individual que no

sea un espacio en blanco.

\Slibre

encontrará “libre” en

“cubalibre”, pero no en “Cuba libre”

\t Tabulación. -

\w Cualquier carácter alfanumérico,

incluido el de subrayado. Equivalente a

[A-Za-z0-9_].

bb\w* encontrará “barba” en “la barba

cana” y “blanco” y “bonito” en “el perro

blanco es muy bonito”

\W Cualquier carácter que no sea

alfanumérico. Equivalente a [^A-Za-

z0-9_].

\W encontrará “&” en “Juan & María” y

“%” en “100%”

Control+Entrar o

Mayús+Entrar

(Windows), o

Control+ Retorno

o Mayús+

Retorno o

Comando+

Retorno

(Macintosh)

Carácter de retorno. Desactive la

opción Ignorar diferencias de espacios

en blanco cuando realice esta

búsqueda si no utiliza expresiones

regulares. Observe que este método

busca un determinado carácter, no un

salto de línea. Por ejemplo, no busca

etiquetas

<br>

<p>

. Los caracteres

de retorno aparecen como espacios en

la ventana de documento, no como

saltos de línea.

Carácter Texto buscado Ejemplo

Capítulo 10278

Use los paréntesis para destacar agrupaciones dentro de la expresión regular.

Posteriormente podrá hacer referencia a la primera agrupación entre paréntesis, la

segunda, la tercera y posteriores utilizando $1, $2, $3, etc. en el campo Buscar y

utilizando la barra invertida (\) en el campo Reemplazar. Por ejemplo, si busca

(\d+)\/(\d+)\/(\d+) y lo reemplaza por $2/$1/$3, cambiará el día y el mes de una

fecha separada por barras (para convertir el formato de fechas americano en

formato europeo).

279

CAPÍTULO 11

.............................................................................................................

Insertar imágenes

En las páginas Web suelen utilizarse tres formatos de archivos gráﬁcos: GIF, JPEG

y PNG. Actualmente, la mayoría de los navegadores sólo reconocen sin problemas

los formatos de archivo GIF y JPEG. Microsoft Internet Explorer (4.0 y posterior)

y Netscape Navigator (4.04 y posterior) admiten parcialmente la visualización de

imágenes PNG. A menos que los destinatarios del sitio utilicen navegadores que

admitan el formato PNG, utilice imágenes GIF o JPEG para conseguir una mayor

compatibilidad.

Los archivos GIF (Formato de Intercambio Gráfico) utilizan un máximo de 256

colores. El formato GIF es el mejor para mostrar imágenes de tonos no continuos

o imágenes con grandes áreas de colores planos, como barras de navegación,

botones, iconos, logotipos y otras imágenes con colores y tonos uniformes. Puede

crear GIF con fondos transparentes, GIF entrelazados que se enfoquen lentamente

a medida que se cargue una imagen en el navegador y GIF animados, que son

varios GIF guardados en un solo archivo.

El formato de archivo JPEG (Grupo Conjunto de Expertos Fotográficos) es el

mejor para imágenes fotográﬁcas o de tonos continuos, ya que puede contener

millones de colores. Los archivos JPEG suelen ser más grandes que los archivos

GIF y PNG. Cuando aumenta la calidad de un archivo JPEG, también aumenta

su tamaño y el tiempo que tarda en descargarse. A menudo es posible conseguir un

equilibrio adecuado entre la calidad de la imagen y el tamaño de archivo

comprimiendo el archivo JPEG.

El formato de archivo PNG (Grupo de Redes Portátiles) es un sustituto del

formato GIF sin patente que incluye soporte para imágenes con color indexado,

escala de grises y color verdadero, además de soporte de canal alfa para

transparencias. PNG es el formato de archivo nativo de Macromedia Fireworks.

Los archivos PNG conservan toda la información original de capas, vectores,

colores y efectos (por ejemplo, de sombra), así como todos los elementos que se

pueden editar plenamente. Los archivos se deben guardar con la extensión .png

para que Macromedia Dreamweaver pueda reconocerlos como tales.

Capítulo 11280

Puede insertar imágenes GIF, JPEG y PNG en los documentos de Dreamweaver.

Además de insertar una imagen en una página, también puede insertarla en una

tabla, un formulario o una capa.

Conforme añada imágenes, podrá seleccionarlas y modiﬁcarlas directamente en la

ventana de documento. Por ejemplo, puede utilizar el inspector de propiedades

para añadir vínculos a una imagen, añadir un borde a su alrededor, establecer su

tamaño, añadir espacio alrededor de ella y establecer su alineación. Para crear

gráﬁcos interactivos, como imágenes de sustitución, barras de navegación o mapas

de imagen, utilice los comportamientos de Dreamweaver.

Para conﬁgurar un ﬂujo de trabajo eﬁciente, utilice el cuadro de diálogo

Preferencias de Dreamweaver y establezca el editor de imágenes que preﬁera (por

ejemplo, Fireworks). De este modo podrá iniciar el editor de imágenes y modiﬁcar

una imagen mientras trabaja en Dreamweaver. Si utiliza Fireworks como editor

preferido, podrá realizar modiﬁcaciones en Fireworks y, con un solo clic, actualizar

automáticamente la imagen en el archivo de Dreamweaver. Para obtener más

información sobre el uso de Fireworks y Dreamweaver, consulte “Uso conjunto de

Fireworks y Dreamweaver” en la página 295.

Además de insertar imágenes en una página, puede establecer una imagen como

fondo de la página (consulte “Deﬁnir una imagen de fondo o un color de página”

en la página 157). Para superponer imágenes, insértelas en capas. Consulte “Usar

capas dinámicas” en la página 427.

Insertar una imagen

Al insertar una imagen en un documento de Dreamweaver, el programa genera

automáticamente una referencia al archivo en el código HTML. Para asegurarse

de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio

actual. Si no lo está, Dreamweaver le preguntará si desea copiar el archivo en la

carpeta raíz.

Para insertar una imagen:

1 Lleve a cabo una de estas operaciones:

• Sitúe el punto de inserción en el lugar de la ventana de documento donde desea

que aparezca la imagen y, a continuación, elija Insertar > Imagen o haga clic en

el botón Insertar imagen de la categoría Común del panel Objetos.

• Sitúe el punto de inserción en el lugar de la ventana de documento donde desea

que aparezca la imagen y, a continuación, presione Control+Alt+I (Windows) o

Comando+Opción+I (Macintosh).

• Arrastre el botón Insertar imagen desde el panel Objetos hasta la posición

deseada de la ventana de documento.

Insertar imágenes 281

• Arrastre una imagen desde el panel Activos hasta la posición deseada de la

ventana de documento. A continuación, siga con el paso 3.

• Arrastre una imagen desde la ventana Sitio hasta la posición deseada de la

ventana de documento. A continuación, siga con el paso 3.

• Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana

de documento. A continuación, siga con el paso 3.

2 En el cuadro de diálogo que aparece, haga clic en Examinar para elegir un

archivo o escriba la ruta del archivo de imagen.

Si está trabajando en un documento que no está guardado, Dreamweaver

generará una referencia de archivo:// al archivo de imagen. Al guardar el

documento en el sitio, Dreamweaver convierte la referencia en una ruta relativa

al documento.

3 Deﬁna las propiedades de la imagen en el inspector de propiedades.

Consulte “Conﬁgurar propiedades de imágenes” en la página 281.

Configurar propiedades de imágenes

Para conﬁgurar las siguientes propiedades de imágenes, seleccione una imagen en

la ventana de documento y, a continuación, elija Ventana > Propiedades para

mostrar el inspector de propiedades. El inspector de propiedades muestra

inicialmente las propiedades utilizadas con mayor frecuencia. Para ver todas las

propiedades, haga clic en la ﬂecha de ampliación, situada en la esquina inferior

derecha.

Utilice el campo de texto situado bajo la imagen en miniatura para establecer un

nombre que haga referencia a la imagen cuando utilice un comportamiento de

Dreamweaver (como Intercambiar imagen ) o cuando utilice un lenguaje de

secuencia de comandos como JavaScript o VBScript.

An y Al reservan espacio para una imagen en una página al cargarla en un

navegador. Dreamweaver rellena automáticamente estos campos con el tamaño

original de la imagen. Los valores predeterminados y sin etiqueta son píxeles.

También se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in

(pulgadas), mm (milímetros) y cm (centímetros) o combinaciones de éstas, como

2in+5mm; Dreamweaver convierte los valores a píxeles en el código HTML.

Capítulo 11282

Si selecciona valores de An y Al que no se corresponden con el ancho y el alto

reales de la imagen, es posible que ésta no se muestre correctamente en el

navegador. Para restablecer los valores originales, haga clic en las etiquetas de

campo. Puede cambiar estos valores para establecer la escala del tamaño de

visualización de esta imagen, aunque no por ello se reducirá el tiempo de descarga,

ya que el navegador descarga todos los datos de la imagen antes de asignarle una

escala. Si desea reducir el tiempo de descarga y conseguir que todas las apariciones

de una imagen tengan el mismo tamaño, utilice una aplicación de edición de

imágenes.

Orig especiﬁca el archivo de origen para la imagen. Haga clic en el icono de carpeta

para localizar el archivo de origen o escriba la ruta correspondiente. Para obtener

información sobre la introducción de rutas, consulte “Rutas absolutas” en la

página 372.

Vínculo especiﬁca un hipervínculo para la imagen. Arrastre el icono de

señalización hasta un archivo de la ventana Sitio, haga clic en el icono de carpeta

para buscar y seleccionar un documento del sitio o escriba manualmente la ruta

del URL.

Alinear alinea una imagen y texto en la misma línea. Consulte “Alinear elementos”

en la página 284.

Alt especiﬁca el texto alternativo que aparece en lugar de la imagen en los

navegadores que sólo admiten texto o en aquéllos conﬁgurados para descargar las

imágenes manualmente. Para usuarios con deﬁciencias visuales que usan

sintetizadores de voz con navegadores que sólo admiten texto, el texto se

reproduce en voz alta. En algunos navegadores, este texto también aparece cuando

el puntero se sitúa sobre la imagen.

Mapa permite crear mapas de imagen de la parte del cliente. Consulte “Crear

mapas de imagen” en la página 286.

Espacio V y Espacio H añaden espacio, en píxeles, a los lados de la imagen.

Espacio V añade espacio en la parte superior e inferior de una imagen. Espacio H

añade espacio a la izquierda y la derecha de una imagen.

Insertar imágenes 283

Destino especiﬁca el marco o la ventana donde se cargará la página vinculada. Esta

opción no está disponible cuando la imagen no está vinculada a otro archivo. En la

lista Destino ﬁguran los nombres de todos los marcos del documento actual.

También puede seleccionar estos nombres de destino reservados:

• _blank carga el archivo vinculado en una ventana de navegador nueva y sin

nombre.

• _parent carga el archivo vinculado en el conjunto de marcos padre o en la

ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo

no está anidado, el archivo vinculado se cargará en la ventana completa del

navegador.

• _self carga el archivo vinculado en el mismo marco o ventana que el vínculo.

Este destino es el predeterminado, por lo que normalmente no es preciso

especiﬁcarlo.

• _top carga el archivo vinculado en la ventana completa del navegador, quitando

así todos los marcos.

Orig base especiﬁca la imagen que debe cargarse antes que la imagen principal.

Muchos diseñadores utilizan una versión de dos bits (blanco y negro) de la imagen

principal porque se carga más rápidamente y ofrece a los visitantes una idea de lo

que van a ver.

Borde establece en píxeles el ancho del borde del vínculo alrededor de la imagen.

Introduzca 0 para especiﬁcar sin bordes. Puede aplicar un borde tanto a imágenes

vinculadas como a imágenes no vinculadas. Puede establecer el color de los

vínculos en el cuadro de diálogo Propiedades de la página. Si establece un borde

para una imagen que no tiene vínculos, dicho borde tendrá el mismo color que el

texto del párrafo en el que se inserta la imagen.

Editar inicia el editor de imágenes que ha especiﬁcado 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 “Utilizar un editor de imágenes externo” en la

página 291.

Restablecer tamaño restablece los valores de An y Al para devolver el tamaño

original a la imagen.

Capítulo 11284

Alinear elementos

Utilice el inspector de propiedades de imagen para establecer la alineación de una

imagen en relación con otros elementos del mismo párrafo o línea. HTML no

ofrece ningún método para ajustar texto alrededor del contorno de una imagen,

como ocurre en algunas aplicaciones de tratamiento de textos. Puede alinear una

imagen con texto, otra imagen, un plug-in u otros elementos de la misma línea.

También puede utilizar los botones de alineación (izquierda, derecha y centro)

para establecer la alineación horizontal de una imagen.

Predet. naveg. suele especiﬁcar una alineación con la línea de base. El valor

predeterminado puede variar en función del navegador del visitante del sitio.

Línea de base e Inferior alinean la línea de base del texto (u otro elemento) con la

parte inferior del objeto seleccionado.

Superior alinea una imagen con la parte superior del elemento más alto (imagen o

texto) de la línea actual.

Medio alinea la línea de base del texto con el punto medio del objeto seleccionado.

SuperiorTexto alinea el objeto seleccionado con la parte superior del carácter más

alto de la línea de texto.

Medio absoluta alinea en relación con el punto medio absoluto de la línea actual.

Inferior absoluta alinea en relación con la parte inferior absoluta (incluidos los

trazos bajos, como en la letra g) del objeto seleccionado.

Izquierda sitúa el objeto seleccionado en el margen izquierdo, ajustando a la

derecha el texto que está a su alrededor. Si hay texto alineado a la izquierda delante

del objeto, los objetos alineados a la izquierda suelen pasar a una nueva línea.

Derecha sitúa el objeto en el margen derecho, ajustando a la izquierda el texto que

está a su alrededor. Si hay texto alineado a la derecha delante del objeto, los objetos

alineados a la derecha suelen pasar a una nueva línea.

Insertar imágenes 285

Cambiar el tamaño de imágenes y otros elementos

Puede cambiar visualmente el tamaño de elementos tales como imágenes, plug-

ins, películas Macromedia Shockwave o Flash, applets y controles de ActiveX en la

ventana de documento de Dreamweaver. El cambio visual del tamaño ayuda a

determinar cómo afecta a la disposición un elemento con distintas dimensiones.

Al cambiar de tamaño se restablecen los atributos width y height del elemento. Los

campos An y Al del inspector de propiedades muestran el ancho y el alto actuales

del elemento conforme cambia su tamaño. El tamaño de archivo del elemento no

cambia.

Las películas Macromedia Flash y otros elementos basados en vectores son

escalables y no pierden calidad al cambiar de tamaño. Sin embargo, los elementos

de mapas de bits, como las imágenes GIF, JPEG y PNG, pueden convertirse a

píxeles o distorsionarse al aumentar o reducir sus atributos

width y height.

Mantenga presionada la tecla Mayús mientras cambia el tamaño de un mapa de

bits para mantener la relación de aspecto. No obstante, sólo es recomendable

cambiar visualmente el tamaño de los mapas de bits en Dreamweaver para

determinar la disposición. Una vez determinado el tamaño idóneo de la imagen,

edite el archivo en una aplicación de edición de imágenes. La edición de la imagen

también puede reducir su tamaño de archivo y, por consiguiente, su tiempo de

transferencia.

Para cambiar el tamaño de un elemento:

1 Seleccione el elemento (por ejemplo, una imagen o una película Shockwave) en

la ventana de documento.

En los lados inferior y derecho del elemento y en la esquina inferior derecha

aparecen manejadores de cambio de tamaño. Si no aparecen, haga clic fuera del

elemento cuyo tamaño desea cambiar y vuelva a seleccionarlo o haga clic en

<img> en el selector de etiquetas para seleccionar el elemento.

2 Cambie el tamaño del elemento llevando a cabo una de estas operaciones:

• Para ajustar el ancho del elemento, arrastre el manejador de selección del lado

derecho.

• Para ajustar el alto del elemento, arrastre el manejador de selección de la parte

inferior.

• Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el

manejador de selección de la esquina.

• Para conservar las proporciones del elemento (su relación ancho/alto) al ajustar

sus dimensiones, arrastre el manejador de selección de la esquina mientras

presiona la tecla Mayús.

Capítulo 11286

Puede cambiar visualmente el tamaño de los elementos hasta un mínimo de 8 por

8 píxeles. Si desea ajustar el ancho y el alto de un elemento a un tamaño menor

(por ejemplo, 1 por 1 píxel), utilice el inspector de propiedades para introducir un

valor numérico.

Para restablecer las dimensiones originales de un elemento, borre los valores de los

campos An y Al o haga clic en el botón Restablecer tamaño en el inspector de

propiedades.

Crear mapas de imagen

Un mapa de imagen es una imagen que se ha dividido en regiones o zonas

interactivas. Cuando se hace clic en una zona interactiva, se realiza una acción, por

ejemplo, la apertura de un archivo. Utilice el inspector de propiedades de imagen

para crear y editar gráﬁcamente mapas de imagen de la parte del cliente.

Los mapas de imagen de la parte del cliente almacenan la información de

hipervínculo en el documento HTML, no en un archivo de mapa aparte como

hacen los mapas de imagen de la parte del servidor. Cuando el usuario hace clic en

una zona interactiva de la imagen, el URL asociado se envía directamente al

servidor. Esto hace que los mapas de imagen de la parte del cliente sean más

rápidos que los mapas de la parte del servidor, pues el servidor no necesita

interpretar dónde 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 modiﬁca 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. Sin embargo, los navegadores 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 código HTML correspondiente.

Para crear un mapa de imagen de la parte del cliente:

1 Seleccione la imagen.

2 Haga clic en la ﬂecha de ampliación, situada en el ángulo inferior derecho del

inspector de propiedades, para ver todas las propiedades.

3 En el campo Mapa, introduzca un nombre exclusivo para el mapa de imagen.

Nota: Si utiliza múltiples mapas de imágenes en el mismo documento, asigne un

nombre exclusivo a cada uno.

Insertar imágenes 287

Para deﬁnir las áreas de mapas de imagen, lleve a cabo una de estas operaciones:

• Seleccione la herramienta circular y arrastre el puntero sobre la imagen para

crear una zona interactiva circular.

• Seleccione la herramienta de rectángulo y arrastre el puntero sobre la imagen

para crear una zona interactiva rectangular.

• Seleccione la herramienta poligonal y deﬁna una zona interactiva con forma

irregular haciendo clic una vez en cada esquina. Haga clic en la herramienta de

ﬂecha para cerrar la forma.

Una vez creada la zona interactiva, aparecerá el inspector de propiedades de

zonas interactivas. Para obtener más información sobre el inspector de

propiedades de zonas interactivas, consulte “Conﬁgurar propiedades de zonas

interactivas” en la página 287.

5 En el campo Vínculo del inspector de propiedades de zonas interactivas, haga

clic en el icono de carpeta para acceder al archivo que desea que abrir al hacer

clic en la zona interactiva. También puede escribir el nombre del archivo.

6 Para establecer dónde se abrirá el archivo vinculado, escriba en el campo

Destino el nombre de la ventana donde deberá abrirse. También puede elegir

un nombre de marco en el menú emergente Destino.

7 En el campo Alt, escriba el texto que desea mostrar como texto alternativo en

los navegadores de sólo texto.

Algunos navegadores muestran este texto como una descripción de herramienta

cuando el usuario detiene el ratón sobre la zona interactiva.

8 Repita los pasos 4 a 7 para deﬁnir otras zonas interactivas en el mapa de

imagen.

9 Cuando termine de deﬁnir el mapa de imagen, haga clic en un área en blanco

del documento para cambiar el inspector de propiedades.

Configurar propiedades de zonas interactivas

Cuando se selecciona una zona interactiva aparece el inspector de propiedades con

las siguientes opciones.

Mapa especiﬁca el nombre del mapa de imagen. Asigne un nombre exclusivo a

cada mapa de imagen contenido en un documento.

Vínculo especiﬁca el archivo o URL que debe mostrarse cuando el usuario hace

clic en la zona interactiva. Si desea establecer un vínculo con un archivo desde el

mismo sitio, introduzca una ruta relativa al documento. Los nombres de archivos

que comienzan por archivo:// no son relativos.

Destino especiﬁca el marco o la ventana donde se cargará la página vinculada. La

opción Destino no se encontrará disponible hasta que la zona interactiva

seleccionada contenga un vínculo.

Capítulo 11288

En la lista ﬁguran los nombres de todos los marcos del documento actual. Si

especiﬁca un marco que no existe cuando se abre el documento en un navegador,

la página vinculada se cargará en una ventana nueva con el nombre que haya

especiﬁcado. También puede seleccionar estos nombres de destino reservados:

• _blank carga el archivo vinculado en una ventana de navegador nueva y sin

nombre.

• _parent carga el archivo vinculado en el conjunto de marcos padre o en la

ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo

no está anidado, el archivo vinculado se cargará en la ventana completa del

navegador.

• _self carga el archivo vinculado en el mismo marco o ventana que el vínculo.

Este destino es el predeterminado, por lo que normalmente no es preciso

especiﬁcarlo.

• _top carga el archivo vinculado en la ventana completa del navegador, quitando

así todos los marcos.

Alt especiﬁca el texto alternativo que aparecerá en lugar de la imagen en los

navegadores que sólo admiten texto o en aquéllos conﬁgurados para descargar las

imágenes manualmente.

Modificar un mapa de imagen

Puede editar fácilmente las zonas interactivas creadas en un mapa de imagen.

Puede mover un área de zonas interactivas, cambiar el tamaño de las zonas

interactivas o adelantar o retrasar una zona interactiva en una capa.

También puede copiar una imagen con zonas interactivas de un documento a otro

o copiar una o más zonas interactivas de una imagen y pegarlas en otra imagen.

Las zonas interactivas asociadas a la imagen también se copiarán en el nuevo

documento.

Para seleccionar múltiples zonas interactivas en un mapa de imagen:

1 Utilice la herramienta de puntero para seleccionar una zona interactiva.

2 Lleve a cabo una de estas operaciones:

• Mantenga presionada la tecla Mayús mientras hace clic en las otras zonas

interactivas que desea seleccionar.

• Presione Control+A (Windows) o Comando+A (Macintosh) para seleccionar

todas las zonas interactivas.

Insertar imágenes 289

Para mover una zona interactiva:

1 Utilice la herramienta de puntero para seleccionar la zona interactiva que desea

mover.

2 Lleve a cabo una de estas operaciones:

• Arrastre la zona interactiva a una nueva área.

• Utilice Mayús y las teclas de ﬂecha para mover una zona interactiva 10 píxeles

en la dirección seleccionada.

• Utilice las teclas de ﬂecha para mover una zona interactiva un píxel en la

dirección seleccionada.

Para cambiar el tamaño de una zona interactiva:

1 Utilice la herramienta de puntero para seleccionar la zona interactiva cuyo

tamaño desea cambiar.

2 Arrastre el manejador de zona interactiva para cambiar el tamaño o la forma de

la zona interactiva.

Crear una imagen de sustitución

Una imagen de sustitución es una imagen que cambia cuando el puntero pasa

sobre ella. Una imagen de sustitución consta en realidad de dos imágenes: la

imagen principal (la que aparece al cargarse inicialmente la página) y la imagen de

sustitución (la que aparece al pasar el puntero sobre la imagen principal). Ambas

imágenes deben tener el mismo tamaño. Si tienen tamaños distintos,

Dreamweaver cambia automáticamente el tamaño de la segunda imagen para que

se ajuste a las propiedades de la primera.

Las imágenes de sustitución están conﬁguradas de manera predeterminada para

responder al evento MouseOver. Para obtener información sobre la conﬁguración

de una imagen para que responda a otro evento (por ejemplo, un clic del ratón) o

sobre la edición de una imagen de sustitución para que muestre otra imagen,

consulte “Intercambiar imagen” en la página 493.

Una forma más compleja de imagen de sustitución es la barra de navegación. Para

crear una barra de navegación, utilice Insertar > Imágenes interactivas > Barra de

navegación (consulte “Insertar una barra de navegación” en la página 391).

Capítulo 11290

Para crear una imagen de sustitución:

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde

desea que aparezca la imagen de sustitución.

2 Introduzca la imagen de sustitución mediante uno de estos métodos:

• En la categoría Común del panel Objetos, haga clic en el icono Insertar imagen

de sustitución.

• En la categoría Común del panel Objetos, arrastre el icono Insertar imagen de

sustitución hasta la posición deseada de la ventana de documento.

• Elija Insertar > Imágenes interactivas >Imagen de sustitución.

Aparecerá el cuadro de diálogo Insertar imagen de sustitución.

3 En el campo Nombre de imagen, introduzca un nombre para la imagen de

sustitución.

4 En el campo Imagen original, haga clic en Examinar y seleccione o escriba la

ruta de la imagen que desea mostrar cuando se cargue la página.

5 En el campo Imagen de sustitución, haga clic en Examinar y seleccione o

escriba la ruta de la imagen que desea mostrar cuando el puntero pase sobre la

imagen original.

6 Si desea precargar las imágenes en la caché del navegador de modo que se

carguen más rápidamente, seleccione la opción Carga previa de imágenes.

7 En el campo Al hacerse clic, ir a URL, haga clic en Examinar y seleccione o

escriba la ruta del archivo que desea abrir cuando un usuario haga clic en la

imagen de sustitución.

Nota: Si no establece un vínculo para la imagen, Dreamweaver insertará un vínculo nulo

(#) en el código HTML relativo al comportamiento de sustitución. Si elimina el vínculo

nulo, la imagen de sustitución dejará de funcionar.

8 Haga clic en Aceptar para cerrar el cuadro de diálogo Insertar imagen de

sustitución.

Para comprobar una imagen de sustitución:

1 Elija Archivo > Vista previa en el navegador o presione F12.

2 En el navegador, desplace el puntero sobre la imagen original.

Deberá aparecer la imagen de sustitución.

Insertar imágenes 291

Utilizar un editor de imágenes externo

Dreamweaver facilita el diseño de las páginas HTML y el uso de un editor de

imágenes para modiﬁcar los gráﬁcos. Desde Dreamweaver puede abrir una imagen

seleccionada en un editor de imágenes externo. Cuando regrese a Dreamweaver

después de guardar el archivo de imagen, los cambios realizados serán visibles en la

ventana de documento.

Puede utilizar Macromedia Fireworks como editor de imágenes externo. Fireworks

3 y Fireworks 4 utilizan Design Notes para realizar un seguimiento del lugar del

disco duro donde se almacena el archivo PNG original.

Fireworks 2 no utiliza Design Notes, pero le solicita que localice el archivo PNG

original. Fireworks 1 busca automáticamente un archivo PNG con el mismo

nombre en la carpeta que contiene el archivo seleccionado. Por ejemplo, si

selecciona una imagen cuyo archivo de origen es imágenes/miFoto.gif y la carpeta

de imágenes también contiene un archivo llamado miFoto.png, Fireworks abrirá

el archivo PNG.

Para obtener más información sobre el uso conjunto de Fireworks y Dreamweaver,

consulte “Uso conjunto de Fireworks y Dreamweaver” en la página 295.

Si establece otra aplicación de edición de imágenes como editor externo y la inicia

desde Dreamweaver, la aplicación se iniciará y abrirá la imagen seleccionada (por

ejemplo, imágenes/miFoto.gif). Utilice el editor de imágenes para modiﬁcar la

imagen y guardar los cambios realizados. A continuación, vea la imagen

actualizada en Dreamweaver.

Si lo preﬁere, puede abrir manualmente el archivo original a partir del cual se

generó el GIF (por ejemplo, milogotipo.png podría ser el archivo Fireworks

original), realizar cambios y guardar la imagen modiﬁcada. Dreamweaver

actualizará la imagen en la ventana de documento cuando vuelva al programa.

Si no ve una imagen actualizada después de volver a la ventana de Dreamweaver,

seleccione la imagen y, a continuación, haga clic en el botón Actualizar en el

inspector de propiedades.

Configurar las preferencias del editor de imágenes externo

Puede utilizar el cuadro de diálogo Preferencias de Dreamweaver para especiﬁcar el

editor de imágenes que desea iniciar para editar imágenes con extensiones de

archivo especíﬁcas. Por ejemplo, puede indicar a Dreamweaver que inicie

Fireworks cuando desee editar un GIF y que inicie un editor de imágenes distinto

cuando desee editar un JPEG.

Capítulo 11292

Puede establecer más de un editor externo para una extensión de archivo.

Posteriormente, cuando esté preparado para editar la imagen, podrá emplear el

menú contextual para elegir un editor.

Para configurar un editor de imágenes externo para un tipo de archivo existente:

1 Abra el cuadro de diálogo Tipos de archivo/editores llevando a cabo una de

estas operaciones:

• Elija Edición > Preferencias y seleccione Tipos de archivo/editores.

• Elija Edición > Editar con editor externo y seleccione Tipos de archivo/editores.

2 En la lista Extensiones, seleccione la extensión de archivo para la que desea

conﬁgurar un editor externo.

3 Haga clic en el botón Añadir (+) situado encima de la lista Editores.

4 En el cuadro de diálogo Seleccionar editor externo, acceda a la aplicación que

desea iniciar como editor para este tipo de archivo.

5 En el cuadro de diálogo Preferencias, haga clic en Convertir en principal si

desea que este editor sea el editor primario de este tipo de archivo.

6 Si desea conﬁgurar un editor adicional para este tipo de archivo, repita los pasos

3 y 4.

Dreamweaver utilizará automáticamente el editor principal cuando decida

editar una imagen de este tipo. Puede elegir otros editores que ﬁguren en el

menú contextual de la imagen en la ventana de documento.

Insertar imágenes 293

Para añadir un nuevo tipo de archivo a la lista Extensiones:

1 Abra el cuadro de diálogo Tipos de archivo/editores llevando a cabo una de

estas operaciones:

• Elija Edición > Preferencias y seleccione Tipos de archivo/editores.

• Elija Edición > Editar con editor externo y seleccione Tipos de archivo/editores.

2 Haga clic en el botón Añadir (+) situado encima de la lista Extensiones.

3 Escriba la extensión del tipo de imagen que desea editar (por ejemplo, .JPEG).

4 Para conﬁgurar un editor externo, haga clic en el botón Añadir (+) situado

encima de la lista Editores.

5 En el cuadro de diálogo que aparece a continuación, elija la aplicación que

desea utilizar para editar este tipo de imagen.

6 Haga clic en Convertir en principal si desea que este editor sea el editor

principal para este tipo de imágenes.

Para cambiar la configuración del editor:

1 En las preferencias de editores externos, haga clic en la extensión de archivo

para la que desea cambiar el editor.

2 Utilice los botones Añadir (+) o Borrar (–) situados encima de la lista Editores

para añadir o eliminar un editor.

Para obtener más información sobre las demás opciones de preferencias de

Editores externos, consulte “Iniciar un editor externo” en la página 314.

Iniciar un editor de imágenes externo

Elija Edición > Preferencias > Tipos de archivos/editores para conﬁgurar un editor

de imágenes externo para los tipos de archivo de imágenes que especiﬁque. Una

vez seleccionado el editor de imágenes externo, puede iniciarlo y editar las

imágenes mientras trabaja en el documento de Dreamweaver.

Para iniciar el editor de imágenes externo, lleve a cabo una de estas operaciones:

• Haga doble clic en la imagen que desea editar.

• Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) en la imagen que desea editar. A continuación, elija Editar con en

el menú contextual para seleccionar un editor deﬁnido anteriormente o elija

Examinar y seleccione un editor.

• Seleccione la imagen que desea editar y haga clic en Editar en el inspector

de propiedades.

• Haga doble clic en el archivo de imagen en la ventana Sitio para iniciar el editor de

imágenes principal. Si no ha especiﬁcado ningún editor de imágenes, Dreamweaver

iniciará el editor predeterminado para el tipo de archivo en cuestión.

Capítulo 11294

Nota: Al abrir una imagen desde la ventana Sitio, las funciones de integración de

Fireworks descritas anteriormente no surten efecto y Fireworks no abrirá el archivo

PNG original. Para utilizar las funciones de integración de Fireworks, abra las imágenes

desde la ventana de documento.

Aplicar comportamientos a imágenes

Puede aplicar cualquier comportamiento disponible a una imagen o zona

interactiva de imagen. Al aplicar un comportamiento a una zona interactiva,

Dreamweaver inserta el código HTML en la etiqueta area. Hay tres

comportamientos que se aplican especíﬁcamente a las imágenes: Carga previa de

imágenes, Intercambiar imagen y Restaurar imagen intercambiada.

Carga previa de imágenes carga en la memoria caché del navegador las imágenes

que no aparecen en la página de inmediato (como aquéllas que se intercambiarán

por líneas de tiempo, comportamientos, capas o secuencias de comandos de

JavaScript). Esto contribuye a evitar los retrasos debidos a la descarga cuando llega

el momento de que aparezcan las imágenes. Consulte “Carga previa de imágenes”

en la página 484.

Intercambiar imagen intercambia una imagen por otra cambiando el atributo SRC

de la etiqueta img. Use esta acción para crear imágenes de sustitución de botones y

otros efectos de imagen (incluido el intercambio de varias imágenes a la vez).

Consulte “Intercambiar imagen” en la página 493.

Restaurar imagen intercambiada restaura los archivos de origen del último

conjunto de imágenes intercambiadas. Esta acción se añade automáticamente

siempre que se adjunta la acción Intercambiar imagen a un objeto de forma

predeterminada. No suele ser necesario seleccionarla manualmente. Consulte

“Restaurar imagen intercambiada” en la página 494.

También puede utilizar comportamientos para crear sistemas de navegación más

soﬁsticados, como una barra de navegación o un menú de salto. Consulte “Crear

barras de navegación” en la página 389 y “Crear menús de salto” en la página 387.

295

CAPÍTULO 12

Uso conjunto de Fireworks y

.............................................................................................................

Dreamweaver

Las características de integración sin igual facilitan alternar el trabajo con archivos

entre Macromedia Dreamweaver 4 y Macromedia Fireworks 4. Dreamweaver y

Fireworks reconocen y comparten muchas de las ediciones de los mismos archivos,

incluyendo cambios de vínculos, mapas de imágenes, divisiones de tablas, etc.

Juntas, las dos aplicaciones ofrecen un ﬂujo de trabajo innovador para editar,

optimizar y colocar archivos gráﬁcos Web en páginas HTML.

Si desea modiﬁcar imágenes y tablas de Fireworks colocadas en un documento

Dreamweaver, puede ejecutar Fireworks para realizar los cambios y volver después

al documento actualizado en Dreamweaver. Si desea optimizar con rapidez

imágenes y animaciones coIocadas de Fireworks, abra el cuadro de diálogo de

optimización de Fireworks e introduzca la conﬁguración actualizada. En cualquier

caso, las actualizaciones se realizan en los archivos colocados en Dreamweaver, así

como en los archivos origen de Fireworks, si éstos se ejecutaron.

Inclusión de archivos de Fireworks en

Dreamweaver

Existen varias posibilidades de colocar imágenes y código HTML de Fireworks en

Dreamweaver. En Dreamweaver, puede utilizar las funciones de inserción para

colocar archivos de Fireworks en documentos. Desde Fireworks es posible

exportar archivos directamente a una carpeta del sitio Dreamweaver, o bien copiar

y pegar código HTML en un documento de Dreamweaver.

Capítulo 12296

Colocación de imágenes de Fireworks en Dreamweaver

En un documento de Dreamweaver es posible colocar imágenes GIF, JPEG o

PNG generadas por Fireworks.

Para insertar una imagen de Fireworks en un documento de Dreamweaver:

1 Coloque el punto de inserción donde desee que aparezca la imagen en la

ventana del documento de Dreamweaver.

2 Siga uno de estos procedimientos:

• Seleccione Insertar > Imagen.

• Haga clic en el botón Insertar imagen de la categoría Común del panel

Objetos.

3 Vaya al archivo Fireworks deseado y haga clic en Abrir.

Si el archivo Fireworks no se encuentra en el sitio Dreamweaver actual, aparece

un mensaje que pregunta si desea copiar el archivo en la carpeta raíz.

Inserción de código HTML de Fireworks en Dreamweaver

Dreamweaver permite insertar código HTML generado por Fireworks, completo

con imágenes asociadas, divisiones y JavaScript, en un documento. Esta

característica de inserción facilita la tarea de agregar tablas o mapas de imágenes

creados en Fireworks en un documento de Dreamweaver.

Para insertar código HTML de Fireworks en un documento de Dreamweaver:

1 En Dreamweaver, guarde el documento en un sitio deﬁnido.

2 Coloque el punto de inserción en el documento donde desee que comience el

código HTML insertado.

3 Siga uno de estos procedimientos:

• Seleccione Insertar > Imágenes interactivas > HTML de Fireworks.

• Haga clic en el botón Insertar HTML de Fireworks de la categoría Común del

panel Objetos.

4 En el cuadro de diálogo que aparece a continuación, haga clic en Examinar para

seleccionar el archivo HTML de Fireworks que desee.

5 Seleccione la opción Eliminar archivo después de insertar para desplazar el

archivo HTML a la Papelera de reciclaje (Windows) o Papelera (Macintosh) al

ﬁnalizar la operación.

Utilice esta opción en caso de no necesitar el archivo HTML de Fireworks

después de insertarlo. Esta opción no afecta al archivo PNG origen asociado

con el archivo HTML.

Uso conjunto de Fireworks y Dreamweaver 297

Nota: Si el archivo HTML se encuentra en una unidad de red, se elimina de forma

permanente, no se desplaza a la Papelera de reciclaje o Papelera.

6 Haga clic en Aceptar para insertar el código HTML, junto con sus imágenes,

divisiones y Javascript asociados, en el documento de Dreamweaver.

Copia y pegado de código HTML de Fireworks en

Dreamweaver

Un método rápido para colocar imágenes y tablas generadas por Fireworks en

Dreamweaver implica copiar y pegar el código HTML de Fireworks directamente

en el documento de Dreamweaver.

Para copiar y pegar código HTML de Fireworks en Dreamweaver:

1 En Fireworks, seleccione Editar > Copiar código HTML.

2 Siga los pasos del asistente conforme le guía en el proceso de conﬁguración de

la exportación del código HTML e imágenes. Cuando el sistema lo solicite,

especiﬁque la carpeta del sitio Dreamweaver como destino para las imágenes

exportadas.

El asistente exporta las imágenes a la carpeta especiﬁcada y copia el código

HTML en el Portapapeles.

3 En Dreamweaver, coloque el punto de inserción en el documento donde desee

pegar el código HTML y seleccione Editar > Pegar.

Todo el código HTML y JavaScript asociado con los archivos Fireworks

exportados se copia en el documento de Dreamweaver, actualizándose todos los

vínculos a las imágenes.

Para exportar y pegar código HTML de Fireworks en Dreamweaver:

1 En Fireworks, seleccione Archivo > Exportar.

2 En el cuadro de diálogo Exportar, especiﬁque la carpeta del sitio Dreamweaver

como destino de las imágenes exportadas.

3 Seleccione HTML e imágenes en el menú emergente Guardar como tipo.

4 Seleccione Copiar en el Portapapeles en el menú emergente HTML y haga clic

en Guardar.

5 En Dreamweaver, coloque el punto de inserción en el documento donde desee

pegar el código HTML y seleccione Editar > Pegar.

Todo el código HTML y JavaScript asociado con los archivos Fireworks

exportados se copia en el documento de Dreamweaver, actualizándose todos los

vínculos a las imágenes.

Capítulo 12298

Exportación de archivos Fireworks a Dreamweaver

El comando Archivo > Exportar de Fireworks permite exportar y guardar los

archivos de imagen y de código HTML optimizados en la ubicación de la carpeta

del sitio Dreamweaver deseada. Entonces podrá abrirlos para editarlos en

Dreamweaver.

De forma alternativa, es posible exportar archivos Fireworks como capas CSS

(Cascading Style Sheet) o elementos de biblioteca de Dreamweaver. Los elementos

de biblioteca de Dreamweaver simpliﬁcan el proceso de editar y actualizar un

componente de sitio Web frecuentemente utilizado, como una serie de vínculos de

pie de página o una barra de navegación. Un elemento de biblioteca es una

porción de un archivo HTML ubicado en una carpeta denominada Library en el

directorio raíz del sitio. Es posible arrastrar copias de un elemento de biblioteca a

cualquier página del sitio Web.

Para exportar imágenes y código HTML de Fireworks a Dreamweaver:

1 En Fireworks, seleccione Archivo > Exportar.

2 Seleccione HTML e imágenes en el menú emergente Guardar como tipo.

3 Seleccione Exportar Archivo HTML en el menú emergente HTML.

4 Especiﬁque una carpeta de destino en la carpeta del sitio Dreamweaver.

5 Haga clic en Guardar para exportar los archivos.

Para exportar archivos Fireworks como capas CSS:

1 En Fireworks, seleccione Archivo > Exportar.

2 Seleccione Capas CSS (.htm) en el menú emergente Guardar como tipo.

3 Especiﬁque una carpeta de destino en la carpeta del sitio Dreamweaver.

4 Haga clic en Guardar para exportar los archivos.

Uso conjunto de Fireworks y Dreamweaver 299

Para exportar un archivo de Fireworks como un elemento de biblioteca de

Dreamweaver:

1 En Fireworks, seleccione Archivo > Exportar.

2 Seleccione Dreamweaver Library (.lbi) en el menú emergente Guardar como

tipo.

3 Asigne un nombre al archivo y especiﬁque una carpeta de destino denominada

Library ubicada en el directorio raíz del sitio Dreamweaver.

Si fuera necesario, Fireworks le solicitará crear esta carpeta.

4 Haga clic en Guardar para exportar el archivo.

Capítulo 12300

Ejecución de Fireworks desde Dreamweaver

Es posible ejecutar Fireworks directamente desde un documento de Dreamweaver

eligiendo una imagen, división de tabla o tabla colocada de Fireworks para su

edición u optimización. Para que estas funciones de ejecutar y editar funcionen de

forma correcta, debe designar Fireworks como editor externo principal en

Dreamweaver.

Designación de Fireworks como editor externo principal de

Dreamweaver

Dreamweaver 4 ofrece preferencias de ejecución automática de determinadas

aplicaciones para editar tipos de archivos especíﬁcos. Para utilizar las funciones de

ejecutar y editar de Fireworks, asegúrese de establecer Fireworks 4 como el editor

principal de archivos GIF, JPEG y PNG en Dreamweaver.

Aunque es posible utilizar versiones anteriores de Fireworks como editor externo

de imágenes, dichas versiones ofrecen una capacidad limitada de ejecutar y editar.

Fireworks 3 no siempre permite ejecutar y editar tablas y divisiones colocadas

dentro de tablas, mientras que Fireworks 2 no permite ejecutar y editar archivos

PNG origen de imágenes colocadas.

Para definir Fireworks 4 como el editor externo principal de Dreamweaver 4:

1 En Dreamweaver, elija Edición > Preferencias y seleccione Tipos de archivo/

Editores.

2 En la lista de extensiones, seleccione una extensión de archivo Web (.gif, .jpg

o .png).

3 En la lista de editores, seleccione Fireworks 4 y haga clic en Convertir en

principal.

4 Repita los pasos 2 y 3 para deﬁnir Fireworks 4 como editor principal de otras

extensiones de archivos Web.

Uso conjunto de Fireworks y Dreamweaver 301

Acerca de notas de diseño y de archivos origen

Siempre que se exporta un archivo Fireworks desde un PNG origen guardado a un

sitio Dreamweaver, Fireworks escribe una nota de diseño con información sobre el

archivo. Por ejemplo, al exportar una tabla de Fireworks, Fireworks escribe una

nota de diseño para cada archivo de divisiones exportado y para el archivo HTML

que ensambla las divisiones de la tabla. Estas notas de diseño contienen referencias

al archivo PNG origen que generó dinámicamente los archivos exportados.

Si ejecuta y edita un archivo de imagen de Fireworks desde Dreamweaver, éste

utilizará la nota de diseño para localizar el archivo PNG origen de dicho archivo.

Para obtener el mejor resultado, guarde siempre el archivo PNG origen y los

archivos exportados de Fireworks en un sitio Dreamweaver. De esta forma

asegurará que cualquier usuario que comparta el sitio pueda localizar el archivo

PNG origen cuando ejecute Fireworks desde Dreamweaver.

Especificación de preferencias de ejecución y edición de

archivos origen de Fireworks

Las preferencias de ejecución y edición de Fireworks permiten especiﬁcar cómo

manejar los archivos PNG origen al ejecutar archivos de Fireworks desde otra

aplicación, como Macromedia Director o Dreamweaver.

Dreamweaver reconoce dichas preferencias sólo en determinados casos en los que

se ejecuta y optimiza una imagen de Fireworks. En concreto, es necesario ejecutar

y optimizar una imagen que no sea parte de una tabla de Fireworks y que no

contenga una ruta de acceso correcta de nota de diseño al archivo PNG origen. En

todos los demás casos, incluidos todos los casos de ejecución y edición de

imágenes de Fireworks, Dreamweaver ejecuta automáticamente el archivo PNG

origen, solicitando que se localice el archivo origen en caso de no poder

encontrarse.

Capítulo 12302

Para especificar las preferencias de ejecución y edición de Fireworks:

1 En Fireworks, seleccione Editar > Preferencias, y haga clic en la ﬁcha Ejecutar y

editar (Windows) o seleccione Ejecutar y editar en el menú emergente

(Macintosh).

2 Especiﬁque las opciones de preferencia para editar u optimizar imágenes de

Fireworks colocadas en una aplicación externa:

Utilizar siempre PNG origen ejecuta automáticamente el archivo PNG de

Fireworks deﬁnido en la nota de diseño como origen de la imagen colocada. Las

actualizaciones se realizan tanto en el archivo PNG origen como en su

correspondiente imagen colocada.

No utilizar nunca PNG origen ejecuta automáticamente la imagen colocada de

Fireworks, exista o no un archivo PNG origen. Las actualizaciones sólo se

realizan en la imagen colocada.

Preguntar al ejecutar permite especiﬁcar cada vez si ejecutar o no el archivo

PNG origen. Cuando se edita u optimiza una imagen colocada, Fireworks

muestra un mensaje que solicita tomar una decisión de ejecución y edición.

También es posible especiﬁcar preferencias de ejecución y edición globales a

partir de este mensaje.

Edición de archivos de Fireworks colocados

en Dreamweaver

La integración de la ejecución y edición permite utilizar Fireworks para modiﬁcar

imágenes y tablas generadas por Fireworks colocadas en un documento de

Dreamweaver. Dreamweaver ejecuta Fireworks de forma automática, lo que

permite editar la imagen en Fireworks. Las actualizaciones que se realizan en

Fireworks se aplican de forma automática a la imagen colocada en Dreamweaver.

Fireworks reconoce y conserva la mayoría de los cambios realizados en Dreamweaver,

lo que incluye modiﬁcación de vínculos, edición de mapas de imágenes, modiﬁcación

o cambio de nombre de divisiones de tablas, y edición de texto en divisiones de texto.

El Inspector de propiedades de Dreamweaver ayuda a identiﬁcar las imágenes,

divisiones de tabla y tablas de un documento generadas por Fireworks.

Edición de imágenes de Fireworks

Puede ejecutar Fireworks para editar imágenes individuales colocadas en un

documento de Dreamweaver.

Para ejecutar y editar una imagen de Fireworks colocada en Dreamweaver:

1 En Dreamweaver, seleccione Ventana > Propiedades para abrir el Inspector de

propiedades si fuera necesario.

Uso conjunto de Fireworks y Dreamweaver 303

Siga uno de estos procedimientos:

• Seleccione la imagen que desee. (El Inspector de propiedades identiﬁca la

selección como una imagen de Fireworks y muestra el nombre del archivo PNG

origen conocido de la imagen). A continuación, haga clic en Editar en el

Inspector de propiedades.

• Mantenga pulsada la tecla Control (Windows) o Comando (Macintosh) y haga

doble clic en la imagen que desee editar.

• Haga clic con el botón derecho del ratón (Windows) o pulse la tecla Control

y haga clic (Macintosh) en la imagen deseada, y seleccione Editar con

Fireworks 4 en el menú contextual.

Dreamweaver inicia Fireworks en el caso de que no esté abierto ya.

3 Si el sistema lo solicita, especiﬁque si desea ejecutar un archivo de Fireworks

como origen para la imagen colocada.

4 En Fireworks, edite la imagen. La ventana del documento indicará que está

modiﬁcando una imagen desde Dreamweaver.

Dreamweaver reconoce y conserva todas las modiﬁcaciones aplicadas a la

imagen en Fireworks.

5 Al ﬁnalizar la edición, haga clic en Hecho en la ventana del documento.

Hacer clic en Hecho exporta la imagen con las conﬁguraciones de optimización

actuales del archivo PNG origen, actualiza los archivos GIF o JPEG utilizados por

Dreamweaver, y guarda el archivo PNG origen en caso de haberse seleccionado.

Nota: Cuando se abre una imagen procedente de la ventana del sitio Dreamweaver, las

funciones de integración de Fireworks descritas anteriormente no están activas;

Fireworks no abre el archivo PNG original. Para utilizar las funciones de integración de

Fireworks, abra las imágenes en la ventana del documento de Dreamweaver.

Capítulo 12304

Edición de tablas de Fireworks

Cuando se ejecuta y edita una división de imagen que forma parte de una tabla

colocada de Fireworks, Dreamweaver ejecuta automáticamente el archivo PNG

origen de toda la tabla.

Para ejecutar y editar una tabla de Fireworks colocada en Dreamweaver:

1 En Dreamweaver, seleccione Ventana > Propiedades para abrir el Inspector de

propiedades si fuera necesario.

2 Siga uno de estos procedimientos:

• Haga clic dentro de la tabla, y haga clic en la etiqueta TABLE en la barra de estado

para seleccionar toda la tabla. (El Inspector de propiedades identiﬁca la selección

como una tabla de Fireworks y muestra el nombre del archivo PNG origen

conocido de la tabla). A continuación, haga clic en Editar en el Inspector.

• Haga clic en el ángulo superior izquierdo de la tabla para seleccionarla y, a

continuación, haga clic en Editar en el Inspector de propiedades.

• Seleccione la división de tabla que desee y haga clic en Editar en el Inspector de

propiedades.

• Mantenga pulsada la tecla Control (Windows) o Comando (Macintosh) y haga

doble clic en la imagen que desee editar.

• Haga clic con el botón derecho del ratón (Windows) o pulse la tecla Control y

haga clic (Macintosh) en la división de tabla deseada, y seleccione Editar con

Fireworks 4 en el menú contextual.

Dreamweaver inicia Fireworks en el caso de que no esté abierto ya. El archivo

PNG origen de toda la tabla aparece en la ventana del documento.

3 En Fireworks, edite la imagen de la tabla.

Dreamweaver reconoce y conserva todas las modiﬁcaciones aplicadas a la

imagen en Fireworks.

4 Al ﬁnalizar la edición, haga clic en Hecho en la ventana del documento.

Hacer clic en Hecho exporta los archivos HTML y de divisiones de imagen de

la tabla con las conﬁguraciones de optimización actuales, actualiza la tabla

colocada en Dreamweaver, y guarda el archivo PNG origen. Fireworks exporta

y reemplaza sólo los archivos HTML y de divisiones de imagen necesarios para

actualizar la tabla en Dreamweaver.

Uso conjunto de Fireworks y Dreamweaver 305

Optimización de imágenes y animaciones

de Fireworks colocadas en Dreamweaver

Puede ejecutar Fireworks desde Dreamweaver para realizar rápidos cambios de

exportación, como volver a muestrear o cambiar el tipo de archivo, en imágenes y

animaciones colocadas de Fireworks. Fireworks permite cambiar las

conﬁguraciones de optimización y animación, y el tamaño y el área de la imagen

exportada.

Para cambiar las configuraciones de optimización de una imagen de Fireworks

colocada en Dreamweaver:

1 En Dreamweaver, seleccione la imagen deseada y seleccione

Comandos > Optimizar imagen en Fireworks.

2 Si el sistema lo solicita, especiﬁque si desea ejecutar un archivo de Fireworks

como origen para la imagen colocada.

3 En Fireworks, realice las modiﬁcaciones que desee en el cuadro de diálogo de

optimización:

• Para modiﬁcar las conﬁguraciones de optimización, haga clic en la ﬁcha

Opciones. Para más información, consulte Uso de Fireworks.

• Para modiﬁcar el tamaño y el área de la imagen exportada, haga clic en la ﬁcha

Archivo. Para más información, consulte “Cambio del tamaño de las imágenes

colocadas de Fireworks” en la página 306.

• Para modiﬁcar la conﬁguración de la animación de la imagen, haga clic en la

ﬁcha Animación. Para más información, consulte “Edición de animaciones

colocadas de Fireworks” en la página 307.

Capítulo 12306

Cuando termine de editar la imagen, haga clic en Actualizar.

Hacer clic en Actualizar exporta la imagen con la nueva conﬁguración de

optimización, actualiza el archivo GIF o JPEG colocado en Dreamweaver y

guarda el archivo PNG origen en caso de haber seleccionado un archivo origen.

En caso de modiﬁcarse el formato de la imagen, el veriﬁcador de vínculos de

Dreamweaver solicita actualizar las referencias a la imagen. Por ejemplo, si

cambia el formato de la imagen mi_imagen de GIF a JPEG, el hecho de hacer

clic en Aceptar respondiendo a la solicitud del veriﬁcador cambia todas las

referencias a mi_imagen.gif del sitio por mi_imagen.jpg.

Cambio del tamaño de las imágenes colocadas de Fireworks

Al ejecutar y optimizar una imagen de Fireworks desde Dreamweaver, es posible

cambiar su tamaño y seleccionar un área especíﬁca de la misma para exportar.

Para especificar las dimensiones de la imagen exportada:

1 En Fireworks, en el cuadro de diálogo de optimización, haga clic en la ﬁcha

Archivo.

2 Para ajustar a escala la imagen cuando se exporta, especiﬁque el porcentaje de

escala o introduzca la anchura y altura en píxeles que desee. Seleccione

Restringir para ajustar a escala la anchura y la altura de forma proporcional.

3 Para exportar un área seleccionada de la imagen, seleccione la opción Exportar

área y especiﬁque el área de exportación:

• Arrastre el borde punteado que aparece alrededor de la presentación preliminar

hasta que encierre el área de exportación deseada. (Arrastre al interior de la

presentación preliminar para desplazar las áreas ocultas a la presentación).

• Introduzca las coordenadas de píxeles para los contornos del área de exportación.

Uso conjunto de Fireworks y Dreamweaver 307

Edición de animaciones colocadas de Fireworks

En la edición y optimización de animaciones colocadas de Fireworks también es

posible editar sus conﬁguraciones. Las opciones de animación del cuadro de diálogo

de optimización son similares a las disponibles en el panel Fotogramas de Fireworks.

Para editar una imagen animada:

1 En Fireworks, en el cuadro de diálogo de optimización, haga clic en la ﬁcha

Animación.

2 Para obtener una presentación preliminar de fotogramas de animación en

cualquier momento, utilice los siguientes métodos:

• Para presentar un solo fotograma, seleccione el fotograma deseado en la lista

situada a la izquierda del cuadro de diálogo o bien utilice los controles de

fotograma situados en el área inferior derecha del cuadro de diálogo.

• Para reproducir la animación, haga clic en el control Reproducir/Detener

situado en el área inferior derecha del cuadro de diálogo.

3 Edite la animación:

• Para especiﬁcar el método de eliminación de fotogramas, seleccione el

fotograma deseado en la lista y elija una opción en el menú emergente

(indicado por el icono de papelera).

• Para establecer la demora de fotogramas, seleccione el fotograma deseado en la

lista e introduzca el tiempo de demora en centésimas de segundo.

• Para establecer que la animación se reproduzca de forma repetida, haga clic en

el botón Bucle y elija el número de repeticiones deseado en el menú emergente.

• Seleccione la opción Recorte automático para recortar cada fotograma como un

área rectangular, de manera que sólo se de salida al área de la imagen que diﬁera

entre fotogramas. La selección de esta opción reduce el tamaño del archivo.

• Seleccione la opción Diferencia automática para sólo dar salida a los píxeles que

cambien entre fotogramas. La selección de esta opción reduce el tamaño del

archivo.

Capítulo 12308

Actualización de código HTML de

Fireworks colocado en Dreamweaver

El comando Archivo > Actualizar HTML de Fireworks ofrece una alternativa al

método de ejecución y edición para actualizar archivos de Fireworks colocados en

Dreamweaver. La opción Actualizar HTML permite editar una imagen PNG

origen en Fireworks y, a continuación, actualizar automáticamente cualquier

archivo de imagen y de código HTML exportado colocado en un documento de

Dreamweaver. Este comando permite actualizar archivos de Dreamweaver aunque

Dreamweaver no esté ejecutándose.

Para actualizar el código HTML de Fireworks colocado en Dreamweaver:

1 En Fireworks, seleccione Archivo > Actualizar HTML.

2 Desplácese al archivo de Dreamweaver que contenga el código HTML que

desee actualizar, y haga clic en Abrir.

3 Desplácese a la carpeta de destino donde desee colocar los archivos de imágenes

actualizados y haga clic en Elegir.

Fireworks actualiza el código HTML y JavaScript del documento de

Dreamweaver. Fireworks exporta también las imágenes actualizadas asociadas

con el código HTML y coloca las imágenes en la carpeta de destino

especiﬁcada.

Si Fireworks no encuentra el código HTML correspondiente, ofrece la opción

de insertar el nuevo código HTML en el documento de Dreamweaver.

Fireworks coloca la sección JavaScript del nuevo código al comienzo del

documento y la tabla HTML o el vínculo con la imagen al ﬁnal.

Creación de álbumes de fotografías Web

El comando Crear álbum de fotos web de Dreamweaver permite generar

automáticamente un sitio Web que contenga un álbum de imágenes a partir de

una carpeta dada. Este comando utiliza JavaScript para llamar a Fireworks, que

crea una miniatura y una imagen de mayor tamaño de cada una de las imágenes de

la carpeta. A continuación, Dreamweaver crea una página Web que contiene todas

las miniaturas, así como vínculos con las imágenes más grandes. Para utilizar Crear

álbum de fotos Web, es necesario que Dreamweaver y Fireworks estén instalados

en el sistema.

Antes de empezar, coloque todas las imágenes del álbum de fotografías en una sola

carpeta. (No es necesario que la carpeta se encuentre en un sitio). Además,

asegúrese de que los nombres de archivos de imágenes tengan la extensión

reconocida por el comando Crear álbum de fotos Web (.gif, .jpg, .jpeg, .png, .psd,

.tif o .tiff). Las imágenes con extensiones de archivo no reconocidas no se incluyen

en el álbum de fotografías.

Uso conjunto de Fireworks y Dreamweaver 309

Para crear un álbum de fotografías Web:

1 En Dreamweaver, seleccione Comandos > Crear álbum de fotos web.

2 En el campo de texto Título del álbum de fotos, introduzca un título. El título

aparecerá en un rectángulo gris en la parte superior de la página que contiene

las miniaturas.

Si lo desea, puede introducir hasta dos líneas de texto adicional para que

aparezca directamente debajo del título, en los campos de texto Información de

subencabezado y Otra información.

3 Haga clic en el botón Examinar situado junto al campo de texto Carpeta de

imágenes de origen para elegir la carpeta que contiene las imágenes de origen. A

continuación elija (o cree) la carpeta de destino en la que colocar todas las

imágenes y archivos HTML exportados haciendo clic en el botón Examinar

situado junto al campo de texto Carpeta de destino.

La carpeta de destino no debe contener ya un álbum de fotografías; en tal caso,

y si cualquiera de las nuevas imágenes tuviera el mismo nombre que las

previamente utilizadas, podrían sobrescribirse los archivos de miniaturas e

imágenes existentes.

4 Especiﬁque las opciones de visualización de las imágenes en miniatura:

• Elija un tamaño para las imágenes en miniatura en el menú emergente Tamaño

de miniatura. Las imágenes se ajustan a escala de forma proporcional para crear

miniaturas que se adaptan a un cuadrado que tiene las dimensiones en píxeles

indicadas.

• Para visualizar el nombre del archivo de cada imagen original debajo de la

miniatura correspondiente, seleccione Mostrar nombres de archivos.

• Introduzca el número de columnas de la tabla que muestra las miniaturas.

5 Elija un formato para las imágenes en miniatura en el menú emergente

Formato de miniatura:

GIF WebSnap 128 crea miniaturas GIF que utilizan una paleta Web aplicable

de hasta 128 colores.

GIF WebSnap 256 crea miniaturas GIF que utilizan una paleta Web aplicable

de hasta 256 colores.

JPEG - Calidad superior crea miniaturas JPEG con relativamente mayor

calidad y archivos más grandes.

JPEG - Archivo más pequeño crea miniaturas JPEG con relativamente calidad

inferior y archivos más pequeños.

Capítulo 12310

Elija un formato para las imágenes de tamaño grande en el menú emergente

Formato de foto. Para cada una de las imágenes originales se crea una imagen

de gran tamaño con el formato especiﬁcado. Es posible especiﬁcar un formato

para las imágenes de gran tamaño que diﬁera del formato especiﬁcado para las

miniaturas.

Nota: El comando Crear álbum de fotos web no permite utilizar los archivos de

imágenes originales como las imágenes de gran tamaño, ya que es posible que los

formatos de las imágenes originales que no sean GIF y JPEG no se visualicen

apropiadamente en todos los navegadores. Tenga en cuenta que si las imágenes

originales son archivos JPEG, las imágenes de gran tamaño generadas pueden tener

un tamaño de archivo mayor o menor calidad que la de los archivos originales.

7 Elija un porcentaje de escala para las imágenes de gran tamaño.

Establecer la escala en 100% crea imágenes de gran tamaño del mismo tamaño

que las originales. Tenga en cuenta que el porcentaje de escala se aplica a todas

las imágenes; si las imágenes originales no son todas del mismo tamaño, el

ajuste a escala por el mismo porcentaje puede producir resultados no deseados.

8 Seleccione Crear página de navegación para cada foto para crear una página

Web individual para cada imagen de origen que contenga vínculos de

navegación etiquetados Anterior, Inicio y Siguiente.

Si selecciona esta opción, las miniaturas vincularán con las páginas de

navegación. Si no la selecciona, las miniaturas vincularán directamente con las

imágenes de gran tamaño.

9 Haga clic en Aceptar para crear los archivos de código HTML e imagen para el

álbum de fotografías Web.

Fireworks se ejecuta (si todavía no está abierto) y crea las miniaturas y las

imágenes de gran tamaño. Este proceso puede llevar varios minutos si se ha

incluido un gran número de archivos de imagen. Una vez ﬁnalizado el proceso,

Dreamweaver vuelve a activarse y crea la página que contiene las miniaturas.

Uso conjunto de Fireworks y Dreamweaver 311

Cuando aparezca el cuadro de diálogo que conﬁrme la creación del álbum, haga

clic en Aceptar. Puede que tenga que esperar unos segundos hasta visualizar la

página del álbum de fotografías. Las miniaturas se muestran ordenadas

alfabéticamente por nombre de archivo.

Nota: Una vez iniciado el proceso de creación del álbum de fotos, el hecho de hacer clic en

el botón Cancelar del cuadro de diálogo de Dreamweaver no lo detiene sino que

simplemente evita que Dreamweaver presente la página principal del álbum de fotos.

Capítulo 12312

313

CAPÍTULO 13

.............................................................................................................

Insertar elementos multimedia

Macromedia Dreamweaver le permite añadir sonido y películas en el sitio Web de

forma rápida y sencilla. Puede incorporar y editar archivos y objetos multimedia,

como applets de Java, películas QuickTime, Flash y Shockwave y archivos de

audio MP3. También puede adjuntar Design Notes a esos objetos. Además, ahora

puede insertar objetos de texto y botón Flash desde Dreamweaver.

Insertar objetos multimedia

Puede insertar un applet de Java, una película QuickTime o Shockwave, una

película o un objeto Flash, un control ActiveX y otros objetos de audio o vídeo en

una página.

Para insertar un objeto multimedia en una página, lleve a cabo una de estas

operaciones:

• Sitúe el punto de inserción en el lugar donde desea insertar el objeto y haga clic

en el botón correspondiente del panel Objetos.

Los objetos Shockwave, ActiveX y Flash tienen botones deﬁnidos. Utilice el

botón de plug-in de Netscape Navigator para insertar películas y archivos de

audio QuickTime. Para obtener más información, consulte “Insertar contenido

de plug-ins de Netscape Navigator” en la página 330.

• Arrastre el botón correspondiente desde el panel Objetos hasta el lugar de la

ventana de documento donde desea que aparezca el objeto.

• Sitúe el punto de inserción en el lugar de la ventana de documento donde desea

insertar el objeto. A continuación, elija el objeto correspondiente en el

submenú Insertar > Medio o Insertar > Imágenes interactivas.

Capítulo 13314

En la mayoría de los casos, aparecerá un cuadro de diálogo que le permitirá

seleccionar un archivo de origen y especiﬁcar diversos parámetros para el objeto

multimedia.

Sugerencia: Para evitar que aparezcan estos cuadros de diálogo, elija Edición >

Preferencias > General y desactive la opción Mostrar diálogo al insertar objetos. Para anular

las preferencias de presentación de cuadros de diálogo, mantenga presionada la tecla

Control (Windows) u Opción (Macintosh) mientras inserta el objeto. Por ejemplo, para

insertar un marcador de posición para una película Shockwave sin especificar el archivo,

mantenga presionada la tecla Control u Opción y haga clic en el botón Shockwave.

Cada botón del panel Objetos inserta el código HTML necesario para que el

objeto o el marcador de posición aparezca en la página. Utilice el inspector de

propiedades para especiﬁcar un archivo de origen y establecer las dimensiones y

otros parámetros y atributos de cada objeto.

Iniciar un editor externo

Puede hacer doble clic en la mayoría de los archivos de la ventana Sitio para

editarlos directamente. Si el archivo es HTML, se abrirá en Dreamweaver. Si se

trata de otro tipo de archivo, como un archivo de imagen, se abrirá en el editor

externo correspondiente, como Macromedia Fireworks.

Los tipos de archivo que Dreamweaver trata directamente se pueden asociar a uno

o más editores externos que se encuentren en el sistema. El editor que se inicia al

hacer doble clic en el archivo de la ventana Sitio se denomina editor principal.

Puede asociar un editor a un tipo de archivo en las preferencias de Tipos de

archivo/editores.

Si hay varios editores asociados al tipo de archivo, podrá iniciar un editor

secundario para un archivo concreto: haga clic con el botón derecho (Windows) o

mientras presiona la tecla Control (Macintosh) en el nombre del archivo en la

ventana Sitio y elija un editor del submenú Abrir con del menú contextual.

En la mayoría de los casos, el editor principal es la misma aplicación que se

iniciaría si en el escritorio hiciera doble clic en el icono del archivo. Para especiﬁcar

de forma explícita qué editores externos deben iniciarse para un tipo de archivo

concreto, elija Edición > Preferencias y seleccione Tipos de archivo/editores en la

lista Categoría. Las extensiones de nombres de archivo, como .gif, .wav y .mpg,

aparecen a la izquierda, bajo Extensiones. Los editores asociados a una extensión

seleccionada ﬁguran en la parte derecha, bajo Editores.

También puede buscar un editor externo para editar el archivo. En la vista de

Diseño de la ventana de documento, haga clic con el botón derecho (Windows) o

mientras presiona la tecla Control (Macintosh) en el archivo y elija Editar con >

Examinar o seleccione el archivo y elija > Edición > Editar con editor externo.

Insertar elementos multimedia 315

Para añadir un tipo de archivo a la lista de extensiones en las preferencias de

Tipos de archivo/editores:

1 Haga clic en el botón más (+) situado sobre la lista Extensiones.

2 Introduzca una extensión de tipo de archivo (incluido el punto situado al

principio de la extensión) o varias extensiones relacionadas separadas por

espacios.

Por ejemplo, puede introducir .png .jpg.

Para añadir un editor para un tipo de archivo concreto:

1 Seleccione la extensión correspondiente al tipo de archivo en la lista

Extensiones.

2 Haga clic en el botón más (+) situado sobre la lista Editores.

3 En el cuadro de diálogo que aparece a continuación, elija la aplicación que

desea añadir a la lista Editores.

Por ejemplo, elija el icono de aplicación de Excel para añadir esa aplicación a la

lista Editores.

Para eliminar un tipo de archivo de la lista:

1 Seleccione el tipo de archivo en la lista Extensiones.

Nota: La acción de eliminar un tipo de archivo no se puede deshacer. Por tanto,

asegúrese antes de ejecutarla.

2 Haga clic en el botón menos (–) situado sobre la lista Extensiones.

Para convertir un editor en el editor principal para un tipo de archivo:

1 Seleccione el tipo de archivo.

2 Seleccione el editor (o añádalo si no está en la lista).

3 Haga clic en el botón Convertir en principal.

Para anular la asociación de un editor con un tipo de archivo:

1 Seleccione el tipo de archivo en la lista Extensiones.

2 Seleccione el editor en la lista Editores.

3 Haga clic en el botón menos (–) situado sobre la lista Editores.

Capítulo 13316

Utilizar Design Notes con objetos

multimedia

Al igual que ocurre con otros objetos de Dreamweaver, puede añadir Design Notes

a un objeto multimedia.

Para añadir Design Notes a un objeto multimedia:

1 Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) en el objeto de la ventana de documento.

Nota: Deberá definir el sitio antes de añadir Design Notes a ningún objeto. Consulte

“Design Notes” en la página 138.

2 Elija Design Notes en el menú contextual.

3 Introduzca la información deseada en la Design Note.

También puede añadir una Design Note a un objeto multimedia desde la ventana

Sitio seleccionando el archivo, abriendo el menú contextual y eligiendo Design

Notes en el menú contextual.

Si desea más información, consulte “Design Notes” en la página 138.

Contenido de Flash

La tecnología Flash de Macromedia es la principal solución para la reproducción

de gráﬁcos y animaciones vectoriales. Flash Player está disponible tanto como

plug-in de Netscape Navigator como en formato de control ActiveX para

Microsoft Internet Explorer en el PC, y ya viene incorporado en las últimas

versiones de Netscape Navigator, Microsoft Windows y America Online. Antes de

utilizar los comandos Flash disponibles en Dreamweaver, le conviene conocer los

tres tipos de archivo Flash que existen.

El archivo Flash (.fla) es el archivo de origen de cualquier proyecto y se crea en el

programa Flash. Este tipo de archivo sólo se puede abrir en Flash, no en

Dreamweaver ni en los navegadores. Puede abrir el archivo en Flash y, a

continuación, exportarlo a SWF o SWT para utilizarlo los en navegadores. Para

obtener más información, consulte “Utilizar objetos de botón Flash” en la

página 317 y “Crear plantillas de botones” en la página 323.

El archivo de película Flash (.swf) es una versión comprimida del archivo Flash

(.ﬂa) optimizada para la Web. Este archivo se puede reproducir en navegadores y

ver en Dreamweaver, pero no se puede editar en Flash. Éste es el tipo de archivo

que se crea utilizando objetos de texto y botón Flash. Para obtener más

información, consulte “Utilizar objetos de botón Flash” en la página 317 y

“Utilizar objetos de texto Flash” en la página 320.

Insertar elementos multimedia 317

Los archivos de plantilla Flash Generator (.swt) permiten modiﬁcar y reemplazar

información de un archivo de película Flash. Estos archivos se utilizan en el objeto

de botón Flash, que permite modiﬁcar la plantilla con texto o vínculos propios,

para crear un SWF personalizado e insertarlo en el documento. En Dreamweaver,

estos archivos de plantilla se encuentran en las carpetas Dreamweaver/

Conﬁguration/Flash Objects/Flash Buttons y Flash Text.

Si utiliza Flash para diseñar sus propios archivos de plantilla Generator (consulte

“Crear plantillas de botones” en la página 323), podrá distribuir estas plantillas a

los miembros del equipo de diseño Web, quienes podrán guardar estos archivos en

la carpeta Conﬁguration/Flash Objects/Flash Buttons y, posteriormente, acceder a

las plantillas utilizando el objeto de botón Flash.

Utilizar objetos de botón Flash

El objeto de botón Flash permite personalizar e insertar un conjunto de botones

Flash prediseñados.

Nota: Deberá guardar el documento antes de insertar un objeto de botón o de texto Flash.

Para insertar un objeto de botón Flash:

1 Mientras se encuentra en la vista de Diseño de la ventana de documento,

seleccione Insertar botón Flash en el panel Objetos o elija Insertar > Imágenes

interactivas > Botón Flash. También puede arrastrar el icono de botón Flash

sobre la ventana de documento.

Aparecerá el cuadro de diálogo Insertar botón Flash.

Capítulo 13318

Seleccione el estilo de botón que desee en la lista Estilo.

Verá un ejemplo del botón en el campo Muestra. Puede hacer clic en esta

muestra para ver cómo funciona en el navegador. Sin embargo, el campo

Muestra no se actualiza automáticamente para mostrar los cambios realizados

en el texto o la fuente. Estos cambios aparecerán en la vista de Diseño.

3 En el campo Texto del botón (opcional), escriba el texto que desea mostrar.

Por ejemplo, escriba Presione aquí Este campo sólo acepta cambios si el botón

seleccionado tiene un parámetro {Button Text} deﬁnido. Esto se puede observar

en el campo Muestra. El texto que escriba reemplazará {Button Text} cuando

previsualice el archivo.

4 En el campo Fuente, especiﬁque un tamaño de fuente y seleccione la fuente que

desea utilizar el menú emergente.

Sólo es necesario realizar selecciones de fuente y tamaño si el botón tiene

parámetros de texto deﬁnidos. Si la fuente predeterminada de un botón no está

disponible en el sistema, seleccione otra fuente en el menú emergente. Tenga en

cuenta que no verá la fuente seleccionada en el campo Muestra, aunque puede

hacer clic en Aplicar para insertar el botón en la página y ver qué apariencia

tendrá el texto.

5 En el campo Vínculo (opcional), introduzca un vínculo absoluto o relativo al

documento para el botón.

No se admiten vínculos relativos al sitio porque los navegadores no los

reconocen en las películas Flash. Si utiliza un vínculo relativo al documento,

guarde el archivo SWF en el mismo directorio que el archivo HTML. Los

navegadores interpretan los vínculos relativos al documento de distintas formas

y, por tanto, al guardar los vínculos en el mismo directorio se garantiza su

correcto funcionamiento.

6 En el campo Destino (opcional), especiﬁque un marco o una ventana de

destino para cargar el vínculo del botón Flash.

7 En el campo Color fondo (opcional), establezca el color del fondo de la película

Flash. Utilice el selector de colores o escriba un valor hexadecimal para la Web

(como #FFFFFF).

8 En el campo Guardar como, introduzca un nombre de archivo para guardar el

nuevo archivo SWF.

Puede utilizar el nombre de archivo predeterminado (por ejemplo,

button1.swf) o escribir uno nuevo. Si el archivo contiene un vínculo relativo al

documento, deberá guardarlo en el mismo directorio que el documento

HTML actual para mantener los vínculos relativos al documento.

Insertar elementos multimedia 319

Haga clic en Obtener más estilos para pasar al sitio Macromedia Exchange y

descargar más estilos de botón.

Para obtener más información, consulte “Añadir extensiones a Dreamweaver”

en la página 95.

10 Haga clic en Aplicar o Aceptar para insertar el botón Flash en la ventana de

documento.

Sugerencia: Seleccione Aplicar para ver los cambios realizados en la vista de Diseño.

Mientras mantiene el cuadro de diálogo abierto puede continuar realizando cambios en el

botón.

Para modificar un objeto de botón Flash:

1 En la vista de Diseño, seleccione el objeto de botón Flash.

2 El inspector de propiedades mostrará las propiedades del botón Flash. Puede

realizar cambios en el inspector de propiedades. Estos cambios modiﬁcan los

atributos HTML como ancho, alto y color de fondo.

3 Para realizar cambios en el contenido, muestre el cuadro de diálogo Insertar

botón Flash utilizando uno de estos métodos:

• Haga doble clic en el objeto de botón Flash.

• Haga clic en Editar en el inspector de propiedades.

• Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) y elija Editar en el menú contextual.

4 En el cuadro de diálogo Insertar botón Flash, edite los campos descritos en el

procedimiento anterior.

En la vista de Diseño, puede cambiar el tamaño del objeto fácilmente

utilizando los manejadores de cambio de tamaño. Puede restablecer el tamaño

original del objeto seleccionando Restablecer tamaño en el inspector de

propiedades. Consulte “Cambiar el tamaño de imágenes y otros elementos” en

la página 285.

Para ver cómo se reproduce el objeto de botón Flash en la ventana de documento:

1 En la vista de Diseño, seleccione el objeto de botón Flash.

2 En el inspector de propiedades, haga clic en el botón verde Reproducir.

3 Haga clic en el botón rojo Detener para terminar la previsualización.

Nota: No se puede editar el objeto de botón Flash mientras se está reproduciendo.

Conviene previsualizar siempre el documento en el navegador para comprobar

exactamente la apariencia que tendrá el botón Flash.

Capítulo 13320

Utilizar objetos de texto Flash

El objeto de texto Flash permite crear e insertar una película Flash que sólo

contiene texto. Esto permite crear una pequeña película de gráﬁcos vectoriales con

fuentes de diseño y el texto que elija.

Para insertar un objeto de texto Flash:

1 Mientras se encuentra en la vista de Diseño de la ventana de documento,

seleccione Insertar texto Flash en el panel Objetos o elija Insertar > Imágenes

interactivas > Texto Flash.

Aparecerá el cuadro de diálogo Insertar texto Flash.

2 Seleccione una fuente en el menú emergente Fuente.

Este menú muestra todas las fuentes TrueType cargadas actualmente en el

sistema.

3 Introduzca un tamaño de fuente (de puntos) en el campo Tamaño.

4 Especiﬁque los atributos de estilo, como negrita o cursiva, y la alineación del

texto haciendo clic en los botones del estilo correspondiente.

5 En el campo Color, establezca el color del texto utilizando el selector de colores

o introduciendo un valor hexadecimal para la Web (como #FFFFFF).

6 En el campo Color de sustitución, establezca el color que aparece cuando el

puntero pasa sobre el objeto de texto Flash. Utilice el selector de colores o

escriba un valor hexadecimal para la Web (como #FFFFFF).

7 Introduzca el texto deseado en el campo Texto.

Para ver el estilo de fuente que se muestra en el campo Texto, seleccione

Mostrar fuente.

Insertar elementos multimedia 321

Si desea asociar un vínculo con el objeto de texto Flash, introduzca un vínculo

absoluto o relativo al documento en el campo Vínculo.

No se admiten vínculos relativos al sitio porque los navegadores no los

reconocen en las películas Flash. Si utiliza un vínculo relativo al documento,

guarde el archivo SWF en el mismo directorio que el archivo HTML. Los

navegadores interpretan los vínculos relativos al documento de distintas formas

y, por tanto, al guardar los vínculos en el mismo directorio se garantiza su

correcto funcionamiento.

9 Si ha introducido un vínculo, puede especiﬁcar un marco o una ventana de

destino para cargar ese vínculo en el campo Destino.

10 En el campo Color fondo, elija un color de fondo para el texto. Utilice el

selector de colores o escriba un valor hexadecimal para la Web (como

#FFFFFF).

11 En el campo Guardar como, introduzca un nombre para el archivo.

Puede utilizar el nombre de archivo predeterminado (por ejemplo, tex1.swf) o

escribir uno nuevo. Si el archivo contiene un vínculo relativo al documento,

deberá guardarlo en el mismo directorio que el documento HTML actual para

mantener los vínculos relativos al documento.

12 Haga clic en Aplicar o Aceptar para insertar el texto Flash en la ventana de

documento.

Si hace clic en Aplicar, el cuadro de diálogo permanecerá abierto y podrá

previsualizar el texto en el documento.

Para modiﬁcar o reproducir el objeto de texto Flash, siga el procedimiento

utilizado para el botón Flash. Consulte “Utilizar objetos de botón Flash” en la

página 317.

Configurar propiedades de objetos Flash

El inspector de propiedades muestra inicialmente las propiedades utilizadas con

mayor frecuencia en los objetos Flash. Haga clic en la ﬂecha de ampliación,

situada en la esquina inferior derecha, para ver más propiedades.

El inspector de propiedades también contiene un botón Reproducir que permite

previsualizar el objeto Flash en la ventana de documento. Al hacer clic en el botón

verde Reproducir, podrá ver qué apariencia tendrá el objeto en un navegador.

Nombre especiﬁca el nombre que identiﬁca el botón en las secuencias de

comandos. Introduzca un nombre en el campo sin título que aparece a la izquierda

del inspector de propiedades.

Capítulo 13322

An y Al especiﬁcan el ancho y el alto del objeto en píxeles. También se pueden

emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm

(milímetros), cm (centímetros) o % (porcentaje del ancho o el alto del objeto

padre). Las abreviaturas deben seguir al valor sin espacio de separación: por

ejemplo, 3mm.

Archivo especiﬁca la ruta del archivo del objeto Flash. Haga clic en el icono de

carpeta para localizar un archivo o escriba la ruta correspondiente.

Alinear determina cómo se alineará el objeto en la página. Para obtener una

descripción de cada opción, consulte “Alinear elementos” en la página 284.

Fnd especiﬁca un color de fondo para el objeto.

Editar accede al cuadro de diálogo del objeto Flash.

Restablecer tamaño deﬁne el tamaño del botón seleccionado como el de la

película original.

Reproducir/Detener permite previsualizar el objeto Flash en la ventana de

documento. Haga clic en el botón verde Reproducir para ver el objeto en modo

Reproducir. Haga clic en el botón rojo Detener para terminar la película y editar el

objeto.

ID deﬁne el parámetro opcional ID ActiveX. El uso más frecuente de este

parámetro es la transmisión de información entre controles ActiveX.

Espacio V y Espacio H especiﬁcan el número de píxeles de espacio en blanco que

habrá por encima, por debajo y a ambos lados del botón.

Calidad establece el parámetro quality para las etiquetas object y embed que

deﬁnen el botón. Los valores altos brindan una mayor calidad a la película, pero

requieren un procesador más rápido para reproducirse correctamente en la

pantalla. Baja da prioridad a la velocidad sobre la apariencia, mientras que Alta

antepone la apariencia a la velocidad. Baja automática hace hincapié en la

velocidad, pero mejora la apariencia siempre que sea posible. Alto automática da

prioridad a las dos cualidades, aunque, si es necesario, sacriﬁca la apariencia por la

velocidad.

Escala establece el parámetro scale para las etiquetas object y embed que deﬁnen el

objeto de botón o de texto. Este parámetro deﬁne cómo se muestra la película en

el área deﬁnida para ella por los valores width y height. Las opciones son:

Predeterminado (mostrar todo), Sin borde y Ajuste exacto. Mostrar todo hace que

toda la película sea visible en el área especiﬁcada, manteniendo la relación de

aspecto de la película y evitando la distorsión. Pueden aparecer bordes a ambos

lados de la película. Sin borde es similar a Mostrar todo, salvo que es posible que se

recorten partes de la película. Con Ajuste exacto, toda la película llena el área

especiﬁcada, pero la relación de aspecto de la película no se mantiene y pueden

producirse distorsiones.

Parámetros abre un cuadro de diálogo para introducir parámetros opcionales.

Consulte “Utilizar parámetros” en la página 335.

Insertar elementos multimedia 323

Crear plantillas de botones

Utilice Flash junto con las plantillas gratuitas de Generator para crear plantillas de

botones con objetos de texto Generator. También puede descargar nuevas

plantillas de botones del sitio Web Macromedia Exchange for Dreamweaver y

colocarlas en la carpeta Flash Button. Para obtener más información sobre la

creación de plantillas de botones, consulte el artículo sobre este tema que se

encuentra en el sitio Web de Macromedia en http://www.macromedia.com/

support/dreamweaver/insert_media.html. Para obtener más información sobre el

uso de extensiones, consulte “Añadir extensiones a Dreamweaver” en la página 95.

Insertar películas Flash

Cuando se inserta una película Flash en un documento, Dreamweaver usa tanto la

etiqueta object (deﬁnida por Internet Explorer para los controles ActiveX), como

la etiqueta embed (deﬁnida por Netscape Navigator) para ofrecer los mejores

resultados en todos los navegadores. Al realizar cambios relativos a la película en el

inspector de propiedades, Dreamweaver adapta los datos introducidos a los

parámetros correspondientes para las etiquetas object y embed.

Nota: Si inserta una película utilizando el objeto de película Flash, se insertará un

parámetro

codebase que indica a Internet Explorer para Windows que descargue

automáticamente el control ActiveX necesario (Flash 4 y posterior). Si no desea que

suceda esto, puede cambiar el atributo.

Para insertar y previsualizar una película Flash:

1 En la vista de Diseño de la ventana de documento, sitúe el punto de inserción

en el lugar donde desea insertar la película.

2 Inserte la película de una de estas formas:

• Haga clic en el icono Insertar Flash en el panel Objetos.

• Elija Insertar > Medio > Flash.

• Arrastre el icono Insertar Flash desde el panel Objetos hasta el punto de

inserción del documento.

3 En el cuadro de diálogo que aparece, seleccione un archivo de película Flash

(.swf). En la ventana de documento aparecerá un marcador de posición Flash

(distinto de los objetos de botón y texto Flash).

4 Para previsualizar la película Flash en la ventana de documento, haga clic en el

botón verde Reproducir del inspector de propiedades. Haga clic en Detener

para poner ﬁn a la previsualización. También puede previsualizar la película

Flash en un navegador presionando F12.

Sugerencia: Para previsualizar todo el contenido Flash de una página, presione

Control+Alt+Mayús+P (Windows) o Mayús+Opción+Comando+P (Macintosh). Todos los

objetos y películas Flash se establecerán en Reproducir.

Capítulo 13324

Configurar propiedades de películas Flash

Para ver las siguientes propiedades en el inspector de propiedades, seleccione una

película Flash.

El inspector de propiedades muestra inicialmente las propiedades utilizadas con

mayor frecuencia. Para ver todas las propiedades, haga clic en la ﬂecha de

ampliación, situada en la esquina inferior derecha.

Nombre especiﬁca un nombre para identiﬁcar una película en las secuencias de

comandos. Introduzca un nombre en el campo sin título que aparece a la izquierda

del inspector de propiedades.

An y Al especiﬁcan el ancho y el alto de la película en píxeles. También se pueden

emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm

(milímetros), cm (centímetros) o % (porcentaje del valor del objeto padre). Las

abreviaturas deben seguir al valor sin espacio de separación: por ejemplo, 3mm.

Archivo especiﬁca la ruta del archivo de la película Flash. Haga clic en el icono de

carpeta para localizar un archivo o escriba la ruta correspondiente.

Alinear determina cómo se alineará la película en la página. Para obtener una

descripción de cada opción, consulte “Alinear elementos” en la página 284.

Fnd especiﬁca un color de fondo para la zona de la película. Este color también

aparecerá cuando la película no se esté reproduciendo (mientras se carga y después

de haberse reproducido).

ID deﬁne el parámetro opcional ID ActiveX. El uso más frecuente de este

parámetro es la transmisión de información entre controles ActiveX.

Espacio V y Espacio H especiﬁcan el número de píxeles de espacio en blanco que

habrá por encima, por debajo y a ambos lados de la película.

Parámetros abre un cuadro de diálogo para introducir parámetros adicionales que

se transferirán a la película. Consulte “Utilizar parámetros” en la página 335. La

película deberá estar diseñada para recibir estos parámetros adicionales.

Calidad establece el parámetro quality para las etiquetas object y embed que

ejecutan la película. Las opciones están relacionadas con el nivel de anti-aliasing

empleado durante la reproducción de la película. Los valores altos brindan una

mayor calidad a la película, pero requieren un procesador más rápido para

reproducirse correctamente en la pantalla. Baja da prioridad a la velocidad sobre la

apariencia, mientras que Alta antepone la apariencia a la velocidad. Baja

automática hace hincapié en la velocidad, pero mejora la apariencia siempre que

sea posible. Alto automática da prioridad a las dos cualidades, aunque, si es

necesario, sacriﬁca la apariencia por la velocidad.

Escala deﬁne el parámetro scale para las etiquetas object y embed que ejecutan la

película. Para obtener más información, consulte “Conﬁgurar propiedades de

objetos Flash” en la página 321.

Insertar elementos multimedia 325

Rep. Autom. reproduce automáticamente la película cuando se carga la página.

Bucle reproduce la película indeﬁnidamente.

Restablecer tamaño restablece el tamaño original de la película seleccionada.

Insertar objetos Generator

Macromedia Generator ofrece una forma de proporcionar contenido Web

dinámico. Puede crear archivos Generator con Flash 4 o 5 mediante las plantillas

gratuitas de Generator. Los archivos se encontrarán disponibles posteriormente en

un servidor Web al ejecutar el software de servidor Generator. Puede insertar un

objeto Generator en un documento de Dreamweaver.

Para insertar un objeto Generator:

1 En la ventana de documento, coloque el punto de inserción en el lugar en el

que desea insertar el objeto.

2 Haga clic en el botón Generator del panel Objetos.

3 En el cuadro de diálogo que aparece, seleccione un archivo de plantilla de

Generator (.swt).

4 Si lo desea, haga clic en el botón de signo más (+) para añadir un par de

parámetros

name

value

. Seguidamente, introduzca un nombre para el parámetro

en el campo Nombre y un valor en el campo Valor. Repita este paso por cada

parámetro.

5 Para eliminar un parámetro, selecciónelo en la lista Parámetros y haga clic en

el botón menos (–).

6 Cuando termine de introducir parámetros, haga clic en Aceptar para insertar el

objeto Generator.

Para editar los parámetros después de insertar el objeto Generator, utilice el

inspector de código o la vista de Código de la ventana de documento.

El servidor Generator utiliza los pares

name=value

, junto con otras fuentes de datos,

para crear dinámicamente la película o el archivo de imagen Flash.

Capítulo 13326

Películas Shockwave

Shockwave, el estándar de Macromedia para multimedia interactivo en la Web, es

un formato comprimido que permite la descarga rápida de los archivos de medios

creados en Macromedia Director y su reproducción en los navegadores de uso más

frecuente.

Insertar películas Shockwave

El software que reproduce las películas Shockwave está disponible como plug-in

para Netscape Navigator y en formato de control ActiveX. Cuando se inserta una

película Shockwave, Dreamweaver usa tanto la etiqueta

object (para el control

ActiveX) como la etiqueta

embed (para el plug-in) para conseguir los mejores

resultados en todos los navegadores. Al realizar cambios relativos a la película en el

inspector de propiedades, Dreamweaver adapta los datos introducidos a los

parámetros correspondientes para las etiquetas

object y embed.

Para insertar una película Shockwave:

1 En la vista de Diseño de la ventana de documento, sitúe el punto de inserción

en el lugar donde desea insertar una película Shockwave.

2 Haga clic en el botón Shockwave del panel Objetos o elija Insertar > Medio >

Shockwave o arrastre el botón Shockwave sobre el documento.

3 En el cuadro de diálogo que aparece, seleccione un archivo de película.

4 En el inspector de propiedades, introduzca el ancho y el alto de la película en

los cuadros An y Al.

Configurar propiedades de Shockwave

Para asegurar los mejores resultados tanto en Microsoft Internet Explorer como en

Netscape Navigator, Dreamweaver inserta películas Shockwave usando las

etiquetas

object y embed. object es la etiqueta deﬁnida por Microsoft para los

controles ActiveX; embed es la etiqueta deﬁnida por Navigator para los plug-ins.

Para ver las propiedades en el inspector de propiedades, seleccione una película

Shockwave.

El inspector de propiedades muestra inicialmente las propiedades utilizadas con

mayor frecuencia. Haga clic en la ﬂecha de ampliación, situada en la esquina

inferior derecha, para ver todas las propiedades.

Nombre especiﬁca un nombre para identiﬁcar una película en las secuencias de

comandos. Introduzca un nombre en el campo sin título que aparece a la izquierda

del inspector de propiedades.

Insertar elementos multimedia 327

An y Al especiﬁcan el ancho y el alto de la película en píxeles. También se pueden

emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm

(milímetros), cm (centímetros) o % (porcentaje del ancho o el alto del objeto

padre). Las abreviaturas deben seguir al valor sin espacio de separación: por

ejemplo, 3mm.

Archivo especiﬁca la ruta del archivo de la película Shockwave. Haga clic en el

icono de carpeta para localizar un archivo o escriba la ruta correspondiente.

Alinear determina cómo se alineará la película en la página. Para obtener una

descripción de cada opción, consulte “Alinear elementos” en la página 284.

Fnd especiﬁca un color de fondo para la zona de la película. Este color también

aparecerá cuando la película no se esté reproduciendo (mientras se carga y después

de haberse reproducido).

Reproducir permite previsualizar la película en la vista de Diseño de la ventana de

documento. Haga clic en el botón Detener para interrumpir la película y volver al

marcador de posición de Shockwave.

Parámetros abre un cuadro de diálogo para introducir parámetros adicionales que

se transferirán a la película Shockwave. Consulte “Utilizar parámetros” en la

página 335. La película Shockwave deberá estar diseñada para recibir estos

parámetros.

ID deﬁne el parámetro opcional ID ActiveX. El uso más frecuente de este

parámetro es la transmisión de información entre controles ActiveX.

Espacio V y Espacio H especiﬁcan el número de píxeles de espacio en blanco que

habrá por encima, por debajo y a ambos lados de la película.

Añadir sonido a una página

Hay varios tipos de archivos y formatos de sonido, y varias forma de añadir sonido

a una página Web. Los factores que hay que tener en cuenta antes de optar por un

formato y un método para añadir sonido son: su ﬁnalidad, el tipo de usuarios a los

que está destinado, el tamaño de archivo, la calidad de sonido y las diferencias en

los navegadores.

Nota: Cada navegador trata los archivos de sonido de una forma muy distinta. Para

mejorar la coherencia en el tratamiento, puede guardar los archivos de sonido como SWF.

Capítulo 13328

Formatos de archivo de audio

La lista siguiente describe los formatos de archivo de audio más común, junto con

algunas de sus ventajas y desventajas en relación con el diseño Web.

El formato .midi o .mid (Interfaz Digital para Instrumentos Musicales) es un

formato de música instrumental. Muchos navegadores reconocen los archivos

MIDI y, por tanto, no requieren un plug-in. Si bien su calidad de sonido es muy

alta, puede variar según la tarjeta de sonido del usuario. Un pequeño archivo

MIDI puede proporcionar un clip de sonido de larga duración. Los archivos

MIDI no se pueden grabar y deben sintetizarse en un ordenador con hardware y

software especiales.

Los archivos de formato .wav (Extensión de Formas de Onda) ofrecen una buena

calidad de sonido, son compatibles con muchos navegadores y no requieren un

plug-in. Puede grabar sus propios archivos WAV desde un CD, una cinta, el

micrófono, etc. Sin embargo, el gran tamaño de archivo limita considerablemente

la duración de los clips de sonido que se pueden utilizar en las páginas Web.

El formato .aif (Formato de Archivo de Intercambio de Audio o AIFF) , al igual que

el formato WAV, ofrece buena calidad de sonido, se puede reproducir en la

mayoría de los navegadores y no requiere un plug-in. También se pueden grabar

archivos AIFF desde un CD, una cinta, el micrófono, etc. Sin embargo, el gran

tamaño de archivo limita considerablemente la duración de los clips de sonido que

se pueden utilizar en las páginas Web.

El formato .mp3 (Audio del Grupo de Expertos en Imágenes en Movimiento o

MPEG-Audio Nivel-3)

es un formato comprimido que reduce considerablemente

el tamaño de los archivos de sonido. La calidad de sonido es excelente: si se graba y

comprime correctamente un archivo MP3, su calidad es equiparable a la de un

CD. La nueva tecnología permite reproducir el archivo en ﬂujo (streaming) de

modo que el visitante no tenga que esperar a que se descargue todo el archivo para

escucharlo. Sin embargo, el tamaño de archivo es mayor que el de Real Audio, por

lo que una canción entera puede tardar bastante en descargarse a través de una

conexión telefónica normal. Para reproducir archivos MP3, los visitantes deberán

descargar e instalar una aplicación auxiliar o un plug-in como QuickTime,

Windows Media Player o RealPlayer.

El formato .ra, .ram, .rpm o Real Audio tiene un alto grado de compresión con

tamaños de archivo más pequeños que MP3. Permite descargar archivos de

canciones completas en un período de tiempo razonable. Dado que los archivos se

pueden reproducir en ﬂujo desde un servidor Web normal, los visitantes pueden

comenzar a escuchar el sonido antes de que el archivo se haya descargado por

completo. La calidad de sonido es más pobre que la de los archivos MP3, aunque

los nuevos reproductores y codiﬁcadores la mejoran considerablemente. Los

visitantes deberán descargar e instalar la aplicación auxiliar o plug-in RealPlayer

para reproducir estos archivos.

Insertar elementos multimedia 329

Establecer un vínculo con archivos de audio

El establecimiento de vínculos con archivos de audio es una forma sencilla y

efectiva de añadir sonido a una página Web. Este método de incorporar archivos

de sonido permite a los visitantes optar por escuchar el archivo, y hace que el

archivo esté disponible para un mayor número de usuarios. Algunos navegadores

no admiten los archivos de sonido incrustados.

Para establecer un vínculo con un archivo de audio:

1 Seleccione el texto o la imagen que desea usar como vínculo con el archivo de

audio.

2 En el inspector de propiedades, haga clic en el icono de carpeta para acceder al

archivo de audio o escriba la ruta y el nombre del archivo en el campo Vínculo.

Incrustar audio

Al incrustar audio se incorpora el reproductor de sonido directamente en la

página, pero el sonido sólo se reproduce si los visitantes del sitio disponen del

plug-in adecuado para el archivo de sonido elegido. Incruste archivos si desea

utilizar el sonido como música de fondo o si desea obtener un mayor control sobre

la presentación de sonido. Por ejemplo, puede establecer el volumen, la apariencia

del reproductor en la página y los puntos inicial y ﬁnal del archivo de sonido.

Para incrustar un archivo de audio:

1 En la vista de Diseño, sitúe el punto de inserción en el lugar donde desea

incrustar el archivo.

2 Haga clic en el botón Plug-in del panel Objetos o elija Insertar > Medio > Plug-in.

Para obtener más información sobre el objeto Plug-in, consulte “Insertar

contenido de plug-ins de Netscape Navigator” en la página 330.

3 En el inspector de propiedades, haga clic en el icono de carpeta para acceder al

archivo de audio o escriba la ruta y el nombre del archivo en el campo Vínculo.

4 Especiﬁque el ancho y el alto introduciendo los valores en los campos

correspondientes o cambiando el tamaño del marcador de posición del plug-in

en la ventana de documento.

Estos valores determinan con qué tamaño se muestran los controles de audio en

el navegador. Por ejemplo, pruebe con un ancho de 144 píxeles y un alto de 60

para ver cómo aparece el reproductor de audio en Navigator y en Internet

Explorer.

Capítulo 13330

Insertar contenido de plug-ins de Netscape

Navigator

Los plug-ins mejoran Netscape Navigator, ya que proporcionan modos de ver

contenido multimedia en una amplia gama de formatos. Los plug-ins son los

medios mediante los cuales se reproducen y muestran los archivos de contenido en

el sitio Web. Por ejemplo, RealPlayer y QuickTime son plug-ins muy comunes, y

el audio MP3 y las películas QuickTime son archivos de contenido.

Después de crear contenido para un plug-in de Navigator, puede utilizar

Dreamweaver para insertar dicho contenido en un documento HTML.

Dreamweaver utiliza la etiqueta

embed para marcar la referencia al archivo de

contenido.

Para insertar contenido de plug-ins de Netscape Navigator:

1 En la vista de Diseño de la ventana de documento, sitúe el punto de inserción

en el lugar donde desea insertar el contenido.

2 Haga clic en el botón Plug-in del panel Objetos.

3 En el cuadro de diálogo que aparece, seleccione un archivo de contenido para

un plug-in de Navigator.

Configurar propiedades de plug-ins de Netscape Navigator

Tras insertar contenido para un plug-in de Netscape Navigator, utilice el inspector

de propiedades para deﬁnir los parámetros de dicho contenido. Para ver las

siguientes propiedades en el inspector de propiedades, seleccione un objeto de

plug-in de Netscape Navigator.

El inspector de propiedades muestra inicialmente las propiedades utilizadas con

mayor frecuencia. Haga clic en la ﬂecha de ampliación, situada en la esquina

inferior derecha, para ver todas las propiedades.

Nombre especiﬁca un nombre para identiﬁcar el plug-in en las secuencias de

comandos. Introduzca un nombre en el campo sin título que aparece a la izquierda

del inspector de propiedades.

An y Al especiﬁcan, en píxeles, el ancho y el alto que se han asignado al objeto en

la página. También se pueden emplear las siguientes unidades: pc (picas), pt

(puntos), in (pulgadas), mm (milímetros), cm (centímetros) o % (porcentaje del

ancho y el alto del objeto padre). Las abreviaturas deben seguir al valor sin espacio

de separación: por ejemplo, 3mm.

Orig especiﬁca el archivo de datos de origen. Haga clic en el icono de carpeta para

localizar un archivo o escriba un nombre de archivo.

Insertar elementos multimedia 331

Url plg especiﬁca 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 página no tiene el plug-in, el navegador intentará descargarlo desde este URL.

Alinear determina cómo se alineará el objeto en la página. Para obtener una

descripción de cada opción, consulte “Alinear elementos” en la página 284.

Espacio V y Espacio H especiﬁcan el número de píxeles de espacio en blanco que

habrá por encima, por debajo y a ambos lados del plug-in.

Borde especiﬁca el ancho del borde alrededor del plug-in.

Parámetros abre un cuadro de diálogo para introducir parámetros adicionales y

transferirlos al plug-in de Netscape Navigator. Consulte “Utilizar parámetros” en

la página 335. Muchos plug-ins responden a parámetros especiales. El plug-in

Flash, por ejemplo, incluye parámetros para

bgcolor, salign y scale.

También puede ver los atributos asignados al plug-in seleccionado haciendo clic

en el botón Atributo. En este cuadro de diálogo puede editar, añadir o eliminar

atributos como el de ancho y alto.

Reproducir plug-ins en la ventana de documento

En la ventana de documento puede previsualizar directamente las películas y

animaciones basadas en plug-ins de Navigator, es decir, de los elementos que usan

la etiqueta embed. En la ventana de documento no es posible obtener vistas previas

de películas o animaciones basadas en controles ActiveX. Puede reproducir todos

los elementos de plug-in a la vez para ver la apariencia que presentará la página

ante el usuario, o bien puede reproducirlos uno por uno para asegurarse de que se

han incrustado los elementos multimedia correctos.

Para reproducir películas, deberán estar instalados en el sistema los plug-ins

adecuados. Al iniciarse, Dreamweaver busca automáticamente todos los plug-ins

instalados, primero en la carpeta Conﬁguration/Plugins y luego en las carpetas de

plug-ins de todos los navegadores instalados.

Para reproducir el contenido de plug-ins en la ventana de documento:

1 Inserte uno o más elementos multimedia eligiendo Insertar > Medio > Shockwave,

Insertar > Imágenes interactivas > Flash o Insertar > Medio > Plug-in.

2 Reproducir contenido de plug-ins:

• Seleccione uno de los elementos multimedia que ha insertado y elija Ver >

Plug-ins > Reproducir o haga clic en el botón Reproducir del inspector de

propiedades.

• Elija Ver > Plug-ins > Reproducir todo para reproducir todos los elementos

multimedia de la página seleccionada que se basan en plug-ins.

Nota: La opción Reproducir todo se aplica al documento actual, no a otros documentos de

un conjunto de marcos, por ejemplo.

Capítulo 13332

Para detener la reproducción del contenido de plug-ins:

Seleccione un elemento multimedia y elija Ver > Plug-ins > Detener o haga clic en

el botón Detener del inspector de propiedades.

También puede elegir Ver > Plug-ins > Detener todo para que se deje de

reproducir el contenido de todos los plug-ins.

Solucionar problemas de plug-ins de Navigator

Si ha seguido los pasos indicados para reproducir contenido de plug-ins en la

ventana de documento pero parte del contenido de plug-ins no se reproduce,

inténtelo con los procedimientos siguientes:

• Asegúrese de que el plug-in asociado está instalado en el ordenador y que el

contenido es compatible con la versión del plug-in que usted tiene.

• Abra el archivo Conﬁguration/Plugins/UnsupportedPlugins.txt en un editor de

texto y compruebe si en la lista aparece el plug-in en cuestión. Este archivo

contiene información sobre aquellos plug-ins que pueden causar problemas en

Dreamweaver y, por tanto, no tienen soporte. Si algún plug-in concreto

ocasiona problemas, es recomendable añadirlo a este archivo.

• Compruebe si el sistema dispone de suﬁciente memoria (y en Macintosh, si hay

suﬁciente memoria asignada a Dreamweaver). Algunos plug-ins necesitan entre

2 y 5 MB adicionales para poder ejecutarse.

Insertar un control ActiveX

Los controles ActiveX (anteriormente denominados controles OLE) son

componentes reutilizables, semejantes a aplicaciones en miniatura, que tienen

capacidad para actuar a modo de plug-ins de navegador. Se ejecutan en Internet

Explorer con Windows, pero no en Macintosh ni en Netscape Navigator. El

objeto ActiveX de Dreamweaver permite proporcionar atributos y parámetros para

un control ActiveX del navegador del visitante.

Dreamweaver utiliza la etiqueta object para marcar el lugar de la página donde

aparece el control ActiveX y para proporcionar parámetros al control ActiveX.

Para insertar contenido de controles ActiveX:

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde

desea insertar el contenido y lleve a cabo una de estas operaciones:

• Haga clic en el botón ActiveX del panel Objetos.

• Elija Insertar > Medio > ActiveX.

• Arrastre y coloque el icono ActiveX.

Un icono marca el lugar de la página de Internet Explorer donde aparecerá el

control ActiveX.

Insertar elementos multimedia 333

Configurar propiedades de ActiveX

Tras insertar un objeto ActiveX, utilice el inspector de propiedades para conﬁgurar

los atributos de la etiqueta object y los parámetros del control ActiveX. Haga clic

en Parámetros, en el inspector de propiedades, para introducir nombres y valores

para las propiedades que no aparecen en el inspector de propiedades. No hay

ningún formato estándar universalmente aceptado para parámetros de controles

ActiveX. Para averiguar los parámetros que debe utilizar, consulte la

documentación del control ActiveX que está utilizando.

El inspector de propiedades muestra inicialmente las propiedades utilizadas con

mayor frecuencia. Haga clic en la ﬂecha de ampliación, situada en la esquina

inferior derecha, para ver todas las propiedades.

Nombre especiﬁca un nombre para identiﬁcar el objeto ActiveX en las secuencias

de comandos. Introduzca un nombre en el campo sin título que aparece a la

izquierda del inspector de propiedades.

An y Al especiﬁcan el ancho y el alto del objeto en píxeles. También se pueden

emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm

(milímetros), cm (centímetros) o % (porcentaje del ancho y el alto del objeto

padre). Las abreviaturas deben seguir al valor sin espacio de separación: por

ejemplo, 3mm.

ID de clase identiﬁca el control ActiveX en el navegador. Introduzca un valor o

elija uno en el menú emergente. Cuando se ha cargado la página, el navegador usa

el ID de clase para localizar el control ActiveX que necesita el objeto ActiveX

asociado a la página. Si el navegador no localiza el control ActiveX especiﬁcado,

intentará descargarlo de la ubicación indicada en Base.

Incrustar hace que Dreamweaver añada una etiqueta embed en la etiqueta object

del control ActiveX. Si el control ActiveX tiene un plug-in de Netscape Navigator

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

Navigator equivalentes.

Alinear determina cómo se alineará el objeto en la página. Para obtener una

descripción de cada opción, consulte “Alinear elementos” en la página 284.

Parámetros abre un cuadro de diálogo para introducir parámetros adicionales que

se transferirán al objeto ActiveX. Consulte “Utilizar parámetros” en la página 335.

Muchos controles ActiveX responden a parámetros especiales.

Orig deﬁne el archivo de datos que se usará para un plug-in de Netscape Navigator

si la opción Incrustar está activada. Si no se introduce un valor, Dreamweaver

intentará determinar el valor a partir de las propiedades de ActiveX previamente

introducidas.

Espacio V y Espacio H especiﬁcan el número de píxeles de espacio en blanco que

habrá por encima, por debajo y a ambos lados del objeto.

Capítulo 13334

Base especiﬁca el URL que contiene el control ActiveX. Internet Explorer

descarga el control ActiveX de esta ubicación si no se ha instalado en el sistema del

usuario. Si no especiﬁca un parámetro Base y el visitante no tiene instalado el

control ActiveX pertinente, el navegador no podrá mostrar el objeto ActiveX.

Imagen alt especiﬁca una imagen que debe mostrarse si el navegador no admite la

etiqueta object. Esta opción sólo está disponible cuando la opción Incrustar no

está seleccionada.

ID deﬁne el parámetro opcional ID ActiveX. El uso más frecuente de este

parámetro es la transmisión de información entre controles ActiveX.

Datos especiﬁca el archivo de datos correspondiente al control ActiveX que debe

cargarse. Muchos controles ActiveX, como Shockwave y RealPlayer, no usan este

parámetro.

Bordes especiﬁca el ancho del borde alrededor del objeto.

Insertar un applet de Java

Java es un lenguaje de programación que permite el desarrollo de aplicaciones

pequeñas (applets) que pueden incrustarse en páginas Web.

Tras crear un applet de Java, podrá insertarlo en un documento HTML mediante

Dreamweaver. Dreamweaver utiliza la etiqueta applet para marcar la referencia al

archivo de applet.

Para insertar un applet de Java:

1 En la ventana de documento, sitúe el punto de inserción en el lugar donde

desea insertar el applet.

2 Haga clic en el botón Applet del panel Objetos.

3 En el cuadro de diálogo que aparece, seleccione un archivo que contenga un

applet de Java.

Configurar propiedades de applets de Java

Después de insertar un applet de Java, utilice el inspector de propiedades para

establecer los parámetros. Para ver las siguientes propiedades en el inspector de

propiedades, seleccione un applet de Java.

El inspector de propiedades muestra inicialmente las propiedades utilizadas con

mayor frecuencia. Haga clic en la ﬂecha de ampliación, situada en la esquina

inferior derecha, para ver todas las propiedades.

Nombre especiﬁca un nombre para identiﬁcar el applet en las secuencias de

comandos. Introduzca un nombre en el campo sin título que aparece a la izquierda

del inspector de propiedades.

Insertar elementos multimedia 335

An y Al especiﬁcan el ancho y el alto del applet en píxeles. También se pueden

emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm

(milímetros), cm (centímetros) o % (porcentaje del ancho o el alto del objeto

padre). Las abreviaturas deben seguir al valor sin espacio de separación: por

ejemplo, 3mm.

Código especiﬁca el archivo que contiene el código Java del applet. Haga clic en el

icono de carpeta para localizar un archivo o escriba un nombre de archivo.

Base identiﬁca la carpeta que contiene el applet seleccionado. Al elegir un applet,

este campo se rellena automáticamente.

Alinear determina cómo se alineará el objeto en la página. Para obtener una

descripción de cada opción, consulte “Alinear elementos” en la página 284.

Alt especiﬁca el contenido alternativo (normalmente, una imagen) que se mostrará

si el navegador 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 inicial y ﬁnal.

Nota: Para especificar un contenido alternativo que puedan mostrar tanto Netscape

Navigator (con Java desactivado) como Lynx (un navegador basado en texto), seleccione

una imagen y luego añada manualmente un atributo

alt a la etiqueta img en el inspector de

código.

Espacio V

y Espacio H especiﬁcan el número de píxeles de espacio en blanco que

habrá por encima, por debajo y a ambos lados del applet.

Parámetros abre un cuadro de diálogo para introducir parámetros adicionales que

se transferirán al applet. Muchos applets responden a parámetros especiales.

Utilizar parámetros

Use el cuadro de diálogo Parámetros si desea introducir valores para parámetros

especiales deﬁnidos para películas Shockwave y Flash, controles ActiveX, plug-ins

de Netscape Navigator y applets de Java. Los parámetros se utilizan con las

etiquetas object, embed y applet . Los parámetros establecen atributos especíﬁcos

del tipo de objeto que se está insertando. Por ejemplo, un objeto de película Flash

puede tener un parámetro de calidad <param name=”quality” value=”best”> para la

etiqueta del objeto. El cuadro de diálogo Parámetro está disponible en el inspector

de propiedades. Consulte la documentación correspondiente al objeto que está

usando para obtener información sobre los parámetros necesarios.

Nota: No existe un estándar universalmente aceptado para identificar los archivos de

datos de los controles ActiveX. Consulte la documentación del control ActiveX que esté

usando para averiguar qué parámetro debe emplear.

Capítulo 13336

Para abrir el cuadro de diálogo Parámetros:

1 Seleccione un objeto que acepte parámetros (como una película Shockwave, un

control ActiveX, un plug-in de Navigator o un applet de Java) en la ventana de

documento.

2 Abra el cuadro de diálogo mediante uno de estos métodos:

• Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) en el objeto y elija Parámetros en el menú contextual.

• Abre el inspector de propiedades si aún no está abierto y haga clic en el botón

Parámetros que se encuentra en la mitad superior del inspector de propiedades.

Compruebe que el inspector de propiedades está ampliado.

Para introducir el valor de un parámetro en el cuadro de diálogo Parámetros:

1 Haga clic en el botón más (+).

2 Introduzca el nombre del parámetro en la columna Parámetro.

3 Introduzca el valor del parámetro en la columna Valor.

Para borrar parámetros:

Seleccione un parámetro y presione el botón menos (-).

Para reordenar parámetros:

Seleccione un parámetro y utilice los botones de ﬂecha arriba y abajo.

Utilizar comportamientos para controlar

elementos multimedia

Puede añadir comportamientos a su página para que inicien y detengan diversos

objetos multimedia.

Controlar Shockwave o Flash permite reproducir, detener, rebobinar o ir a un

marco de una película Shockwave o Flash. Consulte “Controlar Shockwave o

Flash” en la página 474.

Reproducir sonido permite reproducir un sonido. Por ejemplo, puede reproducir

un efecto sonoro cuando el usuario mueva el puntero del ratón sobre un vínculo.

Consulte “Reproducir sonido” en la página 483.

Comprobar plug-in permite comprobar si los visitantes del sitio tienen instalado el

plug-in requerido y, en función del resultado, encaminarlos a distintos URL. El

comportamiento Comprobar plug-in sólo se aplica a los plug-ins de Netscape, ya

que no comprueba los controles ActiveX. Consulte “Comprobar plug-in” en la

página 472.

337

CAPÍTULO 14

.............................................................................................................

Editar HTML en Dreamweaver

Si bien Macromedia Dreamweaver permite crear y editar visualmente páginas

Web sin necesidad de preocuparse por el código HTML, en algunas ocasiones es

necesario acceder al código subyacente. La edición de HTML puede proporcionar

un mayor control para modiﬁcar y solucionar los problemas que surjan en la

página Web.

Por ejemplo, supongamos que selecciona texto en el documento y aplica una

nueva fuente, pero ésta sólo afecta a media frase. Si examina el código HTML en

la vista de Código de Dreamweaver (o en el inspector de código), descubrirá que la

etiqueta </font> de cierre se encuentra en la mitad de la frase. Lo único que tendrá

que hacer para solucionar el problema es cambiar </font> al ﬁnal de la frase.

Si está interesado en aprender HTML, el uso de las funciones de edición visual de

Dreamweaver junto con su vista de Código (o el inspector de código) constituye

un método excelente para comprender el funcionamiento de HTML. Puede

comparar el código HTML con el diseño visual para comprobar la

correspondencia entre ambos.

Dreamweaver proporciona acceso al código HTML a través de la vista de Código,

el inspector de código y el Quick Tag Editor. Si desea obtener más información

sobre el código HTML y su uso, utilice el panel Referencia de Dreamweaver.

Dreamweaver también ofrece la posibilidad de abrir archivos HTML escritos en

otros programas sin preocuparse por dañar el código. Utilice Roundtrip HTML

para evitar que cambie el contenido y la estructura HTML cuando alterne entre

Dreamweaver y un editor externo de HTML. Asimismo, puede utilizar

Dreamweaver para depurar los archivos HTML que contienen código ilegible o

desordenado.

Capítulo 14338

Aspectos básicos de las etiquetas HTML

Conviene tener unos conocimientos básicos del funcionamiento del código

HTML para utilizar Dreamweaver. Puede ver fácilmente el código HTML y el

diseño visual al mismo tiempo, lo que le brinda la oportunidad de ver cómo

funciona el código HTML. El conocimiento y la posibilidad de modiﬁcar el

código puede ayudarle a solucionar los problemas que surjan en sus páginas Web.

Si no conoce el código HTML, las explicaciones siguientes le proporcionarán una

breve introducción. Si ya lo conoce, pase a la siguiente sección.

HTML es un lenguaje de formato de texto, lo que signiﬁca que los documentos

HTML son documentos de texto sencillo que tienen etiquetas de formato

especíﬁcas que indican al navegador Web cómo debe mostrar el texto.

Por ejemplo, la etiqueta i controla el texto en cursiva. Al colocar la etiqueta <i> en

el código HTML, está indicando al navegador que el texto que sigue está en

cursiva. Si coloca </i> en el código HTML, está indicando al navegador que el

texto vuelve al estilo predeterminado. La etiqueta con una barra diagonal (/) se

denomina etiqueta de cierre.

Los navegadores Web interpretan estas etiquetas en el documento HTML y

muestran el texto con el formato correspondiente. Algunas etiquetas se usan con

atributos. Por ejemplo, puede especiﬁcar la alineación de una imagen dentro de la

etiqueta de la imagen: <IMG SRC="image.gif" align="left">. align es un atributo de

la etiqueta de imagen.

Estructura de un documento

Todos los documentos HTML (páginas Web) deben contener determinadas

etiquetas estándar: las etiquetas head y body. La sección del encabezado contiene el

título de la página Web (y las secuencia de comandos) y la sección del cuerpo

contiene el texto que aparecerá en la página Web cuando aparezca en el navegador.

Ésta es la estructura de un documento de muestra:

<html>

<head>

<title>Title goes here</title>

</head>

<body>

<p>

<font size=+2>Welcome to my page</font>

</p>

<p>

The p is a paragraph tag, which tells the browser that this is all one

paragraph.

</p>

</center>

</body>

</html>

Editar HTML en Dreamweaver 339

Las etiquetas necesarias para todos los documentos HTML son html, head y body.

Etiquetas Head

La sección del encabezado (situada entre de etiquetas head) sólo contiene el título

de la página (situado entre etiquetas title ) y secuencias de comandos de

programación, como código JavaScript que implementa una imagen de

sustitución en la página.

El texto introducido entre <title> y </title> aparecerá en la barra superior de

título de la ventana del navegador. No aparecerá en la página.

Por ejemplo, el código HTML siguiente genera la página que se muestra a

continuación:

<html>

<head>

<title>Purcy the cat</title>

</head>

Capítulo 14340

Etiquetas del cuerpo del documento

El cuerpo del documento presenta el contenido de la página. Todo el texto, las

imágenes, las tablas y demás contenidos deberán situarse entre las etiquetas <body>

y </body>.

<html>

<head>

<title>Purcy the cat</title>

</head>

<body>

<h2>

Welcome to my home page.

</h2>

<p>

I am a two-year-old part Siamese cat who lives in

San Francisco with my two owners.

</p>

<br>

<br>

<p>

I like to eat all kinds of food, especially cheese.

</p>

</center>

</body>

</html>

Todas las etiquetas de la sección del cuerpo del ejemplo se pueden utilizar para

aplicar formato al contenido.

Editar HTML en Dreamweaver 341

Las etiquetas de encabezado, es decir, las etiquetas de h1 a h6, deﬁnen el texto

como encabezado. Los encabezados suelen mostrarse en la página Web con texto

en negrita o más grande que el texto normal del cuerpo; h1 es el encabezado más

grande y h6, el más pequeño. La etiqueta de apertura debe ﬁgurar siempre delante

del contenido, seguida de la etiqueta de cierre al ﬁnal del contenido, como en este

ejemplo:

<h1>Éste es un encabezado 1</h1>

Las etiquetas de párrafo (p) separan el contenido de texto en párrafos. Dado que

los navegadores Web ajustan líneas y no tienen en cuenta los saltos de línea, deberá

utilizar etiquetas p para evitar que los navegadores coloquen todo el contenido del

texto junto. La etiqueta p añade espacio en blanco adicional entre las líneas. La

etiqueta de apertura debe ﬁgurar siempre delante del contenido de párrafo,

seguida de la etiqueta de cierre al ﬁnal del contenido, como en este ejemplo:

<p>

I am a two-year-old Siamese cat who lives in San Francisco with my two owners.

</p>

<p>

I like to eat all kinds of food, especially cheese.

</p>

Las etiquetas de salto de línea (br) imponen saltos de línea en la página en lugar

de añadir espacio en blanco adicional como la etiqueta de párrafo. Dado que la

etiqueta br inserta un solo salto de línea, no es necesario incluir una etiqueta de

cierre.

Etiquetas de

salto de línea

Espacio creado por

saltos de línea

Capítulo 14342

Las etiquetas de imagen insertan imágenes en la página. Una etiqueta de imagen

sigue el formato

<img src="

nombrearchivoimagen

">. El nombre de archivo de la

imagen deberá ﬁgurar entre comillas. Las etiquetas de imagen también pueden

incluir atributos, como

width, height, border, align y valign. Los atributos width y

height especiﬁcan el tamaño de la imagen para que lo interprete el navegador

Web. Puede establecer el ancho del borde como 0 o más (las imágenes muestran

un borde de forma predeterminada cuando se utilizan como vínculos). Los

atributos align y valign establecen la alineación de la imagen: align (alineación

horizontal) se puede establecer como left, right o center, y valign (alineación

vertical) se puede establecer como top, bottom o middle.

El ejemplo siguiente muestra una etiqueta de imagen completa:

Editar HTML en Dreamweaver 343

Etiquetas de formato de texto

Puede utilizar código HTML para aplicar formato al texto de la página Web. Por

ejemplo, puede especiﬁcar negrita o cursiva y mostrar el texto en una determinada

fuente:

<b>This text will appear bold in the Web page</b>.

<i>This text will appear italic in the Web page</i>.

<font face=”verdana” size=”2”>This text will display with the

Verdana font face and will be larger than the other text.</font>

Insertar comentarios

Un comentario es un texto descriptivo que se inserta en el código HTML para

explicar el código o facilitar otra información. El comentario sólo aparece en la

vista de Código (o en el inspector de código) y no se mostrará en la página Web.

Para insertar un comentario:

1 Sitúe el punto de inserción en el lugar donde desea incluir el comentario, ya sea

en la vista de Código (o el inspector de código) o en la vista de Diseño.

Consulte “Utilizar la vista de Código (o el inspector de código)” en la

página 347.

2 Haga clic en el botón Comentario de la categoría Invisibles del panel Objetos o

elija Insertar > Etiquetas invisibles > Comentario.

La creación de un comentario genera el siguiente código HTML:

<!—Texto del comentario-->

Para ver marcadores de comentario en la ventana de documento, elija Ver >

Ayudas visuales > Elementos invisibles. No olvide seleccionar comentarios en las

preferencias de Elementos invisibles ya que, de lo contrario, no aparecerá el

marcador de comentario. Para obtener más información, consulte “Conﬁgurar

preferencias de Elementos invisibles” en la página 160.

Capítulo 14344

Para añadir un comentario a un documento existente, lleve a cabo una de estas

operaciones:

• Seleccione el marcador Comentarios en la vista de Diseño e introduzca texto en

el inspector de propiedades.

• Busque el comentario en el código (consulte el ejemplo anterior) y añádale

texto directamente.

Utilizar el panel Referencia de

Dreamweaver

El panel Referencia constituye una herramienta de consulta rápida de etiquetas

HTML, objetos JavaScript y estilos CSS y sus atributos. Proporciona información

sobre etiquetas, objetos o estilos especíﬁcos con los que está trabajando en la vista

de Código (o el inspector de código).

Para abrir el panel Referencia:

1 En la vista de Código o Diseño seleccione la etiqueta, el objeto o el estilo sobre

los que desea información.

2 Haga clic en el botón Referencia de la barra de herramientas (Ver > Barra de

herramientas) o elija Ventana > Referencia.

Se abrirá el panel Referencia, mostrando información sobre la etiqueta, el objeto o

el estilo que ha seleccionado. Para ajustar el tamaño del texto en el panel

Referencia, seleccione Fuente grande, Fuente mediana y Fuente pequeña en el

menú de opciones (ﬂecha pequeña situada en la parte superior derecha del panel).

Editar HTML en Dreamweaver 345

El menú emergente Libro muestra el nombre del libro del que procede el material

de referencia: O’Reilly HTML Reference, JavaScript Reference o CSS Reference.

Para mostrar etiquetas, objetos o estilos de otro libro, elíjalos en el menú Libro.

El menú emergente Etiqueta, Objeto o Estilo (según el libro seleccionado)

muestra la etiqueta, el objeto o el estilo seleccionado en la vista de Código (o el

inspector de código). Para ver información sobre otra etiqueta, objeto o estilo,

selecciónelos en el menú.

Junto al menú emergente Etiqueta, Objeto o Estilo hay otro menú que contiene la

lista de atributos de la etiqueta elegida. La selección predeterminada es

Descripción, que muestra una descripción de la etiqueta seleccionada. También

puede seleccionar un atributo del menú para ver más información sobre él. Los

atributos se utilizan para aplicar formato al contenido de la etiqueta. Por ejemplo,

puede utilizar el atributo align para especiﬁcar la alineación de una imagen dentro

de la etiqueta de la imagen: <img src="image.gif" align="left">.

Capítulo 14346

Roundtrip HTML

Roundtrip HTML es una función exclusiva de Dreamweaver que permite pasar

los documentos de un editor de HTML basado en texto a Dreamweaver y a la

inversa sin que se vean prácticamente afectados el contenido y la estructura del

código HTML original del documento. Dreamweaver mantiene y ofrece incluso

algunos códigos HTML que técnicamente no son válidos (como es el caso de las

etiquetas font que limitan múltiples etiquetas p) si dicho código es compatible con

los navegadores. No obstante, el código HTML generado por Dreamweaver

durante la edición gráﬁca siempre es técnicamente válido.

Éstas son las principales características de Roundtrip HTML:

• De forma predeterminada, Dreamweaver reescribe las etiquetas superpuestas,

cierra las etiquetas abiertas que no pueden permanecer abiertas y elimina las

etiquetas de cierre sobrantes al regresar a Dreamweaver desde un editor de

HTML externo o al abrir un documento HTML existente. Si no desea que

Dreamweaver reescriba código HTML, elija Edición > Preferencias y seleccione

Reescritura de código para desactivar todas las funciones de reescritura.

Consulte “Reescritura de código, preferencias” en la página 363. Si desactiva la

reescritura del código, todos aquellos códigos HTML que Dreamweaver habría

reescrito se mostrarán como no válidos.

• Cuando está activada la opción Resaltar HTML no válido, Dreamweaver

resalta en amarillo el código HTML no válido (que no reconoce). Al

seleccionar una etiqueta no válida, Dreamweaver muestra información para

corregir el error en el inspector de propiedades. La opción Resaltar HTML no

válido está activada de forma predeterminada en la vista de Código (o el

inspector de código). Para desactivarla, elija Resaltar HTML no válido en el

menú Opciones de la vista de Código (o el inspector de código). El resaltado de

errores siempre está activado en la vista de Diseño.

Nota: La activación y desactivación del resaltado de HTML no válido sólo está disponible

en la vista de Código (o el inspector de código). La vista de Diseño siempre muestra el

resaltado de errores.

• Dreamweaver no cambia las etiquetas que no reconoce (incluidas las etiquetas

XML), ya que carece de criterios para juzgar cuáles son válidas y cuáles no lo

son. Si hay una etiqueta irreconocible que se superpone con una válida,

Dreamweaver puede marcarla como errónea, pero no reescribe el código. Por

ejemplo, la etiqueta personalizada del ejemplo siguiente se marcaría como

errónea: <MyNewTag><b>text</MyNewTag></b>.

• Dreamweaver no modiﬁca las etiquetas de ColdFusion Markup Language

(CFML) ni las de Microsoft Active Server Pages (ASP), y muestra iconos para

identiﬁcar bloques de código CFML o ASP en la ventana de documento

siempre que esto resulte posible. Consulte “Editar archivos de ColdFusion y

Active Server en Dreamweaver” en la página 369.

Editar HTML en Dreamweaver 347

• Dreamweaver permite iniciar un editor de HTML basado en texto para editar

el documento actual. Dreamweaver está integrado con HomeSite (Windows) y

BBEdit (Macintosh). Consulte “Utilizar editores de HTML externos” en la

página 368.

Utilizar la vista de Código

(o el inspector de código)

Puede ver el código HTML del documento actual de varias formas: puede mostrar

sólo la vista de Código en la ventana de documento; dividir la ventana de

documento de modo que muestre la vista de Código y la vista de Diseño, y abrir el

inspector de código. La vista de Código y el inspector de código funcionan

exactamente de la misma manera. La única diferencia radica en que el inspector de

código se encuentra en una ventana aparte. La división de la ventana de

documento para ver el código facilita la presentación del diseño visual mientras

realiza cambios en el código HTML.

Conforme añada o cambie el contenido en la vista de Diseño, Dreamweaver

mostrará de forma inmediata en el inspector o la vista de Código los cambios

realizados. Por tanto, la vista y el inspector de código constituyen herramientas

muy útiles para aprender a utilizar el código HTML o para recordar la sintaxis y

los valores correctos de etiquetas o atributos concretos. Las secuencias de

comandos y las etiquetas HTML están codiﬁcadas con colores y se pueden ajustar

en las preferencias.

Los cambios o adiciones que realice en el código sólo aparecerán en la vista de

Diseño después de sincronizar las vistas de Código y de Diseño.

Para sincronizar las vistas de Código y de Diseño:

Haga clic en la vista de Diseño después de trabajar en un editor de código o haga

clic en el botón Actualizar vista de diseño de la barra de herramientas. Elija Ver >

Barra de herramientas para mostrar la barra.

Dreamweaver nunca reescribe el código HTML que usted escriba directamente en

un editor de código. Si introduce código no válido y está activada la opción

Resaltar HTML no válido, Dreamweaver resaltará el código no válido en el editor

de código. El resaltado de errores está activado de manera predeterminada en los

editores de código. El resaltado de errores siempre aparece en la vista de Diseño,

incluso cuando está desactivada la opción Resaltar HTML no válido en la vista de

Código.

Capítulo 14348

Abrir la vista de Código (o el inspector de código)

Puede ver el código HTML de varias formas: mostrando el código y el diseño en la

ventana de documento, mostrando sólo el código o abriendo el inspector de código.

Para mostrar las vistas de Código y Diseño:

Elija Ver > Código y diseño o haga clic en el botón Mostrar vistas de código y

diseño en la barra de herramientas.

El código HTML aparecerá en el panel superior y la vista de Diseño aparecerá en

el inferior.

Puede ajustar el tamaño de los paneles arrastrando la barra de separación.

Para ajustar la división de la vista de Código y diseño, lleve a cabo una de estas

operaciones:

• Para mostrar la vista de Diseño en la parte superior, elija Ver > Vista de diseño

arriba. También puede seleccionar Vista de diseño arriba en el menú emergente

Opciones de la barra de herramientas.

• Para ver sólo el código HTML en la ventana de documento, elija Ver > Código

o haga clic en el botón Mostrar vista de código de la barra de herramientas.

• Para ver sólo el diseño visual, elija Ver > Diseño o haga clic en el botón Mostrar

vista de diseño de la barra de herramientas.

Si preﬁere trabajar con el código HTML en una ventana aparte, utilice el

inspector de código.

Editar HTML en Dreamweaver 349

Para abrir el inspector de código, lleve a cabo una de estas operaciones:

• Elija Ventana > Inspector de código.

• Haga clic en el icono Inspector de código de la barra del lanzador (en la esquina

inferior derecha de la ventana de documento).

• Presione F10.

Para alternar entre la ventana de documento y el inspector de código HTML:

Presione Control-Tab (Windows) o Comando-Tab (Macintosh).

Configurar las opciones de la vista de Código (o el inspector

de código)

Puede conﬁgurar ajuste de texto, sangría de código y aplicación de color a la

sintaxis, entre otras opciones, en el menú Opciones de los editores de código.

Para acceder al menú Opciones, deberá estar activa la vista de Código (o el

inspector de código). Haga clic en la vista de Código (o el inspector de código)

para activarla.

Capítulo 14350

Para configurar las opciones de la vista de Código (o el inspector de código):

1 Acceda a las opciones llevando a cabo una de estas operaciones:

• Haga clic en el menú emergente Opciones de la barra de herramientas. Elija Ver

> Barra de herramientas para mostrar la barra.

• Elija Ver > Opciones de vista de Código.

El menú Opciones también está disponible en la parte superior del inspector de

código.

2 Conﬁgure las opciones que desee:

• Ajuste de línea realiza un ajuste del código para que se pueda ver sin necesidad

de desplazamiento horizontal. Esta opción no inserta saltos de línea, pero

facilita la lectura del código.

• Números de líneas añade números de línea a un lado.

• Resaltar HTML no válido activa el resaltado de errores. Cuando está activada la

opción Resaltar HTML no válido, Dreamweaver resalta en amarillo el código

HTML no válido (que no reconoce). Al seleccionar una etiqueta no válida,

Dreamweaver muestra información para corregir el error en el inspector de

propiedades.

• Aplicar colores a sintaxis marca las distintas partes del código con colores de

modo que pueda determinar rápidamente los distintos elementos del código.

Para cambiar los colores, consulte “Colores de código, preferencias” en la

página 360.

• Sangría automática aplica sangría al código automáticamente. Para cambiar el

espaciado de la sangría o las etiquetas que la aplican automáticamente, consulte

“Formato de código, preferencias” en la página 361.

Escribir y editar código

Mientras escribe y edita código en la vista de Código (o en el inspector de código),

puede aplicar sangría a líneas especíﬁcas de código o comprobar que las etiquetas

están equilibradas. La aplicación de sangría a una línea o sección de código

especíﬁca le ayudará a separar ese código del resto, facilitando su localización. Al

comprobar si las etiquetas están equilibradas podrá asegurarse de que todas las

etiquetas de apertura tienen sus correspondientes etiquetas de cierre y a la inversa,

algo especialmente útil cuando se utilizan múltiples niveles de anidación en el

código, por ejemplo, cuando hay varias tablas anidadas en otras tablas.

Editar HTML en Dreamweaver 351

Para aplicar sangría a código seleccionado:

1 Seleccione la línea o líneas de código a las que desea aplicar sangría.

Para que funcione la sangría, deberá seleccionar toda la línea.

2 Elija Edición > Aplicar sangría al código.

Se aplicará sangría al código. Elija Edición > Anular sangría en el código para

eliminar la sangría del código.

Para comprobar si las etiquetas están equilibradas:

1 Sitúe el punto de inserción en el código anidado que desea comprobar.

2 Elija Edición > Seleccionar etiqueta padre.

Se resaltarán las etiquetas de apertura y cierre en el código. Si elige otra vez

Edición > Seleccionar etiqueta padre se resaltarán las etiquetas correspondientes

que limitaban la selección anterior.

Insertar secuencias de comandos

Puede escribir o insertar secuencias de comandos en la vista de Código (o el

inspector de código) o introducir JavaScript y VBScript en la vista de Diseño sin

necesidad de utilizar la vista de Código. También puede abrir archivos de

secuencias de comandos en la vista de Código de Dreamweaver. Dreamweaver no

modiﬁca ni reescribe el archivo. Para obtener más información, consulte “Abrir y

editar archivos no HTML en Dreamweaver” en la página 354.

Para ver marcadores de secuencias de comandos en la ventana de documento, elija

Ver > Ayudas visuales > Elementos invisibles. Consulte también “Conﬁgurar

preferencias de Elementos invisibles” en la página 160.

Para insertar una secuencia de comandos en la vista de Código o de Diseño:

1 Sitúe el punto de inserción en el lugar donde desea introducir la secuencia de

comandos.

2 Haga clic en el botón Secuencia del panel Objetos o elija Insertar > Etiquetas

invisibles > Secuencia.

3 En el cuadro de diálogo que aparece a continuación, elija el lenguaje de la

secuencia de comandos en el menú emergente.

Si utiliza JavaScript y no está seguro de la versión, elija JavaScript en lugar de

JavaScript1.1 o JavaScript1.2.

4 Introduzca el código de secuencia de comandos en el cuadro de texto

Contenido.

Capítulo 14352

Para establecer un vínculo con un archivo de secuencia de comandos externo:

1 Siga los pasos 1–3.

2 Haga clic en Aceptar sin escribir nada en el cuadro de texto Contenido.

3 Seleccione el marcador de secuencia de comandos en la vista de Diseño de la

ventana de documento.

Elija Ver > Ayudas visuales > Elementos invisibles para ver el marcador. No

olvide seleccionar secuencias de comandos en las preferencias de Elementos

invisibles ya que, de lo contrario, no aparecerá el marcador de secuencias de

comandos. Para obtener más información, consulte “Conﬁgurar preferencias de

Elementos invisibles” en la página 160.

4 En el inspector de propiedades, haga clic en el icono de carpeta para acceder y

seleccionar el archivo de secuencia de comandos externo o escriba el nombre de

archivo en el cuadro Origen.

Editar una secuencia de comandos

Puede editar una secuencia de comandos en un editor de código o en la vista de

Diseño.

Para editar la secuencia de comandos en la vista de Código:

Localice la secuencia de comandos en la vista de Código y edítela directamente. Al

seleccionar el marcador de secuencia de comandos en la vista de Diseño se

resaltará la secuencia de comandos en la vista de Código.

Para editar la secuencia de comandos en la vista de Diseño:

1 Seleccione el marcador de secuencia de comandos.

2 En el inspector de propiedades, haga clic en el botón Editar.

Si ha establecido un vínculo con un archivo de secuencia de comandos externo,

dicho archivo se abrirá automáticamente en la vista de Código, donde podrá

editarlo. En caso contrario, se abrirá el cuadro de diálogo Propiedades de secuencia

de comandos y podrá editar la secuencia de comandos en el cuadro de texto

Secuencia de comandos.

Editar HTML en Dreamweaver 353

Nota: Si hay código entre las etiquetas script, se abrirá el cuadro de diálogo Propiedades

de secuencia de comandos, incluso aunque haya también un vínculo con un archivo de

secuencia de comandos externo.

Cuando se selecciona un marcador de secuencia de comandos aparecen las

propiedades siguientes en el cuadro de diálogo Propiedades de secuencia de

comandos (y el inspector de propiedades):

• Lenguaje especiﬁca JavaScript o VBScript como lenguaje de la secuencia de

comandos.

• Tipo especiﬁca el tipo de secuencia de comandos: de la parte del cliente o de la

parte del servidor.

• Origen especiﬁca un archivo de secuencia de comandos vinculado de forma

externa. Haga clic en el icono de carpeta para localizar el archivo de origen o

escriba la ruta correspondiente.

• Secuencia de comandos permite editar o introducir la secuencia de comandos.

Para comprobar si las llaves están equilibradas:

1 Sitúe el punto de inserción en el código anidado que desea comprobar.

2 Elija Edición > Equilibrar llaves.

Se resaltarán las etiquetas de apertura y cierre en el código. Si elige otra vez

Edición > Equilibrar llaves se resaltarán las etiquetas correspondientes que

limitaban la selección anterior.

Capítulo 14354

Ver funciones de secuencia de comandos

Puede ver todas las funciones JavaScript o VB Script del código desde el menú

emergente Navegación por el código de la barra de herramientas (Ver > Barra de

herramientas).

Para ver las funciones de secuencia de comandos:

Haga clic en el botón Navegación por el código de la barra de herramientas.

Si el código contiene funciones JavaScript o VB Script, aparecerán en el menú.

Para ver las funciones en orden alfabético, mantenga presionada la tecla Control

(Windows) u Opción (Macintosh) mientras hace clic en el botón Navegación por

el código.

Para pasar a una función del código:

Seleccione una función en el menú emergente Navegación por el código. La

función aparecerá resaltada en la vista de Código (o en el inspector de código).

Abrir y editar archivos no HTML en

Dreamweaver

Cuando se abre un archivo no HTML (por ejemplo, un archivo .js) en

Dreamweaver, el programa no lo modiﬁca. Estos archivos se abren en la vista de

Código (o en el inspector de código) con la vista de Diseño desactivada. Puede

editar el archivo y guardarlo como archivo HTML o con otro formato.

Puede conﬁgurar Dreamweaver para que abra automáticamente archivos no

HTML con determinadas extensiones. Por ejemplo, puede conﬁgurar las

preferencias predeterminadas de modo que los archivos .js se abran

automáticamente en la vista de Código (o en el inspector de código).

Editar HTML en Dreamweaver 355

Para configurar las preferencias predeterminadas para archivos no HTML:

1 Elija Edición > Preferencias y seleccione Tipos de archivo/editores.

2 En el campo Abrir en la vista de Código, escriba las extensiones de los archivos

que desea abrir automáticamente en la vista de Código. Deje un espacio entre

cada tipo de archivo.

Las extensiones de archivo predeterminadas que aparecen son: .js, .txt y .asa.

Puede añadir tantas como quiera.

Editar una etiqueta HTML en la vista de

Diseño

Utilice el Quick Tag Editor para inspeccionar y editar rápidamente el código

HTML de una etiqueta en la ventana de documento sin necesidad de cambiar a la

vista de Código y volver a la ventana de documento. La forma más fácil de abrir el

Quick Tag editor es presionando Control+T (Windows) o Comando+T

(Macintosh).

El Quick Tag Editor dispone de tres modos de funcionamiento:

• Insertar HTML, que se utiliza para insertar código HTML nuevo.

• Editar etiqueta, que se utiliza para editar una etiqueta existente.

• Ajustar etiqueta, que se utiliza para ajustar una nueva etiqueta alrededor de la

selección actual.

La selección actual de la vista de Diseño determina el modo en el que se abre el

Quick Tag Editor. El funcionamiento básico del Quick Tag Editor es el mismo en

los tres modos: se abre el editor, se introducen o se editan las etiquetas o atributos

y se cierra el editor.

Si utiliza un código HTML no válido en el Quick Tag Editor, Dreamweaver

intentará corregirlo insertando comillas y paréntesis angulares de cierre en los

lugares que sean precisos.

Para llevar a cabo una edición en mayor profundidad del código HTML, utilice la

vista de Código (o el inspector de código).

Para abrir el Quick Tag Editor en el modo Insertar HTML:

1 Haga clic en la vista de Diseño para situar el punto de inserción en el lugar

donde desea insertar el código.

2 Presione Control+T (Windows) o Comando+T (Macintosh), o bien haga clic

en el botón Quick Tag Editor del inspector de propiedades.

Se abrirá el Quick Tag Editor.

Capítulo 14356

Introduzca la etiqueta HTML y, a continuación, presione Entrar.

La etiqueta se insertará en el código. Presione Esc para salir sin realizar ningún

cambio.

Para abrir el Quick Tag Editor en el modo Editar etiqueta:

1 Seleccione el texto o el objeto que está editando en la vista de Diseño.

También puede seleccionar la etiqueta que desea editar en el selector de

etiquetas situado en la parte inferior de la ventana de documento.

2 Presione Control+T (Windows) o Comando+T (Macintosh), o bien haga clic

en el botón Quick Tag Editor del inspector de propiedades.

Se abrirá el Quick Tag Editor.

3 Introduzca nuevos atributos, edite atributos existentes o edite el nombre de la

etiqueta y, a continuación, presione Entrar.

La etiqueta editada se insertará en el código. Presione Esc para salir sin realizar

ningún cambio.

Para abrir el Quick Tag Editor en el modo Ajustar etiqueta:

1 Seleccione texto sin formato o un objeto.

Si ha seleccionado texto o un objeto que incluye una etiqueta HTML de

apertura o cierre, el Quick Tag Editor se abrirá en modo Editar etiqueta.

2 Presione Control+T (Windows) o Comando+T (Macintosh), o bien haga clic

en el botón Quick Tag Editor del inspector de propiedades.

Se abrirá el Quick Tag Editor.

Editar HTML en Dreamweaver 357

Introduzca una etiqueta de apertura, como <font="verdana">, y presione Entrar.

La etiqueta se insertará al principio de la selección actual y se insertará la

correspondiente etiqueta de cierre al ﬁnal. Presione Esc para salir sin realizar

ningún cambio.

Para aplicar los cambios inmediatamente:

Después de editar una etiqueta, presione Tab o Mayús+Tab. El cambio realizado se

aplicará inmediatamente en lugar de esperar a que salga del Quick Tag Editor.

Si desea evitar este comportamiento, desactive la opción Aplicar cambios

inmediatamente al editar en las preferencias del Quick Tag Editor. Consulte

“Conﬁgurar preferencias del Quick Tag Editor” en la página 359.

Nota: Cuando está desactivada la opción Aplicar cambios inmediatamente al editar, los

diversos cambios que aplique de una vez aparecerán como un solo paso en el panel

Historial y podrá deshacerlos con una única operación Deshacer.

Para alternar entre los distintos modos del Quick Tag Editor:

Con el Quick Tag Editor activo, presione Control+T (Windows) o Comando+T

(Macintosh).

El Quick Tag Editor cambiará de modo cada vez que utilice el método abreviado

de teclado, alternando entre el modo Insertar HTML, Editar etiqueta y Ajustar

etiqueta.

Para mover el Quick Tag Editor en la pantalla:

Arrastre el manejador del editor (donde aparece el nombre del modo).

Capítulo 14358

Utilizar el menú de sugerencias

Mientras se encuentra en el Quick Tag Editor, puede acceder a menú de

sugerencias sobre atributos que muestra todos los atributos válidos de la etiqueta

que está editando o insertando. Si Dreamweaver no reconoce la etiqueta que está

editando, el menú de sugerencias contendrá todos los atributos que Dreamweaver

reconoce para todas las etiquetas. El menú de sugerencias no aparece si desactiva la

opción Activar sugerencias de etiquetas en las preferencias del Quick Tag Editor.

Para ver una lista de atributos válidos para una etiqueta que está editando:

Realice una pausa durante unos segundos mientras edita un nombre de atributo.

Aparecerá un menú de sugerencias con todos los atributos válidos para la etiqueta

que está editando. Controle el menú de sugerencias de la siguiente forma:

• Al comenzar a escribir un nombre de atributo, el menú de sugerencias se

desplaza para resaltar el primer nombre de etiqueta que comience por las letras

introducidas.

• Para subir o bajar el resaltado por el menú, utilice las teclas de ﬂecha arriba y

abajo o la barra de desplazamiento.

• Para elegir el nombre del atributo resaltado, presione Entrar (Windows) o

Retorno (Macintosh). También puede hacer doble clic en un nombre de

atributo del menú.

• Para prescindir del menú de sugerencias sin seleccionar ninguna entrada,

presione Esc o simplemente continúe escribiendo.

Al hacer una pausa mientras introduce o edita un nombre de etiqueta,

aparecerá un menú de sugerencias similar en el que ﬁguran los nombres de las

etiquetas en lugar de los nombres de los atributos.

Las etiquetas y los atributos que muestra el menú de sugerencias proceden del

archivo TagAttributeList.txt, situado en la carpeta Dreamweaver/Conﬁguration. Si

tiene experiencia en el uso de Dreamweaver y desea añadir o quitar etiquetas del

menú de sugerencias, puede editar este archivo. Consulte “Abrir y editar archivos

no HTML en Dreamweaver” en la página 354.

Para editar valores de atributos existentes en el modo Editar etiqueta:

Presione Tab para pasar de un elemento al siguiente hasta seleccionar el atributo (o

la etiqueta) que desea editar. Presione Mayús+Tab para retroceder al nombre de

atributo, valor de atributo o nombre de etiqueta anterior.

Editar HTML en Dreamweaver 359

Para añadir una nuevo atributo a una etiqueta:

1 Utilice Tab, las teclas de ﬂecha y la barra espaciadora para mover el punto de

inserción al lugar donde desea añadir el atributo.

2 Escriba un nombre de atributo válido para la etiqueta.

Si realiza una pausa en la escritura, aparecerá el menú de sugerencias.

Eliminar una etiqueta

Puede eliminar una etiqueta del documento, dejando su contenido (si lo tiene).

Para eliminar una etiqueta:

1 Lleve a cabo una de estas operaciones:

• Seleccione la etiqueta en el selector de etiquetas, situado en la parte inferior

izquierda de la ventana de documento.

• Seleccione cualquier elemento en la ventana de documento o haga clic para

situar el punto de inserción en la ventana.

2 Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control

(Macintosh) en la vista de Diseño y elija Quitar etiqueta en el menú contextual.

Configurar preferencias del Quick Tag Editor

Las preferencias del Quick Tag Editor permiten controlar si las ediciones realizadas

en dicho editor deben actualizarse automáticamente en la ventana de documento.

También puede ajustar los controles para el menú de sugerencias. Para mostrar

estas preferencias, elija Edición > Preferencias y seleccione Quick Tag Editor.

Aplicar cambios inmediatamente al editar controla si los cambios realizados con el

Quick Tag Editor deben actualizarse automáticamente en el documento al pasar

de un atributo a otro en el modo Editar etiqueta. Si desactiva esta opción, deberá

presionar Entrar para aplicar los cambios al documento. Esta opción no surte

efecto en los modos Insertar HTML y Ajustar etiqueta. En dichos modos, deberá

presionar siempre Entrar para aplicar los cambios al documento.

Activar sugerencias de etiquetas controla si debe mostrarse el menú de

sugerencias al escribir en el Quick Tag Editor. También puede ajustar la duración

del período que debe transcurrir antes de que aparezca el menú para el atributo o

la etiqueta actual.

Capítulo 14360

Configurar preferencias de formato de

código

Puede conﬁgurar las siguientes preferencias para aplicar formato al código en

Dreamweaver.

• Las preferencias de Colores de código controlan la codiﬁcación por colores de

las etiquetas HTML (y del texto situado entre ellas) y de las secuencias de

comandos en la vista o el inspector de código. Consulte “Colores de código,

preferencias” en la página 360.

• Las preferencias de Formato de código determinan opciones comunes de

formato de código, como la longitud de las líneas y la sangría. Consulte

“Formato de código, preferencias” en la página 361. Estas preferencias

proporcionan una interfaz de usuario para la modiﬁcación del archivo

SourceFormat.txt.

• Las preferencias de Reescritura de código determinan los cambios que

Dreamweaver debe realizar en el código cuando se abre un documento HTML

o de secuencia de comandos. Consulte “Reescritura de código, preferencias” en

la página 363.

• Las preferencias de Fuentes/codiﬁcación permiten especiﬁcar la fuente con la

que aparecerá el código en la vista de Código (o el inspector de código).

Consulte “Deﬁnir preferencias de fuentes/codiﬁcación” en la página 90.

Por último, el archivo SourceFormat.txt (situado en la carpeta Dreamweaver/

Conﬁguration) proporciona especiﬁcaciones precisas para la aplicación de formato

al código. La edición de este archivo con un editor de texto le conﬁere el máximo

control posible sobre cómo escribe código Dreamweaver. En este archivo podrá

cambiar determinadas opciones de algunas etiquetas que no pueden modiﬁcarse

utilizando las preferencias de Formato de código. Sin embargo, no edite este

archivo a menos que sea un usuario o desarrollador avanzado de Dreamweaver, ya

que puede causar graves errores en el programa. Consulte “Cambiar el formato

HTML predeterminado” en la página 558.

Colores de código, preferencias

Utilice las preferencias de Colores de código para controlar los colores de fondo,

texto, etiqueta y palabra clave reservada en la vista de Código (o el inspector de

código). Para trabajar con estas preferencias, elija Edición > Preferencias y

seleccione Colores de código.

Fondo especiﬁca el color de fondo de la vista de Código (o el inspector de código).

Este color sólo aparece al hacer clic o escribir en la vista o el inspector de código.

Texto especiﬁca el color del texto que aparece entre las etiquetas. Por ejemplo, en

el código

<b>un texto</b>, las palabras “un texto” aparecen en el color de texto

especiﬁcado, pero las etiquetas no. Para anular el color de texto de una etiqueta

concreta, seleccione la opción Incluir contenido.

Editar HTML en Dreamweaver 361

Comentarios especiﬁca el color de las etiquetas de comentarios () y de su

contenido.

Predet. etiqueta especiﬁca el color de todas las etiquetas excepto las de comentario.

Para anular este color, establezca la opción Especíﬁco etiqueta.

Palabras clave reservadas especiﬁca el color de todas las palabras clave reservadas.

Para anular este color, establezca la opción Especíﬁco etiqueta.

Otras palabras clave especiﬁca el color de todas las demás palabras clave. Para

anular este color, establezca la opción Especíﬁco etiqueta.

Cadenas especiﬁca el color de todas las cadenas del código. Para anular este color,

establezca la opción Especíﬁco etiqueta.

Específico etiqueta permite anular los otros valores de color mediante la

especiﬁcación de colores para etiquetas concretas.

Para definir un color para una etiqueta específica:

1 Seleccione una etiqueta en el cuadro Especíﬁco etiqueta.

Haga clic mientras presiona la tecla Mayús para seleccionar etiquetas

adyacentes. Para seleccionar etiquetas no adyacentes, haga clic mientras

presiona la tecla Control (Windows) o la tecla Comando (Macintosh).

2 Haga clic en el botón de opción situado junto a la muestra de color en la parte

inferior del panel y utilice uno de los siguientes métodos para elegir un nuevo

valor de color:

• Haga clic en la muestra de color y seleccione un nuevo color de la paleta de

colores válidos para los navegadores o del selector de colores del sistema.

• En el campo de texto situado junto a la muestra de color, introduzca un valor

hexadecimal.

3 Para asignar un color al texto situado entre las etiquetas de apertura y cierre,

seleccione Aplicar color a contenido de etiqueta.

Formato de código, preferencias

Utilice las siguientes preferencias de Formato de código para controlar la

aplicación de formatos de código tales como sangría, longitud de línea y uso

mayúsculas y minúsculas en nombres de etiquetas y atributos. Para obtener

información sobre controles adicionales de formato de código, consulte “Cambiar

el formato HTML predeterminado” en la página 558.

Capítulo 14362

Observe que todas las preferencias salvo Anular may/min de sólo afectan a

documentos nuevos y a adiciones nuevas a los documentos existentes. Es decir,

cuando abra un documento HTML creado previamente, estas opciones de

formato no le afectarán. Para cambiar el formato de documentos HTML

existentes, utilice el comando Aplicar formato de origen. Consulte “Aplicar

formato al código HTML en documentos existentes” en la página 365.

Sangría activa la sangría de todas las etiquetas marcadas con indent en el archivo

SourceFormat.txt. Consulte “Cambiar el formato HTML predeterminado” en la

página 558.

Usar especiﬁca si la sangría debe realizarse utilizando espacios o tabuladores.

Filas y columnas de tabla aplica automáticamente una sangría a las etiquetas tr y

td para facilitar la lectura del código de tablas. Para que funcione esta opción, debe

estar seleccionada la opción Sangría.

Marcos y conjuntos de marcos aplica automáticamente una sangría a las etiquetas

frame y a las etiquetas anidadas frameset para facilitar la lectura de los archivos de

conjuntos de marcos. Para que funcione esta opción, la opción Sangría debe estar

seleccionada.

Tamaño de sangría determina el tamaño de las sangrías. El tamaño se mide en

espacios, si Usar se ha conﬁgurado con espacios, o en tabuladores, si Usar se ha

conﬁgurado con tabuladores.

Tamaño de tabulación determina el tamaño de los tabuladores (medido en

espacios de caracteres).

Ajuste automático añade retornos de carro “duros” cuando una línea llega al ﬁnal

del ancho de columna especiﬁcado. Tenga en cuenta que Dreamweaver inserta

retornos de carro duros en lugares en los que no se modiﬁca la apariencia del

documento que se muestra en los navegadores, por lo que es posible que algunas

líneas continúen siendo más largas de lo especiﬁcado en la opción Ajuste

automático. La opción Ajuste de la vista de Código (o el inspector de código), por

su parte, añade un retorno de carro “blando” para aquellas líneas que superan el

ancho de la ventana.

Saltos de línea especiﬁca el tipo de servidor remoto (Windows, Macintosh o

UNIX) en el que está contenido el sitio remoto. La elección del tipo adecuado de

caracteres para salto de línea garantiza que el código HTML aparezca de forma

correcta en el servidor remoto. Tenga en cuenta que, para FTP, este parámetro sólo

afecta al modo de transferencia binaria; el modo de transferencia ASCII de

Dreamweaver prescinde de este parámetro. Si descarga archivos mediante el modo

ASCII, Dreamweaver establecerá los saltos de línea basándose en el sistema

operativo de su ordenador; si carga archivos utilizando el modo ASCII, todos los

saltos de línea se conﬁgurarán como CR LF. Esta opción también resulta útil si

trabaja con un editor de texto externo que sólo reconoce determinados tipos de

saltos de línea. Por ejemplo, utilice CR LF (Windows) si su editor externo es el

Bloc de notas y CR (Macintosh) si su editor externo es SimpleText.

Editar HTML en Dreamweaver 363

May/min etiquetas y May/min atributos establecen si los nombres de etiquetas y

atributos aparecen en mayúsculas o en minúsculas. Estas opciones afectan a las

etiquetas y los atributos que inserte o edite en la ventana de documento, pero no

los que introduzca directamente en la vista de Código (o el inspector de código) ni

a las etiquetas y los atributos de un documento en el momento de abrirlo (a no ser

que también seleccione una o las dos opciones de Anular may/min de).

Anular may/min de: Etiquetas y Atributos especiﬁcan si deben aplicarse las

opciones de mayúsculas/minúsculas en todo momento, incluso cuando se abre un

documento HTML existente. Cuando selecciona una de estas opciones, todas las

etiquetas o atributos de los documentos abiertos se convierten inmediatamente a

mayúsculas o minúsculas, según el valor especiﬁcado, al igual que todas las

etiquetas o atributos de los documentos que abra a partir de ese momento (y hasta

que anule de nuevo la selección de esta opción). Las etiquetas o atributos que

introduzca en la vista de Código (o el inspector de código) y en el Quick Tag

Editor también se convertirán a mayúsculas o minúsculas, al igual que las

etiquetas o los atributos que inserte mediante el panel Objetos. Por ejemplo, si

desea que los nombres de etiquetas se conviertan siempre a minúsculas,

especiﬁque minúsculas como valor de May/min etiquetas y seleccione la opción

Anular may/min de: Etiquetas. Posteriormente, cuando Dreamweaver abra un

documento con nombres de etiquetas en mayúsculas, los convertirá a minúsculas.

Centrado especiﬁca si los elementos deben centrarse utilizando div align="center"

o center. Ambas etiquetas forman parte de la especiﬁcación transitoria de HTML

4.0, aunque center es compatible con un mayor número de navegadores.

Reescritura de código, preferencias

Las preferencias de Reescritura de código determinan lo que Dreamweaver debe

hacer al abrir documentos de secuencias de comandos o HTML. Estas

preferencias no tienen ningún efecto cuando se editan secuencias de comandos o

HTML en la vista o el inspector de código. Si desactiva las opciones de reescritura,

Dreamweaver mostrará elementos de formato no válidos en la ventana de

documento para el código HTML que habría reescrito. Si importa un documento

HTML desde Microsoft Word, podrá utilizar el comando Limpiar HTML de

Word para eliminar todos los códigos HTML que no sean necesarios. Para obtener

más información, consulte “Limpiar HTML de Microsoft Word” en la

página 366.

Etiquetas no cerradas y mal anidadas reescribe las etiquetas superpuestas. Por

ejemplo, <b><i>text</b></i> se reescribe como <b><i>text</i></b>. Esta opción

también inserta comillas y paréntesis de cierre en el caso de que no estén presentes.

Eliminar etiquetas de cierre adicionales elimina las etiquetas de cierre para las que

no existe la correspondiente etiqueta de apertura.

Capítulo 14364

Advertir al solucionar/eliminar etiquetas muestra un resumen del código HTML

técnicamente no válido que Dreamweaver ha intentado corregir. En dicho

resumen se indica la ubicación del problema (a través de números de línea y de

columna) para que pueda localizar la corrección y asegurarse de que el resultado es

el deseado.

Nunca reescribir HMTL: En archivos con extensiones impide que Dreamweaver

reescriba el código HTML de los archivos que tengan las extensiones de archivo

indicadas. Esta opción resulta especialmente útil para archivos que contengan otro

tipo de etiquetas (como las etiquetas ASP, por ejemplo). Para obtener más

información, consulte “Evitar la reescritura de etiquetas de terceros” en la

página 572.

Las dos opciones de Caracteres especiales permiten controlar si Dreamweaver

codiﬁca algunos caracteres en determinados contextos. Por lo general, es

recomendable dejar estas opciones seleccionadas, a no ser que sus archivos

contengan determinadas etiquetas de otro tipo que empleen los caracteres en

cuestión. Para obtener más información sobre estas opciones, consulte “Evitar la

reescritura de etiquetas de terceros” en la página 572.

Limpiar código HTML

Utilice el comando Limpiar HTML para eliminar etiquetas vacías, combinar

etiquetas font anidadas y, en general, mejorar códigos HTML desordenados o

ilegibles.

Para limpiar código HTML:

1 Abra un documento existente y elija Comandos > Limpiar HTML.

2 En el cuadro de diálogo que aparece dispone de las siguientes opciones:

• Quitar Etiquetas vacías elimina las etiquetas que carecen de contenido. Por

ejemplo, <b></b> y <font color="FF0000"></font> se consideran etiquetas vacías,

mientras que la etiqueta <b> en <b>un texto</b> no se considera vacía.

• Quitar Etiquetas anidadas repetidas elimina todas las repeticiones de una

etiqueta. Por ejemplo, en el código <b>Esto es lo que <b>realmente</b> quería

decir</b>, las etiquetas b que rodean a la palabra “realmente” están repetidas y

se eliminarían.

• Quitar Comentarios HTML ajenos a Dreamweaver elimina todos los

comentarios que no hayan sido insertados por Dreamweaver. Por ejemplo, <!--

comienza el texto del cuerpo--> se eliminaría, pero no <!-- #BeginEditable

"doctitle" --> (porque se trata de un comentario de Dreamweaver que marca

el comienzo de una región editable en una plantilla).

Editar HTML en Dreamweaver 365

• Quitar Comentarios HTML de Dreamweaver elimina todos los comentarios

insertados por Dreamweaver. Por ejemplo,

sería eliminado, pero no

(porque no es un

comentario de Dreamweaver). La eliminación de los comentarios de

Dreamweaver convierte los documentos basados en plantillas en documentos

HTML ordinarios y los elementos de biblioteca en código HTML normal (es

decir, no se pueden actualizar cuando cambia la plantilla original o el elemento

de biblioteca).

• Quitar Etiqueta(s) especíﬁca(s) elimina las etiquetas especiﬁcadas en el campo

de texto contiguo. Utilice esta opción para eliminar etiquetas personalizadas

insertadas por otros editores visuales que no desea que aparezcan en el sitio (por

ejemplo, blink). Separe las diversas etiquetas mediante comas (por ejemplo,

font, blink).

• Combinar etiquetas de <font> anidadas cuando sea posible consolida dos o más

etiquetas font cuando éstas controlan el mismo rango de texto. Por ejemplo,

<font size="7"><font color="#FF0000">big red</font></font> se cambiaría a

<font font="7" font="#FF0000">big red</font>.

• Mostrar registro al terminar muestra un cuadro de alerta con detalles acerca de

los cambios realizados en el documento inmediatamente después de concluir la

limpieza.

3 Haga clic en Aceptar.

Según el tamaño del documento y del número de opciones seleccionadas, la

operación de limpieza puede tardar varios segundos en realizarse.

Aplicar formato al código HTML en documentos existentes

Las opciones de formato del código HTML que especiﬁque en las preferencias de

Formato HTML y en el archivo SourceFormat.txt afectan sólo a los documentos

nuevos que cree con Dreamweaver a partir de ese momento. Para aplicar estas

opciones de formato a los documentos HTML existentes, utilice el comando

Aplicar formato de origen.

Para aplicar opciones de formato de código HTML a un documento existente:

1 Elija Archivo > Abrir para abrir un archivo HTML existente en la ventana de

documento.

2 Elija Comandos > Aplicar formato de origen.

Capítulo 14366

Limpiar HTML de Microsoft Word

En Dreamweaver es posible abrir o importar documentos guardados con

Microsoft Word como archivos HTML y, seguidamente, utilizar el comando

Limpiar HTML de Word para eliminar los códigos HTML sobrantes o

innecesarios generados por Word. El código que Dreamweaver elimina lo utiliza

Word principalmente para aplicar formato y mostrar documentos en Word, por lo

que no es necesario para ver el archivo HTML. Conserve una copia del archivo

original de Word (.doc) como copia de seguridad, ya que es posible que no pueda

volver a abrir el documento HTML en Word una vez aplicada la función Limpiar

HTML de Word. El comando Limpiar HTML de Word se encuentra disponible

para documentos guardados como archivos HTML por Word 97 o superior.

Para limpiar HTML de Word:

1 En Microsoft Word, guarde el documento como archivo HTML.

2 Abra el documento HTML en Dreamweaver mediante uno de los siguientes

métodos:

• Elija Archivo > Importar > Importar HTML de Word y seleccione el archivo

que desea abrir.

Dreamweaver abrirá el archivo y, seguidamente, abrirá automáticamente el

cuadro de diálogo Limpiar HTML de Word.

• Elija Archivo > Abrir y seleccione el archivo que desea abrir.

Se generará automáticamente un archivo de registro de Correcciones HTML si

está activada la opción Advertir al solucionar/eliminar etiquetas en las

preferencias de Reescritura de HTML. Esto no forma parte de la función

Limpiar HTML de Word. Haga clic en Continuar para salir del cuadro de

diálogo. Seguidamente, en Dreamweaver, elija Comandos >Limpiar HTML de

Word.

3 Con cualquiera de estos métodos, puede producirse un pequeño retraso

mientras Dreamweaver intenta determinar la versión de Word con la que se

guardó el archivo. Si Dreamweaver no logra determinar de qué versión se trata,

seleccione la versión correcta en el menú emergente.

Editar HTML en Dreamweaver 367

Elija las opciones de la función Limpiar HTML de Word que desee utilizar. La

ﬁcha Básicas muestra las siguientes opciones:

• Eliminar todo el formato especíﬁco de Word elimina todos los códigos HTML

especíﬁcos de Word, incluidos los códigos XML de las etiquetashtml, los

metadatos y las etiquetas de vínculos de Word situadas en la sección del

encabezado del documento, el formato XML de Word, las etiquetas

condicionales y su correspondiente contenido y los párrafos y márgenes vacíos

de los estilos. Puede seleccionar cada una de estas opciones individualmente

utilizando la ﬁcha Detallada.

• Limpiar CSS elimina todos los códigos CSS especíﬁcos de Word, incluidos los

estilos CSS en línea cuando el estilo padre tiene las mismas propiedades de

estilo, los atributos de estilo que comiencen por “mso”, las declaraciones de

estilos ajenos a CSS, los atributos de estilo CSS de las tablas y todas las

deﬁniciones de estilo no utilizadas de la sección del encabezado. Esta opción se

puede personalizar más en la ﬁcha Detallada.

• Limpiar etiquetas <font> elimina las etiquetas HTML y convierte el texto

normal predeterminado a texto HTML de tamaño 2.

• Reparar etiquetas mal anidadas elimina las etiquetas de formato de fuentes

insertadas por Word fuera de las etiquetas de párrafo y encabezado (nivel de

bloque).

• Deﬁnir color de fondo permite introducir un valor hexadecimal para establecer

el color de fondo del documento. Si no deﬁne ningún color de fondo, el

documento HTML de Word tendrá un fondo gris. El valor hexadecimal

predeterminado por Dreamweaver es el blanco.

• Aplicar formato de origen aplica al documento las opciones de formato de

origen que especiﬁque en las preferencias de Formato HTML y en

SourceFormat.txt.

• Mostrar registro al terminar muestra un cuadro de alerta con detalles acerca de

los cambios realizados en el documento inmediatamente después de concluir la

limpieza.

5 Haga clic en Aceptar.

Según el tamaño del documento y el número de opciones seleccionadas, la

operación de limpieza puede tardar varios segundos en realizarse. Las

preferencias introducidas se guardan automáticamente como conﬁguración

predeterminada de Limpiar HTML de Word.

Capítulo 14368

Utilizar editores de HTML externos

Puede utilizar un editor de texto para editar manualmente grandes cantidades de

código HTML, JavaScript o VBScript. Puede utilizar cualquier editor de texto

externo con Dreamweaver, incluido el Bloc de notas (suministrado con Windows

95 y NT) o SimpleText (suministrado con Macintosh), BBEdit, HomeSite, vi,

emacs y TextPad. Consulte “Utilizar un editor de texto externo con Dreamweaver”

en la página 368 y “Utilizar BBEdit con Dreamweaver (sólo Macintosh)” en la

página 369.

Utilizar un editor de texto externo con Dreamweaver

Puede iniciar el editor de texto externo principal de Dreamweaver para editar el

código HTML del documento actual y seguidamente, regresar a Dreamweaver

para continuar editando gráﬁcamente. Dreamweaver detecta los cambios

guardados externamente en el documento y le solicita que vuelva a cargar el

documento al regresar.

Si utiliza BBEdit en Macintosh, siga los pasos indicados en “Utilizar BBEdit con

Dreamweaver (sólo Macintosh)” en la página 369 en lugar de los siguientes pasos.

Para conﬁgurar editores externos para tipos de archivos distintos a los de texto y

HTML, consulte “Iniciar un editor externo” en la página 314.

Para seleccionar un editor de HTML externo:

1 Elija Edición > Preferencias y seleccione Tipos de archivo/editores.

2 (Sólo Macintosh) Para utilizar un editor de HTML distinto de BBEdit, anule la

selección de la opción Activar integración con BBEdit. Para utilizar BBEdit,

deje seleccionada la opción Activar integración con BBEdit y omita los pasos

restantes.

3 Haga clic en el botón Examinar situado junto al cuadro Editor de código

externo para seleccionar un editor de texto.

4 En la opción Volver a cargar archivos modif., especiﬁque lo que desea que haga

Dreamweaver cuando detecte cambios realizados externamente en un

documento abierto en Dreamweaver.

5 En la opción Guardar al iniciar, especiﬁque si Dreamweaver debe guardar

siempre el documento actual antes de iniciar el editor, no guardarlo nunca o

solicitarle conﬁrmación para guardarlo cada vez que se inicie el editor externo.

Para iniciar el editor de HTML externo:

Elija Edición > Editar con (nombre del editor).

Editar HTML en Dreamweaver 369

Utilizar BBEdit con Dreamweaver (sólo Macintosh)

Cuando la integración con BBEdit esté activada, una vez abierto un documento

en BBEdit y en Dreamweaver, el documento se actualizará automáticamente con

los cambios más recientes cada vez que cambie de una aplicación a la otra.

Además, ambos programas controlan la selección actual; por ejemplo, puede

realizar una selección en Dreamweaver y, seguidamente, cambiar a BBEdit, donde

se encontrará seleccionado el mismo elemento.

Puede desactivar la integración con BBEdit si preﬁere trabajar con una versión

más antigua de BBEdit o con otro editor de texto HTML distinto. Las selecciones

no coinciden en ambas aplicaciones si está desactivada la integración con BBEdit.

Para utilizar BBEdit con Dreamweaver:

1 Elija Edición > Editar con BBEdit.

2 Edite el documento en BBEdit.

3 Haga clic en el botón Dreamweaver de la paleta Herramientas HTML de

BBEdit para regresar a Dreamweaver.

Para desactivar la integración con BBEdit:

1 Elija Edición > Preferencias y seleccione Tipos de archivo/editores.

2 Anule la selección de Activar integración con BBEdit y haga clic en Aceptar.

Editar archivos de ColdFusion y Active Server en

Dreamweaver

Dreamweaver muestra iconos para identiﬁcar los bloques de código de

ColdFusion Markup Language (CFML) o Active Server Pages (ASP) en la vista de

Diseño siempre que esto sea posible.

Nota: De forma predeterminada, Dreamweaver no reescribe nunca el código HTML

localizado en los archivos de ColdFusion y ASP.

Para editar un bloque de código ASP desde la vista de Diseño:

1 Haga clic en el marcador amarillo de ASP para seleccionarlo.

2 En el inspector de propiedades, haga clic en el botón Editar.

3 Edite el código ASP en el cuadro de diálogo que aparece y, a continuación, haga

clic en Aceptar.

Capítulo 14370

Para editar un bloque de código CFML desde la vista de Diseño:

1 Haga clic en el marcador de CFML para seleccionarlo.

2 En el inspector de propiedades, lleve a cabo una de estas operaciones:

• Haga clic en el botón Atributos para editar los atributos de la etiqueta y sus

valores o para añadir otros nuevos.

• Haga clic en el botón Contenido para editar el contenido que aparece entre las

etiquetas de apertura y de cierre de CFML. Si la etiqueta seleccionada es una

etiqueta vacía (es decir, si carece de su correspondiente etiqueta de cierre), el

botón Contenido estará desactivado.

Si no ve ningún marcador ni texto resaltado en un lugar en el que sabe que hay

código ASP o CFML, active en primer lugar Ver > Ayudas visuales > Elementos

invisibles. Si dicha opción está seleccionada y los iconos continúan sin aparecer,

signiﬁca que Dreamweaver no puede mostrar el código como CFML o ASP. Esto

puede ocurrir, por ejemplo, cuando existen códigos condicionales insertados en las

etiquetas HTML, como en el siguiente código ASP:

<input type="checkbox" name="month" value="October"

<% if month="October" then %>checked<% end if %>

Para editar código CFML o ASP en los editores de código, lleve a cabo una de

estas operaciones:

Localice el código en la vista o el inspector de código y edítelo directamente.

Para buscar el código CFML o ASP:

Sitúe el punto de inserción cerca de la ubicación del código CFML o ASP en la

vista de Diseño. El código CFML o ASP quedará resaltado en la vista de Código o

el inspector de código y podrá editarlo directamente.

Para obtener información acerca del procesamiento de código CFML o ASP y la

visualización del resultado en la ventana de documento, consulte “Personalizar la

apariencia de etiquetas de terceros” en la página 565.

371

CAPÍTULO 15

.............................................................................................................

Crear vínculos y navegar

Después de conﬁgurar un sitio local para guardar los documentos del sitio Web y

de crear páginas HTML, puede establecer conexiones desde sus documentos hasta

otros documentos o tipos de archivo. Para obtener información sobre la

conﬁguración de un sitio local, consulte “Utilizar Dreamweaver para conﬁgurar

un nuevo sitio” en la página 104.)

Macromedia Dreamweaver ofrece varios métodos para crear vínculos de

hipertexto con documentos, imágenes, archivos multimedia o software

transferible. Puede establecer vínculos con cualquier texto o imagen de cualquier

lugar del documento, incluidos el texto y las imágenes situados en un encabezado,

lista, tabla, capa o marco. Para obtener más información sobre la creación de

vínculos, consulte “Crear vínculos” en la página 376.

Si desea ver una representación visual de cómo se vinculan los archivos entre sí,

utilice el mapa del sitio. En el mapa del sitio puede añadir nuevos documentos al

sitio, crear y eliminar vínculos del documento y comprobar los vínculos con

archivos dependientes. Consulte “Utilizar el mapa del sitio” en la página 120.

Hay varias formas de crear y gestionar vínculos. Algunos diseñadores Web

preﬁeren crear vínculos con páginas o archivos inexistentes mientras trabajan,

mientras que otros preﬁeren crear todos los archivos y páginas en primer lugar y,

posteriormente, añadir los vínculos. Otra forma de gestionar los vínculos consiste

en crear páginas de “marcador de posición” que representan el archivo deﬁnitivo y

permiten añadir vínculos rápidamente y comprobarlos antes de terminar todas las

páginas. Consulte “Comprobar vínculos en una página o un sitio” en la

página 534.

Capítulo 15372

Ubicación y rutas de documentos

A la hora de crear vínculos resulta fundamental conocer la ruta de archivo entre el

documento de origen del vínculo y el documento de destino.

Cada página Web tiene una dirección exclusiva, denominada URL (Localizador

Uniforme de Recursos). Para obtener información detallada acerca de los URL,

consulte la página del World Wide Web Consortium sobre asignación de nombres

y direcciones. Sin embargo, cuando se crea un vínculo local (un vínculo desde un

documento hasta otro documento del mismo sitio), no suele ser necesario

especiﬁcar el URL completo del documento de destino. En este caso se especiﬁca

una ruta relativa desde el documento actual o desde la carpeta raíz del sitio. Hay

tres tipos de rutas de vínculos:

• Rutas absolutas (como http://www.macromedia.com/support/dreamweaver/

contents.html).

• Rutas relativas al documento (como dreamweaver/contents.html).

• Rutas relativas a la raíz (como /support/dreamweaver/contents.html).

Con Dreamweaver puede seleccionar fácilmente el tipo de ruta de documento

para crear los vínculos: Consulte “Crear vínculos con documentos utilizando el

inspector de propiedades y el icono de señalización de archivo” en la página 377.

Nota: Utilice el tipo de vínculos que prefiera y con el que se sienta más cómodo, ya sea

relativo al sitio o relativo al documento. En lugar de escribir la ruta de los vínculos, acceda a

ellos a través del botón Examinar para evitar introducirlos incorrectamente.

Rutas absolutas

Las rutas absolutas proporcionan el URL completo del documento vinculado,

incluido el protocolo que se debe usar (generalmente, http:// para páginas Web).

Por ejemplo:

http://www.macromedia.com/support/dreamweaver/contents.html es una ruta

absoluta. Para vincular un documento situado en otro servidor es preciso emplear

una ruta absoluta. Sin embargo, no se recomienda utilizar rutas absolutas para

vínculos locales (con documentos del mismo sitio), ya que si mueve el sitio a otro

dominio, se interrumpirán todos los vínculos. Además, el uso de rutas relativas

para vínculos locales proporciona una mayor ﬂexibilidad si necesita mover los

archivos dentro del sitio.

Nota: Al insertar imágenes (no vínculos): si utiliza una ruta absoluta con una imagen que

reside en un servidor remoto y no está disponible en la unidad de disco duro, no podrá ver

la imagen en la ventana de documento. Para ver el documento deberá previsualizarlo en un

navegador. Si es posible, utilice rutas relativas al documento o a la raíz para las imágenes.

Para obtener más información, consulte “Insertar una imagen” en la página 280.

Crear vínculos y navegar 373

Rutas relativas al documento

Las rutas relativas al documento

son las más adecuadas para utilizar con vínculos

locales en la mayoría de los sitios Web. Resultan particularmente útiles cuando el

documento actual y el documento con el que se establece el vínculo se encuentran

en la misma carpeta y es probable que vayan a permanecer juntos. También puede

utilizar una ruta relativa al documento para establecer un vínculo con un

documento de otra carpeta, especiﬁcando la ruta a través de la jerarquía de

carpetas desde el documento actual hasta el vinculado. En las rutas relativas al

documento se omite la parte del URL absoluto que coincide en los documentos

actual y vinculado, indicando únicamente la parte de la ruta que diﬁere.

• Para establecer un vínculo desde un archivo hasta otro de la misma carpeta,

indique simplemente el nombre del archivo de destino.

• Para establecer un vínculo con un archivo situado en una subcarpeta de la

carpeta del documento actual, indique el nombre de dicha subcarpeta, seguido

de una barra diagonal (/) y del nombre del archivo de destino.

• Para establecer un vínculo con un archivo situado en la carpeta padre de la

carpeta del documento actual, introduzca ../ delante del nombre del archivo

(donde “..” signiﬁca “un nivel por encima en la jerarquía de carpetas”).

Por ejemplo, supongamos que tiene un sitio con esta estructura:

resources

tips.html

my_site (root folder)

support

contents.html

hours.html

products

catalog.html

index.html (home page)

Capítulo 15374

Para establecer un vínculo desde contents.html hasta otros archivos:

• Para establecer un vínculo desde contents.html hasta hours.html (ambos

archivos se encuentran en la misma carpeta), el nombre de archivo será la ruta

relativa: hours.html.

• Para establecer un vínculo con tips.html (en la subcarpeta llamada recursos),

utilice la ruta relativa recursos/tips.html.

Cada barra diagonal (/) representa un nivel por debajo en la jerarquía de

carpetas.

• Para establecer un vínculo con index.html (en la carpeta padre, un nivel por

encima de contents.html), utilice la ruta relativa ../index.html.

Cada ../ representa un nivel por encima en la jerarquía de carpetas.

• Para establecer un vínculo con catalog.html (en una subcarpeta distinta de la

carpeta padre), utilice la ruta relativa ../products/catalog.html.

../ sube a la carpeta padre; products/ baja a la subcarpeta products.

Nota: Si el archivo es nuevo, guárdelo antes de crear una ruta relativa al documento, pues

ésta no es válida sin un punto de partida preciso. Si crea una ruta relativa al documento

antes de guardar el archivo, Dreamweaver utilizará temporalmente una ruta absoluta que

comenzará por archivo:// hasta que guarde el archivo. Cuando guarde el archivo,

Dreamweaver convertirá la ruta archivo:// en una ruta relativa.

No es necesario actualizar las rutas relativas al documento entre archivos que se

mueven como un grupo (por ejemplo, al mover una carpeta completa, de forma

que todos los archivos de esa carpeta conserven las mismas rutas relativas entre sí).

Sin embargo, cuando se mueve un archivo individual que contiene vínculos

relativos al documento o un archivo individual que está vinculado en relación con

el documento, no necesitará actualizar esos vínculos. Si mueve o renombra

archivos utilizando la ventana Sitio, Dreamweaver actualizará automáticamente

todos los vínculos relevantes.

Rutas relativas a la raíz

Las rutas relativas a la raíz indican la ruta desde la carpeta raíz del sitio hasta un

documento. Quizá le convenga utilizar este tipo de rutas si está trabajando en un

gran sitio Web con varios servidores o con un servidor que alberga varios sitios

distintos. Sin embargo, si no conoce bien este tipo de rutas, utilice rutas relativas

al documento.

Una ruta relativa a la raíz comienza por una barra diagonal, que representa la

carpeta raíz del sitio. Por ejemplo, /support/tips.html es una ruta relativa a la raíz

de un archivo (tips.html) situado en la subcarpeta support de la carpeta raíz del

sitio.

Crear vínculos y navegar 375

A menudo, una ruta relativa a la raíz es la mejor forma de especiﬁcar vínculos en

un sitio Web en el que necesita mover con frecuencia archivos HTML de una

carpeta a otra. Al mover un documento que contiene vínculos relativos a la raíz,

no es preciso cambiar los vínculos. Por ejemplo, si los archivos HTML utilizan

vínculos relativos a la raíz para archivos dependientes (como imágenes) y se mueve

un archivo HTML, sus vínculos de archivos dependientes seguirán siendo válidos.

Sin embargo, al mover o renombrar documentos con vínculos relativos a la raíz,

deberá actualizar esos vínculos, aunque las rutas de los documentos no hayan

cambiado en su relación mutua. Por ejemplo, si mueve una carpeta, deberá

actualizar todos los vínculos relativos a la raíz de los archivos de esa carpeta. Si

mueve o renombra archivos utilizando la ventana Sitio, Dreamweaver actualizará

automáticamente todos los vínculos relevantes.

• Para utilizar rutas relativas a la raíz, deﬁna en primer lugar un sitio local en

Dreamweaver eligiendo una carpeta raíz local que servirá como el equivalente

de la raíz de documentos en un servidor. Consulte “Utilizar Dreamweaver para

conﬁgurar un nuevo sitio” en la página 104.

Dreamweaver utiliza esta carpeta para determinar las rutas relativas a la raíz de

los archivos.

Nota: Los vínculos relativos a la raíz son interpretados por los servidores, no por los

navegadores. Por tanto, si abre en el navegador una página local que utiliza vínculos

relativos a la raíz (sin utilizar la opción Vista previa en el navegador de Dreamweaver), los

vínculos no funcionarán. Cuando se utiliza el comando Vista previa en el navegador para

ver un documento que utiliza vínculos relativos a la raíz, Dreamweaver convierte

temporalmente esos vínculos (sólo en el archivo que se previsualiza) para que utilicen rutas

absolutas de archivo://. Sin embargo, sólo se puede previsualizar simultáneamente una

página que utilice vínculos relativos a la raíz. Si sigue un vínculo de la página previsualizada,

los vínculos relativos a la raíz de la página siguiente no se convertirán y el navegador no

podrá seguirlos. La previsualización de páginas en conjuntos de marcos que utilizan

vínculos relativos a la raíz ocasiona problemas similares.

Para previsualizar un conjunto de páginas que utiliza vínculos relativos a la raíz,

lleve a cabo una de estas operaciones:

• Coloque los archivos en un servidor remoto y ábralos en él.

• (Sólo Windows) Elija Edición > Preferencias y, en las preferencias de Vista

previa en el navegador, seleccione Previsualizar usando el servidor local. Para

utilizar esta opción deberá ejecutar un servidor Web en el ordenador local.

Capítulo 15376

Crear vínculos

La etiqueta HTML que crea un vínculo de hipertexto se denomina etiqueta de

punto de ﬁjación o etiqueta a. Dreamweaver crea una etiqueta de punto de

ﬁjación para los objetos, texto o imágenes desde los que se crean vínculos. Puede

crear vínculos con otros documentos y archivos, así como vínculos con lugares

especíﬁcos de un documento utilizando la etiqueta a href.

Por ejemplo, si en la ventana de documento selecciona el texto Página principal y,

a continuación, crea un vínculo con un archivo llamado home.htm, el código

HTML del vínculo será el siguiente:

<a href="home.htm">Página principal</a>

Si crea un vínculo con un lugar especíﬁco de un documento, cree en primer lugar

un punto de ﬁjación con nombre, como, por ejemplo, a name="MainMenu". A

continuación, cree un vínculo en la página que hace referencia al punto de ﬁjación

con nombre. Por ejemplo, a href="#MainMenu".

Antes de crear vínculos, deberá saber cómo funcionan las rutas relativas al

documento, las rutas relativas a la raíz y las rutas absolutas. Consulte “Ubicación y

rutas de documentos” en la página 372.

Puede crear varios tipos de vínculos en un documento:

• Un vínculo con otro documento o archivo, como un archivo gráﬁco, de

película, PDF o de sonido.

• Un vínculo de punto de ﬁjación con nombre que salta a un emplazamiento

especíﬁco dentro de un documento.

• Un vínculo de correo electrónico que crea un mensaje de correo electrónico en

blanco con la dirección del destinatario ya cumplimentada.

• Vínculos nulos y de secuencia de comandos que permiten adjuntar

comportamientos a un objeto o crear un vínculo que ejecuta código JavaScript.

Dreamweaver ofrece varias formas de crear fácilmente vínculos locales (entre

documentos del mismo sitio):

• Utilice el mapa del sitio para ver, crear, cambiar o eliminar vínculos.

• En la ventana de documento, utilice Modiﬁcar > Crear vínculo para seleccionar

un archivo con el que desea establecer un vínculo.

• Utilice el inspector de propiedades para establecer un vínculo con un archivo.

Para ello, haga clic en el icono de carpeta para localizar y seleccionar un archivo,

use el icono de señalización para seleccionarlo o escriba su ruta.

Nota: Si escribe URL o rutas de un archivo incorrectas, los vínculos no funcionarán. Para

asegurarse de que la ruta es correcta, utilice el icono de carpeta para acceder al vínculo.

• Elija Crear vínculo en el menú contextual y, a continuación, seleccione un

archivo con el que desea establecer un vínculo.

Crear vínculos y navegar 377

Para crear un vínculo externo (con un documento de otro sitio), deberá escribir la

ruta absoluta (con el protocolo adecuado) en el inspector de propiedades. No

olvide introducir la ruta completa (incluido http://) al crear vínculos externos.

Crear vínculos con documentos utilizando el inspector de

propiedades y el icono de señalización de archivo

Utilice el inspector de propiedades y el icono de señalización de archivo para crear

vínculos desde una imagen, un objeto o texto hasta otro documento o archivo.

Para obtener más información, consulte “Crear y modiﬁcar vínculos en el mapa

del sitio” en la página 385.

Para crear vínculos entre documentos utilizando el icono de carpeta o el cuadro de

texto Vínculo:

1 Seleccione texto o una imagen en la vista de Diseño de la ventana de

documento.

2 Abra el inspector de propiedades (Ventana > Propiedades) y lleve a cabo una de

estas operaciones:

• Haga clic en el icono de carpeta situado a la derecha del campo Vínculo para

localizar y seleccionar un archivo.

La ruta del documento vinculado aparecerá en el campo URL. Utilice el menú

emergente Relativo a del cuadro de diálogo Seleccionar archivo HTML para

indicar si la ruta es relativa al documento o a la raíz. A continuación, haga clic

en Seleccionar.

Nota: Al cambiar el tipo de ruta en el campo Relativo a, Dreamweaver utilizará esta

selección como el tipo de ruta predeterminado para futuros vínculos hasta que la

cambie.

• En el campo Vínculo, introduzca la ruta y el nombre de archivo del

documento.

Para establecer un vínculo con un documento del sitio, introduzca una ruta

relativa al documento o relativa a la raíz. Para establecer un vínculo con un

documento externo al sitio, introduzca una ruta absoluta que incluya el

protocolo (por ejemplo, http://). Puede utilizar este sistema para introducir un

vínculo para un archivo que aún no se ha creado.

Capítulo 15378

Seleccione una ubicación para abrir el documento.

Para que el documento vinculado aparezca en un lugar distinto de la ventana o

el marco actual, seleccione una opción en el menú emergente Destino del

inspector de propiedades:

Sugerencia: Si todos los vínculos de la página se establecerán con el mismo destino,

puede especificar este destino una vez eligiendo Insertar > Etiquetas Head > Base y

seleccionando la información de destino.

Para obtener información sobre el establecimiento de vínculos con marcos,

consulte “Controlar el contenido del marco con vínculos” en la página 225.

Para crear un vínculo con un documento utilizando el icono de señalización de

archivo:

1 Seleccione texto o una imagen en la vista de Diseño de la ventana de

documento.

2 Arrastre el icono de señalización de archivo situado a la derecha del campo

Vínculo en el inspector de propiedades y señale otro documento abierto, un

punto de ﬁjación visible en un documento abierto o un documento

de la ventana Sitio.

El campo Vínculo se actualizará para mostrar el vínculo.

Nota: El documento abierto o el archivo de la ventana Sitio al que señale pasará a un

segundo plano en la pantalla mientras realiza la selección.

3 Libere el botón del ratón.

Cómo arrastrar el icono de señalización de archivo desde el inspector de propiedades

hasta un archivo de la ventana Sitio.

Crear vínculos y navegar 379

Para crear un vínculo desde una selección en un documento abierto:

1 Seleccione texto en la vista de Diseño de la ventana de documento.

2 Presione Mayús y, al mismo tiempo, arrastre la selección.

Mientras arrastra la selección, aparecerá el icono de señalización de archivo.

3 Señale otro documento abierto, un punto de ﬁjación visible en un documento

abierto o un documento de la ventana Sitio.

4 Libere el botón del ratón.

Cómo arrastrar el icono de señalización de archivo mientras presiona la tecla Mayús

desde el texto de la ventana de documento hasta un archivo de la ventana Sitio.

Para crear un vínculo utilizando el mapa del sitio y el icono de señalización de

archivo:

1 En la ventana Sitio, active las vistas Archivos del sitio y Mapa del sitio

presionando el icono Mapa del sitio mientras elige Mapa y archivos.

2 Seleccione un archivo HTML del mapa del sitio.

Aparecerá el icono de señalización de archivo junto al archivo.

3 Arrastre el icono de señalización de archivo y señale otro archivo del mapa del

sitio o un archivo local de la vista Archivos del sitio.

Capítulo 15380

Libere el botón del ratón.

Se colocará un vínculo de hipertexto con el nombre del archivo vinculado en la

parte inferior del archivo HTML seleccionado. Este método ofrece buenos

resultados para crear vínculos rápidamente en un sitio que se está creando.

Para obtener información sobre la visualización de un mapa del sitio, consulte

“Utilizar el mapa del sitio” en la página 120.

Crear un vínculo con un lugar específico dentro de un

documento

Puede utilizar el inspector de propiedades para crear un vínculo con una sección

especíﬁca de un documento creando en primer lugar puntos de ﬁjación con

nombre. Los puntos de ﬁjación con nombre permiten establecer marcadores en un

documento y a menudo se colocan en un tema especíﬁco o en la parte superior de

un documento. Entonces se pueden crear vínculos con estos puntos de ﬁjación

con nombre que llevan rápidamente al visitante a la posición especiﬁcada.

Para crear un vínculo con un punto de ﬁjación con nombre, siga este

procedimiento de dos pasos. En primer lugar, cree un punto de ﬁjación con

nombre. A continuación, cree un vínculo con dicho punto.

Para crear un punto de fijación con nombre:

1 En la vista de Diseño de la ventana de documento, sitúe el punto de inserción

en el lugar donde desea insertar el punto de ﬁjación con nombre.

2 Lleve a cabo una de estas operaciones:

• Elija Insertar > Etiquetas invisibles > Punto de ﬁjación con nombre.

• Presione Control+Alt+A (Windows) o Comando+Opción+A (Macintosh).

• En la categoría Invisibles de la paleta Objetos, haga clic en el botón Punto de

ﬁjación con nombre.

Crear vínculos y navegar 381

Escriba un nombre en el campo Nombre del punto de ﬁjación del cuadro de

diálogo Insertar punto de ﬁjación con nombre.

Si no aparece un marcador de punto de ﬁjación en la posición del punto de

inserción, elija Ver > Ayudas visuales > Elementos invisibles.

Nota: Los nombres de punto de fijación no pueden contener espacios ni colocarse en una

capa.

Para crear un vínculo con un punto de fijación con nombre:

1 En la vista de Diseño de la ventana de documento, seleccione texto o una

imagen para crear un vínculo a partir de ellos.

2 En el campo Vínculo del inspector de propiedades, introduzca un signo de

número (#) y el nombre del punto de ﬁjación. Por ejemplo:

• Para crear un vínculo con un punto de ﬁjación denominado “superior” en el

archivo actual, escriba #superior.

• Para crear un vínculo con un punto de ﬁjación denominado “superior” en un

archivo distinto de la misma carpeta, escriba nombrearchivo.html#superior.

Nota: Los nombres de punto de fijación tienen en cuenta el uso de mayúsculas y

minúsculas.

Para crear un vínculo con un punto de fijación con nombre mediante el método de

señalización de archivo:

1 Abra el documento que contiene el punto de ﬁjación con nombre deseado.

2 Elija Ver > Ayudas visuales > Elementos invisibles para convertir en visible el

punto de ﬁjación.

3 En la vista de Diseño de la ventana de documento, seleccione texto o una

imagen para crear un vínculo a partir de ellos. Si desea crearlo a partir de otro

documento abierto, deberá cambiar a él.

4 Lleve a cabo una de estas operaciones:

• Haga clic en el icono de señalización de archivo situado a la derecha del campo

Vínculo en el inspector de propiedades y arrástrelo hasta el punto de ﬁjación

con el que desea establecer el vínculo: un punto de ﬁjación en el mismo

documento o un punto de ﬁjación en otro documento abierto.

• En la ventana de documento, presione la tecla Mayús mientras arrastra el texto

o la imagen seleccionados hasta el punto de ﬁjación con el que desea establecer

un vínculo: un punto de ﬁjación en el mismo documento o un punto de

ﬁjación en otro documento abierto.

Capítulo 15382

Crear un vínculo de correo electrónico

Cuando el usuario hace clic en un vínculo de correo electrónico se abre una

ventana de mensaje en blanco (utilizando el programa de correo asociado al

navegador del usuario). En la ventana de mensaje de correo electrónico, el campo

Para se rellena automáticamente con la dirección especiﬁcada en el vínculo.

Para crear un vínculo de correo electrónico utilizando el comando Insertar vínculo

de correo electrónico:

1 En la vista de Diseño de la ventana de documento, sitúe el punto de inserción

donde desea que aparezca el vínculo de correo electrónico o seleccione el texto

que desea mostrar como vínculo de correo electrónico. A continuación, lleve a

cabo una de estas operaciones:

• Elija Insertar > Vínculo de correo electrónico.

• En la categoría Común del panel Objetos, seleccione Insertar vínculo de correo

electrónico.

2 En el campo Texto del cuadro de diálogo Insertar vínculo de correo electrónico,

escriba o edite el texto que desea mostrar en el documento como vínculo de

correo electrónico.

3 En el campo Correo electrónico, escriba la dirección a la que se deberá enviar el

correo electrónico.

4 Haga clic en Aceptar.

Para crear un vínculo de correo electrónico mediante el inspector de propiedades:

1 Seleccione texto o una imagen en la vista de Diseño de la ventana de

documento.

2 En el campo Vínculo del inspector de propiedades, escriba mailto: seguido de

una dirección de correo electrónico.

No introduzca espacios entre los dos puntos y la dirección de correo. Por

ejemplo, escriba mailto:[email protected].

Crear vínculos y navegar 383

Crear vínculos de secuencia de comandos y nulos

Los vínculos más utilizados son los que se establecen con documentos y puntos de

ﬁjación con nombre (consulte “Crear vínculos con documentos utilizando el

inspector de propiedades y el icono de señalización de archivo” en la página 377 y

“Crear un vínculo con un lugar especíﬁco dentro de un documento” en la

página 380, respectivamente), aunque también hay otros tipos.

Un vínculo nulo es vínculo no designado. Los vínculos nulos se utilizan para

adjuntar comportamientos a objetos o texto de una página. Después de crear un

vínculo nulo, puede adjuntarle un comportamiento para cambiar una imagen o

para mostrar una capa cuando el puntero se desplaza sobre el vínculo. Para obtener

más información sobre los sitios remotos, consulte “Adjuntar un

comportamiento” en la página 461.

Los vínculos de secuencia de comandos ejecutan código JavaScript o activan una

función JavaScript. Sirven para proporcionar a los usuarios información adicional

sobre un elemento sin salir de la página actual. Los vínculos de secuencia de

comandos también pueden emplearse para realizar cálculos, validar formularios y

otras tareas de procesamiento cuando el usuario hace clic en un elemento

especíﬁco.

Para crear un vínculo nulo:

1 Seleccione texto, una imagen o un objeto en la vista de Diseño de la ventana de

documento.

2 En el campo Vínculo del inspector de propiedades, escriba el carácter de

número (#).

Para crear un vínculo de secuencia de comandos:

1 Seleccione texto, una imagen o un objeto en la vista de Diseño de la ventana de

documento.

2 En el campo Vínculo del inspector de propiedades, escriba javascript: y, a

continuación, introduzca código JavaScript o una llamada de función.

Por ejemplo, si escribe javascript:alert('Este vínculo lleva al índice') en el

campo Vínculo, obtendrá un vínculo en el que, la hacer clic, se mostrará un

cuadro de alerta JavaScript con el mensaje Este vínculo lleva al índice.

Nota: Dado que el código JavaScript aparece en HTML entre comillas dobles (como el

valor del atributo

href), deberá utilizar comillas simples en el código de la secuencia de

comandos o anular su valor situando una barra invertida delante de las comillas dobles

(por ejemplo,

\“Este vínculo lleva al índice\”).

Capítulo 15384

Administrar vínculos

Dreamweaver puede actualizar los vínculos con origen y destino en un documento

cada vez que éste se mueve o renombra en un sitio local. Esta actualización funciona

mejor cuando el sitio (o una sección completa e independiente del mismo) está

almacenado en la unidad local. No se aplicarán cambios en los archivos del sitio

remoto hasta que se coloquen o desprotejan los archivos en el servidor remoto.

Para activar la administración de vínculos en Dreamweaver:

1 Elija Edición > Preferencias y después seleccione la categoría General.

2 Seleccione Siempre o Mensaje en el menú emergente Actualizar vínculos al

mover archivos y haga clic en Aceptar.

Si elige Siempre, Dreamweaver actualizará automáticamente todos los vínculos

con origen y destino en un documento seleccionado cada vez que éste se mueva

o renombre. Para obtener instrucciones especíﬁcas sobre cómo proceder en caso

de eliminar un archivo, consulte “Cambiar un vínculo en todo el sitio” en la

página 386. Si elige Mensaje, Dreamweaver mostrará primero un cuadro de

diálogo con todos los archivos afectados por el cambio. Haga clic en Actualizar

si desea actualizar los vínculos de estos archivos o en No actualizar si desea dejar

los archivos como estaban.

Para acelerar el proceso de actualización, Dreamweaver puede crear un archivo de

caché en el que almacenará información sobre todos los vínculos del sitio local.

Este archivo de caché se crea al seleccionar la opción Caché en el cuadro de

diálogo Deﬁnición de sitio y se actualiza de manera invisible cuando se usa

Dreamweaver para añadir, cambiar o eliminar vínculos a archivos del sitio local.

Para crear un archivo de caché para el sitio:

1 Elija Sitio> Deﬁnir sitios.

2 Seleccione el sitio en el cuadro de diálogo Deﬁnir sitios y, a continuación, haga

clic en Editar. En la categoría Datos locales, active la casilla de veriﬁcación

Activar caché.

La primera vez que cambie o quite vínculos a archivos del sitio local después de

iniciar Dreamweaver, el programa le pedirá que cargue la caché. Si hace clic en Sí,

se cargará la caché y se actualizarán automáticamente todos los vínculos al archivo

que acaba de modiﬁcar. Si hace clic en No, el cambio se anotará en la caché, pero

ésta no se cargará y los vínculos no se actualizarán.

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 ningún archivo fuera de Dreamweaver, puede hacer

clic en el botón Detener cuando éste aparezca.

Para volver a crear la caché del sitio:

En la ventana Sitio, elija Volver a crear caché de sitio.

Crear vínculos y navegar 385

Crear y modificar vínculos en el mapa del sitio

Puede modiﬁcar la estructura del sitio en el mapa del sitio añadiendo, cambiando

o eliminando vínculos. El mapa del sitio se actualizará automáticamente para

mostrar los cambios realizados en el sitio.

Para añadir un vínculo, lleve a cabo una de estas operaciones:

• Arrastre una página desde el Explorador de Windows o el Finder de Macintosh

y colóquela en una página del mapa del sitio.

• Seleccione una página 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 en el menú

contextual.

• Seleccione una página HTML del mapa del sitio. Aparecerá el icono de

señalización de archivo. Arrastre el icono hasta el objeto con el que desea

vincularlo: un archivo de la vista de Archivos del sitio, un documento de

Dreamweaver abierto o un punto de ﬁjación con nombre en un documento

abierto en el escritorio. Consulte “Crear vínculos con documentos utilizando el

inspector de propiedades y el icono de señalización de archivo” en la

página 377.

Para cambiar un vínculo:

1 En el mapa del sitio, seleccione la página cuyo vínculo desea cambiar y elija

Sitio > Cambiar vínculo (Windows) o Sitio > Ver mapa del sitio > Cambiar

vínculo (Macintosh).

2 Localice el archivo o escriba un URL.

Para eliminar un vínculo, lleve a cabo una de estas operaciones:

• Seleccione la página en el mapa del sitio y elija Sitio > Quitar vínculo

(Windows) o Sitio > Ver mapa del sitio > Quitar vínculo (Macintosh).

• Seleccione la página en el mapa del sitio y elija Quitar vínculo en el menú

contextual. Cuando se quita un vínculo no se borra el archivo, sólo se elimina

el vínculo del código HTML de la página que señala al vínculo.

Para abrir el origen de un vínculo:

1 Seleccione un archivo en el mapa del sitio.

2 Elija Sitio > Abrir origen del vínculo (Windows) o Sitio > Ver mapa del sitio >

Abrir origen del vínculo (Macintosh).

Se abrirán el inspector de propiedades y el archivo de origen que contiene el

vínculo. El vínculo quedará resaltado.

Capítulo 15386

Cambiar un vínculo en todo el sitio

Además de conﬁgurar Dreamweaver para que actualice los vínculos

automáticamente cada vez que mueve o renombra un archivo, puede cambiar

manualmente todos los vínculos (incluidos los vínculos de correo electrónico,

FTP, nulos y de secuencia de comandos) para que señalen a otro lugar. Puede

utilizar esta opción en cualquier momento. Por ejemplo, puede vincular las

palabras “películas del mes” a /películas/julio.html en todo el sitio y el 1º de agosto

deberá cambiar esos vínculos para que señalen a /películas/agosto.html. Sin

embargo, esta función resulta particularmente útil para eliminar un archivo con el

que están vinculados otros archivos.

Para cambiar un vínculo en todo el sitio:

1 Seleccione un archivo en el panel Carpeta local de la ventana Sitio.

2 Elija Sitio > Cambiar vínculo en todo el sitio.

3 En el cuadro de diálogo que aparece, haga clic en el icono de carpeta para

localizar y seleccionar un archivo. También puede escribir la ruta y el nombre

de archivo en el campo Por vínculos a.

4 Haga clic en Aceptar.

Dreamweaver actualizará todos los documentos vinculados al archivo

seleccionado, haciendo que señalen 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 también deberá serlo). No importa si el tipo de vínculo es

relativo al documento o a la raíz. El vínculo se actualizará automáticamente.

Después de cambiar un vínculo en todo el sitio, el archivo seleccionado quedará

huérfano (es decir, ningún archivo del disco local estará vinculado a él). Entonces

podrá borrarlo sin romper ningún vínculo del sitio local.

Nota: Dado que estos cambios se realizan localmente, deberá borrar manualmente el

archivo huérfano correspondiente en el sitio remoto y colocar o desproteger los archivos

cuyos vínculos ha modificado. De lo contrario, los visitantes del sitio no podrán ver los

cambios efectuados.

Para cambiar en todo el sitio vínculos de secuencia de comandos, correo

electrónico, FTP o nulos:

1 Elija Sitio > Cambiar vínculo en todo el sitio.

2 En el cuadro de diálogo Cambiar vínculo en todo el sitio, introduzca la

información siguiente:

• En el campo Cambiar todos los vínculos a, escriba el texto completo del

vínculo que desea cambiar.

• En el campo Por vínculos a, escriba el texto completo del vínculo de

sustitución.

Crear vínculos y navegar 387

Haga clic en Aceptar.

Por ejemplo, para actualizar todos los vínculos de correo electrónico que señalan a

su antigua dirección, puede escribir mailto:[email protected] en el campo Cambiar

todos los vínculos a, y mailto:[email protected] en el campo Por vínculos a.

Crear menús de salto

Un menú de salto es un menú emergente de un documento que ven los visitantes

del sitio y que muestra opciones con vínculos a documentos o archivos. Puede

crear vínculos con documentos del sitio Web, documentos de otros sitios, correo

electrónico, gráﬁcos o cualquier tipo de archivo se pueda abrir en un navegador.

Un menú de salto puede tener tres componentes básicos:

• Un mensaje de selección de menú, como una categoría de descripción para los

elementos del menú, o instrucciones, como “Elija uno”. Opcional.

• Una lista de elementos de menú vinculados: el usuario elige una opción y se

abre un documento o un archivo vinculado. Obligatorio.

• Un botón Ir. Opcional.

Insertar un menú de salto

Para insertar un menú de salto en el documento, utilice el objeto de formulario

Menú de salto.

Para crear un menú de salto:

1 Elija Insertar > Objeto de formulario > Menú de salto.

Aparecerá el cuadro de diálogo Insertar menú de salto.

2 Si desea crear un mensaje de selección, escriba el texto del mensaje en el campo

Texto del cuadro de diálogo. En Opciones, active la casilla de veriﬁcación

Seleccionar primer elemento tras el cambio de URL. A continuación, haga clic

en el botón más (+) para añadir un elemento de menú.

3 En el campo Texto del cuadro de diálogo Insertar menú de salto, escriba el texto

que desea que aparezca en la lista de menú.

4 En el campo Al seleccionarse, ir a URL, seleccione el archivo que desea abrir

realizando uno de estos procedimientos:

• Haga clic en Examinar y, a continuación, seleccione el archivo que desea abrir.

• Escriba la ruta del archivo que desea abrir.

Capítulo 15388

En el menú emergente Abrir URL en, seleccione la ubicación donde desea abrir

el archivo:

• Seleccione Ventana principal para abrir el archivo en la misma ventana:

• Seleccione un marco en el que se abrirá el archivo.

Nota: Si el marco deseado no aparece en el menú emergente Abrir URL en, cierre el

cuadro de diálogo Insertar menú de salto y asigne un nombre al marco. Para obtener

información sobre la asignación de nombres a marcos, consulte “Configurar

propiedades de marcos” en la página 219.

6 Para añadir un botón Ir en lugar de un mensaje de selección de menú: Bajo

Opciones, seleccione la opción Insertar botón Ir tras el menú.

7 Para añadir elementos de menú adicionales, haga clic en el botón más (+) y

repita los pasos 3 a 6 de este procedimiento.

8 Haga clic en Aceptar.

Editar elementos del menú de salto

Para realizar cambios en los elementos del menú de salto, utilice el inspector de

propiedades o el panel Comportamientos. Puede cambiar el orden de la lista o el

archivo con el que se vincula un elemento. También puede añadir, eliminar o

renombrar un elemento.

Utilice el panel Comportamientos para cambiar la ubicación en la que se abre un

archivo vinculado o para añadir o cambiar un mensaje de selección de menú

(consulte “Menú de salto” en la página 480).

Para editar un elemento del menú de salto mediante el inspector de propiedades:

1 En el inspector de propiedades, elija Ventana > Propiedades.

2 En la vista de Diseño de la ventana de documento, haga clic en el objeto de

menú de salto para seleccionarlo.

El icono Lista/menú aparecerá en el inspector de propiedades.

3 En el inspector de propiedades, haga clic en el botón Valores de lista.

4 Realice cambios en los elementos del menú y, a continuación, haga clic en

Aceptar.

Crear vínculos y navegar 389

Solucionar problemas de menús de salto

Cuando el usuario selecciona un elemento del menú de salto no puede volver a

seleccionarlo si regresa a esa página o si el campo Abrir URL en especiﬁca un

marco. Hay dos formas de solucionar este problema:

• Utilice un mensaje de selección de menú, como una categoría, o instrucciones

para el usuario, como “Elija uno”. El mensaje de selección de menú vuelve a

seleccionarse automáticamente después de cada selección del menú.

• Utilice un botón Ir, que permite al usuario volver a visitar el vínculo

seleccionado actualmente.

Nota: Seleccione una sola de estas opciones por menú de salto, ya que se aplican al

menú de salto completo.

Crear barras de navegación

Una barra de navegación se compone de una imagen o un conjunto de imágenes

cuya visualización cambia según las acciones que realiza el usuario. Las barras de

navegación permiten desplazarse fácilmente entre las páginas y los archivos de un

sitio.

Antes de usar el comando Insertar barra de navegación, cree un conjunto de

imágenes para los estados que se mostrarán con cada elemento de navegación. Un

elemento de barra de navegación se puede considerar como un botón, ya que la

hacer clic en él, lleva al usuario a otra página.

Capítulo 15390

Un elemento de barra de navegación puede tener cuatro estados:

• Arriba: la imagen que aparece cuando el usuario aún no ha hecho clic en el

elemento o interactuado con él. Por ejemplo, parece como si no se hubiera

hecho clic en el elemento que se encuentra en este estado.

• Sobre: la imagen que aparece cuando el puntero se mueve sobre la imagen.

Cambia la apariencia del elemento (por ejemplo, puede aparecer más claro)

para indicar a los usuarios que pueden interactuar con él.

• Abajo: la imagen que aparece después de hacer clic en el elemento. Por ejemplo,

cuando un usuario hace clic en un elemento, se carga una nueva página y la

barra de navegación sigue mostrándose, pero el elemento en el que se ha hecho

clic aparece oscurecido para indicar que se ha seleccionado.

• Sobre mientras abajo: la imagen que aparece cuando el puntero pasa sobre la

imagen Abajo después de haber hecho clic en el elemento. Por ejemplo, el

elemento puede aparecer atenuado o gris. Puede utilizar este estado para indicar

visualmente a los usuarios que no pueden volver a hacer clic en el elemento

mientras se encuentren en esta parte del sitio.

No es necesario incluir imágenes de barra de navegación para los cuatro estados.

Por ejemplo, es posible que sólo necesite los estados Arriba y Abajo.

Puede crear una barra de navegación, copiarla en otras páginas del sitio, utilizarla

con marcos y editar los comportamientos de la página para mostrar distintos

estados a medida que accede a las páginas.

Crear vínculos y navegar 391

Insertar una barra de navegación

Cuando inserte una barra de navegación, asigne un nombre a los elementos de la

barra y seleccione las imágenes correspondientes.

Para crear una barra de navegación:

1 Lleve a cabo una de estas operaciones:

• Elija Insertar > Imágenes interactivas > Barra de navegación.

• En la categoría Común del panel Objetos, seleccione Insertar barra de

navegación.

Aparecerá el cuadro de diálogo Insertar barra de navegación.

2 En el campo Nombre de elemento, introduzca un nombre para el elemento de

la barra de navegación. Por ejemplo, Principal.

Cada elemento corresponde a un botón con una serie de hasta cuatro imágenes

de estado. Los nombres de elemento aparecen en la lista Elementos de barra de

navegación. Utilice los botones de ﬂecha para organizar los elementos en la

barra de navegación.

Capítulo 15392

Seleccione las opciones de estado de la imagen para este elemento (deberá

seleccionar una imagen Arriba; los demás estados de la imagen son opcionales):

• En el campo Imagen arriba, haga clic en Examinar para seleccionar la imagen

que desea mostrar inicialmente.

• En el campo Sobre imagen, haga clic en Examinar para seleccionar la imagen

que desea mostrar cuando el usuario mueva el puntero sobre el elemento

cuando se muestre la imagen Arriba.

• En el campo Imagen abajo, haga clic en Examinar para seleccionar la imagen

que desea mostrar después de que el usuario haga clic en el elemento.

• En el campo Sobre imagen mientras imagen abajo, haga clic en Examinar para

seleccionar la imagen que desea mostrar cuando el usuario mueva el puntero

sobre la imagen Abajo.

• En el campo Al hacerse clic, ir a URL, seleccione una ubicación en la que se

abrirá el archivo vinculado. Para ello, lleve a cabo uno de estos procedimientos:

• Seleccione Ventana principal para abrir el archivo en la misma ventana:

• Seleccione un marco en el que se abrirá el archivo.

Nota: Si el marco deseado no aparece en el menú emergente, cierre el cuadro de

diálogo Insertar barra de navegación y asigne un nombre al marco. Para obtener

información sobre la asignación de nombres a marcos, consulte “Configurar

propiedades de marcos” en la página 219.

4 Seleccione las opciones para cargar la imagen:

• La opción Carga previa de imágenes transﬁere las imágenes cuando se carga la

página. Si esta opción no está seleccionada, es posible que se produzca una

demora cuando el usuario mueva el puntero sobre la imagen de sustitución.

• Seleccione Mostrar “Imagen abajo” inicialmente para que aparezca el elemento

seleccionado en su estado Abajo, en lugar de hacerlo en su estado Arriba

predeterminado, cuando se abre la página. Por ejemplo, cuando se carga la

página principal, el botón “Principal” de la barra de navegación deberá

encontrarse en su estado Abajo.

Cuando esta opción está seleccionada, aparece un asterisco después del

elemento en la lista Elementos de barra de navegación.

5 Bajo Insertar, seleccione una de estas opciones:

• Para insertar los elementos de la barra de navegación vertical u horizontalmente

en el documento, utilice el menú emergente Insertar.

• Para insertar los elementos de la barra de navegación en una tabla, active la

casilla de veriﬁcación Usar tablas.

Crear vínculos y navegar 393

Haga clic en el botón más (+) para añadir otro elemento a la barra de

navegación y, a continuación, siga los pasos 2 a 5 hasta que haya deﬁnido todos

los elementos.

7 Haga clic en Aceptar.

Modificar una barra de navegación

Una vez creada una barra de navegación para un documento, puede añadir o

quitar imágenes de la barra utilizando el comando Modiﬁcar barra de navegación.

Puede emplear este comando para cambiar una imagen o un conjunto de

imágenes, para determinar qué archivo se abre cuando se hace clic en un elemento,

para seleccionar otra ventana o marco para abrir un archivo o para reordenar las

imágenes.

Para modificar una barra de navegación:

1 Elija Modiﬁcar > Barra de navegación.

2 En la lista Elementos de barra de navegación, seleccione el elemento que desea

editar.

3 Realice las modiﬁcaciones que desee y haga clic en Aceptar.

Adjuntar comportamientos a vínculos:

Puede adjuntar un comportamiento a cualquier vínculo de un documento. Puede

emplear los comportamientos siguientes a la hora de insertar elementos vinculados

a los documentos. Para obtener más información, consulte “Adjuntar un

comportamiento” en la página 461.

Definir texto de barra de estado determina el texto de un mensaje y lo muestra en

la barra de estado, que se encuentra en la parte inferior de la ventana del

navegador. Por ejemplo, puede usar esta acción para describir el destino de un

vínculo en la barra de estado en lugar de mostrar el URL al que está asociado.

Consulte “Deﬁnir texto de barra de estado” en la página 489.

Abrir ventana del navegador sirve para abrir un URL en una nueva ventana. Puede

especiﬁcar las propiedades de la nueva ventana, incluidos su tamaño, sus atributos

(si se puede cambiar su tamaño, si tiene barra de menús, etc.) y su nombre.

Consulte “Abrir ventana del navegador” en la página 481.

Menú de salto sirve para editar un menú de salto. Puede cambiar la lista de menús,

especiﬁcar otro archivo vinculado o cambiar la ubicación del navegador en el que

se abre el documento vinculado. Consulte “Menú de salto” en la página 480.

Capítulo 15394

Definir Imagen de barra de navegación permite cambiar el comportamiento de

una barra de navegación. Utilícelo para personalizar la visualización de las

imágenes en una barra de navegación. Por ejemplo, cuando el puntero se

encuentra sobre parte de la barra de navegación, cambia la presentación de otras

imágenes de la barra o del documento. Consulte “Deﬁnir Imagen de barra de

navegación” en la página 485.

395

CAPÍTULO 16

Reutilizar contenido con plantillas y

.............................................................................................................

bibliotecas

El panel Activos (consulte “Administrar e insertar activos” en la página 229)

proporciona acceso a todos los activos de su sitio. Dreamweaver proporciona dos

categorías “vinculadas” de activos: plantillas y bibliotecas. Las páginas que usan un

activo vinculado se actualizan automáticamente cuando se cambia el activo vinculado.

Las plantillas y bibliotecas de Dreamweaver pueden ayudarle a crear páginas Web

con un diseño coherente. El uso de plantillas y bibliotecas también facilita el

mantenimiento de sitios Web, ya que puede rediseñar un sito y cambiar cientos de

páginas en cuestión de segundos.

Una plantilla es un documento que sirve para crear múltiples páginas con el

mismo diseño. Al crear una plantilla, podrá indicar qué elementos de la página

deberán permanecer constantes (no editables o bloqueados) en los documentos

basados en esa plantilla, y qué elementos podrán modiﬁcarse.

Por ejemplo, si usted publica una revista electrónica, es muy probable que el

diseño de la cabecera y el diseño general no cambien de un número al siguiente, ni

incluso de un artículo de la revista al que ocupará el mismo lugar en el siguiente

número, pero el título y los contenidos de cada artículo serán diferentes. El

diseñador puede crear el diseño de la página de un artículo de la revista con texto

marcador de posición en los lugares en donde irán el título y el contenido (y con

esas regiones marcadas como editables); entonces, el diseñador puede guardar ese

diseño como plantilla. La persona que componga el nuevo número de la revista

creará una nueva página basada en la plantilla, y sustituirá el texto marcador de

posición con el título y el texto reales del nuevo artículo.

Puede modiﬁcar una plantilla incluso después de haberla usado para crear

documentos. Cuando se modiﬁca una plantilla, las regiones bloqueadas (no

editables) de los documentos basados en la plantilla se actualizan para incorporar

los cambios que se han realizado en la plantilla.

Capítulo 16396

Nota: Si se abre un archivo de plantilla, se puede editar todo lo que hay en ese archivo,

independientemente de que esté marcado como editable o bloqueado. Si se abre un

documento basado en una plantilla, sólo se pueden editar las regiones que están marcadas

como editables. Por ello, los términos editable y bloqueado indican si una región de un

documento basado en una plantilla es editable, no indican que la región sea editable en la

propia plantilla.

Las plantillas son la mejor solución para los casos en que se desea que un conjunto

de páginas tenga un diseño idéntico; en esas situaciones, interesa deﬁnir

previamente el diseño de ese conjunto de páginas, y añadir después el contenido.

Si solamente se desea que esas páginas tengan los mismos encabezados y pies, pero

con distinto diseño entre ambos, pueden usarse elementos de biblioteca para

almacenar los encabezados y los pies de página. (Los elementos de biblioteca son

elementos de página almacenados que se pueden reutilizar en múltiples páginas;

igual que con las plantillas, se pueden actualizar todas las páginas que usan un

elemento de biblioteca siempre que se cambia el contenido del elemento. Para

obtener más información, consulte “Crear, administrar y editar elementos de

biblioteca” en la página 415.) Es importante tener en cuenta que para páginas

creadas con plantillas, no se pueden convertir las tablas en capas ni las capas en

tablas.

Nota: El uso de una plantilla puede limitar sus cambios posteriores de diseño y formateo.

Si posteriormente prevé realizar cambios importantes de diseño en sus páginas, puede ser

más conveniente emplear elementos de biblioteca en lugar de plantillas.

Las plantillas son especialmente útiles cuando se trabaja en colaboración con otros

usuarios y hay un diseñador que controla los diseños de página mientras que otras

personas añaden contenido a las páginas pero no están autorizadas a cambiar el

diseño.

Dreamweaver también proporciona otros tipos de contenidos reutilizables: los

server-side includes y los elementos de biblioteca. Puede utilizar estos medios para

manipular el contenido que aparece en todas las páginas del sitio (como el

encabezado o el pie de página) o para el contenido que aparece sólo en unas pocas

páginas pero que debe actualizarse con frecuencia (como los titulares de noticias o

las ofertas especiales). Estos medios son adecuados para diversos tipos de sitios:

• Los server-side includes sólo pueden utilizarse para sitios que vayan a verse

desde servidores, no para sitios que se vean desde sistemas locales sin servidor.

Pueden verse solamente en servidores que estén conﬁgurados para procesar

server-side includes. (Pregunte al webmaster o al administrador del sistema si su

servidor Web es compatible con server-side includes.) Consulte “Usar server-

side includes” en la página 423.

• Los elementos de biblioteca pueden usarse en sitios que se vean desde sistemas

locales y también en aquellos que residen en un servidor. En los sitios que se

ven desde sistemas locales, sin servidor, deben usarse elementos de biblioteca en

lugar de server-side includes. Consulte “Crear, administrar y editar elementos

de biblioteca” en la página 415.

Reutilizar contenido con plantillas y bibliotecas 397

Crear plantillas

Puede crear una plantilla a partir de un documento HTML existente y después

modiﬁcarla para que se ajuste a sus necesidades, o bien puede crear una plantilla

comenzando de cero a partir de un documento HTML en blanco.

Dreamweaver guarda las plantillas con la extensión de archivo .dwt en una carpeta

llamada Templates en la carpeta raíz local de su sitio. Si no existe todavía la carpeta

Templates, Dreamweaver la creará al guardar una plantilla nueva.

Nota: No saque las plantillas de la carpeta Templates , ni guarde en ella archivos que no

sean plantillas. Tampoco debe sacar la carpeta Templates de su carpeta raíz local. Hacerlo

ocasiona errores en las rutas de las plantillas.

Si desea almacenar información adicional acerca de una plantilla, como el nombre de

la persona que la creó, la fecha en que se modiﬁó por última vez o la explicación de

algunas decisiones sobre su diseño, puede crearse un archivo de Design Notes para la

plantilla. Los documentos basados en una plantilla no heredan las Design Notes de la

plantilla. (Para obtener más información, consulte “Design Notes” en la página 138.

La mayoría de las operaciones con plantillas solamente están disponibles cuando la

vista de Diseño está activa. Si un comando relacionado con plantillas está

atenuado cuando la vista de Código está activa, haga clic en la vista de Diseño.

Para guardar un documento existente como plantilla:

1 Elija Archivo > Abrir y seleccione un documento.

2 Cuando se abra el documento, elija Archivo > Guardar como plantilla.

Nota: Si el documento está basado en una plantilla, primero debe separarlo de la

plantilla para poder guardar el propio documento como plantilla.

3 En el cuadro de diálogo que aparece a continuación, seleccione un sitio en el

menú emergente e introduzca un nombre para la plantilla en el cuadro Guardar

como.

4 Haga clic en Guardar.

El archivo de plantilla se guarda en la carpeta Templates con la extensión .dwt.

Para crear una plantilla nueva en blanco:

1 Elija Ventana > Plantillas.

Aparecerá el panel Activos, con la categoría Plantillas seleccionada.

2 En el panel Activos, haga clic en el botón Plantilla nueva situado en la parte

inferior del panel Activos.

Se añadirá una plantilla nueva sin título a la lista de plantillas del panel.

3 Con la plantilla aún seleccionada, introduzca un nombre para ella.

Capítulo 16398

Para editar la plantilla en la que está basado un documento:

Elija Modiﬁcar > Plantillas > Abrir plantilla adjunta.

Para editar una plantilla:

1 Elija Ventana > Plantillas.

Aparecerá el panel Activos, con la categoría Plantillas seleccionada. En el panel

inferior del panel Activos muestra una lista de todas las plantillas disponibles

para el sitio. El panel superior muestra una vista previa de la plantilla

seleccionada.

2 En el panel Activos, lleve a cabo una de estas operaciones:

• Haga doble clic en el nombre de la plantilla.

• Haga clic en el botón Editar plantilla que se encuentra en la parte inferior del

panel Activos.

3 Edite la plantilla en la ventana de documento. Cree en la plantilla las regiones

editables que desee (consulte “Deﬁnir las regiones editables de una plantilla” en

la página 401).

4 Guarde la plantilla editada eligiendo Guardar > archivo.

Nota: Si no se ha definido ninguna región editable, el sistema le advertirá en este

momento que la plantilla no contiene regiones editables. La plantilla se puede guardar

de todas formas, y se puede modificar aunque no contenga regiones editables, pero no

se podrán modificar documentos basados en la plantilla hasta que se haya creado una

región editable en la misma.

Para renombrar una plantilla en el panel Activos:

1 Haga clic una vez en el nombre de la plantilla para seleccionarla.

2 Tras una breve pausa, vuelva a hacer clic.

3 Cuando se pueda editar el nombre, introduzca el que desee.

Nota: Este método de renombrar funciona igual que el cambio de nombre de archivos

en el Explorador de Windows (Windows) o el Finder (Macintosh). Al igual que en el

Explorador de Windows y el Finder, no olvide hacer una breve pausa entre los dos clics

del ratón. No haga doble clic en el nombre, puesto que se abriría la plantilla para ser

editada.

4 Haga clic en cualquier lugar, o presione Entrar (Windows) o Retorno

(Macintosh).

Reutilizar contenido con plantillas y bibliotecas 399

Dreamweaver pregunta al usuario si desea actualizar los documentos basados en

esta plantilla.

• Para actualizar todos los documentos del sitio basados en esta plantilla, haga

clic en Actualizar.

• Para que no se actualice ninguno de los documentos basados en esta plantilla,

haga clic en No actualizar. Los documentos que se decide no actualizar siguen

estando basados en la misma plantilla (no separados); para actualizarlos más

adelante, abra la plantilla y elija Modiﬁcar > plantillas > Actualizar.

Para eliminar una plantilla:

1 Seleccione la plantilla en el panel Activos.

2 Haga clic en el botón Eliminar y conﬁrme que desea eliminar la plantilla.

(Tenga presente que cuando se elimina una plantilla, no se puede recuperar.)

El archivo de plantilla queda eliminado del sitio. Los documentos que estaban

basados en esta plantilla no se separan de la misma, sino que conservan la

estructura y las regiones editables que tenía la plantilla antes de ser eliminada.

Para convertir un documento de este tipo en un archivo HTML normal sin

regiones editables ni bloqueadas, use el comando Modiﬁcar > plantillas >

Separar de plantilla. Para obtener más información, consulte “Separar un

documento de una plantilla” en la página 410.

Configurar propiedades de página de plantilla

Los documentos creados a partir de una plantilla heredan las propiedades de

página de la plantilla, salvo el título de la página. En un documento basado en una

plantilla, podrá cambiar el título del documento, pero se ignorarán los cambios

que realice en las demás propiedades de página. Si se aplica una plantilla a un

documento y luego es necesario cambiar las propiedades de página del

documento, hay que modiﬁcar las propiedades de página de la plantilla y luego

actualizar las páginas que utilizan la plantilla. (Lo que signiﬁca que se modiﬁcan

las propiedades de página de todos los documentos basados en esa plantilla.)

Para modificar las propiedades de página de la plantilla:

1 Abra el archivo de la plantilla y elija Modiﬁcar > Propiedades de página.

2 Especiﬁque las opciones deseadas para la página y haga clic en Aceptar.

3 Actualice las páginas basadas en la plantilla, si hay alguna; para obtener más

información, consulte “Actualizar páginas basadas en una plantilla” en la

página 411.

Para conocer más detalles acerca de las propiedades de página, consulte

“Conﬁgurar las propiedades del documento” en la página 156.

Capítulo 16400

Vínculos en plantillas

Para crear un vínculo en un archivo de plantilla, utilice el icono de la carpeta o el

icono de señalización de archivo en el inspector de propiedades; no escriba el

nombre del archivo con el que desea establecer el vínculo. Si lo escribe, el vínculo

puede no funcionar correctamente. La siguiente información explica por qué se

produce este problema y ofrece un ejemplo de una situación en la que suele

ocurrir.

Cuando se crea una archivo de plantilla por el procedimiento de abrir una página

existente y luego guardar esa página como plantilla, Dreamweaver asegura que

todos los vínculos de la página continúan señalando a los mismos archivos que

señalaban antes. Como las plantillas se guardan en la carpeta especial de plantillas,

la ruta mostrada por un vínculo relativo a un documento cambia cuando la página

se guarda como plantilla. Este cambio no causa problemas; cuando se crea un

documento nuevo basado en esa plantilla, y luego se guarda, todos los vínculos

relativos a ese documento nuevo se actualizan para que continúen señalando a los

archivos correctos, como cabría esperar.

Sin embargo, cuando se añade un vínculo nuevo relativo al documento a un

archivo de plantilla, si se escribe la ruta en el cuadro de texto del vínculo en el

inspector de propiedades, es fácil introducir por error la ruta equivocada. La ruta

correcta es la ruta desde la carpeta de Plantillas hasta el documento con el que se

está estableciendo el vínculo, no la ruta desde la carpeta del documento.

Para evitar este problema, utilice el icono de la carpeta o el icono de señalización

de archivo para seleccionar los archivos con los que establecer el vínculo. Para

obtener más información acerca de cómo usar el icono de señalización de archivos,

consulte “Crear vínculos con documentos utilizando el inspector de propiedades y

el icono de señalización de archivo” en la página 377.

El siguiente ejemplo ilustra el problema. Supongamos un sitio en el que hay una

serie de páginas del catálogo individuales (llamadas gadgets.html, gewgaws.html y

thingamajigs.html) que están basadas en una plantilla llamada Catalog_Page.dwt.

La estructura de carpetas del sitio es la siguiente:

Reutilizar contenido con plantillas y bibliotecas 401

Supongamos que deseamos que todas las páginas basadas en la plantilla contenga

un vínculo que señale al archivo home.html. Abrimos la plantilla Catalog_Page

para añadir el vínculo y seleccionamos la imagen que deseamos adjuntar al

vínculo. Pero si escribimos home.html en el cuadro de texto del vínculo en el

inspector de propiedades, nos encontraremos con el problema del vínculo realtivo

al documento: al guardar la plantilla editada, los documentos basados en ella

señalarán a un lugar equivocado, porque el vínculo de la plantilla se interpreta

como relativo a la carpeta Templates en lugar de interpretarse como relativo a la

carpeta Catalogue. O sea, que el vínculo home.html de la plantilla señala a

home.html de la carpeta Templates en lugar de señalar la ruta ../Catalog/

home.html. Cuando Dreamweaver actualiza los documentos basados en la

plantilla, modiﬁca los vínculos relativos a los documentos; para los documentos de

la carpeta Catalogue, un vínculo con ../Catalog/home.html en la plantilla se

convierte en home.html, pero un vínculo con home.html en la plantilla se

convierte en ../Templates/home.html.

Si se selecciona el archivo home.html utilizando el icono de la carpeta o el icono

de señalización de archivos en lugar de escribir su nombre manualmente,

Dreamweaver actualiza automáticamente todos los documentos basados en la

plantilla para que usen las rutas relativas correctas con home.html.

Nota: En algunos casos (como rutas de archivos en manejadores de eventos en plantillas)

no es posible usar el icono de la carpeta ni el icono de señalización de archivos; en estos

casos, compruebe que introduce la ruta correcta a mano.

Definir las regiones editables de una

plantilla

En una plantilla, las regiones editables son las partes de la página que se pueden

cambiar en los archivos basados en esa plantilla. Por ejemplo, el texto de un

artículo de un boletín aparecerá en una región editable, para que cada artículo

pueda contener texto distinto. Las regiones bloqueadas (no editables) son las

partes del diseño de la página que permanecen constantes de una página a otra.

Al crear una plantilla nueva, todas sus regiones están bloqueadas; por ello, para

que la plantilla sea útil, es preciso hacer editables algunas regiones

(desbloquearlas).

Al editar la plantilla en sí, podrá realizar cambios tanto en las regiones editables

como en las bloqueadas. Sin embargo, en un documento basado en una plantilla,

sólo podrá realizar cambios en las regiones editables del documento; no podrá

modiﬁcar las regiones bloqueadas del documento.

Nota: Al asignar un nombre a una región, no podrá utilizar los siguientes caracteres:

comillas simples y dobles (‘ “), paréntesis angulares (< >), y ampersands (&).

Capítulo 16402

Para definir el contenido existente de la plantilla como región editable:

1 En la plantilla, seleccione el texto o el contenido que desee convertir en una

región editable.

2 Lleve a cabo una de estas operaciones:

• Elija Modiﬁcar > Plantillas > Nueva región editable.

• Haga clic con el botón derecho del ratón (Windows) o haga clic manteniendo

presionada la tecla Control (Macintosh) en el texto seleccionado y elija Nueva

región editable en el menú contextual.

3 En el cuadro de diálogo Nueva región editable, introduzca un nombre exclusivo

para la región. (No se puede usar el mismo nombre para más de una región

editable en una plantilla determinada.)

La región editable está encerrada en un contorno rectangular resaltado en la

plantilla, con el color de resaltado que esté seleccionado en preferencias. Una

ﬁcha en el ángulo superior izquierdo de la región muestra el nombre de la

misma.

Puede marcar una tabla entera o una celda individual de una tabla como

editable; no obstante, no podrá marcar varias celdas de una tabla como una sola

región editable. Tenga en cuenta que Dreamweaver no distingue entre marcar la

celda de una tabla como editable y marcar el contenido de la celda como

editable.

Las capas y el contenido de las capas son elementos distintos; al hacer editable

un capa es posible cambiar la posición de la capa así como su contenido,

mientras que al hacer editable el contenido de una sólo puede cambiarse el

contenido de la capa, pero no su posición. Para seleccionar el contenido de la

capa, haga clic en la capa y elija Edición > Seleccionar todo; para seleccionar la

propia capa, compruebe que se muestren los elementos invisibles, luego haga

clic en el icono que representa la ubicación de la capa. Para obtener más

información sobre capas, consulte “Usar capas dinámicas” en la página 427.

Nota: Si ha hecho editable el contenido de una capa y después desea que también su

posición sea editable, tiene que eliminar la región editable de alrededor del contenido

para poder marcar la propia capa como editable. Consulte “Bloquear una región

editable” en la página 407.

Para insertar una región editable vacía en una plantilla:

1 En la plantilla, coloque el punto de inserción en la posición en la que desea

insertar la región editable.

2 Elija Modiﬁcar > Plantillas > Nueva región editable.

Reutilizar contenido con plantillas y bibliotecas 403

En el cuadro de diálogo Nueva región editable, introduzca un nombre para la

región.

El nombre de la región, encerrado entre llaves ({}), se inserta en la plantilla

como un marcador de posición encerrado en un contorno rectangular del color

de resaltado correspondiente.

Al aplicar la plantilla a un documento, se pueden seleccionar las llaves y el

nombre de la región y sustituirlos por texto, imágenes u otro contenido.

Definir preferencias de la plantilla

Puede utilizar las preferencias de resaltado de Dreamweaver para personalizar el

color de resaltado de los contornos de alrededor de las regiones editables y

bloqueadas de una plantilla. El color de la región editable aparece en la propia

plantilla y en los documentos basados en la plantilla; el color de la región

bloqueada aparece solamente en los documentos basados en la plantilla.

Para cambiar el color de resaltado de la plantilla:

1 Elija Edición > Preferencias y seleccione la categoría Resalto.

2 Haga clic en el cuadro de color de Regiones editables y seleccione un color de

resaltado utilizando el selector de colores ( o introduzca el valor hexadecimal

correspondiente al color de resaltado en el cuadro de texto). Repita esta

operación para las Regiones bloqueadas. Para obtener más información acerca

del uso del selector de colores, consulte “Trabajar con colores” en la página 88.

3 Haga clic en la opción Mostrar para activar o desactivar la visualización de estos

colores en la ventana de documento.

4 Haga clic en Aceptar.

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

Elija Ver > Ayudas visuales > Elementos invisibles.

Los colores de resaltado aparecen en la ventana de documento sólo cuando Ver >

Ayudas visuales > Elementos invisibles está activado y las opciones adecuadas

están activadas en preferencias de Resalto.

Nota: Si se están mostrando los elementos invisibles pero los colores de resaltado no, elija

Edición > Preferencias y compruebe que esté seleccionada la opción Mostrar que hay junto

al color de resaltado. Verifique también que el color elegido sea claramente visible sobre el

color de fondo de la página. (Si usted padece daltonismo, puede tener que cambiar el valor

predeterminado del color de resaltado a otro color más visible.)

Capítulo 16404

Ver regiones editables y bloqueadas

En plantillas y documentos basados en plantillas, las regiones editables aparecen

en la Vista de Diseño de la ventana de documento rodeadas por contornos

rectangulares del color de resaltado correspondiente. En la parte superior

izquierda de cada región editable aparece una pequeña ﬁcha, en la que se muestra

el nombre de la región editable.

En las plantillas, solamente las regiones editables están marcadas con contornos

resaltados. Puede cambiar tanto el contenido editable como el bloqueado.

Es posible

modificar tanto

las regiones

bloqueadas

como las

editables

Las regiones editables

están rodeadas por

contornos resaltados

Reutilizar contenido con plantillas y bibliotecas 405

En los documentos basados en plantillas, además de los contornos de las regiones

editables, toda la página aparece rodeada por un contorno de otro color, con una

ﬁcha en la parte superior derecha en la que aparece el nombre de la plantilla en la

que el documento está basado. Este rectángulo resaltado se muestra para

recordarle que el documento está basado en una plantilla y que no se puede

cambiar nada que esté fuera de las regiones editables.

Nota: Si se intenta editar una región bloqueada en un documento basado en una plantilla

cuando se desactiva el resaltado, el puntero del ratón cambia para indicar que no se puede

hacer clic en una región bloqueada.

Ver código HTML editable y bloqueado

El contenido editable se marca en HTML mediante los comentarios de

Dreamweaver #BeginEditable y #EndEditable. Todo lo que hay entre esos

comentarios es editable. El código HTML para una región editable denominada

Edit_Region tendría el siguiente aspecto:

{Edit_Region}

Sólo es posible

modificar las

regiones editables

Límite resaltado

alrededor de la

página

Capítulo 16406

El código HTML para una tabla editable denominada Edit_Table tendría el

siguiente aspecto:

<tr>

</tr>

</table>

En las plantillas, las regiones editables no están resaltadas en la vista Código de la

ventana de documento (o el inspector de códigos); puede modiﬁcarse tanto el

código HTML editable como el bloqueado.

Para documentos basados en plantillas, si la aplicación de color a la sintaxis está

activada, las regiones bloqueadas se muestran resaltadas en los editores de código.

(Para obtrener información sobre la activación de la aplicación de color a la

sintaxis, consulte “Conﬁgurar las opciones de la vista de Código (o el inspector de

código)” en la página 349.) Sólo podrá realizar cambios en el código HTML

editable (no resaltado).

Nota: Dreamweaver no le impide escribir en las regiones bloqueadas del inspector de

códigos o la vista Código de la ventana de documento. Sin embargo, Dreamweaver

descarta todos los cambios que se realicen en las regiones bloqueadas, por lo que se debe

tener cuidado para escribir solamente en las regiones editables.

Sólo es posible

modificar el código

HTML editable

El código HTML

bloqueado está

resaltado

Reutilizar contenido con plantillas y bibliotecas 407

Bloquear una región editable

Si ha marcado una región de la plantilla como editable y después desea bloquearla

de nuevo (convertirla en no editable), utilice el comando Quitar región editable.

Nota: No se puede bloquear una región en un archivo basado en una plantilla; solamente

puede bloquearse una región en una plantilla.

Para bloquear una región (convertirla en no editable) de una plantilla:

1 Elija Modiﬁcar > Plantillas > Quitar región editable.

2 Seleccione el nombre de la región de la lista y haga clic en Aceptar.

La región quedará bloqueada. Ya no tendrá nombre (puesto que solamente lo

tienen las regiones editables).

Usar estilos, líneas de tiempo, comportamientos y etiquetas

de la sección Head en plantillas

Los documentos basados en plantillas no admiten plenamente los estilos CSS, las

líneas de tiempo, los comportamientos y las etiquetas de la sección head.

Todos esos elementos insertan información en la sección head de un documento.

Como la sección head de un documento basado en una plantilla está bloqueada

(excepto el título del documento), Dreamweaver no puede insertar una hoja de

estilos ni código JavaScript en ese documento. Para usar esos elementos en un

documento basado en una plantilla, es preciso añadirlos a la plantilla en la que el

documento está basado. (Para que una hoja de estilos en una plantilla sea editable

sin tener que actualizar las páginas cada vez que se modiﬁca la hoja de estilos, debe

usarse una hoja de estilos externa.)

Si no es posible añadir estos elementos a la plantilla, puede separarse el documento

de la plantilla, lo que conveirte en editable a la sección head. Sin embargo, después

de separar el documento de la plantilla, el documento ya no se actualizará cuando

se modiﬁque aquella. Consulte “Separar un documento de una plantilla” en la

página 410.

Para obtener más información sobre estos elementos, consulte “Utilizar hojas de

estilos CSS” en la página 259, “Animar las capas” en la página 446, y “Usar

comportamientos” en la página 457.

Capítulo 16408

Crear documentos basados en plantillas

Puede usar una plantilla como punto de partida para la creación de un nuevo

documento, o aplicarla a un documento existente.

Al crear un documento nuevo basado en una plantilla, puede elegir si desea que el

documento permanezca adjuntado a la plantilla. De forma predeterminada, cuando

se modiﬁca una plantilla, los documentos basados en esa plantilla se actualizan para

reﬂejar los cambios realizados en la misma. Pero se anula la selección de la opción

Actualizar página cuando cambie la plantilla en el cuadro de diálogo Nuevo de

plantilla, el nuevo documento se crea como diseño de fondo: una copia de la

plantilla que es un archivo HTML independiente, sin regiones editables ni

bloqueadas. En ese caso, al actualizar la plantilla no se modiﬁca el documento. En

otras palabras, anular la selección de esta opción equivale a crear un nuevo

documento basado en una plantilla y luego separar el documento de la plantilla.

Nota: La opción de no actualizar el documento cuando la plantilla se modifica se incluye

para aquellos usuarios que desean utilizar las plantillas como archivos de diseño de fondo:

un punto de partida en cualquier momento para crear documentos completamente

independientes. Si desea utilizar el comportamiento de plantillas predeterminado de

Dreamweaver, en el que los documentos basados en una plantilla se actualizan cuando

esta se modifica, deje la opción seleccionada.

Para crear un nuevo documento basado en una plantilla, lleve a cabo una de las

siguientes operaciones:

• Elija Archivo > Nuevo de plantilla. En el cuadro de diálogo que aparece,

seleccione una plantilla. (Si no desea que su nuevo documento se actualice

cuando se modiﬁque la plantilla, anule la selección de Actualizar página cuando

cambie la plantilla.) Luego haga clic en Seleccionar.

• Elija Archivo> Nuevo para crear un documento nuevo, y luego aplicarle una

plantilla seleccionando una en la categoría Plantillas del panel Activos y

haciendo clic en el botón Aplicar. (Como alternativa, puede arrastrar una

plantilla desde el panel Activos hasta el documento.)

Para aplicar una plantilla a un documento existente de Dreamweaver:

Abra el documento. A continuación, lleve a cabo una de estas operaciones:

• Haga clic en la Vista de Diseño de la ventana de documento, luego elija

Modiﬁcar > Plantillas > Aplicar plantilla a página. Elija una plantilla de la lista y

haga clic en Seleccionar.

• Seleccione la plantilla en la categoría Plantillas del panel Activos y haga clic en

el botón Aplicar.

• Arrastre la plantilla desde la categoría Plantillas del panel Activos hasta la Vista

de Diseño de la ventana de documento.

Nota: Decir que una plantilla se ha aplicado a un documento equivale a decir que ese

documento está basado en la plantilla. Ambas frases pueden usarse indistintamente.

Reutilizar contenido con plantillas y bibliotecas 409

Cuando se aplica una plantilla a un documento existente que aún no está basado

en ninguna plantilla, Dreamweaver convierte el documento en una copia del

archivo de la plantilla, colocando el material de la sección body del documento

existente en una sola región editable que el usuario puede elegir.

Nota: Los comportamientos y otras secuencias de comandos del documento existente

que están asociados con el contenido de

body permanecen en la sección head del

documento una vez que se le ha aplicado una plantilla. Otros elementos de la sección

head

del documento existente, como las

meta etiquetas, son descartados cuando se aplica la

plantilla.

Cuando se aplica una plantilla nueva a un documento existente que aún no está

basado en otra plantilla, Dreamweaver convierte el documento en una copia del

archivo de la plantilla nueva, colocando el material de la sección del cuerpo del

documento existente en las regiones correspondientes de la plantilla nueva siempre

que sea posible. Dreamweaver lleva a cabo este proceso comparando los nombres

de las regiones editables del documento con los nombres de las regiones editables

de la plantilla nueva; para cada nombre de región que coincide, Dreamweaver

coloca el contenido existente de esa región en la nueva región con el mismo

nombre.

Por ejemplo, suponga que desea probar un nuevo aspecto de su sitio pero todavía

no está en disposición de cambiar todas las páginas. Se puede crear una plantilla

nueva con el nuevo formato y diseño, asignando a las regiones editables de la

plantilla nueva los mismos nombres de las regiones editables de la plantilla

antigua; así, al aplicar la plantilla nueva a las páginas, el material de las regiones

editables de la página se colocará en las regiones editables correspondientes del

nuevo diseño.

Si en la plantilla antigua hay regiones editables a las cque no corresponde ninguna

región en la plantilla nueva, el cuadro de diálogo Elegir región editable para

contenido huérfano le preguntará a qué región editable de la plantilla nueva debe

llevarse el contenido “huérfano”. Elija el nombre de una región editable; todo el

contenido de las regiones editables que no tenían región correspondiente se

adjuntará a la región que usted elija. (Todo el contenido huérfano del contenido

existente debe ir a una sola región editable.) Si selecciona el elemento (Ninguna)

en lugar del nombre de una región, el contenido de las regiones del documento

existente que carecen de región correspondiente es desechado.

Si cree que las regiones editables de su documento coinciden con las regiones

editables de la plantilla nueva que está aplicando, pero el cuadro de diálogo de

contenido huérfano aparece de todas formas, puede hacer clic en Cancelar y la

plantilla nueva no se aplicará al documento. Entonces, puede examinar las

regiones editables del documento y las regiones editables de la plantilla nueva para

identiﬁcar cuales son las regiones editables del documento que no aparecen en la

plantilla nueva. Luego puede añadir nuevas regiones con esos nombres a la

plantilla nueva.

Capítulo 16410

Todas las regiones editables nuevas que haya en la plantilla nueva (y que no

estuvieran en la plantilla antigua) se añaden al documento. Las nuevas regiones

contienen el texto marcador de posición predeterminado de la plantilla nueva.

Una vez aplicada una plantilla a un documento, si los resultados no son los

esperados, puede usar Edición > Deshacer aplicar plantilla para recuperar el estado

del documento antes de aplicarle la plantilla.

Localizar las regiones editables de un documento

Todas las regiones editables del cuerpo de una plantilla se enumeran en la parte

inferior del submenú Modiﬁcar > Plantillas. Use esta lista para seleccionar y editar

las regiones.

Para localizar una región editable y seleccionarla en el documento:

Elija Modiﬁcar > Plantillas, y elija el nombre de la región en la lista que aparece al

ﬁnal de ese submenú.

La región se seleccionará en el documento. Puede escribir el nuevo texto en

la región, o hacer clic en ella para editar su contenido.

Separar un documento de una plantilla

Para realizar cambios tanto en las regiones bloqueadas como en las regiones

editables de una página que usa una plantilla, en primer lugar deberá separar la

página de la plantilla. Una vez separada, la página se convierte en un documento

normal sin regiones editables ni bloqueadas, y sin vínculo con ninguna plantilla.

Tenga en cuenta que esto signiﬁca que la página ya no se actualizará cuando se

actualice la plantilla.

Para separar un documento de una plantilla:

1 Abra el documento que desea separar.

2 Elija Modiﬁcar > Plantillas > Separar de plantilla.

La página se separará de la plantilla y todas las regiones se convertirán en

editables.

Reutilizar contenido con plantillas y bibliotecas 411

Actualizar páginas basadas en una plantilla

Al realizar un cambio en una plantilla, Dreamweaver le pedirá que actualice las

páginas basadas en la plantilla. También puede usar los comandos de actualización

para actualizar manualmente la página actual o el sitio completo. Ejecutar los

comandos de actualización es lo mismo que volver a aplicar una plantilla.

Para obtener información sobre edición de plantillas, consulte “Crear plantillas”

en la página 397 y “Deﬁnir las regiones editables de una plantilla” en la

página 401.

Para abrir y modificar la plantilla usada para crear el documento actual:

1 Elija Modiﬁcar > Plantillas > Abrir plantilla adjunta.

2 Modiﬁque el contenido de la plantilla que desee. Para modiﬁcar las propiedades

de página de la plantilla, elija Modiﬁcar > Propiedades de la página. (Los

documentos basados en una plantilla heredan las propiedades de página de la

plantilla, salvo el título de la página.)

Para actualizar el documento actual con la versión actual de una plantilla:

Elija Modiﬁcar > Plantillas > Actualizar página actual.

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

concreta:

1 Elija Modiﬁcar > Plantillas > Actualizar páginas.

Aparecerá el cuadro de diálogo Actualizar páginas.

2 En el menú emergente Buscar en, lleve a cabo una de las operaciones siguientes:

• Elija Todo el sitio, y luego seleccione el nombre del sitio en el menú emergente

que aparece al lado. Se actualizarán todas las páginas del sitio seleccionado con

los cambios de sus correspondientes plantillas.

• Elija Archivos que usan, y luego seleccione el nombre de la plantilla en el menú

emergente que aparece al lado. Se actualizarán todas las páginas del sitio actual

que usen la plantilla seleccionada.

3 Asegúrese de que Plantillas está seleccionado en la opción Actualizar. (Para

actualizar elementos de biblioteca al mismo tiempo, asegúrese de que también esté

seleccionada la opción Elementos de biblioteca. Consulte “Crear, administrar y

editar elementos de biblioteca” en la página 415 para obtener más información.)

4 Haga clic en Iniciar.

Dreamweaver actualiza los archivos como se ha indicado. Si se selecciona la

opción Mostrar registro, Dreamweaver proporciona información sobre los

archivos que intenta actualizar, indicando si se han actualizado satisfactoriamente.

Capítulo 16412

Exportar e importar contenido XML

Podemos pensar en un documento basado en una plantilla como un documento

que contiene un conjunto de datos representados por pares de nombres/valores.

Cada par consta del nombre de una región editable y del contenido de esta.

Supongamos, por ejemplo, que la plantilla contiene tres regiones editables:

item_number, item_price e item_color. Se puede describir completamente un

documento basado en esa plantilla citando el nombre de la plantilla y tres pares de

nombres/valores, uno para cada una de las tres regiones editables.

Dreamweaver le permite exportar esos pares de nombres/valores a un archivo

XML para poder trabajar con los datos del documento fuera de Dreamweaver (en

un editor de XML, por ejemplo, en un editor de textos, o incluso en una

aplicación de bases de datos). Y a la inversa, si tenemos un documento XML que

está estructurado adecuadamente, se pueden importar los datos que contiene a un

documento basado en una plantilla de Dreamweaver.

Para exportar las regiones editables de un documento como XML:

1 Elija Archivo > Abrir y abra un documento basado en una plantilla (y que

contenga regiones editables).

2 Elija Archivo > Exportar > Exportar regiones editables como XML.

3 En el cuadro de diálogo XML que aparece a continuación, seleccione una

notación de etiqueta y haga clic en Aceptar.

Consulte “Usar notaciones de etiquetas XML” en la página 414 para obtener

más información.

4 En el cuadro de diálogo que aparece, asigne un nombre al archivo XML y haga

clic en Guardar.

Dreamweaver genera un archivo XML que contiene el material de las regiones

editables del documento. El archivo XML incluye el nombre de la plantilla en

la que está basado el documento, así como el nombre y el contenido de cada

región editable.

Nota: El material que contienen las regiones bloqueadas no se exporta al archivo XML.

Para importar contenido XML:

1 Elija Archivo > Importar > Importar XML a plantilla.

2 Seleccione el archivo XML y haga clic en Abrir.

Dreamweaver crea un nuevo documento basado en la plantilla especiﬁcada en el

archivo XML. Después, rellena el contenido de cada región editable de ese

documento con los datos del archivo XML. El documento resultante aparece en

una nueva ventana de documento. Si no se encuentra la plantilla especiﬁcada,

Dreamweaver le pedirá que seleccione la plantilla que desea usar.

Reutilizar contenido con plantillas y bibliotecas 413

Tenga en cuenta que, si el archivo XML no está conﬁgurado exactamente de la

forma adecuada para Dreamweaver, es posible que no se puedan importar los

datos. Una posible solución a este problema consiste en exportar un archivo XML

ﬁcticio desde Dreamweaver, para tener así un archivo XML exactamente con la

estructura correcta. Luego, bastará con copiar los datos desde el archivo original

XML al archivo exportado XML. El resultado es un archivo XML con la

estructura correcta que contiene los datos adecuados, con todo listo para ser

importado.

XML

XML corresponde a las siglas de Extensible Markup Language (lenguaje de

formato ampliable), un lenguaje de formato para documentos estructurados. Se

puede entender como una generalización de HTML que le permite deﬁnir sus

propias etiquetas. XML deriva de SGML, siglas de Standard Generalized Markup

Language (lenguaje de formato generalizado estándar); al igual que SGML, XML

es un lenguaje para deﬁnir conjuntos de etiquetas y las relaciones establecidas

entre estas.

Las etiquetas XML son semejantes a las etiquetas HTML: constan de un nombre

de etiqueta y de atributos opcionales encerrados entre paréntesis angulares. Al

igual que ocurre con HTML, se utiliza una etiqueta inicial y una etiqueta de cierre

(en la que el nombre de la etiqueta va precedido de una barra invertida) para

marcar el contenido de las etiquetas. Una de las diferencias sintácticas es que en

XML, una etiqueta vacía (una que usa solamente una única etiqueta, como

<img>,

en lugar de una etiqueta inicial y una etiqueta ﬁnal que contienen texto u otro

material) debe terminar con una barra inclinada inmediatamente antes del

corchete angular de cierre. Por ejemplo, una etiqueta <img> en XML podría tener

este aspecto:

El auténtico XML es mucho más estricto y menos permisivo en cuanto a sintaxis

que el HTML; los archivos que no cumplen estrictamente con las normas

sintácticas de XML son rechazados por los analizadores XML.

XML proporciona una forma de marcar cadenas literales, que pueden incluir

etiquetas que no se deben analizar: un elemento denominado sección CDATA, que

incluye una cadena literal entre corchetes rectangulares. Cualquier cosa que haya

dentro de unos corchetes rectangulares no será analizada por el analizador XML.

El código XML exportado por Dreamweaver hace gran uso de secciones CDATA.

La introducción completa al XML queda fuera del ámbito del presente libro. Para

obtener más información sobre XML, consulte “Recursos tecnológicos HTML y

Web” en la página 25.

Capítulo 16414

Usar notaciones de etiquetas XML

Dreamweaver permite exportar contenido XML mediante dos notaciones de

etiquetas distintas: etiquetas de nombres de regiones editables o etiquetas XML

estándar de Dreamweaver. Elija la notación más adecuada con la forma en que se

ha incorporado el contenido XML a su sitio Web.

La manera más fácil de ver las diferencias entre las dos notaciones de etiquetas, si

se comprende la sintaxis XML, es observar ejemplos. El siguiente código XML se

exportó desde un documento basado en una plantilla denominada newstemplate.

El documento contiene una región editable deﬁnida, denominada News_Story (y

una región editable predeterminada, doctitle, que contiene la etiqueta de título

del documento).

• Las etiquetas de nombres de regiones editables utilizan los nombres de las

regiones editables del documento como etiquetas XML. El contenido de cada

región editable se incluye como sección CDATA. En este ejemplo, la etiqueta

doctitle identiﬁca el título del documento, y la etiqueta News_Story identiﬁca la

región editable.

<?xml version="1.0"?>

<![CDATA[<title>Artículo de portada de hoy</title>]]>

</doctitle>

<News_Story>

<![CDATA[<p>Aquí es donde va el artículo.</p>]]>

</News_Story>

</newstemplate>

• La opción Etiquetas XML estándar Dreamweaver usa la etiqueta item. La

etiqueta item tiene un atributo name que da nombre a la región editable; la

etiqueta contiene una sección CDATA que a su vez contiene el material de la

región editable. En este ejemplo, la etiqueta item con name="doctitle" identiﬁca

el título del documento, y la etiqueta itemcon name="News_Story" identiﬁca la

región editable.

<?xml version="1.0"?>

<![CDATA[<title>Artículo de portada de hoy</title>]]>

</item>

<![CDATA[<p>Aquí es donde va el artículo.</p>]]>

</item>

</templateItems>

Reutilizar contenido con plantillas y bibliotecas 415

Crear, administrar y editar elementos de

biblioteca

Las bibliotecas constituyen un medio de almacenar aquellos elementos de página

tales como imágenes, texto y otros objetos que usted reutiliza o actualiza con

frecuencia en el sitio Web. Dichos elementos se denominan elementos de

biblioteca.

Al colocar un elemento de biblioteca en un documento, Dreamweaver inserta una

copia del código HTML de ese elemento en el documento y añade un comentario

de HTML que contiene una referencia al elemento externo original. La referencia

al elemento de biblioteca externo hace posible la actualización del contenido de

todo el sitio de una sola vez cambiando el elemento de biblioteca y, seguidamente,

utilizando los comandos de actualización del submenú Modiﬁcar > Biblioteca.

Dreamweaver almacena los elementos de biblioteca en una carpeta llamada

Library dentro de la carpeta raíz local del sitio en cuestión. Cada sitio tiene su

propia biblioteca; para copiar un elemento de biblioteca de un sitio a otro, utilice

el comando Copiar en el sitio del panel Activos Consulte “Administrar e insertar

activos” en la página 229 para obtener más información. Tenga presente que si el

elemento de biblioteca contiene vínculos, estos pueden no funcionar en el sitio

nuevo. También hay que tener en cuenta que las imágenes de un elemento de

biblioteca no se copian en el sitio nuevo.

Este es un ejemplo de cómo se debe usar un elemento de biblioteca: suponga que

está creando un sitio grande para una empresa. La empresa tiene un eslogan y

desea que aparezca en todas las páginas del sitio, pero el departamento de

marketing todavía está determinando lo que ese eslogan debe decir. Si se crea un

elemento de biblioteca para contener el eslogan y se usa ese elemento de biblioteca

en todas las páginas, cuando el departamento de marketing proporcione el eslogan

ﬁnal, bastará con cambiar el elemento de biblioteca y actualizar automáticamente

todas las páginas que lo utilicen.

Crear un elemento de biblioteca

Se puede crear un elemento de biblioteca a partir de cualquier elemento de la

sección

body de un documento, incluyendo texto, tablas, formularios, applets de

Java, plug-ins, elementos ActiveX, barras de navegación e imágenes.

En el caso de elementos vinculados como imágenes, la biblioteca solamente

almacena una referencia del elemento. El archivo original debe permanecer en la

ubicación especiﬁcada para que el elemento de biblioteca funcione correctamente.

Sin embargo, puede seguir siendo útil almacenar una imagen en un elemento de

biblioteca; por ejemplo, se puede almacenar una etiqueta img completa en un

elemento de biblioteca, que le permitirá cambiar fácilmente el texto alt de la

imagen, o incluso su atributo src, en todo el sitio. (No utilice esta técnica para

cambiar los atributos width y height de la imagen, a no ser que utilice además un

editor de imágenes para cambiar el tamaño real de la imagen.)

Capítulo 16416

Los elementos de biblioteca también pueden contener comportamientos, pero

existen requisitos especiales para la edición de comportamientos en elementos de

biblioteca; consulte “Editar un comportamiento en un elemento de biblioteca” en la

página 420. Los elementos de biblioteca no pueden contener líneas de tiempo ni

hojas de estilos, ya que el código de dichos elementos forma parte de la sección head.

Nota: En general, hay que tener mucho cuidado al mezclar elementos de biblioteca y

plantillas en una misma página; a veces los resultados pueden ser confusos.

Para crear un elemento de biblioteca:

1 Seleccione una parte de un documento para guardarla como elemento de

biblioteca.

2 Lleve a cabo una de estas operaciones:

• Elija Ventana > Biblioteca y arrastre la selección hasta la categoría Biblioteca del

panel Activos.

• Haga clic en el botón Nuevo elemento de biblioteca que se encuentra al ﬁnal

del panel Activos (en la categoría Biblioteca).

• Elija Modiﬁcar > Biblioteca > Agregar objeto a Biblioteca.

3 Introduzca un nombre para el nuevo elemento de biblioteca.

Cada elemento de biblioteca se guarda como un archivo independiente (con la

extensión de archivo .lbi) en la carpeta Library de la carpeta raíz local del sitio.

Definir preferencias de biblioteca

Puede personalizar el color de resaltado de los elementos de biblioteca y mostrar u

ocultar el resaltado de los elementos de biblioteca conﬁgurando las preferencias de

Resalto.

Para cambiar el color de resaltado de los elementos de biblioteca:

1 Elija Edición > Preferencias y seleccione la categoría Resalto.

2 Haga clic en el cuadro de color de Elementos de biblioteca y seleccione un color

de resaltado utilizando el selector de colores (o introduzca el valor hexadecimal

correspondiente al color de resaltado en el cuadro de texto). Para obtener más

información acerca del uso del selector de colores, consulte “Trabajar con

colores” en la página 88.

3 Seleccione Mostrar para activar y desactivar la visualización del color de

resaltado de biblioteca.

4 Haga clic en el control Mostrar para activar o desactivar la visualización del

resaltado de los elementos de biblioteca en la ventana de documento.

5 Haga clic en Aceptar para cerrar el cuadro de diálogo Preferencias.

Reutilizar contenido con plantillas y bibliotecas 417

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

Elija Ver > Ayudas visuales > Elementos invisibles.

Los colores de resaltado aparecen en la ventana de documento sólo cuando Ver >

Ayudas visuales > Elementos invisibles está activado y las opciones adecuadas están

activadas en preferencias de Resalto.

Insertar un elemento de biblioteca en un documento

Cuando añada un elemento de biblioteca a una página, se insertará en el

documento el contenido real junto con una referencia al elemento de biblioteca.

Para insertar un elemento de biblioteca en un documento:

1 Sitúe el punto de inserción en la ventana de documento.

2 Elija Ventana > Biblioteca.

Aparecerá el panel Activos, con la categoría Biblioteca seleccionada.

3 Arrastre un elemento de biblioteca desde el panel Activos a la ventana de

documento o seleccione un elemento y haga clic en el botón Insertar.

Para insertar el contenido de un elemento de biblioteca sin incluir una

referencia al elemento en el documento, presione Control (Windows) u

Opción (Macintosh) mientras arrastra el elemento hacia fuera de la categoría

Biblioteca del panel Activos. Si inserta un elemento de esta forma, puede

editarlo en el documento, pero el documento no se actualizará cuando usted

actualice las páginas que utilizan ese elemento de biblioteca.

Realizar cambios en un elemento de biblioteca

Al modiﬁcar un elemento de biblioteca, existe la posibilidad de actualizar todos los

documentos que lo utilizan. Si elige no actualizar, los documentos permanecen

asociados con el elemento de biblioteca; pueden actualizarse posteriormente

eligiendo Modiﬁcar > Biblioteca > Actualizar páginas.

Otros tipos de modiﬁcaciones de los elementos de biblioteca incluyen el cambio

de nombre de los elementos para romper su conexión con documentos o

plantillas, la eliminación de elementos de la biblioteca del sitio y la creación de

nuevo de un elemento de biblioteca perdido.

Nota: El panel Estilos CSS, el panel Líneas de tiempo y el panel Comportamientos no se

encuentran disponibles al editar elementos de biblioteca, ya que éstos últimos sólo pueden

contener elementos de la sección

body. El código de las líneas de tiempo y de las hojas de

estilos CSS forma parte de la sección

head, mientras que el panel Comportamientos no se

encuentra disponible porque inserta código en la sección

head además de hacerlo en la

sección

body. (Para obtener instrucciones para editar comportamientos, consulte “Editar

un comportamiento en un elemento de biblioteca” en la página 420.) El cuadro de diálogo

Propiedades de página tampoco se encuentra disponible, porque un elemento de

biblioteca no puede incluir una etiqueta

body ni sus atributos.

Capítulo 16418

Para editar un elemento de biblioteca:

1 Elija Ventana > Biblioteca.

Entonces aparecerá la categoría Biblioteca del panel Activos.

2 Seleccionar un elemento de biblioteca.

En la parte superior del panel Activos aparecerá una vista previa del elemento

de biblioteca. (No se puede editar nada en la vista previa.)

3 Haga clic en el botón Editar que se encuentra en la parte inferior del panel

Activos. Como alternativa, haga doble clic en el elemento de biblioteca.

Dreamweaver abrirá una nueva ventana para que edite el elemento de

biblioteca. La ventana se parece mucho a la ventana de documento, pero su

Vista de Diseño tiene un fondo gris que indica que se está editando un

elemento de biblioteca en lugar de un documento.

4 Edite el elemento de biblioteca y guarde los cambios.

5 En el cuadro de diálogo que aparece a continuación, determine si deben

actualizarse los documentos en el sitio local que utiliza el elemento de

biblioteca editado.

• Elija Actualizar para actualizar todos los documentos del sitio local con el

elemento de biblioteca editado.

• Elija No actualizar para impedir que se modiﬁquen los documentos hasta que

utilice Modiﬁcar > Biblioteca > Actualizar página actual o Actualizar páginas.

Para actualizar el documento actual para que utilice la versión actual de todos los

elementos de biblioteca:

Elija Modiﬁcar > Biblioteca > Actualizar página actual.

Para actualizar el sitio completo o todos los documentos que usen un elemento de

biblioteca concreto:

1 Elija Modiﬁcar > Biblioteca > Actualizar páginas.

Aparecerá el cuadro de diálogo Actualizar páginas.

2 En el menú emergente Buscar en, lleve a cabo una de las operaciones siguientes:

• Elija Todo el sitio, y luego seleccione el nombre del sitio en el menú emergente

que aparece al lado. De esta manera, se actualizan todas las páginas del sitio

seleccionado para que utilicen la versión actual de todos los elementos de

biblioteca.

• Elija Archivos que usan, y luego seleccione el nombre del elemento de

biblioteca en el menú emergente que aparece al lado. Se actualizarán todas las

páginas del sitio actual que usen el elemento de biblioteca seleccionado.

Reutilizar contenido con plantillas y bibliotecas 419

Asegúrese de que Elementos de biblioteca está seleccionado en la opción

Actualizar. (Para actualizar plantillas al mismo tiempo, asegúrese de que

también esté seleccionada la opción Plantillas. Consulte “Actualizar páginas

basadas en una plantilla” en la página 411 para obtener más información.)

4 Haga clic en Iniciar.

Dreamweaver actualiza los archivos como se ha indicado. Si se selecciona la

opción Mostrar registro, Dreamweaver proporciona información sobre los

archivos que intenta actualizar, indicando si se han actualizado

satisfactoriamente.

Para renombrar un elemento de biblioteca en el panel Activos:

1 Haga clic una vez en el nombre del elemento de biblioteca para seleccionarlo.

2 Tras una breve pausa, vuelva a hacer clic.

3 Cuando se pueda editar el nombre, introduzca el que desee.

Nota: Este método de renombrar funciona igual que el cambio de nombre de archivos

en el Explorador de Windows (Windows) o el Finder (Macintosh). Al igual que en el

Explorador de Windows y el Finder, no olvide hacer una breve pausa entre los dos clics

del ratón. No haga doble clic en el nombre, puesto que se abriría el elemento de

biblioteca para ser editado.

4 Haga clic en cualquier lugar, o presione Entrar (Windows) o Retorno

(Macintosh).

5 Dreamweaver le preguntará si desea actualizar los documentos que usan

el elemento.

• Para actualizar todos los documentos del sitio que usan el elemento, haga clic

en Actualizar.

• Para que no se actualice ninguno de los documentos que usan el elemento, haga

clic en No actualizar.

Para eliminar un elemento de una biblioteca:

1 Seleccione el elemento en la categoría Biblioteca del panel Activos.

2 Haga clic en el botón Eliminar y conﬁrme que desea eliminar el elemento.

Tenga presente que cuando se elimina un elemento de biblioteca, no se puede

emplear el comando Deshacer para recuperarlo. Sin embargo, puede volver a

crearlo, como se describe en el procedimiento siguiente.

La eliminación de un elemento de biblioteca borra el elemento de la biblioteca,

pero no cambia el contenido de ningún documento que lo utilice.

Capítulo 16420

Para volver a crear un elemento de biblioteca que falta o se ha eliminado:

1 Seleccione una copia del elemento en uno de sus documentos.

2 Haga clic en el botón Volver a crear en el inspector de propiedades.

Convertir elementos de biblioteca en editables en un

documento

Si ha añadido un elemento de biblioteca al documento y desea editar el elemento

concretamente para dicha página, deberá romper el vínculo existente entre el

elemento del documento y la biblioteca. Una vez convertida una copia del

elemento de biblioteca en editable, dicha copia no podrá ser actualizada cuando se

modiﬁca el elemento de biblioteca.

Para convertir un elemento de biblioteca en editable:

1 Seleccione un elemento de biblioteca en el documento actual.

2 Haga clic en Separar del original en el inspector de propiedades.

La copia seleccionada del elemento de biblioteca pierde su resaltado (si este

estaba visible), y deja de poderse actualizar cuando se modiﬁca el elemento de

biblioteca original.

Editar un comportamiento en un elemento de biblioteca

Cuando se crea un elemento de biblioteca con con un comportamiento de

Dreamweaver adjunto al mismo, Dreamweaver copia el elemento y su manejador

de eventos (el atributo que especiﬁca el evento que desencadena la acción (como

onClick, onLoad, u onMouseOver), y la acción que debe ser llamada cuando se

produce ese evento) en el archivo de elementos de biblioteca. Dreamweaver no

copia las funciones JavaScript asociadas en el elemento de biblioteca. Lo que

Dreamweaver hace, en cambio, cuando se inserta un elemento de biblioteca en un

documento, es insertar automáticamente las funciones JavaScript

correspondientes en la sección head de ese documento (si aún no están allí).

Nota: Si crea código JavaScript a mano (es decir, si lo crea sin usar los comportamientos

de Dreamweaver), puede incluirlo en un elemento de biblioteca utilizando el

comportamiento Llamar JavaScript para ejecutar el código. Si no utiliza un

comportamiento de Dreamweaver para ejecutar el código, el código no se conserva como

parte del elemento de biblioteca.

Reutilizar contenido con plantillas y bibliotecas 421

Las funciones JavaScript no se almacenan con el elemento de biblioteca porque

son elementos de la sección

head del documento, y loes elementos de biblioteca

solamente pueden contener elementos de

body. Así, el panel Comportamientos no

se encuentra disponible cuando se está editando un elemento de biblioteca,

porque sólo una parte del código del comportamiento (el manejador de eventos)

está incluido en el elemento de biblioteca. Para editar un comportamiento en un

elemento de biblioteca, el elemento debe insertarse previamente en un

documento, y luego convertir el elemento en editable en ese documento. Una vez

realizados los cambios deseados, se puede volver a crear el elemento de biblioteca,

sustituyendo el elemento de la biblioteca con el elemento editado desde el

documento.

Para obtener más información sobre comportamientos, consulte “Usar

comportamientos” en la página 457.

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, así como las etiquetas exactas que

contiene. Necesitará esta información en los pasos 8 y 9.

2 Seleccione el elemento de biblioteca y haga clic en Separar del original en el

inspector de propiedades.

3 Seleccione el elemento que tiene el comportamiento adjunto a él.

4 Elija Ventana > Comportamientos para abrir el panel Comportamientos. En el

panel Comportamientos, haga doble clic en la acción que desea cambiar.

5 En el cuadro de diálogo que aparece, realice los cambios necesarios y haga clic

en Aceptar.

6 Elija Ventana > Biblioteca para abrir la categoría Biblioteca del panel Activos.

7 Asegúrese de haber registrado el nombre exacto del elemento de biblioteca

original, luego seleccione el elemento de biblioteca original, y elimínelo

haciendo clic en el botón Eliminar del panel Activos.

8 En la ventana de documento, seleccione todos los elementos que representan al

elemento de biblioteca.

Tenga cuidado de seleccionar exactamente los mismos elementos que había en

el elemento de biblioteca original.

9 En el panel Activos, haga clic en el botón Nuevo elemento de biblioteca y

asígnele al nuevo elemento el mismo nombre que tenía el elemento eliminado

en el paso 7.

Asegúrese de que utiliza exactamente el mismo texto (incluidas la mayúsculas y

minúsculas).

Capítulo 16422

Para actualizar el elemento de biblioteca en los demás documentos del sitio,

elija Modiﬁcar > Biblioteca > Actualizar páginas.

11 En el menú emergente Buscar en del cuadro de diálogo Actualizar páginas,

seleccione Arch. que usan.

12 En el menú emergente que aparece al lado, elija el nombre del elemento de

biblioteca que acaba de crear.

13 En la opción Actualizar, compruebe que esté seleccionado elementos de

biblioteca, y luego haga clic en Iniciar.

14 Cuando haya completado todas las actualizaciones, haga clic en Cerrar para

salir del cuadro de diálogo Actualizar páginas.

Configurar propiedades de elementos de biblioteca

Utilice las propiedades de elemento de biblioteca para especiﬁcar el archivo de

origen de un elemento, convertirlo en editable o volver a crear el elemento de

biblioteca original después de editar una de sus copias en un documento. Para

abrir el inspector de propiedades, seleccione un elemento de biblioteca en un

documento.

Orig Muestra el nombre y la ubicación del archivo de origen del elemento de

biblioteca. Esta información no se puede editar.

Abrir abre el archivo de origen del elemento de biblioteca para su edición. Esta

acción equivale a seleccionar el elemento en el panel Activos y hacer clic en el

botón Editar.

Separar del original Rompe el vínculo existente entre el elemento de biblioteca

seleccionado y su archivo de origen. Cuando se separa un elemento puede editarse

en el documento, pero deja de ser un elemento de biblioteca y no se puede

actualizar cuando se modiﬁca el elemento de biblioteca original.

Volver a crear Sobreescribe el elemento de biblioteca original con la selección

actual. Use esta opción para volver a crear elementos de biblioteca si falta un

elemento de biblioteca original o se eliminado por error.

Reutilizar contenido con plantillas y bibliotecas 423

Usar server-side includes

Los server-side includes son instrucciones destinadas al servidor para que incluya

un archivo determinado en el documento actual antes de enviar el documento al

usuario que lo ha solicitado. (Pueden entenderse como algo similar a un elemento

de biblioteca que proporciona el servidor.)

Cuando se abre un documento que se encuentra en un servidor, el servidor

procesa las instrucciones del server-side include y crea un documento nuevo en el

que las instrucciones del server-side include son sustituidas por el contenido del

archivo incluido. A continuación, el servidor envía este nuevo documento al

navegador. Sin embargo, cuando se abre un documento local en un navegador, no

hay ningún servidor que procese las instrucciones del server-side include de ese

documento, por lo que el navegador abre el documento sin procesar esas

instrucciones, y el archivo que supuestamente debería ser incluido no aparece en el

navegador. Por eso, puede ser difícil, sin usar Dreamweaver, mirar archivos locales

y verlos tal como los ven los visitantes una vez que han sido puestos en el servidor.

Sin embargo, con Dreamweaver se puede obtener una vista previa de los

documentos tal como aparecen en el servidor, tanto en la vista Diseño como

realizar una vista previa en un navegador. Para mostrar los archivos incluidos,

Dreamweaver utiliza un traductor que imita la forma en que el servidor procesa las

instrucciones del server-side include.

Al colocar un server-side include en un documento se inserta una referencia a un

archivo externo; no se inserta el contenido del archivo especiﬁcado en el

documento actual. Dreamweaver muestra el contenido del archivo externo en la

ventana de documento, lo que facilita el diseño de las páginas, pero no permite

editar el archivo incluido directamente en un documento. Para editar el contenido

de un server-side include, deberá editar directamente el archivo que desea incluir.

Los cambios realizados en el archivo externo se reﬂejarán automáticamente en

todos los documentos que lo incluyan.

Hay dos tipos de server-side includes: Virtual y Archivo. Elija uno de los dos según

el tipo de servidor Web que use:

• Si se trata de un servidor Web Apache, elija el tipo virtual. (Esta es la opción

predeterminada en Dreamweaver.) En Apache, Virtual funciona en todos los

casos, mientras que Archivo sólo funciona en algunos casos.

• Si su servidor es Microsoft IIS, elija Archivo. (Virtual funciona con IIS sólo en

ciertos casos determinados.) Lamentablemente, IIS no le permitirá incluir un

archivo en una carpeta de una jerarquía superior a la de la carpeta actual, salvo

en el caso de que se haya instalado un software especial en el servidor. Si es

necesario incluir un archivo desde una carpeta de una jerarquía superior en un

servidor IIS, pregunte al administrador del sistema si está instalado el software

necesario.

• Para otros tipos de servidores, o si desconoce el tipo de servidor que está

usando, pregunte al administrador del sistema la opción que debe emplear.

Capítulo 16424

Algunos servidores están conﬁgurados de manera que examinan todos los archivos

para ver si contienen server-side includes; otros servidores están conﬁgurados para

examinar solamente los archivos con una extensión determinada, como .shtml,

.shtm, o .inc. Si un server-side include no le funciona, pregunte al administrador del

sistema si es necesario utilizar una extensión concreta en el nombre del archivo que

usa el server-side include. (Por ejemplo, si el archivo se llama canoe.html, puede ser

necesario cambiarle el nombre por canoe.shtml.) Si desea que los archivos conserven

las extensiones .html o .htm, solicite al administrador del sistema que conﬁgure el

servidor para examinar todos los archivos (no sólo los archivos con extensiones

determinadas) para comprobar si contienen server-side includes. Sin embargo, el

análisis de un archivo para comprobar si contiene server-side includes implica un

poco más de tiempo de proceso, por lo que las páginas que el servidor analiza tardan

un poco más en estar disponibles que las otras; por ello, algunos administradores de

sistemas no proporcionarán la opción de analizar los archivos.

Para insertar un server-side include:

1 Elija Insertar > Server-Side Include o haga clic en el botón SSI de la categoría

Común del panel Objetos.

2 En el cuadro de diálogo que aparece, localice y seleccione un archivo.

Para cambiar el archivo que es incluido:

1 Seleccione el server-side include en la ventana de documento.

2 Abra el inspector de propiedades.

3 Lleve a cabo una de estas operaciones:

• Haga clic en el icono de carpeta para localizar y seleccionar un nuevo archivo

para incluir.

• En el cuadro de texto, escriba la ruta y el nombre del nuevo archivo para

incluir.

Reutilizar contenido con plantillas y bibliotecas 425

Editar el contenido de un server-side include

Al igual que los elementos de biblioteca, los server-side includes se seleccionan

como una unidad completa en la ventana de documento. A diferencia de los

elementos de biblioteca, en el caso de los server-side includes el código HTML

contenido en el archivo incluido no aparece en el inspector de códigos ni en la

vista Código de la ventana de documento. Por el contrario, aparece la instrucción

del servidor en sí misma (por ejemplo) con el siguiente aspecto:

Para editar el contenido asociado al archivo incluido, deberá abrir el archivo.

Nota: Los server-side includes no pueden contener etiquetas de head ni body.

Para editar un server-side include:

1 Seleccione el server-side include en la ventana de documento o en el inspector

de códigos y haga clic en Editar en el inspector de propiedades.

El archivo incluido se abrirá en una nueva ventana de documento.

2 Edite el archivo y luego guárdelo.

Los cambios se reﬂejarán inmediatamente en el documento actual y en los

documentos que abra posteriormente que contengan el archivo.

Capítulo 16426

427

CAPÍTULO 17

.............................................................................................................

Usar capas dinámicas

Una capa es un contenedor en la página Web que contiene elementos de página

HTML. El uso de capas en la página proporciona mayor control y ﬂexibilidad

para hacer la página dinámica. Las capas se crearon para el diseño Web con el ﬁn

de proporcionar a los diseñadores un control y una ﬂexibilidad similares a los que

tenían en el diseño tradicional para impresión.

Las capas pueden apilarse una encima de otra, ocultar unas capas y mostrar otras,

o mover una capa por la pantalla con una línea de tiempo. Por ejemplo, puede

haber una imagen de fondo en una capa y luego apilar encima otra capa que

contenga texto. En la página también puede haber imágenes que aparecen y

desaparecen de la página. Todo esto se puede hacer en Dreamweaver utilizando

capas, sin necesidad de escribir código JavaScript o HTML.

Uno de los inconvenientes de usar capas en la página Web es que esas capas no se

ven en todos los navegadores Web antiguos. Solamente los navegadores Internet

Explorer 4.0 y Netscape 4.0 y las versiones posteriores muestran las capas, y no

siempre correctamente. Para que todos los visitantes puedan ver la página Web, se

pueden usar capas conjuntamente con tablas. Se puede realizar el diseño de la

página usando capas, y luego convertir las capas en tablas. Para obtener más

información, consulte “Usar tablas y capas para diseño” en la página 443.

Nota: Se recomienda utilizar la vista de Disposición para diseñar páginas (consulte

“Diseñar la disposición de páginas” en la página 171). La vista de Disposición permite

aplicar fácilmente el diseño a las páginas utilizando tablas como estructura subyacente.

Capítulo 17428

Capas y código HTML

Al insertar las capas en la página Web, Dreamweaver inserta la etiqueta HTML

para esas capas en el código. Se pueden establecer cuatro etiquetas distintas a las

capas: div, span, layer, e ilayer. div y span son las etiquetas más comunes y se

recomienda emplearlas para que el mayor número de visitantes pueda ver las capas

de la página. Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0 admiten

las capas creadas utilizando las etiquetas div y span . Solamente las versiones de

Navigator 4.0 admiten capas creadas con las etiquetas layer e ilayer (Netscape no

incorporó esa compatibilidad en las versiones posteriores del navegador). Las

versiones anteriores de ambos navegadores muestran el contenido de la capa, pero

no la muestran en su posición.

De forma predeterminada, Dreamweaver crea capas con la etiqueta

div e inserta

código de capa en el punto de inserción, o bien en la parte superior de la página,

inmediatamente después de la etiqueta body. Si se crea una capa anidada,

Dreamweaver inserta el código dentro de la etiqueta que deﬁne la capa padre. Para

cambiar la etiqueta predeterminada, consulte “Preferencias de capa” en la

página 432.

A continuación, se incluye una muestra de código HTML para una sola capa (con

la apariencia que tendría en Dreamweaver):

<div id="Layer1" style="position:absolute; visibility:inherit; width:200px;

height:115px; z-index:1">

</div>

A continuación, se incluye una muestra de código HTML para una capa anidada

(con la apariencia que tendría en Dreamweaver):

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

Se pueden establecer propiedades para determinar la posición de las capas en la

página. Estas propiedades son: izquierda y superior (coordenadas x e y,

respectivamente), índice z (también denominado orden de apilamiento) y

visibilidad. Para obtener más información, consulte “Conﬁgurar propiedades de

capas” en la página 437.

Usar capas dinámicas 429

Crear capas en la página

Dreamweaver permite crear capas en la página de forma fácil y precisa. Puede

dibujar una capa en la página, insertar una capa por medio del menú, o arrastrarla

hasta la página. Puede crear tantos elementos como sea necesario para contener

todos los elementos de la página.

También puede crear una capa dentro de otra capa (anidar), colocar unas capas

sobre otras (apilar), u ocultar algunas capas mientras se muestran otras. Use el

panel Capas para manejar fácilmente las capas y realizar esas acciones. Para

obtener más información, consulte “Panel Capas” en la página 430.

Cada capa que se crea en la página tiene ciertas características predeterminadas,

como etiqueta, visibilidad, altura y anchura, etc. Para cambiar la conﬁguración

predeterminada, elija Edición > Preferencias y seleccione Capas. Para obtener más

información sobre estas características, consulte “Preferencias de capa” en la

página 432.

Si no desea que las capas se superpongan según las va creando en la página, active

la opción Evitar solapamiento en el panel Capas o elija Modiﬁcar > Organizar >

Evitar solapamiento de capas. Consulte “Evitar solapamiento de capas” en la

página 444.

Para crear una capa, lleve a cabo una de estas operaciones:

• Para dibujar una capa, haga clic en el botón Dibujar capa del panel Objetos, y

arrástrelo para dibujar la capa en la ventana de documento.

• Para insertar una capa, coloque el punto de inserción en la ventana de

documento en el lugar en que desea colocar la capa y luego elija Insertar >

Capa.

• Para arrastrar y soltar una capa, arrastre el botón Dibujar capa del panel

Objetos a la ventana de documento.

Para dibujar más de una capa a la vez, haga clic en el botón Dibujar capa del panel

Objetos y mantenga presionada la tecla Control (Windows) o Comando

(Macintosh) mientras dibuja todas las capas. Podrá continuar dibujando nuevas

capas mientras no suelte la tecla Control.

Si tiene activada la opción Elementos invisibles, aparecerá una marca de capa en la

ventana de documento cada vez que dibuje una capa en la página. Si las marcas de

capa no están visibles y desea verlas, elija Ver > Ayudas visuales > Elementos

invisibles. Para obtener más información, consulte “Conﬁgurar preferencias de

Elementos invisibles” en la página 160.

Capítulo 17430

Nota: Cuando la opción elementos invisibles está activada, los elementos de la página

pueden cambiar de posición. Los elementos invisibles sólo están visibles en la ventana de

documento, por ello, cuando se ve la página en un navegador todo aparece en la posición

correcta.

Panel Capas

El panel Capas proporciona un medio para manejar las capas del documento. Elija

Ventana > Capas o presione F11 para abrir el panel Capas. Las capas se muestran

en forma de lista apilada de nombres; la primera capa que se creó estará situada al

ﬁnal en el orden de apilado, mientras que la última que se creó aparecerá en la

primera posición en el orden de apilado. Las capas anidadas se muestran como

nombres relacionados con las capas padres. Haga clic en la ﬂecha de ampliación

para mostrar u ocultar las capas anidadas.

Use el panel Capas para evitar solapamientos, cambiar la visibilidad de las capas,

anidar o apilar capas y para seleccionar una o más capas.

Usar capas dinámicas 431

Anidar capas

Una capa anidada es aquella que se ha creado dentro de otra capa. Use el panel

Capas o la técnica de inserción, arrastrar y soltar o dibujar, para crear capas

anidadas.

Anidar se usa a menudo para agrupar capas. Una capa anidada se mueve junto con

su capa padre y puede conﬁgurarse para que herede la visibilidad de esta.

Si desea que las capas aniden automáticamente cuando las dibuje en la página,

conﬁgure esta opción en las preferencias de Capa. Elija Edición > Preferencias,

seleccione Capas y haga clic en la casilla de veriﬁcación Anidar. Así, todas las capas

que dibuje dentro de otras capas anidarán automáticamente. Para obtener más

información, consulte “Preferencias de capa” en la página 432.

Nota: Use el comando reparación de cambio de tamaño de Netscape, cuando use capas

anidadas en la página (Comandos > Añadir/Quitar reparación de cambio de tamaño de

Netscape). En caso contrario, las capas perderán su posición en las versiones 4.0 de

Netscape.

Para crear una capa anidada, siga uno de estos procedimientos:

• Para insertar una capa anidada, coloque el punto de inserción dentro de una

capa existente y elija Insertar > Capa.

• Para arrastrar y soltar una capa anidada, arrastre el botón Dibujar capa del

panel Objetos y, seguidamente, suéltelo dentro de una capa existente.

• Para dibujar una capa anidada, haga clic en el botón Dibujar capa del panel

Objetos, y arrástrelo para dibujar la capa dentro de otra capa. Si Anidar está

desactivado en las preferencias de capas, presione y mantenga presionada la

tecla Alt (Windows) u Opción (Macintosh) para dibujar una capa dentro de

otra capa existente.

Para crear una capa anidada mediante el panel Capas:

1 Elija Ventana > Capas o presione F11 para abrir el panel Capas.

2 Seleccione una capa en el panel Capas y presione y mantenga presionada la

tecla Control (Windows) o Comando (Macintosh), y arrástrela a la capa de

destino del panel Capas.

3 Suelte el botón del ratón cuando aparezca un cuadro alrededor del nombre de

la capa de destino.

Capítulo 17432

Preferencias de capa

Use las preferencias de capa para deﬁnir la conﬁguración predeterminada de las

capas nuevas. Elija Edición > Preferencias y luego haga clic en Capas para cambiar

las preferencias de capa.

Etiqueta Establece la etiqueta predeterminada HTML que se empleará al crear

capas. Las opciones son DIV (predeterminada), span, layer, o ilayer. div o span se

recomiendan para asegurar que las capas funcionen en todos los navegadores de la

versión 4.0 y posteriores. layer e ilayer sólo funcionan en los navegadores

Netscape 4.x.

Visibilidad Determina si las capas serán visibles como opción predeterminada.

Ancho 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. Seleccione el color

en el selector de colores.

Imagen de fondo Especiﬁca una imagen de fondo predeterminada. Haga clic en

Examinar para localizar el archivo en el ordenador, o introduzca la ruta del archivo

de imagen en el cuadro de texto.

Anidar Convierte una capa dibujada dentro de los límites de otra capa existente en

una capa anidada. Mantenga presionada la tecla Alt (Windows) u Opción

(Macintosh) para cambiar esta conﬁguración temporalmente mientras se dibuja

una capa.

Compatibilidad con Netscape 4 Inserta código JavaScript en el contenido head de

un documento y repara un problema conocido en los navegadores Netscape 4.x

que consiste en que las capas pierden sus coordenadas de posición cuando el

usuario cambia el tamaño de la ventana del navegador. El código JavaScript

introducido hace que la página vuelva a cargarse cada vez que se modiﬁca el

tamaño de la ventana del navegador, volviendo a asignar a las capas su posición

correcta. También puede añadir o eliminar el código JavaScript eligiendo

Comandos > Añadir/Quitar reparación de cambio de tamaño de Netscape.

Trabajar con capas

Al trabajar con el diseño de la página, las capas se pueden seleccionar, activar o

cambiar su tamaño. Debe seleccionarse una capa para que sea posible moverla,

cambiar su tamaño o alinearla. Cambiar el tamaño de las capas permite modiﬁcar

las dimensiones de una sola capa o aplicar a dos o más capas las mismas

dimensiones de alto y ancho. La activación de las capas solamente permite colocar

contenido dentro de ellas.

Para evitar el solapamiento de unas capas con otras al moverlas o cambiar su

tamaño, use la opción Evitar solapamiento. Consulte “Evitar solapamiento de

capas” en la página 444.

Usar capas dinámicas 433

Seleccionar capas

Seleccione una o más capas para asignarles la misma anchura y altura, cambiar su

posición, alinearlas, etc. Para ver una lista completa de opciones, consulte

“Conﬁgurar propiedades de capas” en la página 437.

Para seleccionar una capa, lleve a cabo una de estas operaciones:

• En el panel Capas, haga clic en el nombre de la capa.

• Haga clic en un manejador de selección 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

presiona la tecla Mayús.

• Si hay varias capas seleccionadas, haga clic dentro de una capa mientras

presiona las teclas Control y Mayús (Windows) o Comando y Mayús

(Macintosh). De esta manera se anulará la selección de todas las demás capas y

se seleccionará solamente la que usted elija.

• En la ventana de documento, haga clic en la marca de capa que representa la

ubicación de la capa en el código HTML. Si no se ve la marca de capa, elija Ver

> Ayudas visuales > Elementos invisibles.

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

• En el panel Capas, haga clic en dos o más nombres de capas mientras presiona

la tecla Mayús.

• Presione Mayús y haga clic dentro o en el borde de dos o más capas.

Cuando haya varias capas seleccionadas, los manejadores de la última capa

seleccionada se resaltarán en negro. Los manejadores de las demás capas se

resaltarán en blanco.

Capítulo 17434

Cambiar el tamaño de capas

Puede cambiar el tamaño de una capa individual o de varias capas

simultáneamente para asignarles la misma anchura y altura.

Si está activada la opción Evitar solapamiento, no podrá cambiar el tamaño de una

capa para que se superponga con otra. Consulte “Evitar solapamiento de capas” en

la página 444.

Para cambiar el tamaño de una capa, lleve a cabo una de estas operaciones:

• Para cambiar el tamaño arrastrando, seleccione la capa y arrastre uno de los

manejadores de cambio de tamaño.

• Para cambiar el tamaño un píxel cada vez, seleccione la capa y presione las tecla

Control-ﬂecha (Windows) o las teclas Opción-ﬂecha (Macintosh).

• Para cambiar el tamaño en el incremento de ajuste a la cuadrícula, presione las

teclas Mayús-Control-ﬂecha (Windows) u Opción-ﬂecha (Macintosh). Para

obtener información sobre la conﬁguración del incremento de ajuste a la

cuadrícula, consulte “Ajustar capas a la cuadrícula” en la página 436.

• En el inspector de propiedades, escriba un valor para la anchura y la altura.

Al cambiar el tamaño de una capa cambiarán su anchura y altura. Esta operación,

sin embargo, no deﬁne qué cantidad de contenido de la capa queda visible. Para

deﬁnir la región visible de una capa, consulte “Conﬁgurar propiedades de capas”

en la página 437.

Para cambiar el tamaño de varias capas:

1 En la ventana de documento, seleccione dos o más capas.

2 Lleve a cabo una de estas operaciones:

• Elija Modiﬁcar > Alinear > Asignar mismo ancho o Modiﬁcar > Alinear >

Asignar mismo alto.

Las primeras capas seleccionadas se ajustarán 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 aplicarán a todas las capas seleccionadas.

Usar capas dinámicas 435

Mover capas

La operación de mover capas en la ventana de documento le resultará familiar a

cualquiera que haya trabajado con aplicaciones gráﬁcas básicas.

Si está activada la opción Evitar solapamiento, no podrá mover una capa para que

se superponga con otra. Consulte “Evitar solapamiento de capas” en la

página 444.

Para mover una o varias capas, lleve a cabo una de estas operaciones:

• Para mover arrastrando, seleccione las capas y arrastre el manejador de selección

de la última capa seleccionada (resaltada en negro).

• Para mover un píxel cada vez, seleccione las capas y use las teclas de ﬂecha.

Utilice la tecla Mayús y una tecla de ﬂecha para mover la capa en el incremento

actual de ajuste a la cuadrícula. Para obtener información sobre la

conﬁguración del incremento de ajuste a la cuadrícula, consulte “Ajustar capas a

la cuadrícula” en la página 436.

Alinear capas

Utilice los comandos de alineación de capas para alinear una o varias capas con el

borde de la última capa seleccionada.

Cuando se alinean capas, las capas hijas que no están seleccionadas pueden

moverse si se selecciona y se mueve su capa padre. Para evitarlo, no utilice capas

anidadas.

Para alinear dos o más capas:

1 Seleccione las capas.

2 Elija Modiﬁcar > Alinear, y seleccione una opción de alineación.

Por ejemplo, si selecciona Borde superior, se moverán todas las capas de modo que

sus bordes superiores queden en la misma posición vertical que el borde superior

de la última capa seleccionada (resaltada en negro).

Capítulo 17436

Ajustar capas a la cuadrícula

Utilice la cuadrícula como guía visual para colocar y cambiar el tamaño de las

capas en la ventana de documento. Puede activar la cuadrícula para utilizarla como

guía al dibujar capas. También puede hacer que las capas se ajusten

automáticamente a la cuadrícula y cambiar la cuadrícula o controlar el

comportamiento de ajuste especiﬁcando la conﬁguración de la cuadrícula. El

ajuste funciona independientemente de que la cuadrícula esté visible.

Para mostrar la cuadrícula, lleve a cabo una de estas operaciones:

• Elija Ver > Cuadrícula > Mostrar cuadrícula.

• Elija Ver > Cuadrícula > Editar cuadrícula, y seleccione la opción Mostrar

cuadrícula.

Para ajustar una capa:

1 Elija Ver > Cuadrícula > Ajustar a cuadrícula, para activar (o desactivar) la

opción de ajuste.

2 Seleccione la capa y arrástrela. La capa saltará a la posición de ajuste más

próxima.

Para cambiar la configuración de la cuadrícula:

1 Haga clic en Ver > Cuadrícula > Editar cuadrícula para abrir el cuadro de

diálogo Conﬁguración de cuadrícula.

2 Lleve a cabo una de estas operaciones:

• Haga clic en la ﬂecha situada junto a la muestra de color y seleccione un color

de la paleta o escriba el número hexadecimal en la celda. Este valor controlará el

color de las líneas de la cuadrícula.

• Seleccione Mostrar cuadrícula para ver la cuadrícula en la ventana de

documento.

• Seleccione Ajustar a cuadrícula para activar el ajuste.

• Escriba la cantidad de espaciado que desea y seleccione Píxeles, Pulgadas o

Centímetros en el menú emergente. Este valor controlará la separación entre las

líneas de la cuadrícula.

• Elija líneas o puntos para las líneas de la cuadrícula.

3 Haga clic en Aplicar para ver los cambios y, a continuación, haga clic en

Aceptar para cerrar el cuadro de diálogo.

Usar capas dinámicas 437

Activar capas

Antes de colocar objetos en una capa, es preciso activar la capa. Al activar una

capa, se coloca en ella el punto de inserción, se resalta el borde de la capa y aparece

el manejador de selección, pero no se selecciona la capa.

Para activar una capa:

Haga clic en cualquier lugar dentro de la capa.

Configurar propiedades de capas

Use el inspector de propiedades para especiﬁcar el nombre y la ubicación de una

capa, así como para establecer otras opciones de las capas. Para ver todas las

propiedades siguientes, haga clic en la ﬂecha de ampliación que se encuentra en el

ángulo inferior derecho del inspector de propiedades.

ID de capa Permite especiﬁcar un nombre para identiﬁcar la capa en el panel

Capas y en las secuencias de comandos. Introduzca un nombre en el cuadro sin

título que aparece a la izquierda en el inspector de propiedades. Use solamente

caracteres alfanuméricos estándar para el nombre de las capas. No utilice caracteres

especiales como espacios, guiones, barras ni puntos. Cada capa tiene que tener un

nombre exclusivo.

Iz y Sup (izquierda y superior) especiﬁcan la posición de la capa con respecto al

ángulo superior izquierdo de la página o capa padre (si la capa es anidada).

An y Al Especiﬁcan la anchura y la altura de la capa. Si el contenido de la capa

excede del tamaño especiﬁcado, estos valores son anulados.

Si se han establecido div o span como etiqueta predeterminada, los valores

predetrerminados de ubicación y tamaño estarán en píxeles (px). También se

pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm

(milímetros), cm (centímetros) o % (porcentaje del valor padre). Las abreviaturas

deben seguir al valor sin espacio de separación: por ejemplo, 3mm. El parámetro

Desbordamiento controla el modo en que reaccionan las capas cuando el

contenido excede el tamaño de la capa.

Capítulo 17438

Índice Z Determina el índice z, u orden de apilamiento, de la capa. Las capas con

los números más altos aparecerán por encima de las capas con los números más

bajos. Los valores pueden ser positivos o negativos. Resulta más sencillo cambiar el

orden de apilamiento de las capas mediante el panel Capas que introduciendo

valores de índice z especíﬁcos. Consulte “Cambiar el orden de apilamiento de las

capas” en la página 441.

Las capas Netscape (aquellas con las etiquetas layer o ilayer) también se pueden

apilar con relación a otras capas de la página. Cuando se selecciona una capa

Netscape, aparecen dos opciones adicionales en el ángulo inferior derecho del

inspector de propiedades. Use la opción A/B para seleccionar una posición relativa

de apilamiento y después seleccione el nombre de otra capa en el menú emergente

que aparece directamente a la derecha. (A especiﬁca una capa por encima de la

capa actual; B especiﬁca una capa por debajo de la capa actual.)

Vis Determina el estado inicial de visualización de la capa (visible o no). Use un

lenguaje de secuencias de comandos, como JavaScript, para controlar la propiedad

de visibilidad y visualizar en forma dinámica el contenido de la capa. Dispone de

las opciones siguientes:

• La opción predeterminada no especiﬁca ninguna propiedad de visibilidad, pero

la mayoría de los navegadores interpretan esta conﬁguración como inherit

(heredada).

• Inherit usa la propiedad de visibilidad de la capa padre.

• Visible muestra el contenido de la capa, independientemente del valor de la

capa padre.

• Oculta no muestra el contenido de la capa, independientemente del valor de la

capa padre. Observe que las capas ocultas creadas con ilayer siguen ocupando

el mismo espacio que si fueran visibles.

Im. fondo Especiﬁca una imagen de fondo para la capa. Haga clic en el icono de

carpeta para buscar y seleccionar un archivo de imagen o escriba la ruta de la

imagen en el campo de texto.

Col. fondo Especiﬁca un color de fondo para la capa. Deje esta opción en blanco

para especiﬁcar un fondo transparente.

Etiqueta determina la etiqueta HTML que se usará. Se recomiendan span y div.

layer e ilayer crean capas de Netscape Navigator, aunque solamente son visibles

en los navegadores Netscape Navigator 4.

Desbordamiento determina lo que ocurre si el contenido de una capa excede de su

tamaño. Dispone de las opciones siguientes:

• Visible aumenta el tamaño de la capa para que todo su contenido sea visible. La

capa se expande hacia abajo y hacia la derecha.

• Oculta mantiene el tamaño de la capa y recorta cualquier contenido que no

quepa. No hay barras de desplazamiento.

Usar capas dinámicas 439

• Desplazamiento añade barras de desplazamiento a la capa independientemente

de que el contenido exceda o no del tamaño de la capa. La inclusión especíﬁca

de barras de desplazamiento evita la confusión que provoca la aparición y

desaparición de las barras de desplazamiento en un entorno dinámico. Esta

opción sólo funciona en aquellos navegadores que admiten barras de

desplazamiento.

• Auto (automático) presenta las barras de desplazamiento solamente cuando el

contenido de la capa excede de sus límites.

Clip deﬁne el área visible de una capa y se puede usar para cortar contenido de los

bordes de la capa. Especiﬁque valores que representen la distancia en píxeles desde

los límites de la capa. Los valores de conﬁguración de Sup (borde superior) e Iz

(izquierda) se reﬁeren a la capa, no a la página.

Izda, Sup o PágX, PágY (layer e ilayer solamente) permiten situar una capa en

relación con su capa padre. La opción Izda, Sup sitúa la capa con respecto al

ángulo superior izquierdo de la capa padre. La opción PágX, PágY sitúa la capa en

una ubicación absoluta con respecto al ángulo superior izquierdo de la página,

independientemente de la posición de la capa padre.

Src (later e ilayer solamente) permite visualizar otro documento HTML dentro

de la capa. Haga clic en el icono de la carpeta para examinar y seleccionar el

documento o escriba la ruta del documento. Observe que Dreamweaver no

muestra esta propiedad en la ventana de documento.

A/B (layer e ilayer solamente) especiﬁca la capa de arriba (A) o de abajo (B) con

respecto a la capa actual en el orden de apilamiento (índice z). Sólo las capas

previamente deﬁnidas en el documento aparecerán en la lista de nombres de capas

a la derecha del menú A/B.

Capítulo 17440

Configurar propiedades para capas múltiples

Cuando se seleccionan dos o más 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 modiﬁcar varias capas de una sola vez. Para seleccionar

múltiples capas, mantenga presionada la tecla Mayús mientras selecciona las capas.

Consulte “Trabajar con capas” en la página 432.

Iz y Sup especiﬁcan la posición de las capa con respecto al ángulo superior

izquierdo de la página o capa padre.

An y Al especiﬁcan la anchura y la altura de las capas. Si el contenido de las capas

excede del tamaño especiﬁcado, estos valores son anulados.

Si se han establecido div o span como etiqueta predeterminada, los valores

predetrerminados de ubicación y tamaño estarán en píxeles (px). También

se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas),

mm (milímetros), cm (centímetros) o % (porcentaje del valor padre). Las

abreviaturas deben seguir al valor sin espacio de separación: por ejemplo, 3mm.

Vis determina el estado inicial de visualización de las capas. Dispone de las

opciones siguientes:

• La opción predeterminada no especiﬁca ninguna propiedad de visibilidad, pero

la mayoría de los navegadores interpretan esta conﬁguración como inherit

(heredada).

• Inherit usa la propiedad de visibilidad de la capa padre.

• Visible muestra el contenido de la capa, independientemente del valor de la

capa padre.

• Hidden (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 e ilayer siguen ocupando el mismo espacio que si fueran

visibles.

Etiqueta determina la etiqueta HTML que se usará. Se recomiendan span y div.

layer e ilayer crean capas de Netscape Navigator, aunque solamente son visibles

en los navegadores Netscape 4.

Im. fondo especiﬁca una imagen de fondo para las capas. Haga clic en el icono de

carpeta para buscar y seleccionar un archivo de imagen o escriba la ruta de la

imagen en el campo de texto.

Col. fondo especiﬁca un color de fondo para las capas. Deje esta opción en blanco

para especiﬁcar un fondo transparente.

Usar capas dinámicas 441

Cambiar el orden de apilamiento de las

capas

Utilice el inspector de propiedades o el panel Capas para cambiar el orden de

apilamiento de las capas. La capa que ﬁgura en la parte superior de la lista del

panel Capas es la primera en el orden de apilamiento.

En el código HTML, el orden de apilamiento o el índice z determinan el orden en

que se dibujan las capas en un navegador. Puede cambiar el índice z para cada capa

mediante el panel Capas o el inspector de propiedades.

Par cambiar el orden de apilamiento de capas en la paleta de capas:

Elija Ventana > Capas para abrir el panel Capas. A continuación, lleve a cabo una

de estas operaciones:

• Seleccione y arrastre una capa hacia arriba o hacia abajo hasta el nivel deseado

dentro del orden de apilamiento. Observará que aparece una línea al mover la

capa. Suelte el botón del ratón cuando la línea de colocación aparezca en el

lugar deseado dentro del orden apilamiento.

• En la columna Z, haga clic en el número de la capa que desea cambiar. Escriba

un número superior al existente para hacer ascender la capa en el orden de

apilamiento o escriba un número inferior para hacerla descender.

Par cambiar el orden de apilamiento de capas utilizando el inspector de

propiedades:

1 Elija Ventana > Capas para abrir el panel Capas y ver el orden de

apilamiento>actual.

2 Seleccione una capa del panel Capas o de la ventana de documento.

3 En el inspector de propiedades de capas, escriba un número en el campo

Índice Z.

• Escriba un número superior para colocar la capa en un nivel superior del orden

de apilamiento.

• Escriba un número inferior para colocar la capa en un nivel inferior en el orden

de apilamiento.

Capítulo 17442

Cambiar la visibilidad de una capa

Mientras trabaja con un documento, puede mostrar y ocultar capas para ver qué

apariencia tendrá la página en distintas condiciones. Use el panel Capas para

cambiar la visibilidad de las capas. Use el panel Preferencias de capa para deﬁnir la

visibilidad predeterminada de las capas nuevas. Consulte “Preferencias de capa” en

la página 432.

Para cambiar la visibilidad de las capas:

1 Elija Ventana > Capas para abrir el panel Capas.

2 En la ﬁla de la capa en cuestión, haga clic en la columna de icono de ojo para

establecer la visibilidad deseada.

• Si el ojo está abierto signiﬁca 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. (Cuando las

capas no están anidadas, el padre es el cuerpo del documento, que siempre está

visible.)

Para cambiar la visibilidad de todas las capas a la vez:

1 Elija Ventana > Capas para abrir el panel Capas.

2 Haga clic en el icono de ojo del encabezado de la columna.

Usar capas dinámicas 443

Usar tablas y capas para diseño

En lugar de usar celdas y tablas de disposición en la vista de disposición para crear

el diseño (consulte “Diseñar la disposición de páginas” en la página 171), algunos

usuarios siguen preﬁriendo trabajar con capas y tablas. Dreamweaver le permite

crear su diseño utilizando capas y convertirlas después en tablas, puesto que los

navegadores 3.0 no admiten capas. Puede alternar entre capas y tablas para

optimizar el diseño de la página.

Puede convertir las capas en tablas o viceversa en una plantilla de documento o en

un documento al que se haya aplicado una plantilla. Cree el diseño original y

conviértalo antes de guardarlo como plantilla.

No se puede convertir una sola tabla o una sola capa. Para convertir capas en tablas

y viceversa, la operación se aplica a todas las tablas o todas las capas de la página.

Si desea generar archivos compatibles con navegadores 3.0 a partir del archivo

actual, utilice la opción Convertir del menú Archivo. Consulte “Convertir para

compatibilidad con la versión 3.0” en la página 445.

Realizar conversiones entre tablas y capas

Cree el diseño utilizando capas y luego convierta las capas en tablas para que

pueda verse con la mayoría de los navegadores.

Para convertir las capas en una tabla:

1 Elija Modiﬁcar > Convertir > Capas en tablas.

2 En el cuadro de diálogo que aparece, seleccione las opciones de diseño deseadas.

• Más preciso crea una celda para cada capa, junto con las celdas adicionales

necesarias para conservar el espacio entre capas.

• Mínimo: Contraer celdas vacías, especiﬁca que los bordes de las capas deben

alinearse si se sitúan a la distancia especiﬁcada en píxeles. Cuando se selecciona

esta opción, la tabla resultante tendrá menos ﬁlas y columnas vacías, pero puede

no coincidir exactamente con su diseño.

• Usar GIF transparentes rellena la última ﬁla de la tabla con GIF transparentes.

De este modo se garantiza que la tabla aparezca con las mismas anchuras de

columnas en todos los navegadores.

Cuando esta opción está activada, no se puede 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 navegadores.

• Centrar en página centra la tabla resultante en la página.

Si esta opción está desactivada, la tabla se alinea a la izquierda.

3 Seleccione las herramientas de diseño y las opciones de cuadrícula deseadas y

haga clic en Aceptar.

Capítulo 17444

Para convertir una tabla en capas:

1 Elija Modiﬁcar> Convertir > Tablas en capas.

2 En el cuadro de diálogo que aparece, seleccione las opciones deseadas.

• Mostrar cuadrícula y Ajustar a cuadrícula permiten utilizar una cuadrícula para

facilitar la colocación de las capas. Consulte “Ajustar capas a la cuadrícula” en la

página 436.

• Evitar solapamiento de capas limita las posiciones de las capas cuando se crean,

mueven y cambian de tamaño para evitar que se superpongan. Consulte “Evitar

solapamiento de capas” en la página 444.

• Mostrar panel Capas muestra el panel Capas. Consulte “Panel Capas” en la

página 430.

3 Haga clic en Aceptar.

Las tablas se convierten en capas. Las celdas vacías no se convierten en capas a no

ser que tengan color de fondo.

Nota: Los elementos de la página que estaban situados fuera de las tablas también se

colocan en capas.

Evitar solapamiento de capas

Dado que las celdas de las tablas no se pueden superponer, Dreamweaver no

puede crear una tabla a partir de capas superpuestas. Si tiene previsto convertir las

capas de un documento en tablas para ofrecer compatibilidad con los navegadores

3.0, utilice la opción Evitar solapamiento a ﬁn de limitar el movimiento y la

ubicación de las capas y evitar su solapamiento.

Para evitar el solapamiento de capas:

Elija Modiﬁcar > Organizar > Evitar solapamiento de capas, o seleccione la opción

Evitar solapamiento en el panel Capas.

Usar capas dinámicas 445

Cuando esté activada esta opción, no podrá crear capas delante de otras capas

existentes; tampoco podrá mover, cambiar el tamaño o anidar capas en otras ya

existentes. Si activa esta opción después de crear capas superpuestas, arrastre la

capa superpuesta para apartarla de la otra capa. Al activar la opción Evitar

solapamiento de capas, Dreamweaver no repara automáticamente las capas

superpuestas que haya en la página.

Cuando esta opción y la de ajuste de posición estén activadas, las capas no se

ajustarán a la cuadrícula si con ello se diera lugar al solapamiento de dos capas. Por

el contrario, se ajustarán al borde de la capa más próxima.

Nota: Algunas acciones le permiten superponer capas incluso cuando está activada la

opción Evitar solapamiento. Si inserta una capa desde el menú, introduce números en el

inspector de propiedades o cambia las capas de posición editando el código HTML en el

inspector de propiedades, puede provocar que las capas se superpongan o aniden a pesar

de que la opción esté activada. Si se produce una situación de este tipo, arrastre las capas

superpuestas en la ventana de documento para separarlas.

Convertir para compatibilidad con la versión 3.0

Use la opción Convertir del menú Archivo para crear una versión compatible con

un navegador 3.0 de una página que utiliza capas. Dreamweaver crea un

documento convertido independiente y conserva el documento original.

En general, sólo deberá convertir un documento cuando esté completamente

satisfecho con el archivo original, ya que deberá repetir la conversión cada vez que

cambie el archivo original.

Para convertir un archivo para uso con navegadores 3.0:

1 Elija Archivo > Convertir > Compatible con navegador 3.0.

2 En el cuadro de diálogo que aparece, elija si desea convertir capas a tablas,

estilos CSS a formato HTML (estilos de carácter) o ambas opciones.

3 Haga clic en Aceptar.

Dreamweaver abrirá el archivo convertido en una ventana nueva y sin título. Si ha

seleccionado Convertir capas en tabla o ambos, todas las capas son sustituidas por

una sola tabla que conserva la colocación original.

Nota: Las capas superpuestas no se pueden convertir, al igual que las capas que están

fuera de la página a la izquierda o en la parte superior.

Si ha seleccionado Convertir estilos CSS en formato HTML o ambos, el formato

CSS será sustituido, en los casos en que sea posible, por estilos con caracteres

HTML. Todo el formato CSS que no se pueda convertir a HTML será eliminado.

Consulte la “Tabla de conversión de CSS a formato HTML” en la página 269

para obtener información sobre los estilos que se convierten y los que se eliminan.

Capítulo 17446

El código de línea de tiempo que anima capas se elimina. El código de línea de

tiempo que no está relacionado con capas (por ejemplo, comportamientos o

cambios en el origen de la imagen) se ejecutará según lo especiﬁcado. La línea de

tiempo se rebobinará automáticamente hasta el fotograma 1. Para obtener más

información sobre líneas de tiempo, consulte “Crear una animación de líneas de

tiempo” en la página 449.

Animar las capas

Se conoce por HTML dinámico, o DHTML, el lenguaje HTML capaz de

cambiar las propiedades de estilo o de ubicación de elementos HTML con un

lenguaje de secuencias de comandos. Las líneas de tiempo usan HTML dinámico

para cambiar las propiedades de las capas e imágenes en una serie de fotogramas

con el transcurso del tiempo. Use líneas de tiempo para crear animaciones sin

controles ActiveX, plug-ins, ni applets de Java (aunque sí requieren código

JavaScript).

Las líneas de tiempo crean la animación al cambiar la posición, el tamaño, la

visibilidad y el orden de apilamiento de una capa con el transcurso del tiempo. Las

líneas de tiempo también sirven para realizar otras acciones que después de que

termine de cargarse la página. Por ejemplo, las líneas de tiempo pueden cambiar el

archivo de origen de una etiqueta de imagen por lo que durante un periodo de

tiempo aparecerán diferentes imágenes en la página. Las funciones de capa de las

líneas de tiempo solamente funcionan en las versiones 4.0 o posteriores de los

navegadores.

Para ver el código JavaScript generado por una línea de tiempo, abra el inspector

de HTML. El código de línea de tiempo está en la función

MM_initTimelines

dentro de una etiqueta script en la sección head del documento.

Al editar el código HTML de un documento que contenga líneas de tiempo,

tenga cuidado de no mover, renombrar o borrar algo que esté relacionado con la

línea de tiempo.

Usar capas dinámicas 447

Panel Líneas de tiempo

El panel Líneas de tiempo representa las propiedades de las capas e imágenes en el

transcurso del tiempo. Elija Ventana > Líneas de tiempo para abrir el panel Líneas

de tiempo.

Haga clic con el botón derecho del ratón (Windows) o haga clic manteniendo

presionada la tecla Control (Macintosh) en el panel Líneas de tiempo para abrir

un menú contextual que incluye todos los comandos importantes.

Cabezal de reproducción Muestra qué fotograma de la línea de tiempo se está

visualizando actualmente en la página.

Menú emergente Línea de tiempo Especiﬁca qué líneas de tiempo del documento

se están mostrando actualmente en el panel Líneas de tiempo.

Canales de animación Muestran barras para animar capas e imágenes.

Barras de animación Muestran la duración de la animación de cada objeto. Una

sola ﬁla puede incluir múltiples barras en representación de otros tantos objetos.

Barras diferentes no pueden controlar un mismo objeto en el mismo fotograma.

Cuadros clave Son fotogramas de una barra en los que se han especiﬁcado

propiedades del objeto (como posición, por ejemplo). Dreamweaver calcula

valores intermedios para fotogramas en cuadros clave. Los cuadros clave se señalan

mediante pequeños círculos.

Canal Behaviors Es el canal de los comportamientos que deben ejecutarse en un

fotograma determinado de la línea de tiempo.

Cuadros clave

Canal Behaviors

Menú emergente Línea de tiempo

Canales de animación

Barras de animación

Cabezal de reproducción

Número de fotogramas

Capítulo 17448

Número de fotogramas indica la numeración secuencial de los fotogramas. El

número que aparece entre los botones Atrás y Reproducir es el fotograma actual.

La duración de la animación se controla estableciendo el número total de

fotogramas y el número de fotogramas por segundo (fps). El valor predeterminado

de 15 fotogramas por segundo es una buena velocidad media para la mayoría de

los navegadores que se ejecutan en sistemas normales Windows o Macintosh. Las

velocidades más altas no mejoran necesariamente los resultados. Los navegadores

siempre reproducen todos los fotogramas de la animación, incluso aunque en el

sistema del usuario no puedan alcanzar la velocidad de fotogramas por segundo.

La velocidad de fotogramas se ignora si es superior a la que puede admitir el

navegador.

Opciones de reproducción

A continuación se enumeran las opciones de reproducción para ver la animación.

Rebobinar Desplaza el cabezal de reproducción hasta el primer fotograma de la

línea de tiempo.

Atrás Desplaza el cabezal de reproducción un fotograma hacia la izquierda. Haga

clic en el botón Atrás y manténgalo presionado para reproducir la línea de tiempo

hacia atrás.

Reproducir Desplaza el cabezal de reproducción un fotograma hacia la derecha.

Haga clic en el botón Reproducir y manténgalo presionado para reproducir la

línea de tiempo continuamente.

Rep. autom. Inicia automáticamente la reproducción de una línea de tiempo

cuando la página actual se carga en un navegador. Rep. autom. adjunta un

comportamiento a la sección body de la página que ejecuta la acción Reproducir

línea de tiempo cuando se carga la página.

Bucle Hace que la línea de tiempo actual se reproduzca en bucle indeﬁnidamente

mientras la página esté abierta en un navegador. Bucle inserta el comportamiento

Ir a fotograma en línea de tiempo en el canal Behaviors después del último

fotograma de la animación. Haga doble clic en el marcador de este fotograma para

editar los parámetros de este comportamiento y cambiar el número de repeticiones

en bucle.

Usar capas dinámicas 449

Crear una animación de líneas de tiempo

Las líneas de tiempo crean la animación al cambiar la posición, el tamaño, la

visibilidad y el orden de apilamiento de las capas. Las líneas de tiempo también

pueden cambiar los archivos de origen de las imágenes, lo que permite crear una

presentación de diapositivas.

Las líneas de tiempo solamente pueden mover capas. Para hacer que se muevan

imágenes o texto, cree una capa usando el botón Dibujar capa del panel Objetos y

luego inserte imágenes, texto o cualquier otro tipo de contenido en la capa.

Consulte “Crear capas en la página” en la página 429.

Para crear una animación de líneas de tiempo:

1 Para animar una capa, desplace la capa al lugar donde deberá estar cuando se

inicie la animación.

2 Elija Ventana > Líneas de tiempo.

3 Seleccione la capa que desea animar.

Asegúrese de haber seleccionado el elemento deseado. Haga clic en la marca de

capas, el manejador de selección de capas, o use el panel Capas para seleccionar

una capa. Consulte también “Trabajar con capas” en la página 432. Al

seleccionar una capa, a su alrededor aparecen manejadores, como se muestra en

la siguiente ilustración.

Al hacer clic en la capa, en su interior aparecerá un punto de inserción

intermitente, pero no se selecciona la capa.

4 Elija Modiﬁcar > Línea de tiempo > Añadir objeto a línea de tiempo, o

simplemente arrastre el objeto seleccionado al interior del panel Líneas de

tiempo.

Aparecerá una barra en el primer canal de la línea de tiempo. En la barra se

mostrará el nombre de la capa.

Haga clic en el

marcador de la

capa para

seleccionarla

Botón Arrastrar

capa

Capa seleccionada

con una imagen en

su interior

Capítulo 17450

Haga clic en el marcador del cuadro clave que se encuentra en el extremo de la

barra.

6 Desplace la capa al lugar de la página en el que deberá estar cuando termine la

animación. Aparecerá una línea que indica la ruta de la animación en la ventana

de documento.

7 Si desea que la capa se desplace describiendo una curva, seleccione su barra de

animación y haga clic manteniendo presionada la tecla Control (Windows) o la

tecla Comando (Macintosh) en un fotograma en medio de la barra para añadir

un cuadro clave en el fotograma en que se ha hecho clic, o haga clic en un

fotograma en medio de la barra de animación y elija Añadir cuadro clave en el

menú contextual.

Repita este paso para deﬁnir más cuadros clave.

8 Mantenga presionado el botón Reproducir para obtener una vista previa de la

animación en la página.

Repita el procedimiento para añadir otras capas e imágenes a la línea de tiempo

y para crear una animación más compleja.

Crear una línea de tiempo arrastrando una ruta

Si desea crear una animación con una ruta compleja, puede ser más conveniente

grabar la ruta al arrastrar la capa en lugar de crear cuadros clave individuales.

Para crear una línea de tiempo arrastrando una ruta:

1 Seleccione una capa.

2 Desplace la capa al lugar donde deberá estar cuando se inicie la animación.

Asegúrese de haber seleccionado el elemento correcto. Haga clic en la marca de

capas, el manejador de selección de capas, o use el panel Capas para seleccionar

una capa. Consulte también “Trabajar con capas” en la página 432.

3 Elija Modiﬁcar > Línea de tiempo > Ruta grabada de capa.

4 Arrastre la capa por la página para crear una ruta.

5 Suelte el botón del ratón en el punto en donde debe detenerse la animación.

Dreamweaver añade una barra de animación a la línea de tiempo con el número

adecuado de cuadros clave.

6 En el panel Líneas de tiempo, haga clic en el botón Rebobinar; luego,

mantenga presionado el botón Reproducir para obtener una vista previa de la

animación.

Usar capas dinámicas 451

Modificar líneas de tiempo

Después de deﬁnir los componentes básicos de una línea de tiempo, se pueden

realizar cambios como añadir y eliminar fotogramas, cambiar el momento de

inicio de la animación, etc.

Para modificar una línea de tiempo, lleve a cabo una de estas operaciones:

• Para prolongar la duración de la animación, arrastre el marcador del fotograma

ﬁnal hacia la derecha. Todos los cuadros clave de la animación se desplazarán,

por lo que sus posiciones relativas permanecerán constantes. Mantenga

presionada la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra el

marcador del fotograma ﬁnal.

• 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 animación, seleccione una o todas

las barras asociadas con la animación (presione la tecla Mayús para seleccionar

más de una barra a la vez) y arrástrelas a derecha o izquierda.

• Para desplazar la posición de una ruta de animación completa, seleccione toda

la barra y luego arrastre el objeto por la página. Dreamweaver ajusta la posición

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 añadir o eliminar fotogramas de la línea de tiempo, elija Modiﬁcar > Línea

de tiempo > Añadir fotograma, o Modiﬁcar > Línea de tiempo > Eliminar

fotograma.

• Para hacer que la línea de tiempo se reproduzca automáticamente al abrirse la

página en un navegador, haga clic en Rep. autom. Rep. autom. adjunta un

comportamiento a la página que ejecuta la acción Reproducir línea de tiempo

cuando se carga la página.

• Para conseguir que la página se reproduzca continuamente en bucle, haga clic

en Bucle. Bucle inserta la acción Ir a fotograma en línea de tiempo en el canal

Behavior después del último fotograma de la animación. Pueden editarse los

parámetros de este comportamiento para deﬁnir el número deseado de

repeticiones en bucle.

Capítulo 17452

Cambiar propiedades de imagen y capa con líneas de tiempo

Además de mover capas con líneas de tiempo, se puede cambiar el archivo de

origen de una imagen y la visibilidad, el tamaño y el orden de apilamiento de una

capa.

Para cambiar las propiedades de imagen y capa con una línea de tiempo:

1 En el panel Líneas de tiempo, lleve a cabo una de estas operaciones:

• Seleccione un cuadro clave de la barra que controla el objeto que desea cambiar.

(Los fotogramas inicial y ﬁnal siempre son cuadros clave.)

• Para crear un nuevo cuadro clave, haga clic en un fotograma situado en medio

de la barra de animación y elija Modiﬁcar > Línea de tiempo > Añadir cuadro

clave o haga clic mientras mantiene presionada la tecla Control (Windows) o

Comando (Macintosh) en un fotograma de la barra de animación.

2 Deﬁna 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 campo Src en el inspector de propiedades para

examinar y seleccionar una nueva imagen.

• Para cambiar la visibilidad de una capa, elija inherit, visible o hidden (heredada,

visible u oculta) del menú emergente Visibilidad en el inspector de

propiedades. O utilice los iconos de ojos del panel Capas. Consulte “Cambiar

la visibilidad de una capa” en la página 442.

• Para cambiar el tamaño de una capa, arrastre la capa por los manejadores de

cambio de tamaño o introduzca nuevos valores en los campos Ancho y Alto del

inspector de propiedades. Actualmente, los navegadores de las versiones

Internet Explorer 4.0 y 5.0 son los únicos capaces de cambiar dinámicamente el

tamaño de una capa.

• Para cambiar el orden de apilamiento de una capa, introduzca un nuevo valor

en el campo índice Z o use el panel Capas para cambiar el orden de apilamiento

de la capa actual. Consulte “Cambiar el orden de apilamiento de las capas” en

la página 441.

3 Mantenga presionado el botón Reproducir para ver la animación.

La capa actualmente seleccionada siempre está visible y en la primera posición del

orden de apilamiento.

Usar capas dinámicas 453

Usar múltiples líneas de tiempo

En lugar de intentar controlar la totalidad de la acción en una página con una

línea de tiempo, resulta más fácil trabajar con líneas de tiempo independientes que

controlen partes concretas de la página. Por ejemplo, una página puede incluir

elementos interactivos cada uno de los cuales puede desencadenar la reproducción

de diferentes líneas de tiempo.

Para manejar múltiples líneas de tiempo, use las opciones siguientes:

• Para crear una nueva línea de tiempo, elija Modiﬁcar > Línea de tiempo >

Añadir línea de tiempo.

• Para eliminar la línea de tiempo seleccionada, elija Modiﬁcar > Línea de tiempo

> Quitar línea de tiempo. De esta manera, se eliminan permanentemente todas

las animaciones de esta línea de tiempo.

• Para renombrar la línea de tiempo seleccionada, elija Modiﬁcar > Línea de

tiempo > Cambiar nombre de línea de tiempo o introduzca un nuevo nombre

en el menú emergente Línea de tiempo del panel Líneas de tiempo.

• Para ver una línea de tiempo diferente en el panel Líneas de tiempo, elija una

nueva línea de tiempo en el menú emergente Línea de tiempo del panel Líneas

de tiempo.

Copiar y pegar animaciones

Cuando ya tenga la secuencia de animación que desea, podrá copiarla y pegarla en

otra zona de la línea de tiempo actual, en otra línea de tiempo del mismo

documento o en una línea de tiempo de otro documento. También puede copiar y

pegar múltiples secuencias de una sola vez.

Para cortar o copiar y pegar secuencias de animación:

1 Haga clic en una barra de animación para seleccionar una secuencia. Para

seleccionar múltiples secuencias, haga clic mientras mantiene presionada la

tecla Mayús, o presione Conrtol+A (Windows) o Comando+A (Macintosh)

para seleccionar todas las secuencias.

2 Copie o corte la selección.

3 Lleve a cabo una de estas operaciones:

• Desplace el cabezal de reproducción a otro lugar de la línea de tiempo actual.

• Seleccione otra línea de tiempo en el menú emergente Línea de tiempo.

• Abra otro documento o cree uno nuevo y después, haga clic en el panel Líneas

de tiempo.

Capítulo 17454

Pegue la selección en la línea de tiempo.

Las barras de animación de un mismo objeto no pueden superponerse porque

una capa no puede estar en dos lugares a la vez (tampoco una imagen puede

tener dos orígenes diferentes al mismo tiempo). Si la barra de animación en la

que está pegando la selección llegase a superponerse con otra barra de

animación del mismo objeto, automáticamente Dreamweaver desplazaría la

selección al primer fotograma en que no se superpusiera.

A la hora de pegar secuencias de animación en otro documento, hay que tener

presentes estos dos principios:

• Si se copia una secuencia de animación para una capa y el nuevo documento

contiene una capa con el mismo nombre, Dreamweaver aplicará las

propiedades de la animación a la capa existente en el nuevo documento.

• Si se copia una secuencia de animación 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 animación.

Para aplicar la secuencia de animación pegada a otra capa del nuevo

documento, elija Cambiar objeto en el menú contextual y seleccione el nombre

de la segunda capa en el menú emergente. Si lo desea, puede borrar la capa

pegada. Consulte “Aplicar una secuencia de animación a un objeto diferente”

en la página 454.

Aplicar una secuencia de animación a un objeto diferente

Para ahorrar tiempo, se puede crear una secuencia de animación una sola vez y

aplicarla a todas las demás capas del documento.

Para aplicar una secuencia de animación existente a otros objetos:

1 En el panel Líneas de tiempo, seleccione la secuencia de animación y cópiela.

2 Haga clic en cualquier fotograma del panel Líneas de tiempo y pegue la

secuencia en ese fotograma.

3 Haga clic con el botón derecho del ratón (Windows) o haga clic manteniendo

presionada la tecla Control (Macintosh) en la secuencia de animación pegada y

elija Cambiar objeto en el menú contextual.

4 En el cuadro de diálogo que aparece a continuación, elija otro objeto en el

menú desplegable y haga clic en Aceptar.

5 Repita los pasos del 2 al 4 para todos los demás objetos a los que desee aplicar la

misma secuencia de animación.

También puede cambiar de idea con respecto a la capa que desea animar, después

de haber creado la secuencia de animación; en este caso, basta con que siga los

pasos 3 y 4 anteriores (no es necesario copiar y pegar).

Usar capas dinámicas 455

Sugerencias para la animación de líneas de tiempo

Las siguientes sugerencias pueden mejorar el resultado de sus animaciones, y

facilitar considerablemente su creación:

• Muestre y oculte capas en lugar de cambiar el archivo de origen en animaciones

con múltiples imágenes. Cambiar el archivo de origen de una imagen puede

ralentizar la animación porque tendrá que cargarse la nueva imagen. Si todas las

imágenes se cargan de una vez en capas ocultas antes de que se ejecute la

animación, se evitarán las pausas y la ausencia de imágenes.

• Amplíe las barras de animación para crear un movimiento más suave. Si la

animación resulta entrecortada y las imágenes saltan de una posición a otra,

arrastre el fotograma ﬁnal de la barra de animación de la capa para extender el

movimiento sobre más fotogramas. Al alargar la barra de animación se crean

más puntos de datos entre los puntos de inicio y de ﬁnal del movimiento; esto

también hace que el movimiento sea más lento. Intente incrementar el número

de fotogramas por segundo (fps) para aumentar la velocidad, pero tenga en

cuenta que la mayoría de los navegadores que se ejecutan en sistemas de tipo

medio no admiten animaciones a velocidades superiores a 15 fps. Pruebe la

animación en distintos sistemas con diferentes navegadores para encontrar la

mejor conﬁguración posible.

• No anime grandes mapas de bits. La animación de imágenes grandes da lugar a

animaciones lentas. Como alternativa, cree imágenes compuestas y mueva

partes pequeñas de estas imágenes. Por ejemplo, muestre un automóvil en

movimiento animando solamente las ruedas.

• Cree animaciones simples. No cree animaciones que requieran recursos

distintos a los que pueden ofrecer los navegadores actuales. Los navegadores

siempre reproducen todos los fotogramas en una animación de línea de tiempo,

incluso cuando las prestaciones del sistema o de Internet se reducen.

Capítulo 17456

Acciones de comportamiento para controlar

líneas de tiempo de capas

Adjunte las acciones de comportamiento que aquí se indican a un vínculo, botón

u otro objeto para controlar líneas de tiempo y capas. Para crear efectos atractivos,

puede colocar comportamientos que contengan estas acciones en el canal

Behaviors. Por ejemplo, puede hacer que una línea de tiempo se detenga por sí

sola. Para obtener más información, consulte “Adjuntar un comportamiento a una

línea de tiempo” en la página 464 y “Usar comportamientos” en la página 457.

Arrastrar capa permite al usuario arrastrar una capa. Use esta acción para crear

puzzles, controles deslizantes y otros elementos móviles de interfaz de usuario.

Consulte “Arrastrar capa” en la página 475.

Mostrar-Ocultar capas muestra, oculta o restaura la visibilidad predeterminada de

una o más capas. Esta acción resulta útil para mostrar información a medida que el

usuario va interactuando con la página. Consulte “Mostrar-Ocultar capas” en la

página 491.

Reproducir línea de tiempo y Detener línea de tiempo permiten a los usuarios

iniciar y detener una línea de tiempo haciendo clic en un vínculo o un botón.

Estas acciones también permiten iniciar y detener una línea de tiempo

automáticamente cuando el usuario pasa el puntero del ratón por un vínculo, una

imagen u otro objeto. Consulte “Reproducir línea de tiempo y Detener línea de

tiempo” en la página 495.

Ir a fotograma en línea de tiempo hace que la línea de tiempo salte a un fotograma

determinado. La casilla de veriﬁcación Bucle del panel Líneas de tiempo, añade la

acción Ir a fotograma en línea de tiempo después del último fotograma de la

animación; esto hace que vaya al fotograma 1 y vuelva a iniciarse la animación.

Consulte “Ir a un fotograma en la línea de tiempo” en la página 494.

Definir texto de capa reemplaza el contenido y el formato de una capa existente en

una página con el contenido que usted especiﬁque. Dicho contenido puede incluir

cualquier código HTML. Consulte “Deﬁnir texto de capa” en la página 488.

457

CAPÍTULO 18

.............................................................................................................

Usar comportamientos

Los comportamientos permiten a los visitantes interactuar con la página Web para

modiﬁcarla de diversas maneras o provocar la realización de determinadas tareas.

Un comportamiento es una combinación de un evento con una acción que

desencadena ese evento. En el panel Comportamientos, un comportamiento se

añade a una página especiﬁcando una acción y especiﬁcando luego el evento que

desencadena esa acción.

Los eventos son mensajes generados por los navegadores que indican que un

visitante de la página ha hecho algo. Por ejemplo, cuando un visitante mueve el

puntero sobre un vínculo, el navegador genera un evento onMouseOver para ese

vínculo; y luego comprueba si hay código JavaScript al que deba llamar cuando se

genera ese evento para ese vínculo. Los diferentes elementos de la página tienen

deﬁnidos diferentes eventos; por ejemplo, en la mayoría de los navegadores

onMouseOver y onClick son eventos asociados con vínculos, en donde onLoad es un

evento asociado con imágenes y con la sección body del documento.

Las acciones constan de código JavaScript ya deﬁnido que realiza una tarea

especíﬁca, como abrir la ventana de un navegador, mostrar u ocultar una capa,

reproducir un sonido o detener una película Shockwave. Las acciones

incorporadas en Dreamweaver han sido cuidadosamente desarrolladas por los

ingenieros de Dreamweaver para proporcionar la máxima compatibilidad con los

distintos navegadores.

Después de adjuntar un comportamiento a un elemento de página, siempre que el

elemento especiﬁcado se produce para ese elemento, el navegador llama la acción

(el código JavaScript) que usted haya asociado con ese evento. (Los eventos que

puede utilizar para desencadenar una acción determinada varían en función del

navegador de que se trate.) Por ejemplo, si adjunta la acción Mensaje emergente a

un vínculo y especiﬁca que esa acción sea desencadenada por el evento

onMouseOver, entonces siempre que alguien pase el puntero del ratón sobre ese

vínculo en el navegador, emergerá el mensaje en un cuadro de diálogo.

Capítulo 18458

Un mismo evento puede desencadenar varias acciones distintas, y se puede

especiﬁcar el orden en que esas acciones tengan lugar.

Macromedia Dreamweaver incluye alrededor de dos docenas de acciones de

comportamiento; pueden encontrarse otras acciones en el sitio Web Macromedia

Exchange, así como en los sitios Web de otros desarrolladores. (Consulte

“Descargar e instalar comportamientos de terceros” en la página 466.) Si dispone

de los conocimientos necesarios sobre JavaScript, puede escribir sus propias

acciones de comportamiento. Para obtener más información sobre cómo escribir

acciones de comportamiento, consulte Ampliación de Dreamweaver.

Nota: Los términos comportamiento y acción son términos de Dreamweaver, no de HTML.

En lo que se refiere al navegador, una acción es igual que cualquier otro elemento de

código JavaScript.

El panel Comportamientos

Use el panel Comportamientos para adjuntar comportamientos a los elementos de

la página (más concretamente, a las etiquetas) y para modiﬁcar parámetros de

otros comporamientos adjuntados anteriormente.

Para abrir el panel Comportamientos, elija Ventana > Comportamientos.

La etiqueta actualmente seleccionada en la ventana de documento aparece en la

barra de título del panel Comportamientos. Los comportamientos que ya se han

adjuntado al elemento de página actualmente seleccionado aparecen en la lista de

comportamientos (el área principal del panel), en orden alfabético por eventos. Si

hay varias acciones para un mismo evento, las acciones aparecen en el orden en

que se ejecutarán. Si en la lista de comportamientos no aparece ningún

comportamiento, signiﬁca que no hay ningún comportamiento adjuntado al

elemento actualmente seleccionado.

Para obtener información detallada sobre las opciones del panel

Comportamientos, consulte la Ayuda de Dreamweaver.

Eventos

En la siguiente lista se describen los eventos que pueden asociarse a las acciones

relacionadas en el menú emergente Acciones (+) del panel Comportamientos.

Cuando un visitante de la página Web interactúa con la página (por ejemplo,

haciendo clic en una imagen) el navegador genera sucesos que pueden utilizarse

para llamar a funciones JavaScript que, a su vez, provocan la ejecución de una

acción. (Los eventos también pueden generarse sin interacción del usuario, por

ejemplo, cuando se conﬁgura una página para que vuelva a cargarse cada 10

segundos.) Dreamweaver proporciona numerosas acciones comunes que pueden

desencadenarse utilizando estos eventos.

Usar comportamientos 459

La lista también especiﬁca qué navegadores permiten generar cada evento. NS3

signiﬁca Netscape Navigator 3.0; NS4 signiﬁca Netscape Navigator 4.0; IE3

signiﬁca Internet Explorer 3.0; IE4 signiﬁca Internet Explorer 4.0. Para obtener

más información sobre eventos en Internet Explorer, consulte la página de eventos

de HTML dinámico de Microsoft (que se menciona en “Recursos tecnológicos

HTML y Web” en la página 25).

Tenga en cuenta que la mayoría de los eventos solamente pueden usarse con

determinados elementos de página. Para conocer cuáles son los eventos que

admite un navegador determinado para un elemento de página concreto, inserte el

elemento de página en su documento, adjúntele un comportamiento y luego mire

el menú emergente Eventos del panel Comportamientos. Para saber con exactitud

cuáles son las etiquetas que se pueden usar con un evento dado en un navegador

determinado, busque el evento en uno de los archivos de la carpeta Dreamweaver/

Conﬁguration/Behaviors/Events.

onAbort (NS3, NS4, IE4, IE5) se genera cuando el visitante detiene el navegador

antes de que se cargue completamente una imagen (por ejemplo, cuando el

usuario hace clic en el botón Detener del navegador mientras se está cargando una

imagen).

onAfterUpdate (IE4, IE5) se genera cuando un elemento de datos vinculados de la

página termina de actualizar el origen de los datos.

onBeforeUpdate (IE4, IE5) se genera cuando un elemento de datos vinculados de

la página ha cambiado y va a perder foco (y, por consiguiente, va a actualizar el

origen de los datos).

onBlur (NS3, NS4, IE3, IE4, IE5) es lo contrario a onFocus. El evento onBlur se

genera cuando el elemento especiﬁcado deja de ser el foco de interacción del

visitante. Por ejemplo, cuando un visitante hace clic fuera de un campo de texto

después de haber hecho clic en él, el navegador genera un evento onBlur para el

campo de texto.

onBounce (IE4, IE5) se genera cuando el contenido de un elemento de

marquesina ha alcanzado el límite de la marquesina.

onChange (NS3, NS4, IE3, IE4, IE5) se genera cuando el visitante cambia un

valor de la página, como, por ejemplo, cuando el visitante elige un elemento de un

menú o cambia el valor de un campo de texto y, seguidamente, hace clic en algún

otro lugar de la página.

onClick (NS3, NS4, IE3, IE4, IE5) se genera cuando el visitante hace clic en el

elemento especiﬁcado, como, por ejemplo, un vínculo, un botón o un mapa de

imagen. (El clic no termina hasta que el visitante suelta el botón del ratón; puede

usar onMouseDown para que se produzca una acción en el momento en que se

presiona el botón.)

onDblClick (NS4, IE4, IE5) se genera cuando el visitante hace doble clic en el

elemento especiﬁcado. (Hacer doble clic consiste en presionar y soltar

rápidamente el botón del ratón mientras se señala al elemento.)

Capítulo 18460

onError (NS3, NS4, IE4, IE5) se genera cuando se produce un error en el

navegador al cargar una página o una imagen.

onFinish (IE4, IE5) se genera cuando el contenido de un elemento de marquesina

completa un bucle.

onFocus (NS3, NS4, IE3, IE4, IE5) se genera cuando el elemento especiﬁcado se

convierte en el foco de interacción del visitante. Por ejemplo, al hacer clic en un

campo de texto de un formulario, se genera un evento onFocus.

onHelp (IE4, IE5) se genera cuando el visitante hace clic en el botón de Ayuda o

elige Ayuda del menú de un navegador.

onKeyDown (NS4, IE4, IE5) se genera en el momento en que el visitante presiona

cualquier tecla. (No es preciso que el visitante suelte la tecla para que se genere este

evento.) El navegador no puede detectar qué tecla se ha presionado.

onKeyPress (NS4, IE4, IE5) se genera cuando el visitante presiona y suelta

cualquier tecla; este evento es una combinación de los eventos onKeyDown y onKeyUp.

El navegador no puede detectar qué tecla se ha presionado.

onKeyUp (NS4, IE4, IE5) se genera cuando el visitante suelta una tecla después de

presionarla. El navegador no puede detectar qué tecla se ha presionado.

onLoad (NS3, NS4, IE3, IE4, IE5) se genera cuando termina de cargarse una

imagen o una página.

onMouseDown (NS4, IE4, IE5) se genera cuando el visitante presiona el botón del

ratón. (No es necesario que el usuario suelte el botón del ratón para que se genere

este evento.)

onMouseMove (IE3, IE4, IE5) se genera cuando el visitante mueve el ratón

mientras señala al elemento especiﬁcado. (Es decir, el puntero permanece dentro

de los límites del elemento.)

onMouseOut (NS3, NS4, IE4, IE5) se genera cuando el puntero abandona el

elemento especiﬁcado. (Normalmente, el elemento especiﬁcado es una imagen, o

un vínculo adjuntado a una imagen.) Este evento se usa a menudo junto con el

comportamiento Restaurar imagen intercambiada para devolver una imagen a su

estado original cuando el visitante deja de señalarla con el puntero del ratón.

onMouseOver (NS3, NS4, IE3, IE4, IE5) se genera cuando el ratón se mueve por

primera vez para señalar el elemento epeciﬁcado (es decir, cuando el puntero pasa

de no estar señalando a estar señalando el elemento). El elemento especiﬁcado

para este evento es generalmente un vínculo.

onMouseUp (NS4, IE4, IE5) se genera cuando se suelta un botón del ratón que se

encuentra presionado.

onMove (NS4) se genera cuando se mueve una ventana o un marco.

Usar comportamientos 461

onReadyStateChange (IE4, IE5) se genera cuando cambia el estado del elemento

especiﬁcado. Entre los estados posibles del elemento ﬁguran

uninitialized (sin

inicializar),

loading (cargando) y complete (terminado).

onReset (NS3, NS4, IE3, IE4, IE5) se genera cuando se restauran los valores

predeterminados de un formulario.

onResize (NS4, IE4, IE5) se genera cuando el visitante cambia el tamaño de la

ventana del navegador o de un marco.

onRowEnter (IE4, IE5) se genera cuando ha cambiado el puntero de registro

actual del origen de datos vinculados.

onRowExit (IE4, IE5) se genera cuando va a cambiar el puntero de registro actual

del origen de datos vinculados.

onScroll (IE4, IE5) se genera cuando el visitante desplaza la página hacia arriba o

hacia abajo.

onSelect (NS3, NS4, IE3, IE4, IE5) se genera cuando el usuario selecciona texto

en un campo de texto.

onStart (IE4, IE5) se genera cuando el contenido de un elemento de marquesina

inicia un bucle.

onSubmit (NS3, NS4, IE3, IE4, IE5) se genera cuando el visitante envía un

formulario.

onUnload (NS3, NS4, IE3, IE4, IE5) se genera cuando el visitante abandona la

página.

Adjuntar un comportamiento

Se pueden adjuntar comportamientos al documento completo (es decir, a la

etiqueta body) o a vínculos, imágenes, elementos de formulario o a cualquier otro

elemento HTML. El navegador de destino que usted elija determinará los eventos

posibles para un elemento dado. Internet Explorer 4.0, por ejemplo, tiene una

gama de eventos para cada elemento mucho más amplia que Netscape Navigator

4.0, o que la versión 3.0 de cualquier otro navegador.

Nota: No se puede adjuntar un comportamiento a texto normal. Si desea más información,

consulte “Comportamientos y texto” en la página 463.

Se puede especiﬁcar más de una acción para cada evento. Las acciones tienen lugar

en el orden en el que se enumeran en la columna Acciones del panel

Comportamientos. Si desea información sobre la manera de cambiar el orden de

las acciones, consulte “Cambiar un comportamiento” en la página 465.

Capítulo 18462

Para adjuntar un comportamiento:

1 Seleccione un elemento de la página como una imagen o un vínculo, por

ejemplo.

Para adjuntar un comportamiento a la página completa, haga clic en la etiqueta

<body> en el selector de etiquetas, situado en la parte inferior izquierda de la

ventana de documento.

2 Elija Ventana > Comportamientos para abrir el panel Comportamientos.

La etiqueta HTML del objeto seleccionado aparece en la barra de título del

panel Comportamientos.

3 Haga clic en el botón de signo más (+) y elija una acción del menú emergente

Acciones.

No se pueden seleccionar las acciones que aparecen atenuadas en el menú.

Pueden mostrarse atenuadas porque no exista un objeto necesario en el

documento actual. Por ejemplo, la acción Reproducir línea de tiempo se

mostrará atenuada si el documento no tiene líneas de tiempo, y la acción

Controlar Shockwave o Flash aparecerá atenuada si el documento no contiene

películas Shockwave o Flash. Si no hay eventos para el objeto seleccionado,

todas las acciones aparecerán atenuadas.

Cuando se elige una acción, aparecerá un cuadro de diálogo en el que se

mostrarán los parámetros e instrucciones de la acción.

4 Introduzca los parámetros de la acción y haga clic en Aceptar.

Todas las acciones proporcionadas con Dreamweaver funcionan con los

navegadores de la versión 4.0 y posteriores. Algunas acciones no funcionan en

los navegadores antiguos. Consulte “Usar las acciones de comportamiento

incluidas con Dreamweaver” en la página 467.

Usar comportamientos 463

El evento predeterminado que desencadena la acción aparece en la columna

Eventos. Si este no es el evento que desea para el desencadenamiento de la

acción, seleccione otro en el menú emergente Eventos. (Para abrir el menú

emergente Eventos, seleccione un evento o una acción en el panel

Comportamientos y haga clic en la ﬂecha negra que señala hacia abajo que

aparece entre el nombre del evento y el nombre de la acción.)

En el menú emergente Eventos aparecen diferentes eventos en función del

objeto seleccionado y de los navegadores especiﬁcados en el submenú Mostrar

eventos para. Los eventos pueden aparecer atenuados si los objetos pertinentes

aún no existen en la página o si el objeto seleccionado no puede recibir eventos.

Si no aparecen los eventos esperados, asegúrese de que está seleccionado el

objeto correcto o cambie los navegadores de destino en el menú emergente

Mostrar eventos para.

Al adjuntar un comportamiento a una imagen, algunos eventos (como

onMouseOver) aparecen entre paréntesis. Estos eventos solamente están

disponibles para vínculos. Cuando se elige uno de ellos, Dreamweaver ajusta

una etiqueta aalrededor de la imagen para deﬁnir un vínculo nulo. El vínculo

nulo es representado por javascript:; en el cuadro Vínculos del inspector de

propiedades. Puede cambiar el valor del vínculo si desea convertirlo en un

vínculo real con otra página, pero si borra el vínculo JavaScript sin sustituirlo

por otro vínculo, borrará el comportamiento.

Comportamientos y texto

No se puede adjuntar un comportamiento a texto normal. Las etiquetas como p y

span no generan eventos en los navegadores, por lo que no es posible desencadenar

una acción a partir de esas etiquetas.

Sin embargo, sí se puede adjuntar un comportamiento a un vínculo. Por ello, la

manera más fácil de adjuntar un comportamiento a texto consiste en añadir un

vínculo nulo (que no señala a nada) al texto, y luego adjuntar el comportamiento

al vínculo. Tenga en cuenta que al hacerlo, el texto tendrá apariencia de vínculo.

(Puede cambiar el color del vínculo y eliminar el subrayado si no desea que

parezca un vínculo, si bien, de esta manera los visitantes del sitio no se darán

cuenta de que hay una razón para hacer clic en ese texto.)

Para adjuntar un comportamiento al texto seleccionado:

1 En el inspector de propiedades, introduzca javascript:; en el campo Vínculo.

Asegúrese de insluir tanto los dos puntos como el punto y coma.

Nota: Si lo desea, como alternativa, puede usar un signo de almohadilla (#) en el campo

Vínculo. El problema de usar un signo de almohadilla es que cuando un visitante hace

clic en un vínculo, el navegador salta a la parte superior de la página. Hacer clic en el

vínculo nulo de JavaScript no produce efecto alguno en la página, por lo que la solución

de JavaScript suele ser la preferible.

Capítulo 18464

Con el texto todavía seleccionado, abra el panel Comportamientos (Ventana>

Comportamientos).

3 Elija una acción en el menú emergente Acciones, introduzca los parámetros de

la acción y seleccione un evento que desencadene la acción. Si desea más

información, consulte “Adjuntar un comportamiento” en la página 461.

Para cambiar la apariencia del texto vinculado:

1 Abra el inspector de códigos (Ventana > Inspector de códigos) o la vista Código

de la ventana de documento.

2 Busque el vínculo

3 En la etiqueta a href del vínculo, inserte este atributo: style="text-

decoration:none; color:black".

Al incluir este atributo, se desactiva el subrayado y el color del texto se establece

en negro. (Por supuesto, si el texto contiguo es de un color distinto, use ese

color en lugar del negro.)

Para cambiar la apariencia del texto vinculado en todos los lugares en que

aparece en la página o en todo el sitio, use los estilos CSS para crear un nuevo

estilo para los enlaces. Si desea más información, consulte “Insertar y aplicar

formato a texto” en la página 243.

Adjuntar un comportamiento a una línea de

tiempo

Para desencadenar un comportamiento en un fotograma determinado de una

línea de tiempo (en lugar de que sea la interacción del visitante la que lo

desencadene), coloque el comportamiento en la línea de tiempo. (Para obtener

información sobre la creación de una línea de tiempo, consulte “Animar las capas”

en la página 446.) Por ejemplo, puede hacer que se empiece a reproducir un

sonido en el fotograma 15 de una línea de tiempo.

Sólo un tipo de evento puede desencadenar una acción en una línea de tiempo: la

animación llega a un número de fotograma determinado (un evento onFrame7, por

ejemplo).

El comportamiento puede afectar a cualquier objeto de la página y no sólo a los

objetos de la línea de tiempo. Reproduzca la línea de tiempo en un navegador para

ver cómo funciona el comportamiento. Dentro de Dreamweaver no se puede

obtener la vista previa de un comportamiento.

Usar comportamientos 465

Para colocar un comportamiento en una línea de tiempo:

1 Haga clic en un fotograma en el canal Behaviors del panel Líneas de tiempo.

2 Use el panel Comportamientos para seleccionar la acción que desea que se

realice en ese fotograma.

La acción aparece en el panel Comportamientos, con u evento que indica el

número de fotograma en el que se desencadena la acción. Aparecerá un signo

menos (-) en el canal Comportamientos de la línea de tiempo.

Cambiar un comportamiento

Después de adjuntar un comportamiento, se puede cambiar el evento que

desencadena la acción, añadir o eliminar acciones y cambiar los parámetros de las

acciones.

Para cambiar un comportamiento:

1 Seleccione un objeto con un comportamiento adjuntado.

2 Elija Ventana > Comportamientos para abrir el panel Comportamientos.

Los comportamientos aparecerán en el panel ordenados alfabéticamente por

eventos. Si hay varias acciones para un mismo evento, las acciones aparecen en

el orden en que se ejecutarán.

3 Dispone de las opciones siguientes:

• Para editar los parámetros de una acción, haga doble clic en el nombre del

comportamiento o selecciónelo y presione la tecla Entrar (Windows) o Retorno

(Macintosh); seguidamente, cambie los parámetros en el cuadro de diálogo y

haga clic en Aceptar.

• Para cambiar el orden de las acciones de un evento dado, seleccione una acción

y haga clic en los botones de ﬂecha arriba o abajo.

• Para eliminar un comportamiento, selecciónelo y haga clic en el botón de signo

menos (–) o presione Suprimir.

Capítulo 18466

Actualizar un comportamiento

Si sus páginas contienen comportamientos creados con Dreamweaver 1 o

Dreamweaver 2, dichos comportamientos no se actualizarán automáticamente al

abrir las páginas con la versión actual de Dreamweaver. No obstante, al actualizar

una ocurrencia de un comportamiento en una página (siguiendo el procedimiento

que se indica a continuación), también se actualizarán todas las demás ocurrencias

de dicho comportamiento en la página. Los comportamientos creados en

Dreamweaver 3 funcionan correctamente en Dreamweaver 4 sin necesidad de

modiﬁcación.

Para actualizar un comportamiento en una página:

1 Seleccione un elemento que tenga el comportamiento adjunto a él.

2 Abra el panel Comportamientos.

3 Haga doble clic en el comportamiento.

4 Haga clic en Aceptar en el cuadro de diálogo del comportamiento.

Se actualizarán todas las ocurrencias de dicho comportamiento en dicha página.

Crear nuevas acciones

Las acciones constan de código JavaScript y HTML. Si posee los conocimientos

necesarios sobre JavaScript, puede escribir nuevas acciones y añadirlas al menú

emergente Acciones del panel Comportamientos. Para obtener más información,

consulte Ampliación de Dreamweaver.

Descargar e instalar comportamientos de

terceros

Una de las características más interesantes de Dreamweaver es su capacidad de

ampliación, esto es, que ofrece a aquellos usuarios que disponen de suﬁcientes

conocimientos de JavaScript la oportunidad de escribir código JavaScript y

ampliar así las posibilidades de Dreamweaver. Muchos de estos usuarios han

decidido compartir sus extensiones con otros usuarios enviándolas al sitio Web

Macromedia Exchange for Dreamweaver.

Usar comportamientos 467

Para descargar e instalar nuevos comportamientos desde el sitio Exchange:

1 Abra el panel Comportamientos y elija Obtener más comportamientos en el

menú emergente Acciones (+).

Se abrirá su navegador principal y aparecerá el sitio Exchange. (Para descargar

comportamientos, es necesario estar conectado a la Web.)

2 Examine o busque los paquetes.

3 Descargue e instale el paquete de extensiones que desee.

Si desea más información, consulte “Añadir extensiones a Dreamweaver” en la

página 95.

Usar las acciones de comportamiento

incluidas con Dreamweaver

Las acciones de comportamiento incluidas con Dreamweaver han sido

desarrolladas para que funcionen con todas las versiones de Netscape Navigator 4

e Internet Explorer 4.0 y posteriores. (Netscape Navigator 5 no ha llegado a

lanzarse externamente; Netscape Navigator 6 todavía no ha salido al mercado en el

momento de redactar este manual.)

Nota: Las acciones de Dreamweaver han sido cuidadosamente desarrolladas para

funcionar en el mayor número posible de navegadores. Si elimina a mano código de una

acción de Dreamweaver, o lo sustituye por su propio código, puede perderse la

compatibilidad con múltiples navegadores.

Aunque las acciones de Dreamweaver han sido escritas para maximizar la

compatibilidad con múltiples navegadores, hay algunas que no funcionan en los

navegadores más antiguos. Por otra parte, hay algunos navegadores que no son

compatibles con JavaScript, y también hay mucha gente que navega por la Web

con JavaScript desactivado en sus navegadores. Para obtener la mejor

compatibilidad en distintas plataformas, incorpore interfaces alternativas incluidas

en etiquetas noscript para que también las personas que no tienen JavaScript

pueda usar el sitio.

Capítulo 18468

En la siguiente tabla encontrará información sobre el funcionamiento de las

acciones en las distintas versiones anteriores a la 4.0 de Netscape Navigator e

Internet Explorer. Para conocer el resultado de cada acción y cómo elegir opciones

para ellas, consulte los temas enumerados en la siguiente tabla.

Macintosh Windows

Acción Netscape

Navigator 3.0

Internet

Explorer 3.0x

Netscape

Navigator 3.0

Internet

Explorer 3,01

Llamar JavaScript Aceptar Falla sin error Aceptar Aceptar

Cambiar propiedad Aceptar Falla sin error Aceptar Aceptar

Comprobar

navegador

Aceptar Falla sin error Aceptar Aceptar

Comprobar plug-in Aceptar Falla sin error Aceptar Aceptar

Controlar

Shockwave o Flash

Aceptar Falla sin error Aceptar Falla sin error

Arrastrar capa Falla sin error Falla sin error Falla sin error Falla sin error

Ir a URL Aceptar Falla sin error Aceptar Aceptar

Menú de salto Aceptar Falla sin error Aceptar Falla sin error

Menú de salto Ir Aceptar Falla sin error Aceptar Falla sin error

Abrir ventana del

navegador

Aceptar Falla sin error Aceptar Aceptar

Reproducir sonido Aceptar Falla sin error Aceptar Falla sin error

Mensaje emergente Aceptar Falla sin error Aceptar Aceptar

Carga previa de

imágenes

Aceptar Falla sin error Aceptar Falla sin error

Definir Imagen de

barra de navegación

Aceptar Falla sin error Aceptar Falla sin error

Definir texto de

marco

Aceptar Falla sin error Aceptar Aceptar

Definir texto de capa Falla sin error Falla sin error Falla sin error Falla sin error

Definir texto de

barra de estado

Aceptar Falla sin error Aceptar Aceptar

Definir texto de

campo de texto

Aceptar Falla sin error Aceptar Aceptar

Mostrar-Ocultar

capas

Falla sin error Falla sin error Falla sin error Falla sin error

Intercambiar imagen Aceptar Falla sin error Aceptar Falla sin error

Usar comportamientos 469

Llamar JavaScript

La acción Llamar JavaScript permite usar el panel Comportamientos para

especiﬁcar que debe ejecutarse una función personalizada o línea de código

JavaScript cuando se produzca un evento determinado. (Puede escribir el código

JavaScript usted mismo, o puede usar el código que tiene a su disposición en

diversas bibliotecas JavaScript de acceso gratuito en la Web.)

Para usar la acción Llamar JavaScript:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Llamar JavaScript del menú

emergente Acciones.

3 Escriba el código JavaScript exacto que se ejecutará o el nombre de una

función.

Por ejemplo, para crear un botón Atrás, podría escribir

if (history.length > 0){history.back()}. Si ha encapsulado el código en una

función, escriba solamente el nombre de la función (por ejemplo, goBack()).

4 Haga clic en Aceptar.

5 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Restaurar imagen

intercambiada

Aceptar Falla sin error Aceptar Falla sin error

Ir a fotograma de

línea de tiempo

Reproducir línea de

tiempo y Detener

línea de tiempo

La animación de

las imágenes de

origen y la llamada

a los

comportamientos

funcionan, pero la

animación de

capas falla sin

error.

Falla sin error La animación de

las imágenes de

origen y la llamada

a los

comportamientos

funcionan, pero la

animación de

capas falla sin

error.

Falla sin error

Validar formulario Aceptar Falla sin error Aceptar Aceptar

Macintosh Windows

Acción Netscape

Navigator 3.0

Internet

Explorer 3.0x

Netscape

Navigator 3.0

Internet

Explorer 3,01

Capítulo 18470

Cambiar propiedad

Use la acción 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 acción de un

formulario). Las propiedades que puede cambiar están determinadas por el

navegador. Son muchas más las propiedades que este comportamiento puede

cambiar en Microsoft Internet Explorer (IE) 4.0 que en IE 3.0 o Netscape

Navigator 3.0 o 4.0. Por ejemplo, puede conﬁgurar el color de fondo de una capa

de forma dinámica.

Nota: Utilice esta acción sólo si posee buenos conocimientos de HTML y JavaScript.

Para usar la acción Cambiar propiedad:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Cambiar propiedad del

menú emergente Acciones.

3 Del menú emergente Tipo de objeto, elija el tipo de objeto cuyas propiedades

desea cambiar.

En el menú emergente Objeto con nombre se enumeran ahora todos los

objetos con nombre del tipo elegido.

4 Seleccione un objeto del menú emergente Objeto con nombre.

5 Seleccione una propiedad en el menú emergente Propiedad o introduzca el

nombre de la propiedad en el campo de texto.

Para ver las propiedades que se pueden cambiar en cada navegador, elija

diferentes navegadores o versiones de navegadores en el menú emergente

Navegador. Si introduce un nombre de propiedad manualmente, asegúrese de

usar el nombre exacto JavaScript de la propiedad (y recuerde que las

propiedades de JavaScript distinguen mayúsculas de minúsculas).

6 Introduzca el nuevo valor de la propiedad en el campo Nuevo valor y haga clic

en Aceptar.

7 Compruebe que el evento predeterminado es el que usted desea. (Cuando tiene

lugar el evento, la acción se ejecuta y cambia la propiedad.)

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Usar comportamientos 471

Comprobar navegador

Use la acción Comprobar navegador para enviar a los visitantes a distintas

páginas, dependiendo de las marcas y versiones de sus navegadores. Por ejemplo,

puede resultar conveniente que los visitantes vayan a una página si su navegador es

Netscape Navigator 4.0 o una versión posterior, que vayan a otra página si tienen

Microsoft Internet Explorer 4.0 o una versión posterior o que permanezcan en la

página actual si usan un navegador de algún otro tipo.

Resulta útil adjuntar este comportamiento a la etiqueta body de una página que sea

compatible prácticamente con cualquier navegador (y que no use ninguna otra

secuencia JavaScript); de esta manera, los visitantes que visiten la página con

JavaScript desactivado podrán, aun así, ver algo de contenido.

Otra posibilidad consiste en adjuntar este comportamiento a un vínculo nulo

(como <a href="javascript:;">) y que la acción determine el destino del vínculo

en función de la marca y la versión del navegador del visitante.

Para usar la acción Comprobar navegador:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Comprobar navegador del menú

emergente Acciones.

3 Determine el criterio de separación que desea aplicar a los visitantes: por marca

de navegador, por versión de navegador o por ambas.

Por ejemplo, ¿desea que todos los usuarios que tengan un navegador de la

versión 4.0 vean una página y que los demás vean otra página distinta? ¿O

preﬁere quizá que los usuarios de Netscape Navigator vean una página y que los

usuarios de Microsoft Internet Explorer (IE) vean otra distinta?

4 Especiﬁque una versión de Netscape Navigator.

5 En los menús emergentes contiguos, elija las opciones sobre lo que debe ocurrir

si el navegador es la versión de Netscape Navigator especiﬁcada o posterior y lo

que debe ocurrir en caso contrario.

Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta página.

6 Especiﬁque una versión de Microsoft Internet Explorer.

7 En los menús emergentes contiguos, elija las opciones sobre lo que debe ocurrir

si el navegador es la versión de Internet Explorer especiﬁcada o posterior y lo

que debe ocurrir en caso contrario.

Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta página.

Capítulo 18472

Elija una opción en el menú emergente Otros navegadores para especiﬁcar lo

que debe ocurrir si el navegador no es Netscape Navigator ni Microsoft Internet

Explorer. (Por ejemplo, el visitante puede estar utilizando un navegador basado

en texto como Lynx.)

Permanecer en esta página es la mejor opción para los navegadores distintos de

Navigator e IE porque la mayoría de ellos no son compatibles con JavaScript y,

si no pueden leer este comportamiento, permanecerán en la misma página en

cualquier caso.

9 Introduzca las rutas y los nombres de archivo del URL y del URL alternativo en

los campos de texto situados en la parte inferior del cuadro de diálogo. Si

introduce un URL remoto, deberá introducir el preﬁjo http:// además de la

dirección www.

10 Haga clic en Aceptar.

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 navegador de destino en el menú

emergente Mostrar eventos para. Recuerde que el objetivo de este

comportamiento es comprobar las distintas versiones de los navegadores, por lo

que lo más recomendable es elegir un evento que funcione tanto en la

versión 3.0 como en otras posteriores de los navegadores.

Comprobar plug-in

Use la acción Comprobar plug-in para remitir a los visitantes a distintas páginas

dependiendo de si tienen instalado el plug-in en cuestión. Por ejemplo, puede

resultar conveniente que los visitantes vayan a una página si tienen Shockwave y a

otra distinta si no lo tienen.

Nota: No es posible detectar plug-ins específicos en Microsoft Internet Explorer (IE) con

JavaScript. No obstante, la selección de Flash o Director hará que se añada el código

VBScript adecuado a la página para detectar los plug-ins en IE en Windows. La detección

de plug-ins es imposible con IE en Macintosh.

Para usar la acción Comprobar plug-in:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Comprobar plug-in del menú

emergente Acciones.

Usar comportamientos 473

Seleccione un plug-in en el menú emergente Plug-in, o haga clic en Entrar e

introduzca el nombre exacto del plug-in en el campo contiguo.

Deberá utilizar el nombre exacto del plug-in tal y como se especiﬁca en la

página Acerca de los Plug-ins en Netscape Navigator. (En Windows, elija el

comando Ayuda > Acerca de Plug-ins de Navigator; en Macintosh, elija Acerca

de Plug-ins del menú Apple.)

4 En el campo Si se encuentra, Ir a URL, especiﬁque un URL para los visitantes

que dispongan del plug-in.

Si especiﬁca un URL remoto, deberá incluir el preﬁjo http:// en la dirección.

Para hacer que los visitantes que disponen del plug-in permanezcan en la

misma página, deje vacío este campo.

5 En el campo De lo contrario, Ir a URL, especiﬁque un URL alternativo para los

visitantes que no dispongan del plug-in.

Para hacer que los visitantes que no disponen del plug-in permanezcan en la

misma página, deje vacío este campo.

6 La detección de plug-ins no es posible en Internet Explorer para Macintosh;

además, Internet Explorer para Windows no permite detectar la mayoría de los

plug-ins. De forma predeterminada, cuando la detección resulta imposible, se

envía al visitante al URL indicado en el campo De lo contrario. Para enviar al

visitante al primer URL (Si se encuentra), seleccione la opción Ir siempre al

primer URL si no es posible detectar. Cuando está seleccionada, esta opción

hace que se dé por hecho que el visitante dispone del plug-in, a no ser que el

navegador indique explícitamente que el plug-in no está presente.

Por lo general, si el contenido del plug-in es parte integrante de la página,

seleccione la opción “Ir siempre al primer URL si no es posible detectar”; los

visitantes que no dispongan del plug-in normalmente recibirán un mensaje del

navegador para indicarles que deben descargar el plug-in. Si el contenido del

plug-in no es una parte esencial de la página, deje esta opción sin seleccionar.

Esta opción afecta sólo a Internet Explorer; Netscape Navigator siempre detecta

los plug-ins.

7 Haga clic en Aceptar.

8 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Capítulo 18474

Controlar Shockwave o Flash

Use la acción Controlar Shockwave o Flash para reproducir, detener, rebobinar o

ir a un fotograma de una película Macromedia Shockwave o Macromedia Flash.

Para usar la acción Controlar Shockwave o Flash:

1 Elija Insertar > Medio > Shockwave o Insertar > Medio > Flash para insertar

una película Shockwave o Flash, respectivamente.

2 Elija Ventana > Propiedades e introduzca un nombre para la película en el

campo situado más arriba y más a la izquierda (junto al icono Shockwave o

Flash). Debe asignar un nombre a la película para poder controlarla con la

acción Controlar Shockwave o Flash.

3 Seleccione el elemento que desea usar para controlar la película Shockwave o

Flash. Por ejemplo, si tiene una imagen de un botón “Reproducir” que se

utilizará para reproducir la película, seleccione esa imagen.

4 Abra el panel Comportamientos (Ventana > Comportamientos).

5 Haga clic en el botón de signo más (+) y elija Controlar Shockwave o Flash del

menú emergente Acciones.

Aparecerá un cuadro de diálogo de parámetros.

6 Seleccione una película del menú emergente Película.

Dreamweaver presenta automáticamente una lista con los nombres de todas las

películas Shockwave y Flash que actualmente hay en el documento. (Más

concretamente, Dreamweaver presenta una lista con todos los nombres de los

archivos que terminan con las extensiones .dcr, .dir, .swf o .spl que estén en las

etiquetas object o embed.)

7 Elija reproducir, detener, rebobinar o ir a una secuencia de la película. La

opción Reproducir reproduce la película empezando en el fotograma en que se

produce la acción.

8 Haga clic en Aceptar.

9 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el submenú

Mostrar eventos para del menú emergente Eventos.

Usar comportamientos 475

Arrastrar capa

La acción Arrastrar capa permite al visitante arrastrar una capa. Use esta acción

para crear puzzles, controles deslizantes y otros elementos móviles de interfaz.

Se puede especiﬁcar la dirección en la que el visitante puede arrastrar la capa

(horizontalmente, verticalmente o en cualquier dirección), un destino hasta el que

el visitante debe arrastrar la capa, si la capa debe ajustarse al destino cuando

aquélla se encuentra a un cierto número de píxeles del destino y qué sucederá

cuando la capa llegue al destino, entre otras opciones.

Dado que la llamada a la acción Arrastrar capa debe producirse antes de que el

visitante pueda arrastrar la capa, asegúrese de que el evento que desencadena la

acción se produzca antes de que el visitante intente arrastrar la capa. Es

recomendable adjuntar la acción Arrastrar capa al objeto

body (con el evento

onLoad), aunque también puede adjuntarla a un vínculo que llene toda la capa

(como, por ejemplo, un vínculo alrededor de una imagen) usando el evento

onMouseOver.

Para usar la acción Arrastrar capa:

1 Elija Insertar > Capa o haga clic en el botón Capa en el panel Objetos y arrastre

una capa a la ventana de documento.

2 Seleccione la etiqueta body haciendo clic en <body> en el selector de etiquetas

que se encuentra en la parte inferior de la ventana de documento.

3 Abra el panel Comportamientos.

4 Haga clic en el botón de signo más (+) y elija Arrastrar capa del menú

emergente Acciones.

Si la acción Arrastrar capa no está disponible, es muy probable que haya una

capa seleccionada. Dado que las capas no aceptan eventos en la versión 4.0 de

ninguno de los dos navegadores, deberá seleccionar un objeto diferente, como

la etiqueta body, o un vínculo (etiqueta a), o bien cambiar el navegador de

destino a IE 4.0 en el menú emergente Mostrar eventos para.

5 Seleccione la capa que desea hacer desplazable del menú-emergente-Capa.

6 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 móviles, como

cajones de archivos, cortinas y minipersianas, elija movimiento restringido.

Capítulo 18476

Para movimiento restringido, introduzca valores (en píxeles) en los campos

Arriba, Abajo, Derecha e Izquierda.

Los valores son relativos a la posición inicial de la capa. Para restringir el

movimiento a una región 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.

8 Introduzca valores (en píxeles) en los campos Izquierdo y Superior para deﬁnir

el destino de la capa.

El destino de la capa es la zona hasta la que usted desea que el visitante arrastre

la capa. Se considera que una capa ha alcanzado el destino cuando sus

coordenadas izquierda y superior coinciden con los valores introducidos en los

campos Izquierdo y Superior. Los valores son relativos al ángulo superior

izquierdo de la ventana del navegador. Haga clic en la opción Obtener posición

actual para rellenar automáticamente los campos con la posición actual de

la capa.

9 Introduzca un valor (en píxeles) en el campo Ajustar si a menos de, para

determinar lo cerca del destino que el visitante tiene que soltar la capa para que

esta se ajuste al destino.

Los valores grandes facilitan al visitante la localización el destino para soltar la

capa.

10 Para puzzles simples y manipulación de escenarios, puede detenerse aquí. Para

deﬁnir el manejador de arrastre de una capa, controlar el movimiento de una

capa mientras está siendo arrastrada y desencadenar una acción al soltar la capa,

haga clic en la ﬁcha Avanzado.

11 Para deﬁnir una zona determinada de la capa en la que el visitante debe hacer

clic para arrastrarla, elija Interior de capa en el menú emergente Arrastrar

selector; luego introduzca las coordenadas izquierda y superior, así como los

valores de ancho y alto del manejador de arrastre.

Esta opción resulta útil cuando la imagen contenida en la capa incluye un

elemento que sugiere la posibilidad de arrastrarla, como una barra de título o

un asa de cajón. No conﬁgure esta opción si desea que el visitante pueda hacer

clic en algún lugar de la capa para arrastrarla.

Usar comportamientos 477

Elija las opciones Al arrastrar que desee utilizar:

• Seleccione Traer la capa al frente si la capa debe desplazarse a la primera

posición en el orden de apilamiento mientras se está arrastrando. Si selecciona

esta opción, utilice el menú emergente para determinar si desea dejar la capa en

la primera posición o devolverla a su posición original en el orden de

apilamiento.

• Introduzca código JavaScript o un nombre de función (por ejemplo,

monitorLayer()) en el campo Llamar JavaScript para ejecutar repetidamente el

código o función mientras se esté arrastrando la capa. Por ejemplo, podría

escribir una función que controle las coordenadas de la capa y muestre mensajes

y consejos como "ya está cerca" o "está lejísimos del destino donde soltar la

capa" en el campo de texto.

13 Introduzca código JavaScript o un nombre de función (por ejemplo,

evaluateLayerPos()) en el segundo campo Llamar JavaScript para ejecutar el

código o la función cuando se suelte la capa. Seleccione la opción Sólo si se

ajusta cuando el código JavaScript deba ejecutarse solamente si la capa ha

alcanzado a su destino.

14 Haga clic en Aceptar.

15 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para. Recuerde que las capas no son compatibles

con los navegadores de la versión 3.0.

Nota: No se puede adjuntar la acción Arrastrar capa a un objeto con los eventos

onMouseDown u onClick.

Recopilar información sobre la capa desplazable

Cuando se adjunta a un objeto la acción Arrastrar capa, Dreamweaver inserta la

función MM_dragLayer() en la sección head del documento. Además de registrar la

capa como desplazable, esta función deﬁne tres propiedades para cada capa

desplazable (MM_LEFTRIGHT, MM_UPDOWN y MM_SNAPPED) que se usted puede usar en sus

propias funciones de JavaScript para determinar la posición horizontal relativa de

la capa, la posición vertical relativa de la capa y si la capa ha alcanzado el destino

en el que debe soltarse.

Nota: La información que se ofrece en esta sección está destinada exclusivamente a

programadores expertos de JavaScript.

Capítulo 18478

Por ejemplo, la siguiente función muestra el valor de la propiedad MM_UPDOWN (la

posición 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 dinámicos, es decir, que se puede cambiar

su contenido una vez que la página ha terminado de cargarse, tanto en Netscape

Navigator como en Microsoft Internet Explorer.)

function getPos(layername){

var layerRef = MM_findObj(layername);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

En lugar de mostrar el valor de MM_UPDOWN o MM_LEFTRIGHT en un campo de

formulario, puede crear una función que presente un mensaje en el campo de

formulario dependiendo de lo próximo que esté el valor de la zona donde debe

soltarse la capa, o bien puede llamar otra función para que muestre u oculte una

capa dependiendo del valor. El único límite a las posibilidades de reacción al valor

de MM_UPDOWN o MM_LEFTRIGHT está en su imaginación y en sus conocimientos de

JavaScript.

Resulta especialmente útil leer la propiedad MM_SNAPPED cuando se tienen varias

capas en la página y todas ellas deben alcanzar sus objetivos antes de que el

visitante pueda pasar a la siguiente página o tarea. Por ejemplo, puede crear una

función para determinar cuántas capas tienen un valor MM_SNAPPED igual a true

(verdadero) y llamarlas cada vez que se suelte una capa. Cuando el recuento de

capas ajustadas alcanza el número deseado, puede enviar al visitante a la página

siguiente o presentarle un mensaje emergente de felicitación.

Si ha utilizado el evento onMouseOver para adjuntar la acción Arrastrar capa a

vínculos contenidos en distintas capas, deberá realizar un pequeño cambio en la

función MM_dragLayer() para evitar que la propiedad MM_SNAPPED de una capa

ajustada se restablezca con el valor false al pasar el puntero del ratón sobre la capa.

(Esto puede ocurrir si ha utilizado Arrastrar capa para crear un puzzle de imagen,

ya que es probable que el visitante pase el puntero del ratón por encima de las

piezas ajustadas al colocar otras piezas.) La función MM_dragLayer() no impide este

comportamiento, ya que éste resulta, a veces, deseable (por ejemplo, si desea

establecer múltiples destinos para soltar una misma capa).

Para evitar que se vuelvan a registrar las capas ajustadas:

1 Realice una copia de seguridad del documento antes de modiﬁcar de algún

modo el código. (Puede hacerlo en la ventana Sitio de Dreamweaver, o en el

Explorador de Windows (Windows) o en el Finder (Macintosh).)

2 Elija Edición > Buscar.

3 Seleccione Código HTML del menú emergente Buscar.

4 Escriba (!curDrag) en el campo de texto contiguo.

Usar comportamientos 479

Haga clic en Buscar siguiente.

Si Dreamweaver le pregunta si desea continuar buscando desde el principio del

documento, haga clic en Sí. Dreamweaver encontrará una instrucción con el

siguiente contenido:

if (!curDrag) return false;

Cierre el cuadro de diálogo Buscar y modiﬁque la instrucción en la vista

Código de la ventana de documento o en el inspector de códigos, para que

quede de la siguiente forma:

if (!curDrag || curDrag.MM_SNAPPED != null) return false;

Las dos barras paralelas verticales (||) signiﬁcan "o" y curDrag es una variable

que representa la capa que se está registrando como desplazable. En inglés, la

instrucción signiﬁca "Si curDrag no es un objeto, o si ya tiene un valor

MM_SNAPPED, no te molestes en ejecutar el resto de la función.”

Ir a URL

La acción Ir a URL abre una nueva página en la ventana actual o en el marco

especiﬁcado. Esta acción resulta especialmente útil para cambiar el contenido de

dos o más marcos con un solo clic. También puede llamarse en una línea de

tiempo para saltar a una nueva página después de un intervalo de tiempo

especiﬁcado.

Para usar la acción Ir a URL:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Ir a URL del menú emergente

Acciones.

3 Elija un destino para el URL en la lista Abrir en.

La lista Abrir en automáticamente 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 opción posible.

Nota: Esta acción puede dar lugar a resultados inesperados si hay algún marco que se

llame top, blank, self o parent. Los navegadores a veces confunden estos nombres con

nombres de destino reservados.

4 Haga clic en Examinar para seleccionar el documento que desea abrir o

introduzca la ruta y el nombre de archivo del documento en el campo URL.

5 Repita los pasos 3 y 4 para abrir más documentos en otros marcos.

6 Haga clic en Aceptar.

7 Compruebe que el evento predeterminado es el que usted desea.

Capítulo 18480

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que busca

no aparecen en la lista, cambie el navegador de destino en el menú emergente

Mostrar eventos para.

Menú de salto

Al crear un menú de salto mediante Insertar > Objetos de formulario > Menú de

salto, Dreamweaver crea un objeto de menú y le adjunta el comportamiento del

Menú de salto (o .Menú de salto ir). Normalmente no es preciso adjuntar

manualmente la acción Menú de salto a un objeto. Para obtener información

sobre los menús de salto y la manera de crearlos, consulte “Insertar un menú de

salto” en la página 387.

Un menú de salto existente se puede editar de dos formas:

• Se pueden editar y reorganizar los elementos del menú, cambiar los archivos

para saltar a, y cambiar la ventana en la que esos archivos se abren, haciendo

doble clic en una acción de Menú de salto existente en el panel

Comportamientos.

• Los elementos de este menú se editan igual que los elementos de cualquier

menú, es decir, seleccionando el menú y usando el botón Valores de lista del

inspector de propiedades. Consulte “Crear un menú emergente” en la

página 522 para obtener más información.

Para editar un menú de salto utilizando el panel Comportamientos:

1 Cree un objeto de menú de salto si es que no hay todavía ninguno en el

documento.

2 Seleccione el objeto de menú de salto y abra el panel Comportamientos.

3 Haga doble clic en Menú de salto en la columna Acciones.

4 Lleve a cabo los cambios que desee en el cuadro de diálogo Menú de salto, y

luego haga clic en Aceptar.

Usar comportamientos 481

Menú de salto Ir

La acción Menú de salto ir está estrechamente relacionada con la acción Menú de

salto; Menú de salto ir le permite asociar un botón Ir con un menú de salto. (Para

utilizar esta acción, debe existir ya un menú de salto en el documento.) Al hacer

clic en el botón Ir, se abre el vínculo seleccionado en el menú de salto. Los menús

de salto generalmente no necesitan un botón Ir; al elegir un elemento de un menú

de salto, normalmente se carga un URL sin necesidad de que el visitante lleve a

cabo ninguna otra operación. No obstante, si el visitante elige el mismo elemento

que se encuentra ya seleccionado en el menú de salto, el salto no se producirá. En

general, eso no importa, pero si aparece el menú de salto en un marco, y los

elementos del menú de salto contienen vínculos con páginas de otros marcos,

suele ser útil disponer de un botón Ir para permitir a los visitantes volver a elegir

un elemento que ya está seleccionado en el menú de salto.

Para añadir una acción Menú de salto Ir:

1 Seleccione un objeto para utilizarlo como botón Ir (generalmente una imagen

de un botón) y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Menú de salto Ir del menú

emergente Acciones.

3 En el menú emergente Elegir menú de salto, elija un menú para que se active en

él el botón Ir.

4 Haga clic en Aceptar.

Abrir ventana del navegador

Use la acción Abrir ventana del navegador para abrir un URL en una nueva

ventana. Se pueden especiﬁcar las propiedades de la nueva ventana, incluidos su

tamaño, sus atributos (si se puede cambiar su tamaño, si tiene barra de menús,

etc.) y su nombre. Por ejemplo, este comportamiento se puede usar para abrir una

imagen más grande en otra ventana distinta cuando el visitante hace clic en una

imagen en miniatura; con este comportamiento, puede hacer que la nueva ventana

tenga el mismo tamaño que la imagen.

Si no se especiﬁcan los atributos de la ventana, se abrirá con el mismo tamaño y

los mismos atributos de la ventana que la inició. Al especiﬁcar algún atributo de la

ventana, se desactivan automáticamente todos los demás atributos que no se

activen explícitamente. Por ejemplo, si no se establecen los atributos de la ventana,

puede abrirse con un tamaño de 640 x 480 píxeles y tener barra de navegación,

barra de herramientas de ubicación, barra de estado y barra de menús. Si se

establece explícitamente la anchura en 640 píxeles y la altura en 480 píxeles y no se

establece ningún otro atributo, la ventana se abrirá con un tamaño de 640 x 480

píxeles y carecerá de barra de navegación, de barra de herramientas de ubicación,

de barra de estado, de barra de menús, de manejadores de cambio de tamaño y de

barras de desplazamiento.

Capítulo 18482

Para usar la acción Abrir ventana del navegador:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Abrir ventana del navegador del

menú emergente Acciones.

3 Haga clic en Examinar para seleccionar un archivo o introduzca el URL que

desea ver.

4 Conﬁgure las opciones que desee de las siguientes:

Ancho de la ventana Especiﬁca la anchura de la ventana en píxeles.

Alto de la ventana Especiﬁca la altura de la ventana en píxeles.

Barra de herramientas de navegación Es la ﬁla de botones del navegador que

incluye Atrás, Adelante, Inicio y Actualizar.

Barra de herramientas de ubicación Es la ﬁla de opciones del navegador que

incluye el campo de ubicación.

Barra de estado Es la zona situada en la parte inferior de la ventana del

navegador en la que aparecen mensajes (como el tiempo de carga restante y los

URL asociados a los vínculos).

Barra de menús Es la zona de la ventana del navegador (Windows) o del

escritorio (Macintosh) en la que aparecen menús tales como Archivo, Edición,

Ver, Ir a y Ayuda. Esta opción debe establecerse explícitamente si desea que los

visitantes puedan navegar desde la nueva ventana. Si no se ve esta opción, el

usuario solamente podrá cerrar o minimizar la ventana (Windows), o cerrar la

ventana y salir de la aplicación (Macintosh) desde la nueva ventana.

Barras despl. si son necesarias Especiﬁca que deberán aparecer las barras de

desplazamiento que sean precisas si el contenido se extiende más allá de la zona

visible. Si no se establece explícitamente esta opción, no aparecerán barras de

desplazamiento. Si la opción Selectores de cambio de tamaño también está

desactivada, los visitantes no tendrán una forma fácil de ver el contenido

situado más allá del tamaño original de la ventana. (Aunque siempre pueden

desplazar la ventana arrastrando el borde de la misma.)

Selectores de cambio de tamaño Especiﬁca que el usuario tenga la posibilidad

de cambiar el tamaño de la ventana, bien arrastrando el ángulo inferior derecho

de la ventana, o bien haciendo clic en el botón maximizar (Windows) o en el

cuadro de tamaño (Macintosh) situado en la esquina superior derecha. Si esta

opción no se establece explícitamente, los controles de cambio de tamaño no

estarán disponibles y el ángulo inferior derecho no se podrá arrastrar.

Nombre de la ventana Es el nombre de la nueva ventana. Es imprescindible

asignar un nombre a la ventana si desea usarla como destino de vínculos o

controlarla con código JavaScript. Este nombre no puede contener espacios ni

caracteres especiales.

5 Haga clic en Aceptar.

Usar comportamientos 483

Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Reproducir sonido

Utilice la acción Reproducir sonido para reproducir un sonido. Por ejemplo,

puede hacer que se reproduzca un efecto sonoro cuando el puntero del ratón pase

por encima de un vínculo, o que se reproduzca música al cargarse la página.

Nota: Es posible que los navegadores precisen algún tipo de compatibilidad adicional con

audio (como un plug-in de audio, por ejemplo) para reproducir sonidos. Por ello, es

frecuente que diferentes navegadores con diferentes plug-ins reproduzcan el sonido de

forma diferente. Es difícil predecir de manera fiable la manera en que las personas que

visiten el sitio percibirán los sonidos que usted ha incluido.

Para usar la acción Reproducir sonido:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Reproducir sonido del menú

emergente Acciones.

3 Haga clic en Examinar para seleccionar un archivo de sonido o introduzca la

ruta y el nombre del archivo en el campo Reproducir sonido.

4 Haga clic en Aceptar.

5 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Mensaje emergente

La acción Mensaje emergente presenta una alerta de JavaScript con el mensaje que

usted desee. Dado que las alertas de JavaScript sólo tienen un botón (Aceptar),

esta acción resulta más adecuada para proporcionar información que para

proponerle una elección.

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra

expresión de función JavaScript válida. Para incrustar una expresión JavaScript,

enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra

invertida (\{).

Ejemplo

El URL correspondiente a esta página es {window.location} y hoy es {new

Date()}.

Capítulo 18484

Nota: No se puede controlar la apariencia de la alerta de JavaScript, puesto que está

determinada por el navegador del visitante. Si desea tener un mayor control sobre la

apariencia de su mensaje, puede usar el comportamiento Abrir ventana del navegador. Si

desea más información, consulte “Abrir ventana del navegador” en la página 481.

Para usar la acción Mensaje emergente:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Mensaje emergente del menú

emergente Acciones.

3 Introduzca el mensaje en el campo Mensaje.

4 Haga clic en Aceptar.

5 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Carga previa de imágenes

La acción Carga previa de imágenes carga imágenes que no aparecen en la página

de inmediato (como aquellas que se intercambiarán por líneas de tiempo,

comportamientos o secuencias de comandos de JavaScript) en la memoria caché

del navegador. Esto contribuye a evitar los retrasos debidos a la descarga cuando

llega el momento de que aparezcan las imágenes.

Nota: La acción Intercambiar imagen carga automáticamente todas las imágenes

resaltadas cuando se selecciona la opción Carga previa de imágenes en el cuadro de

diálogo Intercambiar imagen, por lo que no es necesario añadir manualmente la acción

Carga previa de imágenes al usar Intercambiar imagen.

Para usar la acción Carga previa de imágenes:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Carga previa de imágenes del

menú emergente Acciones.

3 Haga clic en Examinar para seleccionar el archivo de imagen objeto de la carga

previa o introduzca la ruta y el nombre de archivo en el campo Archivo de

origen de imagen.

4 Haga clic en el botón más (+), situado en la parte superior del cuadro de

diálogo, para añadir la imagen deseada a la lista Carga previa de imágenes.

Nota: Si no hace clic en el botón de signo más antes de introducir la siguiente imagen,

la imagen elegida será reemplazada en la lista por la siguiente imagen que elija.

Usar comportamientos 485

Repita los pasos 3 y 4 para todas las imágenes restantes que desee cargar en la

página actual.

6 Para eliminar una imagen de la lista Carga previa de imágenes, seleccione la

imagen en la lista y haga clic en el botón de signo menos (–).

7 Haga clic en Aceptar.

8 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Definir Imagen de barra de navegación

Utilice la acción Deﬁnir Imagen de barra de navegación para convertir una

imagen en una imagen de barra de navegación o para cambiar la visualización y las

acciones de imágenes en una barra de navegación. (Para obtener más información,

consulte “Insertar una barra de navegación” en la página 391.)

Utilice la ﬁcha Básico del cuadro de diálogo Deﬁnir Imagen de barra de

navegación para crear o actualizar una imagen o grupo de imágenes de barra de

navegación, cambiar el URL que debe mostrarse al hacer clic en un botón de una

barra de navegación y seleccionar una ventana distinta en la que mostrar un URL.

Utilice la ﬁcha Avanzado del cuadro de diálogo Deﬁnir Imagen de barra de

navegación para cambiar el estado de las imágenes de un documento en función

del estado del botón actual. De forma predeterminada, al hacer clic en un

elemento de una barra de navegación, todos los demás elementos recuperan su

estado Arriba; utilice la ﬁcha Avanzado si desea establecer un estado diferente para

una imagen cuando la imagen seleccionada se encuentre su estado Abajo o Sobre.

Para editar una acción Definir Imagen de barra de navegación:

1 Seleccione una imagen en la barra de navegación para editarla y abra el panel

Comportamientos.

2 En la columna Acciones del panel Comportamientos, haga doble clic en la

acción Deﬁnir Imagen de barra de navegación asociada al evento que está

modiﬁcando.

3 En la ﬁcha Básico del cuadro de diálogo Deﬁnir Imagen de barra de

navegación, seleccione opciones de edición de la imagen.

Capítulo 18486

Para configurar varias imágenes para un botón de la barra de navegación:

1 Seleccione una imagen en la barra de navegación para editarla y abra el panel

Comportamientos.

2 En la columna Acciones del panel Comportamientos, haga doble clic en la

acción Deﬁnir Imagen de barra de navegación asociada al evento que está

modiﬁcando.

3 Haga clic en la ﬁcha Avanzado del cuadro de diálogo Deﬁnir Imagen de barra

de navegación.

4 En el menú emergente Cuando el elemento está mostrado, elija un estado de

imagen. Para obtener información sobre los estados de las imágenes, consulte

“Crear barras de navegación” en la página 389.

• Elija Imagen abajo si desea cambiar la visualización de otra imagen después de

que un usuario haya hecho clic en la imagen seleccionada.

• Elija Sobre imagen o Sobre mientras imagen abajo si desea cambiar la

visualización de otra imagen cuando el puntero pase sobre la imagen

seleccionada.

5 En la lista También deﬁnir imagen, seleccione otra imagen de la página que

desee conﬁgurar.

6 Haga clic en Examinar para seleccionar el archivo de imagen que desea que

aparezca o escriba la ruta del archivo de imagen en el campo A archivo de

imagen.

7 Si seleccionó Sobre imagen o Sobre mientras imagen abajo en el paso 4,

dispondrá de otra opción. En el campo de texto Si Abajo, a archivo de imagen,

haga clic en Examinar para seleccionar el archivo de imagen o escriba la ruta del

archivo de imagen que debe aparecer.

Definir texto de marco

La acción Deﬁnir texto de marco permite deﬁnir de forma dinámica el texto de un

marco mediante la sustitución del contenido y el formato de un marco con el

contenido que usted especiﬁque. Dicho contenido puede incluir cualquier código

HTML válido. Utilice esta acción para mostrar información de forma dinámica.

Aunque la acción Deﬁnir texto de marco sustituye el formato de un marco,

puede seleccionar Conservar color de fondo para conservar los atributos de color

del fondo y el texto de la página.

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra

expresión de función JavaScript válida. Para incrustar una expresión JavaScript,

enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra

invertida (\{).

Usar comportamientos 487

Ejemplo

El URL correspondiente a esta página es {window.location} y hoy es {new

Date()}.

Para crear un conjunto de marcos:

Elija Modiﬁcar > Conjunto de marcos > Dividir marco a la izquierda, a la derecha,

hacia arriba o hacia abajo.

Para obtener más información, consulte “Crear marcos” en la página 211.

Para utilizar la acción Definir texto de marco:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Deﬁnir texto > Deﬁnir texto de

marco del menú emergente Acciones.

3 En el cuadro de diálogo Deﬁnir texto de marco, elija el marco de destino del

menú emergente Marco.

4 haga clic en el botón Obtener HTML actual para copiar el contenido actual de

la sección body del marco de destino.

5 Introduzca un mensaje en el campo Nuevo HTML y luego haga clic en

Aceptar.

6 Compruebe que el evento predeterminado es el que usted desea. Si no lo es,

seleccione otro evento en el menú emergente.

Si no ve los eventos que desea, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Capítulo 18488

Definir texto de capa

La acción Deﬁnir texto de capa reemplaza el contenido y el formato de una capa

existente en una página con el contenido que usted especiﬁque. Dicho contenido

puede incluir cualquier código Código HTML válido.

Deﬁnir texto de capa sustituye el contenido y el formato de la capa, pero mantiene

sus atributos, incluido el color. Puede aplicar formato al contenido mediante la

inclusión de etiquetas HTML en el campo Nuevo HTML del cuadro de diálogo

Deﬁnir texto de capa.

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra

expresión de función JavaScript válida. Para incrustar una expresión JavaScript,

enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra

invertida (\{).

Ejemplo

El URL correspondiente a esta página es {window.location} y hoy es {new

Date()}.

Para crear una capa:

1 Elija Insertar > Capa.

Para obtener más información, consulte “Crear capas en la página” en la

página 429.

2 En el inspector de propiedades, introduzca un nombre para la capa.

Para adjuntar una acción Definir texto de capa:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Deﬁnir texto > Deﬁnir texto de

capa del menú emergente Acciones.

3 En el cuadro de diálogo Deﬁnir texto de capa, utilice el menú emergente Capa

para elegir la capa de destino.

4 Introduzca un mensaje en el campo Nuevo HTML y luego haga clic en

Aceptar.

5 Compruebe que el evento predeterminado es el que usted desea. Si no lo es,

seleccione otro evento en el menú emergente.

Si no ve los eventos que desea, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Usar comportamientos 489

Definir texto de barra de estado

La acción Deﬁnir texto de barra de estado muestra un mensaje en la barra de

estado, situada en la parte inferior izquierda de la ventana del navegador. Por

ejemplo, puede usar esta acción para describir el destino de un vínculo en la barra

de estado en lugar de mostrar el URL al que está asociado. Para ver un ejemplo de

mensaje de estado, pase el ratón por encima de cualquiera de los botones de

exploración de la Ayuda de Dreamweaver. Tenga en cuenta, no obstante, que a

menudo los visitantes ignoran o no advierten los mensajes de la barra de estado; si

su mensaje es importante, puede mostrarlo en forma de mensaje emergente o

como texto de una capa.

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra

expresión de función JavaScript válida. Para incrustar una expresión JavaScript,

enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra

invertida (\{).

Ejemplo

El URL correspondiente a esta página es {window.location} y hoy es {new

Date()}.

Para utilizar la acción Definir texto de barra de estado:

1 Seleccione un objeto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Deﬁnir texto > Deﬁnir texto de

barra de estado del menú emergente Acciones.

3 En el cuadro de diálogo Deﬁnir texto de barra de estado, escriba el mensaje en

el campo Mensaje.

Escriba un mensaje corto. El navegador cortará el mensaje si no cabe en la barra

de estado.

4 Haga clic en Aceptar.

5 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Capítulo 18490

Definir texto de campo de texto

La acción Deﬁnir texto de campo de texto sustituye el contenido de un campo de

texto de un formulario por el contenido que usted especiﬁque.

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra

expresión de función JavaScript válida. Para incrustar una expresión JavaScript,

enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra

invertida (\{).

Ejemplo

El URL correspondiente a esta página es {window.location} y hoy es {new

Date()}.

Para crear un campo de texto con nombre:

1 Elija Insertar > Objetos de formulario> Campo de texto.

Si Dreamweaver le pregunta si desea añadir una etiqueta de formulario, haga

clic en Sí. Para obtener más información, consulte “Crear formularios” en la

página 507.

2 En el inspector de propiedades, introduzca un nombre para el campo de texto.

Asegúrese de que el nombre no se repite en la página (no utilice el mismo

nombre para varios elementos de la misma página aunque se encuentren en

formularios distintos).

Para utilizar la acción Definir texto de campo de texto:

1 Seleccione un campo de texto y abra el panel Comportamientos.

2 Haga clic en el botón de signo más (+) y elija Deﬁnir texto > Deﬁnir texto de

campo de texto del menú emergente Acciones.

3 En el cuadro de diálogo Deﬁnir texto de campo de texto, elija el campo de texto

de destino del menú emergente Campo de texto.

4 Introduzca texto en el campo Nuevo texto y luego haga clic en Aceptar.

5 Compruebe que el evento predeterminado es el que usted desea. Si no lo es,

seleccione otro evento en el menú emergente.

Si no ve los eventos que desea, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Usar comportamientos 491

Mostrar-Ocultar capas

La acción Mostrar-Ocultar capas muestra, oculta o restaura la visibilidad

predeterminada de una o más capas. Esta acción resulta útil para mostrar

información a medida que el usuario va interactuando con la página. Por ejemplo,

cuando el usuario pasa el puntero del ratón por encima de la imagen de una

planta, se puede mostrar una capa que le ofrezca información sobre la época y

región de crecimiento de la planta, las horas de sol que necesita, el tamaño que

suele alcanzar, etc.

La acción Mostrar-Ocultar capas también es útil para crear una capa de carga

previa, es decir, una capa grande que en un principio oculta el contenido de la

página y luego desaparece cuando todos los componentes de la página se han

terminado de cargar.

Para usar la acción Mostrar-Ocultar capas:

1 Elija Insertar > Capa o haga clic en el botón Capa en el panel Objetos y dibuje

una capa en la ventana de documento.

Repita este paso para crear capas adicionales.

2 Haga clic en la ventana de documento para anular la selección de la capa y

luego abra el panel Comportamientos.

3 Haga clic en el botón de signo más (+) y elija Mostrar-Ocultar capas del menú

emergente Acciones.

Si la acción Mostrar-Ocultar capas no está disponible, es muy probable que

haya una capa seleccionada. Dado que las capas no aceptan eventos en la

versión 4.0 de ninguno de los dos navegadores, deberá seleccionar un objeto

diferente, como la etiqueta body, o un vínculo (etiqueta a), o bien cambiar el

navegador de destino a IE 4.0 en el menú emergente Mostrar eventos para.

4 Seleccione la capa cuya visibilidad desea cambiar en la lista Capas con nombre.

5 Haga clic en Mostrar para mostrar la capa, en Ocultar para ocultarla, o en

Predeterminada para restaurar la visibilidad predeterminada de la capa.

6 Repita los pasos 4 y 5 para todas las capas restantes cuya visibilidad desee

cambiar en este momento. (Se puede cambiar la visibilidad de múltiples capas

con un solo comportamiento.)

7 Haga clic en Aceptar.

8 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Capítulo 18492

Puede que las capas reduzcan su tamaño para ajustarse al contenido cuando se

muestren en una ventana de Netscape Navigator. Para evitar que esto ocurra,

añada texto o imágenes a las capas o establezca valores de recorte de capa.

Para crear una capa de carga previa:

1 Haga clic en el botón Dibujar capa de la categoría Común del panel Objetos y

dibuje una capa grande en la vista Diseño de la ventana de documentos.

Asegúrese de que la capa cubra todo el contenido de la página.

2 En el panel Capas, arrastre el nombre de la capa hasta la primera posición de la

lista de capas para especiﬁcar que la capa debe estar encima de todas las demás

en el orden de apilamiento.

3 Seleccione la capa si no está ya seleccionada, y asígnele el nombre loading,

usando para ello el campo situado más a la izquierda del inspector

de propiedades.

4 Con la capa todavía seleccionada, establezca el color de fondo de la capa con el

mismo color que el del fondo de la página del inspector de propiedades.

5 Haga clic dentro de la capa (que ahora debe estar ocultando el resto del

contenido de la página) y, si lo desea, escriba un mensaje.

Por ejemplo, los mensajes “Espere a que se cargue la página” o “Cargando...”

informan a los visitantes de lo que está ocurriendo para que sepan que la página

tiene contenido.

6 Haga clic en la etiqueta <body> en el selector de etiquetas, situado en el ángulo

inferior izquierdo de la ventana de documento.

Usar comportamientos 493

En el panel Comportamientos, seleccione Mostrar-Ocultar capas en el menú

emergente Acciones.

8 Seleccione la capa llamada cargando en la lista de Capas con nombre.

9 Haga clic en Ocultar.

10 Haga clic en Aceptar.

11 Compruebe que el evento que aparece junto a la acción Mostrar-Ocultar capas

en la lista de comportamientos sea onLoad. (Si no lo es, seleccione el evento y

haga clic en el triángulo que señala hacia abajo que aparece entre el evento y la

acción. Elija onLoad en la lista de eventos del menú emergente.)

Intercambiar imagen

La acción Intercambiar imagen sustituye una imagen por otra cambiando el

atributo src de la etiqueta img. Use esta acción para crear sustituciones de botones

y otros efectos de imágenes (incluido el intercambio de varias imágenes a la vez).

Nota: Dado que sólo el atributo src se ve afectado por esta acción, el intercambio debe

hacerse con imágenes que tengan las mismas dimensiones (altura y anchura) que la

imagen original. En caso contrario, la imagen que se intercambia aparecerá reducida o

ampliada para adaptarse a las dimensiones de la imagen original.

Para usar la acción Intercambiar imagen:

1 Elija Insertar > Imagen o haga clic en el botón Imagen en el panel Objetos para

insertar una imagen.

2 En el inspector de propiedades, introduzca un nombre para la imagen en el

campo de texto situado más a la izquierda.

La acción Intercambiar imagen continuará funcionando aunque no asigne

nombres a las imágenes, ya que asigna un nombre automáticamente a las

imágenes sin nombre cuando se adjunta el comportamiento a un objeto. No

obstante, resultará más fácil distinguir las imágenes en el cuadro de diálogo

Intercambiar imagen si todas las imágenes disponen ya de un nombre.

3 Repita los pasos 1 y 2 para insertar más imágenes.

4 Seleccione un objeto (normalmente, la imagen que va a intercambiar) y abra el

panel Comportamientos.

5 Haga clic en el botón de signo más (+) y elija Intercambiar imagen del menú

emergente Acciones.

6 Seleccione la imagen cuyo origen desea cambiar de la lista Imágenes.

7 Haga clic en Examinar para seleccionar el archivo de la nueva imagen o

introduzca la ruta y el nombre de archivo de la nueva imagen en el campo

Deﬁnir origen como.

Capítulo 18494

Repita los pasos 6 y 7 para todas las demás imágenes que desee cambiar. Puede

usar la misma acción Intercambiar imagen para todas las imágenes que desee

cambiar a la vez; en caso contrario, la acción correspondiente Restaurar imagen

intercambiada no las +restaurará todas.

9 Seleccione la opción Carga previa de imágenes para cargar las nuevas imágenes

en la memoria caché del navegador al cargar la página.

Esto contribuye a evitar los retrasos debidos a la descarga cuando llega el

momento de que aparezcan las imágenes.

10 Haga clic en Aceptar.

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 navegador de destino en el menú

emergente Mostrar eventos para.

Restaurar imagen intercambiada

La acción Restaurar imagen intercambiada restaura el último conjunto de

imágenes intercambiadas a sus archivos de origen anteriores. Esta acción se añade

automáticamente siempre que se adjunta la acción Intercambiar imagen a un

objeto; si dejó seleccionada la opción Restaurar al adjuntar Intercambiar imagen,

no tendrá que seleccionar manualmente la acción Restaurar imagen

intercambiada.

Ir a un fotograma en la línea de tiempo

La acción Ir a un fotograma en la línea de tiempo desplaza el cabezal de

reproducción al fotograma especiﬁcado. Esta acción puede usarse en el canal

Behavior del panel Líneas de tiempo para hacer que una parte de una línea de

tiempo se reproduzca en bucle un número determinado de veces, para crear un

vínculo o botón Rebobinar o para permitir al usuario saltar a distintas partes de la

animación.

Para usar la acción Ir a un fotograma en la línea de tiempo:

1 Elija Ventana > Línea de tiempo para abrir el panel Líneas de tiempo y

asegúrese de que el documento contiene una línea de tiempo.

Si no ve ninguna barra de animación de color morado en el panel Líneas de

tiempo, el documento no contiene ninguna línea de tiempo. Consulte “Crear

una animación de líneas de tiempo” en la página 449.

2 Seleccione un objeto al que adjuntar el comportamiento.

Para adjuntar el comportamiento a un fotograma de la línea de tiempo, haga

clic en el canal Behavior en el fotograma deseado.

Usar comportamientos 495

Abra el panel Comportamientos.

4 Haga clic en el botón de signo más (+) y elija Línea de tiempo > Ir a un

fotograma en la línea de tiempo del menú emergente Acciones. (Si esta acción

aparece atenuada, signiﬁca que su documento no contiene ninguna línea de

tiempo.)

5 Seleccione una línea de tiempo del menú emergente Línea de tiempo.

6 Introduzca un número de fotograma en el campo Ir a fotograma.

7 Si está añadiendo esta acción al canal Behavior de una línea de tiempo y desea

que una parte de la línea de tiempo se reproduzca en bucle, introduzca en el

campo Bucle el número de veces que éste debe repetirse.

Este campo debe dejarse en blanco si la acción Ir a un fotograma en la línea de

tiempo no se está adjuntando a un fotograma de una línea de tiempo.

8 Haga clic en Aceptar.

9 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Reproducir línea de tiempo y Detener línea de tiempo

Use las acciones Reproducir línea de tiempo y Detener línea de tiempo para

permitir a los visitantes iniciar y detener una línea de tiempo haciendo clic en un

vínculo o en un botón; o iniciar y detener una línea de tiempo automáticamente

cuando el visitante pasa el ratón por encima de un vínculo, una imagen u otro

objeto. La acción Reproducir línea de tiempo se adjunta automáticamente a la

etiqueta body con el evento onLoad cuando se selecciona Rep. Autom. en el panel

Líneas de tiempo.

Para usar las acciones Reproducir línea de tiempo y Detener línea de tiempo:

1 Elija Ventana > Línea de tiempo para abrir el panel Líneas de tiempo y

asegúrese de que el documento contiene una línea de tiempo.

Si no ve ninguna barra de animación de color morado en el panel Líneas de

tiempo, el documento no contiene ninguna línea de tiempo. Consulte “Crear

una animación de líneas de tiempo” en la página 449.

2 Seleccione un objeto y abra el panel Comportamientos.

3 Haga clic en el botón de signo más (+) y elija Reproducir línea de tiempo o

Detener línea de tiempo del menú emergente Acciones.

4 Seleccione la línea de tiempo que desea reproducir o detener, o elija detener

todas las líneas de tiempo, en el menú emergente.

Capítulo 18496

Haga clic en Aceptar.

6 Compruebe que el evento predeterminado es el que usted desea.

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que

busca no aparecen en la lista, cambie el navegador de destino en el menú

emergente Mostrar eventos para.

Validar formulario

La acción Validar formulario comprueba el contenido de los campos de texto

especiﬁcados para asegurarse de que el usuario ha introducido el tipo correcto de

datos. Adjunte esta acción a campos de texto individuales con el evento

onBlur

para validar los campos conforme el usuario vaya rellenando el formulario, o

adjúntela al formulario con el evento onSubmit para evaluar varios campos de texto

cuando el usuario haga clic en el botón Enviar. Al adjuntar esta acción a un

formulario, se evita que éste sea enviado al servidor si alguno de los campos

especiﬁcados contiene datos no válidos.

Para usar la acción Validar formulario:

1 Elija Insertar > Formulario o haga clic en el botón Formulario en el panel

Objetos para insertar un formulario.

2 Elija Insertar > Objetos de formulario > Campo de texto o haga clic en el botón

Campo de texto en el panel Objetos para insertar un campo de texto.

Repita este paso para insertar más campos de texto.

3 Lleve a cabo una de estas operaciones:

• Para validar campos individuales conforme el usuario va rellenándolos en el

formulario, seleccione un campo de texto y elija Ventana > Comportamientos.

• Para validar múltiples campos cuando el usuario envía el formulario, haga clic

en la etiqueta <form> en el selector de etiquetas, situado en el ángulo inferior

izquierdo de la ventana de documento, y elija Ventana > Comportamientos.

4 Seleccione Validar formulario en el menú emergente Acciones.

5 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 múltiples campos, seleccione un campo de texto en la lista de

Campos con nombre.

6 Seleccione la opción Obligatorio si el campo debe contener algún dato.

Usar comportamientos 497

Elija una de las siguientes opciones Aceptar:

• Use Cualquier cosa si el campo es obligatorio pero no tiene que contener

ningún tipo de dato determinado. (Si no está seleccionado Obligatorio, esta

opción carece de sentido (es lo mismo que si la acción Validar formulario no se

hubiera adjuntado al campo).

• Use Dirección de correo electrónico para comprobar si el campo contiene un

símbolo arroba (@).

• Use Número para comprobar que el campo contiene solamente caracteres

numéricos.

• Use Número del para comprobar que el campo contiene solamente caracteres

numéricos dentro de un rango determinado.

8 Si está validando múltiples campos, repita los pasos 6 y 7 para cada uno de los

campos que desee validar.

9 Haga clic en Aceptar.

Si está validando múltiples campos cuando el usuario envía el formulario, en el

menú emergente Eventos aparecerá automáticamente el evento onSubmit.

10 Si está validando campos individuales, compruebe que el evento

predeterminado sea onBlur u onChange.

En caso de que no lo sea, seleccione onBlur o onChange en el menú desplegable

Eventos. Cualquiera de estos dos eventos desencadena la acción Validar

formulario cuando el usuario abandona el campo. La diferencia entre ellos

estriba en que onBlur tiene lugar independientemente de que el usuario haya

escrito algo en el campo, mientras que onChange tiene lugar sólo si el usuario ha

cambiado el contenido del campo. El evento onBlur es preferible si ha

conﬁgurado el campo como obligatorio.

Capítulo 18498

499

CAPÍTULO 19

.............................................................................................................

Depurar código JavaScript

El depurador de JavaScript de Macromedia Dreamweaver le permite descubrir

errores en el código JavaScript de la parte del cliente. Puede escribir el código

usando la vista de Código de Dreamweaver (o el inspector de código) y luego

ejecutar el depurador para comprobar si contiene errores de sintaxis y de lógica.

Cuando existe un error de sintaxis, el navegador presenta un mensaje de error. Sin

embargo, cuando existe un error de lógica, la página no funcionará correctamente,

pero el navegador no presenta ningún mensaje al respecto. El depurador funciona

con Microsoft Internet Explorer y Netscape Navigator en Windows, y con

Netscape Navigator en Macintosh. Para obtener más información sobre la

elaboración de secuencias de comandos, consulte “Insertar secuencias de

comandos” en la página 351.

El depurador comprueba en primer lugar la existencia de posibles errores de

sintaxis en el código, y luego lo ejecuta con el navegador para ayudarle a

comprobar si hay errores de lógica. Si hay errores de lógica, la ventana Depurador

JavaScript le ayuda a aislar esos errores en el código JavaScript al permitirle

examinar las variables y las propiedades del documento mientras el programa se

ejecuta. Se pueden establecer puntos de corte (similares a instrucciones de alerta)

en el código para detener la ejecución del programa y mostrar los valores de los

objetos y propiedades de JavaScript en una lista de variables. También se puede

pasar a la siguiente instrucción o a una llamada de función para ver cómo cambian

los valores de las variables.

El depurador JavaScript puede reducir considerablemente el tiempo que dedica a

buscar y aislar errores en el código.

Capítulo 19500

Ejecutar el depurador

Después de escribir el código, puede iniciar el depurador JavaScript para

comprobar si hay errores. El depurador comprueba en primer lugar la existencia

de posibles errores de sintaxis, y luego abre la página en el navegador para que

usted pueda comprobar si hay errores de lógica.

Para iniciar la depuración:

1 Elija Archivo > Depurar en navegador, y sesleccione el navegador en la lista.

Como alternativa, puede hacer clic en el botón Vista previa/Depurar en

navegador de la barra de herramientas (Ver > Barra de herramientas) y

seleccione Depurar en Internet Explorer o Depurar en Netscape

Communicator.

Si el depurador encuentra errores de sintaxis, se detiene y los muestra en una

lista en la ventana Errores de sintaxis JavaScript. Consulte “Buscar errores de

sintaxis” en la página 501.

2 Si está usando Netscape Navigator, haga clic en Aceptar en el cuadro de

advertencia que aparece en el depurador, y luego haga clic en Conceder en el

cuadro de diálogo de seguridad de Java.

Nota: Si ya ha aceptado un certificado de seguridad de Macromedia, el cuadro de

diálogo de seguridad de Java no aparecerá.

3 Si está usando Internet Explorer (sólo en entorno Windows), haga clic en Sí en

el cuadro de diálogo de seguridad de Java, y luego en Aceptar en el cuadro de

advertencia que aparece en el depurador.

El depurador se conecta con en navegador pero en realidad no establece una

conexión de red ni se conecta con ningún servidor de Internet. El navegador

aparece con la ventana Depurador JavaScript, que se detiene automáticamente en

la primera línea de código.

La ventana Depurador JavaScript aparece con la ventana del navegador. El

depurador se detiene automáticamente en la primera línea de código.

Depurar código JavaScript 501

Para ejecutar el depurador:

Haga clic en el botón Ejecutar de la ventana Depurador JavaScript.

Para detener el depurador:

Haga clic en el botón Detener de la ventana Depurador JavaScript. El depurador

se cerrará.

Buscar errores de sintaxis

Si el depurador encuentra errores de sintaxis, se detiene y los muestra en una lista

en la ventana Errores de sintaxis JavaScript.

Para ver las descripción del error:

Seleccione un error en la ventana Errores de sintaxis JavaScript. En el área

Descripción detallada aparecerá una descripción del error.

Para ir al error seleccionado del código, lleve a cabo una de estas operaciones:

• Haga doble clic en el error.

• Haga clic en el botón Ir a línea.

El código aparece resaltado en la vista de Código (o en el inspector de código).

Capítulo 19502

Buscar y reparar errores de lógica

Cuando el depurador encuentra errores de lógica, se abre la ventana Depurador

JavaScript. Automáticamente, se deﬁnirá un punto de corte (similar a una alerta)

en la primera línea del código. El depurador detiene la ejecución en cada punto de

corte, y le ofrece la oportunidad de ver los valores de los objetos y las propiedades

JavaScript en la ventana de lista de variables.

Una vez que el depurador se ha detenido en un punto de corte, se puede avanzar

paso a paso por el código (ejecutar las instrucciones de una en una). Esto le

permitirá ver si el programa se ejecuta correctamente. El depurador puede pasar

incluso por código vinculado. Por ejemplo, si el código continen un enlace con un

archivo de origen, el depurador entrará en el archivo de origen y lo mostrará en la

ventana Depurador JavaScript. Al ir avanzando por el código, podrá ver cómo van

cambiando los valores de las variables a lo largo del programa.

Ejecutar

Detener

depuración

Definir/Quitar

punto de corte

Quitar todos los

puntos de corte

Pasar

Entrar

Salir

Depurar código JavaScript 503

Definir puntos de corte

Un punto de corte marca un lugar del código en el que se desea que la ejecución

del programa se detenga. Cuando se deﬁne un punto de corte, se marca con un

pequeño purnto rojo en el margen izquierdo de la ventana Depurador JavaScript.

Cuando la ejecución del programa se detiene en ese punto de corte, aparece una

pequeña ﬂecha sobre el punto; entonces se pueden examinar los objetos y las

propiedades que hay en ese punto. Esto le permite localizar rápidamente el origen

del error en el código JavaScript.

Los puntos de corte solamente se pueden deﬁnir en el código JavaScript (entre

etiquetas script) o en una línea con un manejador de eventos. Si deﬁne un punto

de corte en otro lugar, Dreamweaver deﬁnirá automáticamente el punto de corte

en la siguiente línea de código válida (o coloque aquí el punto de inserción, si en la

línea ya hay un punto de corte insertado). Si no hay ninguna línea válida en la que

se pueda deﬁnir un punto de corte, se oirá un pitido.

Para definir un punto de corte, lleve a cabo una de estas operaciones:

• En la ventana Depurador JavaScript, coloque el punto de inserción en la línea

en la que desea deﬁnir el punto de corte, y haga clic en el botón Deﬁnir/Quitar

punto de corte que se encuentra en la parte superior de la ventana Depurador.

Para quitar el punto de corte, vuelva a hacer clic en el botón Deﬁnir/Quitar

punto de corte.

• En la vista de Código (o inspector de código), coloque el punto de inserción en

la línea en la que desea deﬁnir el punto de corte, luego seleccione Edición >

Deﬁnir punto de corte en el menú emergente Navegación por el código de la

barra de herramientas. También puede hacer clic con el botón derecho del

ratón (Windows) o hacer clic mientras mantiene presionada la tecla Control

(Macintosh) y elija Deﬁnir punto de corte en el menú contextual. Para quitar el

punto de corte, seleccione Quitar punto de corte en el menú contextual.

Capítulo 19504

Para quitar todos los puntos de corte, lleve a cabo una de estas operaciones:

• En la ventana Depurador JavaScript, haga clic en el botón Quitar todos los

puntos de corte.

• En la vista de Código (o inspector de código), seleccione Quitar todos los

puntos de corte en el menú emergente Navegación por el código de la barra de

herramientas, o elija Edición > Quitar todos los puntos de corte.

Pasar por el código

Puede pasar por el código para ejecutar las instrucciones de una en una y veriﬁcar

sus efectos en el programa. Puede pasar, por ejemplo, por una condición

if y ver si

el programa se detiene en la primera línea dentro de la instrucción condicional o

en la siguiente línea ejecutable después de la instrucción

if.

Cuando el depurador se detiene en una instrucción con una llamada de función,

puede comprobar que la función se ejecuta correctamente. Si la función es

correcta, puede salir de ella para que el depurador siga la ejecución hasta que la

función retorne. El programa se volverá a detener en la siguiente instrucción

después de la llamada de función Si intenta entrar en una instrucción que contiene

una función JavaScript no estándar, el depurador pasará sin entrar en ella.

Para pasar una instrucción:

Haga clic en el botón Pasar de la parte superior de la ventana Depurador

JavaScript.

Cuando el programa se detiene en alguna instrucción (incluidas aquellas con una

función de llamada), puede pasar esa instrucción para continuar y detenerse antes

de la siguiente función.

Para entrar en una función:

Haga clic en el botón Entrar de la parte superior de la ventana Depurador

JavaScript.

Para salir de una función:

Haga clic en el botón salir.

Solamente se puede usar Salir cuando el depurador está dentro de una función

deﬁnida por el usuario. El hecho de salir provoca la ejecución de las restantes

instrucciones de la deﬁnición de la función. El depurador se detendrá en la

siguiente instrucción.

Depurar código JavaScript 505

Ver y editar valores de variables

Para comprobar las variables según va pasando por el código, puede usar la lista de

variables de Dreamweaver que se encuentra en el panel inferior de la ventana

Depurador JavaScript. En la columna izquierda se introducen nombres de

variables; en la columna derecha aparece la lista de los valores actuales de cada

variable cuando se detiene la ejecución del programa en un punto de corte o

después de pasar por el código.

Para añadir una variable a la lista de variables, lleve a cabo una de estas

operaciones:

• Seleccione el nombre de la variable en la parte de código correspondiente en la

ventana Depurador JavaScript. Haga clic en el botón más (+) y presione Entrar.

• Haga clic en el botón (+), escriba el nombre de la variable que desea ver, y

presione Entrar.

Los valores aparecerán junto a cada variable al ir pasando por el código. Si la

variable es un objeto con propiedades, puede ampliar la variable (mostrar sus

propiedades y valores) haciendo clic en el botón (+) (Windows) o en el botón de

triángulo (Macintosh) que aparece junto a ella en la lista. La variable expandida se

contraerá automáticamente cada vez que pase por el código.

Capítulo 19506

Para eliminar un elemento de la lista de variables:

1 Seleccione el elemento en la lista de variables.

2 Haga clic en el botón de signo menos (-).

Para editar un valor:

1 Seleccione el elemento en la lista de variables.

2 Haga clic en el valor en la lista de valores.

3 Edite el valor escribiendo en el cuadro de texto que aparece.

507

CAPÍTULO 20

.............................................................................................................

Crear formularios

Los formularios permiten interactuar con los visitantes del sitio o recopilar

información de ellos. Por ejemplo, puede solicitar el nombre y la dirección de correo

electrónico de un usuario o hacer que los visitantes respondan a una encuesta,

ﬁrmen en un libro de invitados o proporcionen comentarios acerca del sitio.

Los formularios constan de dos partes: el código HTML que describe el

formulario (por ejemplo, los campos, etiquetas y botones que ve el usuario en la

página) y una secuencia de comandos o aplicación que procesa la información

enviada (como un guión CGI, por ejemplo). No se puede recopilar datos de

formulario sin utilizar una secuencia de comandos de procesamiento.

Puede utilizar Macromedia Dreamweaver para crear distintos objetos de

formulario, como campos de texto, campos de contraseña, botones de opción,

casillas de veriﬁcación, menús emergentes o imágenes en las que es posible hacer

clic (por ejemplo, un botón Enviar).

También puede utilizar el comportamiento Validar formulario de Dreamweaver

para comprobar la información que proporciona un visitante; por ejemplo, puede

comprobar si una dirección de correo electrónico contiene el símbolo “@” o si se

han introducido datos en un campo “obligatorio”.

CGI-bin

1. Visitor completes form

and submits it to a Web

server for processing

2. CGI script

processes

the form

3. A new HTML document is

created and sent to the visitor

Capítulo 20508

Secuencias de comandos CGI

Por lo general, se utilizan secuencias de comandos CGI (Common Gateway

Interface) para procesar los formularios. CGI es una forma estándar de enviar

información entre un servidor y una secuencia de comandos de procesamiento.

Generalmente, las secuencias de comandos CGI se escriben en Perl u otro lenguaje

de programación como C++, Java, VBScript o JavaScript. Antes de crear

formularios interactivos, consulte con su ISP o con el administrador de su servidor

para determinar si el servidor puede ejecutar secuencias de comandos CGI.

Objetos de formulario

En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de

formulario. Puede insertar objetos de formulario por medio de la categoría

Formularios del panel Objetos o seleccionando Insertar > Formulario e Insertar >

Objetos de formulario.]

La categoría Formularios proporciona los siguientes botones:

Insertar formulario inserta un formulario en el documento. Dreamweaver inserta

etiquetas form de apertura y cierre de formulario en el código HTML. Los

elementos adicionales del formulario, como los campos de texto o los botones,

deben insertarse entre las etiquetas form para que los datos se procesen

correctamente con todos los navegadores.

Insertar campo de texto inserta un campo de texto en un formulario. Los campos

de texto aceptan todo tipo de texto, tanto alfabético como numérico. El texto

introducido puede mostrarse como una sola línea, varias líneas o como viñetas y

asteriscos (para protección de la contraseña).

Crear formularios 509

Insertar botón inserta un botón de texto en un formulario. Los botones llevan a

cabo tareas cuando se hace clic en ellos, como enviar o restablecer formularios.

Puede añadir un nombre o una etiqueta personalizada a un botón, o bien usar una

de las etiquetas predeﬁnidas, Enviar o Restablecer.

Insertar casilla de verificación inserta una casilla de veriﬁcación en un formulario.

Las casillas de veriﬁcación admiten múltiples respuestas en un solo grupo de

opciones y permiten que los usuarios seleccionen tantas opciones como sean

necesarias.

Insertar botón de opción inserta un botón de opción en un formulario. Los

botones de opción representan opciones exclusivas de selección. Cuando se

selecciona un botón en un grupo, se anula la selección de los demás botones del

grupo; por ejemplo, los usuarios pueden seleccionar Sí o No.

Insertar listas/menús permite crear opciones para el usuario en una lista. La

opción Lista muestra los valores de las opciones en una lista de desplazamiento y

permite que los usuarios seleccionen múltiples opciones. La opción Menú muestra

los valores de las opciones en una lista desplegable y permite que los usuarios

seleccionen una sola opción.

Insertar campo de archivo inserta un cuadro de texto vacío y un botón Examinar

en un documento. Los campos de archivo permiten al usuario examinar los

archivos de sus discos duros y cargarlos como datos de formulario.

Insertar campo de imagen permite insertar una imagen en un formulario. Los

campos de imagen pueden usarse en lugar de los botones Enviar para crear

botones Gráﬁcos.

Insertar campo oculto inserta un campo en el documento que permite almacenar

datos del usuario. Los campos ocultos permiten almacenar información

introducida por el usuario, como un nombre, una dirección de correo electrónico

o una preferencia de compra, y utilizarlos la próxima vez que el usuario visite el

sitio.

Insertar menú de salto inserta una lista de navegación o un menú emergente. Los

menús de salto permiten insertar un menú en el que cada opción está vinculada a

un documento o un archivo. Consulte “Crear menús de salto” en la página 387.

Capítulo 20510

Crear un formulario

Un formulario contiene propiedades que son invisibles para el usuario. Las

propiedades especiﬁcan cómo se procesa el formulario

Un formulario consta de tres partes básicas:

• Etiquetas form, que incluyen el URL de la secuencia de comandos CGI que

procesará el formulario y el método que se utilizará para enviar los datos a un

servidor.

• Campos de formulario, como campos de texto, menús, casillas de veriﬁcación o

botones de opción.

• El botón Enviar, que envía los datos a la secuencia de comandos CGI del

servidor.

Nota: Si intenta insertar un objeto de formulario sin haber creado previamente el

formulario, Dreamweaver presentará el mensaje “¿Añadir etiquetas de formulario?” Elija Sí

para que Dreamweaver cree las etiquetas de formulario para el objeto.

Para añadir un formulario a un documento:

1 En el documento, coloque el punto de inserción en el lugar en el que desea que

aparezca el formulario y lleve a cabo una de estas operaciones:

• En la categoría Formularios del panel Objetos, seleccione el icono Insertar

formulario.

• Elija Insertar > Formulario.

Cuando se crea un formulario, aparece un contorno de línea de puntos de color

rojo en la ventana de documento. Si no ve el contorno, compruebe que la

opción Ver > Ayudas visuales > Elementos invisibles esté seleccionada.

2 En el documento, haga clic en el contorno para seleccionar el formulario si es

que no está ya seleccionado.

Crear formularios 511

En el campo Nombre del formulario del inspector de propiedades, escriba un

nombre exclusivo para el formulario.

La asignación de nombre al formulario permite hacer referencia a él o

controlarlo con un lenguaje de secuencia de comandos como JavaScript o

VBScript.

4 En el campo Acción, especiﬁque la ruta del URL en el que reside la secuencia

de comandos o la aplicación que procesará el formulario. Para ello, lleve a cabo

una de estas operaciones:

• Haga clic en el icono de la carpeta y acceda a la carpeta correspondiente.

• Escriba la ruta completa de la carpeta.

Si especiﬁca la ruta de una secuencia de comandos CGI, será similar a ésta:

http://www.mysite.com/cgi-bin/process.cgi

En el menú emergente Método, elija el método con el que se gestionarán los

datos del formulario.

• Elija POST para enviar los valores del formulario en el cuerpo de un mensaje.

• Elija GET para adjuntar los valores del formulario al URL y enviar la

información al servidor.

Nota: No utilice el método GET con formularios largos. Los URL están limitados a 8.192

caracteres. Si los datos enviados superan dicha longitud, la información se trunca

dando lugar a resultados imprevistos. Tampoco utilice GET para gestionar números de

tarjeta de crédito u otra información confidencial, ya que este método de transferencia

de información no es seguro.

• Elija Predeterminado para enviar los datos de formulario con la opción

predeterminada del navegador del usuario, que generalmente es el método GET.

Campos de formulario

Una vez insertadas las etiquetas form en el documento, puede comenzar a añadir

objetos de formulario. Los objetos de formulario se utilizan para solicitar

información a los visitantes del sitio.

Utilice campos de formulario cuando desee conﬁgurar un formulario para que los

visitantes escriban sus respuestas, como su nombre o dirección, por ejemplo. Es

posible insertar tres tipos de campos en un formulario: campos de texto (en los

que el usuario escribe una respuesta), campos de archivo (en los que el usuario

introduce la ruta de un archivo que desea cargar al servidor) y campos ocultos (que

contienen información introducida por el usuario en otro campo).

Conforme añada un campo a un formulario, podrá ver la longitud del campo, el

número de líneas que contiene, el número de caracteres que puede introducir el

usuario y si se trata de un campo de contraseña.

Capítulo 20512

Crear campos de texto

Un campo de texto es un objeto de formulario en el que los usuarios escriben una

respuesta.

Hay tres tipos de campos de texto:

Los campos de texto de una línea se utilizan para proporcionar respuestas

compuestas por una sola palabra o una frase corta; por ejemplo, un nombre o una

dirección.

Los campos de texto de varias líneas ofrecen mayor espacio al visitante para

escribir la respuesta. Puede determinar fácilmente el número de caracteres o el

número de líneas que puede introducir el visitante.

Los campos de contraseña son campos de texto especiales. Cuando el usuario

escribe en ellos, el texto queda oculto y aparecen asteriscos o viñetas.

Nota: Las contraseñas enviadas a un servidor por este medio no se cifran y, por tanto, los

datos que se transfieren no son seguros.

Para crear un campo de texto de una línea o de contraseña:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• Elija Insertar > Objeto de formulario> Campo de texto.

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

campo de texto.

Aparecerá un campo de texto en el documento.

Crear formularios 513

En el campo Campo de texto del inspector de propiedades, escriba un nombre

exclusivo para el campo.

Asegúrese de que el nombre es exclusivo, ya que no se puede repetir el nombre

de un campo de texto en un formulario. No utilice espacios; para separar

palabras, utilice el carácter de subrayado. Por ejemplo, escriba primer_apellido

en lugar de primer apellido.

3 En el campo Ancho car, lleve a cabo una de estas operaciones:

• Acepte el valor predeterminado, que establece la longitud del campo de texto

aproximadamente a 24 caracteres.

• Escriba un número para especiﬁcar la longitud del campo de texto.

4 En el campo Car máx, lleve a cabo una de estas operaciones:

• Deje el campo vacío para que los usuarios puedan escribir todo el texto que

deseen. Si el texto introducido por el usuario supera el ancho de caracteres

(longitud) del campo, el texto se desplaza.

• Escriba el número máximo de caracteres que el usuario podrá introducir en el

campo.

Por ejemplo, puede que desee limitar un campo de edad a tres dígitos o un

campo de contraseña a ocho caracteres. Si el usuario supera el número máximo

de caracteres, el formulario produce un sonido de alerta.

5 En Tipo, seleccione el tipo de campo de texto que desea crear. Para ello, lleve a

cabo una de estas operaciones:

• Elija Una línea para crear un campo de texto de una línea.

• Elija Contraseña para crear un campo de contraseña.

6 Si desea establecer un texto predeterminado para el campo, escríbalo en el

campo Val inicial del inspector de propiedades.

El valor introducido aparecerá en el campo de texto cuando el formulario se

cargue por primera vez en el navegador del usuario.

7 Si lo desea, puede escribir una etiqueta o texto descriptivo junto al objeto.

Puede aplicar formato de texto a las etiquetas de los objetos de formulario. Para

obtener más información, consulte “Conﬁgurar y cambiar fuentes y estilos” en

la página 249.

Capítulo 20514

Para crear un área de texto de varias líneas:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• Elija Insertar > Objeto de formulario> Campo de texto.

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

campo de texto.

Aparecerá un campo de texto en el documento.

2 En el campo Campo de texto del inspector de propiedades, escriba un nombre

para el objeto campo de texto.

Asegúrese de que el nombre es exclusivo, ya que no se puede repetir el nombre

de un campo de texto en un formulario. No utilice espacios; para separar

palabras, utilice el carácter de subrayado. Por ejemplo, escriba

comentarios_del_usuario en lugar de comentarios del usuario.

3 En Tipo, seleccione Varias líneas.

4 En el campo Ancho car, lleve a cabo una de estas operaciones:

• Acepte el valor predeterminado, que establece la longitud del área de texto a 20

caracteres.

• Escriba un número para especiﬁcar la longitud del área de texto.

5 En el campo Líneas núm, lleve a cabo una de estas operaciones:

• Acepte el valor predeterminado, que corresponde a un campo de texto de 2

líneas.

• Escriba el número de líneas del área de texto.

6 En el menú emergente Ajuste, elija una opción para determinar cómo se

mostrará el texto introducido por el usuario cuando su longitud sea superior a

la capacidad del área de texto.

• Seleccione Desactivado o Predeterminado para evitar que el texto se ajuste

pasando a la siguiente línea.

Cuando el texto introducido por el usuario supera el límite derecho del área de

texto, el texto se desplaza hacia la izquierda. El usuario deberá presionar

Retorno para mover el punto de inserción a la siguiente línea del área de texto.

• Seleccione Virtual para ajustar el texto en el área de texto.

Cuando el texto introducido por el usuario supera el límite derecho del área de

texto, el texto se ajusta a la siguiente línea. No obstante, cuando se envían para

su procesamiento, los datos no se ajustan y se envían en una única cadena.

• Seleccione Físico para ajustar el texto tanto en el área de texto como en los

datos que se envían para su procesamiento.

Crear formularios 515

Si desea establecer un texto predeterminado para el campo, escríbalo en el

campo Val inicial del inspector de propiedades.

El valor introducido aparecerá en el campo de texto cuando el formulario se

cargue por primera vez en el navegador del usuario.

8 Si lo desea, puede escribir una etiqueta o texto descriptivo junto al objeto.

Puede aplicar formato de texto a las etiquetas de los objetos de formulario. Para

obtener más información, consulte “Conﬁgurar y cambiar fuentes y estilos” en

la página 249.

Permitir a los visitantes que carguen un archivo en su servidor

En algunos casos, la información que es necesario obtener de los visitantes del sitio

es demasiado compleja para un campo de texto. Por ejemplo, puede que desee que

los visitantes envíen un archivo al servidor, como un curriculum con formato, un

archivo gráﬁco o algún otro documento. Para ello, puede conﬁgurar un campo de

archivo en un formulario.

Un campo de archivo tiene la apariencia de un campo de texto, pero contiene

además un botón Examinar. El usuario puede escribir la ruta del archivo que desea

enviar o utilizar el botón Examinar para buscarlo y seleccionarlo.

Para utilizar un campo de archivo, el Método del formulario debe deﬁnirse como

POST. Los visitantes pegan un archivo a la dirección conﬁgurada en el campo

Acción del formulario.

Nota: Confirme con el administrador del servidor que se permite la carga de archivos

anónimos antes de usar el campo de archivo. Si inserta un campo de archivo con

Dreamweaver, deberá insertar manualmente

ENCTYPE="multipart/form-data" en la

etiqueta form para garantizar que el archivo se codifica correctamente.

Para crear un campo de archivo en un formulario:

1 Haga clic en el contorno del formulario y, en el inspector de propiedades,

deﬁna el Método del formulario como POST.

2 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• Elija Insertar > Objeto de formulario> Campo de archivo.

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

campo de archivo.

Aparecerá un campo de archivo en el documento.

3 En el campo Campo archivo del inspector de propiedades, escriba un nombre

para el objeto campo de archivo.

4 En el campo Ancho car, escriba un número para especiﬁcar el número máximo

de caracteres que se mostrarán en el campo.

5 En el campo Car máx, escriba un número para especiﬁcar el número máximo

de caracteres que admite el campo.

Capítulo 20516

Crear un campo oculto

Los visitantes del sitio no pueden ver los campos ocultos, que son elementos

invisibles situados en un documento para recopilar o enviar información. La

información de un campo oculto se transﬁere al servidor cuando se envía un

formulario y utiliza el par de nombre y valor deﬁnido al conﬁgurar el campo

oculto.

Dreamweaver añade un marcador al documento cuando se inserta un campo

oculto. Si inserta un campo oculto y el marcador no es visible, elija Ver > Ayudas

visuales > Elementos invisibles para verlo.

Para crear un campo oculto:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• Elija Insertar > Objeto de formulario> Campo oculto.

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

campo oculto.

Aparecerá un marcador en el documento.

2 En el campo Campo oculto del inspector de propiedades, escriba un nombre

exclusivo para el campo.

3 En el campo Valor, escriba el valor que desee asignar al campo.

Crear formularios 517

Insertar casillas de verificación y botones de

opción

Utilice los objetos de formulario casilla de veriﬁcación y botón de opción para

crear objetos de selección predeﬁnidos. El usuario hace clic en una casilla de

veriﬁcación o un botón de opción para hacer una elección.

La diferencia entre las casillas de veriﬁcación y los botones de opción reside en su

funcionamiento. Con las casillas de veriﬁcación, los usuarios activan o desactivan

respuestas individuales. Cada casilla de veriﬁcación es independiente de las

restantes, y el usuario puede seleccionar más de una opción en un grupo de casillas

de veriﬁcación.

Capítulo 20518

Los botones de opción funcionan como un grupo y ofrecen valores de selección

mutuamente excluyentes. Sólo es posible seleccionar una única opción en un

grupo de botones de opción.

Insertar una casilla de verificación

Las casillas de veriﬁcación permiten que el usuario seleccione más de una opción

en un grupo de opciones.

Cada objeto de formulario casilla de veriﬁcación es un elemento individual y debe

tener un nombre exclusivo en el campo Nombre.

Para insertar una casilla de verificación:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• Elija Insertar > Objeto de formulario> Casilla de veriﬁcación.

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

casilla de veriﬁcación.

2 En el campo Casilla del inspector de propiedades, escriba un nombre

descriptivo para la casilla de veriﬁcación.

Nota: Cada una de las casillas de verificación de un formulario debe tener un nombre

único.

Crear formularios 519

En el campo Valor activado, escriba un valor para la casilla de veriﬁcación.

Por ejemplo, en una encuesta, podría establecer el valor 4 para la opción “Estoy

totalmente de acuerdo” y 1 para la respuesta “No estoy de acuerdo”.

4 En Estado inicial, haga clic en Activado para que la opción aparezca marcada

cuando el formulario se cargue inicialmente en el navegador.

Insertar un botón de opción

Utilice los botones de opción cuando el usuario sólo deba seleccionar una de las

opciones de un grupo de opciones. Generalmente, los botones de opción se

utilizan en grupos. Todos los botones de opción de un grupo deben tener el

mismo nombre y contener distintos valores de campo.

Para insertar botones de opción:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• Elija Insertar > Objeto de formulario> Botón de opción.

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

botón de opción.

2 En el campo Botón opción del inspector de propiedades, escriba un nombre

descriptivo para el grupo de opciones.

Nota: Si crea varias grupos de botones de opción en un formulario, asegúrese de que

cada uno de ellos tiene un nombre exclusivo.

3 En el campo Valor activado, escriba el valor que desea enviar a la aplicación del

lado del servidor o a la secuencia de comandos de procesamiento cuando el

usuario seleccione el botón de opción. Por ejemplo, puede escribir esquiar en el

campo Valor activado para indicar que el usuario ha elegido esquiar.

4 En Estado inicial, haga clic en Activado para que la opción aparezca marcada

cuando el formulario se cargue inicialmente en el navegador.

Sugerencia: Para añadir otros botones de opción al grupo, seleccione el botón de opción

original, presione Control (Windows) u Opción (Macintosh) mientras arrastra y, por último,

cambie el campo Valor activado de cada nuevo botón.

Capítulo 20520

Listas y menús

Utilice una lista de opciones o un menú para presentar distintas opciones al

usuario en un espacio limitado. Las listas y los menús de formulario se crean en el

mismo inspector de propiedades, pero proporcionan distinta funcionalidad al

usuario.

Utilice una lista cuando desee controlar el número de opciones que se muestran.

Establezca el alto en líneas de la lista; cuando el número de opciones de la lista

supere su alto en líneas, aparecerá una barra de desplazamiento con la que el

usuario podrá ver todas las opciones. También puede permitir que el usuario

seleccione varios elementos de una lista.

Utilice un menú cuando el espacio sea muy reducido. Un menú muestra una sola

línea e incluye una ﬂecha abajo en la que el usuario hace clic para ver las pociones

restantes del menú. El usuario sólo puede seleccionar un elemento de menú de

una sola vez.

Crear una lista de desplazamiento

Las listas de desplazamiento permiten conﬁgurar varias opciones en un espacio

limitado. Puede establecer el alto en líneas de la lista y permitir que los usuarios

seleccionen varias opciones.

Para crear una lista de desplazamiento:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

lista/menú.

• Elija Insertar > Objeto de formulario > Lista/menú y, si es preciso, seleccione el

elemento lista/menú resultante.

2 En el campo Campo Lista/menú del inspector de propiedades, escriba un

nombre exclusivo para la lista.

Crear formularios 521

En el campo Tipo, seleccione Lista.

4 En el campo Alto, escriba el número de líneas que se mostrarán en la lista.

El número predeterminado de líneas es 4. Si el número especiﬁcado es inferior

al número de opciones de la lista, aparecerán barras de desplazamiento.

5 Si desea permitir que los usuarios seleccionen más de una opción de la lista,

elija Permitir múltiples (junto a Selecciones).

6 Haga clic en Valores de lista para añadir las distintas opciones.

Aparecerá el cuadro de diálogo Valores de lista.

7 Coloque el punto de inserción en el campo Etiqueta de elemento y escriba el

texto que aparecerá en la lista.

8 En el campo Valor, escriba el texto o los datos que desea enviar al servidor

cuando el usuario seleccione el elemento.

9 Para añadir otro elemento a la lista de opciones, haga clic en el botón con el

signo más (+) y repita los pasos 7 y 8.

10 Una vez añadidos todos los elementos a la lista, Haga clic en Aceptar para cerrar

el cuadro de diálogo Valores de lista.

Aparecerá el inspector de propiedades. Las opciones disponibles se muestran en

el campo Seleccionado inicialmente.

11 Seleccione el elemento de la lista que desee que aparezca seleccionado cuando la

lista se muestre inicialmente.

Capítulo 20522

Crear un menú emergente

Los menús emergentes permiten conﬁgurar varias opciones en un espacio limitado.

Cuando el formulario se carga en un navegador, sólo se puede ver una opción.

Para ver todas las opciones del menú, el usuario hace clic en la ﬂecha abajo.

Para crear un menú emergente:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

lista/menú.

• Elija Insertar > Objeto de formulario > Lista/menú.

2 En el campo Campo Lista/menú del inspector de propiedades, escriba un

nombre exclusivo para el menú.

3 En el campo Tipo, seleccione Menú.

4 Haga clic en Valores de lista para añadir las distintas opciones.

Aparecerá el cuadro de diálogo Valores de lista.

5 Coloque el punto de inserción en el campo Etiqueta de elemento y escriba el

texto que aparecerá en la lista.

6 En el campo Valor, escriba el texto o los datos que desea enviar al servidor

cuando el usuario seleccione el elemento.

7 Para añadir otro elemento a la lista de opciones, haga clic en el botón con el

signo más (+) y repita los pasos 6 y 7.

8 Una vez añadidos todos los elementos a la lista, Haga clic en Aceptar para cerrar

el cuadro de diálogo Valores de lista.

Aparecerá el inspector de propiedades. Las opciones disponibles se muestran en

el campo Seleccionado inicialmente.

Crear formularios 523

Botones de formulario

Los botones de formulario controlan las operaciones de los formularios. Puede

utilizar un botón de formulario para enviar los datos introducidos por los usuarios

al servidor o para restablecer un formulario, de forma que los usuarios puedan

corregir la información antes de enviarla. También puede utilizar un botón para

llevar a cabo otro tipo de procesos previamente deﬁnidos mediante una secuencia

de comandos de procesamiento. Por ejemplo, un botón de formulario puede

calcular el importe total de un pedido en base a los valores de determinados

campos.

Crear botones de formulario de texto

Un botón de formulario de texto es un botón predeterminado que utiliza el estilo

estándar del navegador y que muestra un texto, como Enviar, Restablecer o

Calcular pedido, por ejemplo.

Para crear un botón de texto:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• Elija Insertar > Objeto de formulario> Botón.

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

botón.

2 En el campo Nombre del botón del inspector de propiedades, escriba un

nombre para el botón.

Nota: Existen dos nombres reservados: Enviar, que envía los datos del formulario para

su procesamiento, y Restablecer, que restablece el valor original de todos los datos del

formulario.

3 En el campo Etiqueta del inspector de propiedades, escriba el que desee mostrar

en el botón.

4 En el campo Acción, lleve a cabo una de estas operaciones:

• Seleccione Enviar para enviar el formulario para su procesamiento cuando el

usuario haga clic en el botón.

• Seleccione Restablecer para restablecer el formulario cuando el usuario haga clic

en el botón.

• Seleccione Ninguna para activar otra acción basada en la secuencia de

comandos de procesamiento cuando el usuario haga clic en el botón; por

ejemplo, para calcular un total.

Capítulo 20524

Crear un botón gráfico Enviar

Puede crear un botón Enviar más atractivo mediante el uso del comando Insertar

campo de imagen para insertar una imagen en un formulario.

También puede utilizar botones gráﬁcos para llevar a cabo otras operaciones,

como restablecer un formulario o reproducir un sonido, por ejemplo. El uso de

una imagen para llevar a cabo tareas distintas del envío de datos requiere adjuntar

un comportamiento al objeto formulario. Puede utilizar el panel

Comportamientos de Dreamweaver para adjuntar un comportamiento o utilizar

código JavaScript para controlar el formulario. Para obtener información sobre

cómo adjuntar un comportamiento a un objeto, consulte “Adjuntar un

comportamiento” en la página 461.

Para crear un botón gráfico Enviar:

1 En el documento, coloque el punto de inserción en el interior del contorno del

formulario y lleve a cabo una de estas operaciones:

• Elija Insertar > Objeto de formulario> Campo de imagen.

• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar

campo de imagen.

2 En el inspector de propiedades del campo de imagen, escriba Enviar en el

campo Campo imagen.

3 En el campo Orig, haga clic en el icono de la carpeta y localice la imagen que

desea insertar en la página.

4 En el campo Alt, escriba el texto que desea que aparezca en lugar de la imagen

en los navegadores que sólo admiten texto o en aquéllos conﬁgurados para

descargar las imágenes manualmente.

Diseño de formularios

Puede utilizar saltos de línea, saltos de párrafo, texto preformateado o tablas para

aplicar formato a los formularios. No puede insertar un formulario en otro

formulario (es decir, superponer etiquetas), pero puede incluir varios formularios

en una misma página.

Cuando diseñe formularios, asigne textos descriptivos a las etiquetas de los campos

para que los usuarios puedan saber a qué están contestando. Por ejemplo, utilice la

etiqueta “Escriba su nombre” para solicitar el nombre del usuario.

Crear formularios 525

Añadir varios objetos a un formulario

Puede conﬁgurar varios formularios en un solo documento o página Web. Para

ello, sólo deberá asegurarse de que las etiquetas de los formularios no se

superponen.

Para añadir varios objetos a un formulario:

1 Coloque el punto de inserción en el interior del contorno y lleve a cabo una de

estas operaciones:

• Seleccione un objeto del menú Insertar > Objeto de formulario.

• En la categoría Formularios del panel Objetos, haga clic en el icono del objeto

que desea insertar en el formulario.

2 Especiﬁque las propiedades del objeto en el inspector de propiedades (elija

Ventana > Propiedades para que aparezca el inspector de propiedades si no está

abierto).

Insertar tablas en los formularios

Puede insertar una tabla en un formulario para conseguir un diseño más atractivo.

Utilice tablas para estructurar los objetos del formulario y las etiquetas de los

campos. Las tablas facilitan la alineación vertical y horizontal de las opciones.

Cuando utilice tablas en los formularios, asegúrese de que todas las etiquetas

table

estén situadas entre las etiquetas form.

Capítulo 20526

Procesar formularios

Los formularios son procesados por la secuencia de comandos o la aplicación

especiﬁcada en el atributo action de la etiqueta form. Seleccione un formulario y

mire en el inspector de propiedades cuál es su acción asociada.

Los formularios más simples usan JavaScript o VBScript para llevar a cabo todo el

proceso del formulario en la parte del cliente (en contraposición al envío de los

datos de formulario al servidor para su proceso). Por ejemplo, al ﬁnal de la página

puede incluirse un pequeño formulario que contenga solamente dos botones de

opción con las etiquetas Sí y No, junto con un botón Enviar. La acción del

formulario puede ser una función de JavaScript deﬁnida en la sección head del

documento que muestre una advertencia si el usuario selecciona Sí y otra

advertencia si el usuario selecciona No:

function processForm(){

if (document.forms[0].elements[0].checked){

alert('Sí');

}else{

alert('No');

}

Para usar una función JavaScript en la parte del cliente como acción del

formulario:

1 Seleccione un botón Enviar en un formulario.

2 Adjunte el comportamiento Llamar JavaScript al botón. (Consulte “Llamar

JavaScript” en la página 469.)

3 En el cuadro de texto JavaScript que aparece mientras adjunta el

comportamiento, introduzca processForm().

4 Añada una función JavaScript processForm() (como la mostrada) a la sección

head del documento.

Se pueden gestionar muchas tareas de procesamiento 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 ello, se necesita

una aplicación 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 programación. Existen varios

sitios en la Web que ofrecen secuencias de comandos CGI de uso libre (consulte

“Recursos tecnológicos HTML y Web” en la página 25). Puede modiﬁcar estas

secuencias de comandos para adaptarlas a sus necesidades. También le puede

preguntar a su proveedor de servicio Internet o equipo responsable del sitio Web si

hay secuencias de comandos CGI ya conﬁguradas para ejecutar en su servidor.

Crear formularios 527

Para obtener información introductoria sobre las secuencias de comandos CGI,

consulte los recursos CGI que se encuentran en “Recursos tecnológicos HTML y

Web” en la página 25.

Usar comportamientos con formularios

Puede adjuntar comportamientos a formularios y objetos de formulario utilizando

cualquiera de los comportamientos que aparecen en el panel Comportamientos

cuando se selecciona el formulario o un objeto de éste. Los comportamientos

Validar formulario y Deﬁnir texto de campo de texto sólo están disponibles si se

ha insertado un campo de texto en el documento. Cuando se aplica el

comportamiento Validar formulario a un objeto de formulario, deberá especiﬁcar

qué campo de texto se debe validar. Por ejemplo, si adjunta Validar formulario al

botón Enviar, podría especiﬁcar un campo de texto creado para “Nombre” para

comprobar si el usuario ha introducido texto en el campo Nombre.

Al aplicar comportamientos, deberá comprobar que todos los objetos del

formulario que hay en el documento (y todos los demás objetos) tienen nombres

exclusivos. Si utiliza el mismo nombre para dos objetos distintos, es posible que

los comportamientos no funcionen correctamente, a pesar de que los objetos se

encuentren en formularios distintos.

A continuación se explican los dos comportamientos especíﬁcos de los

formularios. Para obtener información sobre otros comportamientos, consulte

“Usar comportamientos” en la página 457.

Validar formulario Comprueba el contenido de los campos de texto especiﬁcados

para asegurarse de que el usuario ha introducido el tipo correcto de datos.

Consulte “Validar formulario” en la página 496.

Definir texto de campo de texto Sustituye el contenido de un campo de texto

especiﬁcado por el contenido que usted especiﬁque. Consulte “Deﬁnir texto de

campo de texto” en la página 490.

Capítulo 20528

529

CAPÍTULO 21

.............................................................................................................

Comprobar y publicar un sitio

Antes de cargar el sitio en un servidor y dejarlo listo para visitas, conviene

comprobarlo localmente. De hecho, es conveniente comprobar frecuentemente el

sitio a medida que se construye para detectar y solucionar los problemas lo antes

posible y evitar que se repitan. Es necesario asegurarse de que las páginas tienen la

apariencia y el funcionamiento esperado en los navegadores de destino, que no

hay vínculos rotos y que las páginas no tardan demasiado en cargarse. También

puede comprobar todo el sitio y solucionar los problemas ejecutando un informe

del sitio antes de publicarlo.

Las directrices siguientes le ayudarán a hacer más agradable la visita a sus páginas:

• Compruebe que las páginas funcionan de la forma prevista en los navegadores

de destino y que los fallos que experimentan en otros navegadores son

mínimos. Las páginas deberán ser legibles y funcionales en los navegadores que

no admiten estilos, capas, plug-ins ni JavaScript. (Consulte “Comprobar la

compatibilidad con los navegadores” en la página 531.) Con las páginas que

funcionen muy mal en navegadores antiguos puede utilizar el comportamiento

Comprobar navegador para remitir automáticamente a los visitantes a otra

página. (Consulte “Comprobar navegador” en la página 471.)

• Realice una vista previa de las páginas en todos los navegadores y plataformas

posibles. De este modo podrá observar las diferencias en diseño, color, tamaño

de fuentes y tamaño predeterminado de ventana del navegador, diferencias que

no se pueden ver comprobando el navegador de destino. (Consulte “Vista

previa en navegadores” en la página 532.)

Capítulo 21530

• Compruebe si hay vínculos rotos en el sitio y repárelos. Otros sitios

experimentan cambios de diseño y organización, por lo que es posible que se

hayan movido o borrado las páginas con las que tiene establecidos vínculos.

Para obtener una lista de vínculos a sitios externos, realice una comprobación

de vínculos. Alternativamente, puede ejecutar un informe que compruebe

todos los vínculos del sitio y genere una lista de vínculos externos no válidos.

(Consulte “Comprobar vínculos en una página o un sitio” en la página 534,

“Abrir documentos vinculados en Dreamweaver” en la página 537, o “Crear

informes” en la página 538.)

• Vigile el tamaño de las páginas y el tiempo que tardan en descargarse. Si la

página 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 rótulo publicitario, fuera de la tabla, en la parte

superior de la página, de modo que los usuarios puedan verlo mientras se

descarga la tabla. (Consulte “Comprobar el tiempo de descarga y el tamaño” en

la página 537; para obtener más información sobre el uso de comportamientos

de capas para cubrir la pantalla durante la carga de una página, consulte

“Mostrar-Ocultar capas” en la página 491.)

• Genere varios informes del sitio para comprobar su funcionamiento y

solucionar los problemas. Puede comprobar todo el sitio para detectar

problemas como documentos sin título, etiquetas vacías y etiquetas anidadas

repetidas. Generar estos informes antes de publicar el sitio reduce el número de

problemas que se presentan más adelante. (Consulte “Crear informes” en la

página 538.)

• La publicación del sitio (es decir, ponerlo a la disposición del público y

activarlo) puede llevarse a cabo de distintas formas y es un proceso permanente.

Una vez publicado el grueso del sitio, usted o su equipo seguirán actualizándolo

y manteniéndolo. La deﬁnición y la implementación de un sistema de control

de versiones, ya sea con las herramientas de Dreamweaver o a través de otra

aplicación de control de versiones, son procesos importantes.

• Los foros de debate de Macromedia Dreamweaver del sitio Web de

Macromedia son una importante fuente de recursos en la que, por ejemplo,

podrá obtener información sobre los distintos navegadores y plataformas.

Comprobar y publicar un sitio 531

Comprobar la compatibilidad con los

navegadores

Dreamweaver permite crear páginas Web con elementos que admiten todos los

navegadores (por ejemplo, imágenes y texto de párrafo), así como con elementos

que sólo admiten los navegadores más recientes (por ejemplo, estilos y capas).

La función Comprobar navegadores de destino analiza el HTML de los

documentos para ver si hay etiquetas o atributos que no admiten los navegadores

de destino. La comprobación no altera el documento.

La función Comprobar navegadores de destino utiliza archivos de texto

denominados perﬁles de navegador para determinar qué etiquetas admiten los

navegadores especíﬁcos. Dreamweaver incluye perﬁles predeﬁnidos para las

versiones 2.0, 3.0 y 4.0 de Netscape Navigator y las versiones 2.0, 3.0, 4.0 y 5.0 de

Microsoft Internet Explorer. Para modiﬁcar los perﬁles existentes o crear otros

nuevos, consulte “Crear y editar un perﬁl de navegador” en la página 562.

Puede ejecutar una comprobación del navegador de destino con un documento,

un directorio o todo el sitio. En esta comprobación no se veriﬁcan las secuencias

de comandos del sitio.

Para ejecutar una comprobación del navegador de destino:

1 Dispone de las opciones siguientes:

• Para ejecutar la comprobación en el documento actual, guarde el archivo. La

comprobación se realizará con la última versión guardada del archivo y no

incluirá los cambios que no haya guardado.

• Para ejecutar la comprobación con un directorio o un sitio, elija Ventana >

Archivos del sitio y abra la ventana FTP del sitio. A continuación, seleccione

una carpeta en el directorio local. La comprobación del navegador de destino se

realizará en todos los archivos HTML de esa carpeta y las subcarpetas que

contenga. La comprobación del navegador de destino sólo se puede llevar a

cabo con archivos locales.

2 Elija Archivo > Comprobar navegadores de destino.

Si aún no ha seleccionado un Explorador principal, el programa le pedirá que lo haga.

3 En la lista de navegadores, seleccione el navegador de destino que desea utilizar

para la comprobación del sitio.

4 Haga clic en Comprobar.

Se abrirá el informe del navegador de destino en el navegador principal (que se

iniciará si aún no está abierto).

5 Para guardar el informe, elija Archivo > Guardar en el navegador.

Nota: Dado que el informe del navegador de destino es un archivo temporal, se perderá si

no lo guarda antes de navegar a otro sitio.

Capítulo 21532

Usar comportamientos para detectar

navegadores y plug-ins

Puede utilizar los comportamientos para determinar qué navegador utilizan los

visitantes y si tienen un determinado plug-in instalado. Para obtener más

información sobre navegadores, consulte “Usar comportamientos” en la

página 457.

Comprobar navegador Envía a los visitantes a distintas páginas, dependiendo de

las marcas y versiones de sus navegadores. Por ejemplo, puede resultar conveniente

que los visitantes vayan a una página si su navegador es Netscape Navigator 4.0 o

una versión posterior, que vayan a otra página si tienen Microsoft Internet

Explorer (IE) 4.0 o una versión posterior o que permanezcan en la página actual si

usan un navegador de algún otro tipo. (Consulte “Comprobar navegador” en la

página 471.)

Comprobar plug-in Remite a los visitantes a distintas páginas, dependiendo de si

tienen instalado el plug-in especiﬁcado. Por ejemplo, puede resultar conveniente

que los visitantes vayan a una página si tienen Macromedia Shockwave y a otra

distinta si no lo tienen. (Consulte “Comprobar plug-in” en la página 472.)

Vista previa en navegadores

Durante el proceso de diseño y creación del sitio Web, es conveniente comprobar

frecuentemente las páginas obteniendo una vista previa en navegadores. Esta

práctica permite detectar los errores rápidamente y evita copiarlos o repetirlos.

Puede obtener la vista previa de los documentos en los navegadores de destino en

cualquier momento. Para ello, no es necesario guardar previamente el documento.

Podrá activar todas las funciones relacionadas con el navegador, como los

comportamientos JavaScript, los vínculos absolutos y relativos al documento, los

controles ActiveX y los plug-ins de Netscape, siempre que haya instalado los plug-

ins o los controles ActiveX necesarios.

El contenido vinculado a rutas relativas a la raíz no aparece cuando se realiza una

vista previa de documentos en un navegador local. Ello es debido a que los

navegadores, a diferencia de los servidores, no reconocen la raíz de los sitios. Para

obtener una vista de previa de contenido vinculado a rutas relativas a la raíz, sitúe

el archivo en un servidor remoto y véalo desde él. (Para obtener más información,

consulte “Rutas relativas a la raíz” en la página 374.

Puede deﬁnir hasta 20 navegadores para realizar vistas previas. Todos los

navegadores que deﬁna aparecerán en el menú Vista previa en el navegador. Es

recomendable obtener una vista previa en los siguientes navegadores: IE 3.0 o 4.0;

Netscape 3.0 y 4.0 y al menos un navegador de sólo texto como Lynx.

Comprobar y publicar un sitio 533

Para obtener la vista previa del documento en un navegador, lleve a cabo una de

estas operaciones:

• Elija Archivo > Vista previa en el navegador y seleccione uno de los navegadores

que aparecen en la lista.

1 Si aún no ha seleccionado un navegador, elija Edición > Preferencias > Vista

previa en el navegador para hacerlo.

• Presione F12 para mostrar el documento actual en el navegador principal.

• Presione Control+F12 (Windows) o Comando+F12 (Macintosh) para mostrar

el documento actual en el navegador secundario.

Para cambiar el navegador principal o definir un navegador secundario:

1 Elija Archivo > Vista previa en el navegador > Editar lista de navegadores o

Edición > Preferencias y seleccione la ﬁcha Vista previa en el navegador.

2 Establezca las preferencias de vista previa que desee.

Configurar las preferencias de Vista previa en el navegador

Las preferencias de Vista previa en el navegador muestran los navegadores

principal y secundario deﬁnidos actualmente. Para abrir las preferencias de Vista

previa en el navegador, elija Edición > Preferencias y seleccione Vista previa en el

navegador o bien elija Archivo > Vista previa en el navegador > Editar lista de

navegadores.

Vista previa usando el servidor local Permite elegir un servidor local para realizar la

vista previa de una página en un navegador (sólo Windows). Para que esta opción

funcione es necesario ejecutar software de servidor en el ordenador local. Cuando

esta opción está activada, Dreamweaver suministra la página actual para realizar la

vista previa en un servidor local como un URL que comienza por http://localhost/.

Cuando esta opción está desactivada, Dreamweaver abre el documento en un

navegador con una ruta de archivo que comienza por archivo://. En algunos casos,

los vínculos especiﬁcados como rutas relativas a la raíz no funcionan

correctamente cuando se abren en un navegador con una ruta archivo://. Lo

mismo sucede cuando se lleva a cabo la comprobación de un navegador de

destino. Consulte “Vista previa en navegadores” en la página 532.

El botón de signo más (+) añade un navegador a la lista.

El botón de signo menos (–) elimina el navegador seleccionado en la lista.

Editar cambia la conﬁguración del navegador seleccionado.

Navegador principal y Navegador secundario especiﬁcan si el navegador

seleccionado es el principal o el secundario. Presione F12 para abrir el navegador

principal o Control+F12 (Windows) o Comando+F12 (Macintosh) para abrir el

secundario.

Capítulo 21534

Comprobar vínculos mediante la vista previa en un navegador

Dado que los vínculos no están activos en la ventana de documento, deberá

veriﬁcarlos y comprobarlos mediante la vista previa de las páginas en un

navegador. Por ejemplo, puede que desee comprobar los vínculos con los archivos

de imagen, audio, vídeo, etc.

Para comprobar vínculos en un navegador:

1 Elija Archivo > Vista previa en el navegador o presione F12.

2 Haga clic en los vínculos activos para comprobar su funcionamiento.

Comprobar vínculos en una página o un

sitio

La reparación de los vínculos rotos (vínculos que ya no siguen una ruta válida o

que señalan a un archivo inexistente) de un sitio grande puede ser tediosa y

requerir mucho tiempo. Ello es debido a que los sitios grandes pueden llegar a

contener cientos de vínculos con documentos internos y a que los vínculos pueden

cambiar con el tiempo. Los archivos huérfanos (archivos que siguen existiendo en

el sitio pero que ya no están vinculados a ningún otro archivo) también pueden ser

problemáticos porque ocupan espacio en el disco duro y confunden a los

miembros del equipo encargado del sitio.

Utilice la función Comprobar vínculos para buscar vínculos rotos y archivos sin

referencia en archivos abiertos, partes de un sitio local o sitios locales completos.

Los únicos vínculos que Dreamweaver veriﬁca son los establecidos con

documentos del sitio. Asimismo, recopila una lista de vínculos externos que

aparecen en el documento o documentos seleccionados, pero no los veriﬁca.

Cuando Dreamweaver termina de comprobar los vínculos de los archivos

especiﬁcados, abre el cuadro de diálogo Veriﬁcador de vínculos. Este cuadro de

diálogo muestra una lista de los vínculos rotos, los vínculos externos (vínculos que

Dreamweaver no puede comprobar porque están fuera del sitio) y los archivos

huérfanos. Para obtener más información, consulte “Abrir documentos vinculados

en Dreamweaver” en la página 537.

Para comprobar los vínculos del documento actual:

1 Guarde el archivo en una ubicación dentro de un sitio local.

2 Elija Archivo > Comprobar vínculos.

Para comprobar los vínculos de una parte de un sitio local:

1 Elija Ventana > Archivos del sitio para abrir la ventana Sitio.

2 Elija un sitio en el menú emergente Sitios.

Comprobar y publicar un sitio 535

En la vista Carpeta local, seleccione los archivos o las carpetas que desea

comprobar.

4 Inicie la comprobación mediante uno de estos métodos:

• Haga clic con el botón izquierdo del ratón (Windows) o mientras presione la

tecla Control (Macintosh) en uno de los archivo seleccionados y elija

Comprobar vínculos > Archivos/carpetas seleccionados en el menú contextual.

• Elija Archivo > Comprobar vínculos.

5 Seleccione un informe de vínculos especíﬁco en el menú emergente Mostrar.

Puede elegir entre Vínculos rotos, Vínculos externos y Archivos huérfanos.

Sólo es posible comprobar los archivos huérfanos si se comprueban los vínculos

de todo un sitio.

6 La lista de archivos correspondientes al tipo de informe seleccionado aparecerá

en el cuadro de diálogo Veriﬁcador de vínculos.

Para comprobar los vínculos de todo el sitio:

1 Elija Sitio > Comprobar vínculos en todo el sitio.

Aparecerá el cuadro de diálogo Veriﬁcador de vínculos.

2 Seleccione un informe de vínculos especíﬁco en el menú emergente Mostrar.

Puede elegir entre Vínculos rotos, Vínculos externos y Archivos huérfanos.

3 La lista de archivos correspondientes al tipo de informe seleccionado aparecerá

en el cuadro de diálogo Veriﬁcador de vínculos.

Nota: Si ha seleccionado el tipo de informe Archivos huérfanos, podrá borrar directamente

los archivos huérfanos desde el cuadro de control Verificador de vínculos. Para ello,

seleccione un archivo de la lista y presione la tecla Supr.

Para guardar todo el informe como archivo de texto delimitado por tabulaciones.

Haga clic en Guardar.

Reparar vínculos rotos

Al comprobar vínculos en Dreamweaver aparece el cuadro de diálogo Veriﬁcador

de vínculos con un informe de vínculos rotos, vínculos externos y —si ha

comprobado todo el sitio— archivos huérfanos.

Puede reparar las referencias de imagen y los vínculos rotos directamente en el

cuadro de diálogo Veriﬁcador de vínculos, o abrir los archivos desde la lista y

reparar los vínculos en el inspector de propiedades.

Capítulo 21536

Para reparar los vínculos en el cuadro de diálogo Verificador de vínculos:

1 Seleccione el vínculo roto en la columna Vínculos rotos del cuadro de diálogo

Veriﬁcador de vínculos.

Aparecerá un icono de carpeta junto al vínculo roto.

2 Haga clic en el icono de carpeta para localizar el archivo con el que desea

establecer el vínculo o escriba su ruta y nombre.

3 Presione la tecla Tabulación o Entrar.

Si hay otras referencias rotas a este mismo archivo, aparecerá un cuadro de

diálogo pidiéndole 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 función Permitir desproteger y proteger archivo para este sitio,

Dreamweaver intentará proteger los archivos que requieren cambios. Si no puede proteger

un archivo, Dreamweaver mostrará un cuadro de diálogo de advertencia y no cambiará las

referencias rotas. Consulte “Utilizar Desproteger/proteger” en la página 135.

Para reparar vínculos en el inspector de propiedades:

1 En el cuadro de diálogo Veriﬁcador de vínculos, haga doble clic en una entrada

de la columna Archivo.

Dreamweaver abrirá el documento, seleccionará la imagen o el vínculo

problemáticos 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).

2 Si desea establecer una ruta y un nombre de archivo nuevos, haga clic en el

icono de carpeta para localizar el archivo correspondiente y sobrescriba el texto

resaltado.

Si está actualizando una referencia de imagen y la nueva imagen aparece con el

tamaño incorrecto, haga clic en la etiquetas An y Al del inspector de

propiedades o en el botón Actualizar para restablecer los valores de altura y

anchura. Las etiquetas An y Al cambiarán de negrita a tipo normal.

3 Guarde el archivo.

A medida que los vínculos se van reparando, sus entradas desaparecen de la lista

Vínculos rotos. Si una entrada aparece en la lista después de introducir una ruta o

un nombre de archivo nuevos en el Veriﬁcador de vínculos (o después de guardar

los cambios realizados en el inspector de propiedades), signiﬁca que Dreamweaver

no encuentra el archivo nuevo. Se sigue considerando que el vínculo está roto.

Comprobar y publicar un sitio 537

Abrir documentos vinculados en Dreamweaver

Los vínculos no están activos en Dreamweaver, es decir, no se puede abrir el

documento vinculado haciendo doble clic en el vínculo en la ventana de

documento.

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

operaciones:

• Seleccione el vínculo y elija Modiﬁcar > Abrir página vinculada.

• Presione Control (Windows) o Comando (Macintosh) y haga doble clic en el

vínculo.

Nota: El documento vinculado debe encontrarse en el disco local.

Comprobar el tiempo de descarga y el

tamaño

En la parte inferior de la ventana de documento ﬁguran el tamaño y el tiempo

estimado de descarga de la página actual. Dreamweaver calcula el tamaño

basándose en todo el contenido de la página, incluidos los objetos vinculados,

como imágenes y plug-ins.

Dreamweaver estima el tiempo de descarga en base a la velocidad de conexión

introducida en las preferencias de barra de estado. El tiempo de descarga real

dependerá de las condiciones generales de Internet.

La regla de los ocho segundos es una buena norma para controlar el tiempo de

descarga de una página Web concreta: la mayoría de los usuarios no esperarán más

de ocho segundos a que la página se cargue por completo.

Para establecer las preferencias de tiempo y tamaño de descarga:

1 Elija Edición > Preferencias y, a continuación, haga clic en la barra de estado.

2 Elija una velocidad de conexión para calcular el tiempo de descarga.

La velocidad media de conexión en Estados Unidos es 28,8. Si el diseño se

realiza para una intranet, puede seleccionar 1.500 (velocidad T1).

Capítulo 21538

Utilizar informes para comprobar un sitio

Cuando pruebe el sitio, puede compilar y generar informes para varios atributos

HTML por medio del comando Informes. Este comando permite comprobar los

vínculos externos, las etiquetas de fuentes anidadas combinables, el texto

alternativo que falta, las etiquetas anidadas repetidas, las etiquetas vacías que

pueden borrarse y los documentos sin título. Puede comprobar y solucionar este

tipo de problemas HTML en los documentos seleccionados o en todo un sitio

antes de publicarlo.

Una vez compilado el informe, se guarda como archivo XML y se importa a un

archivo de plantilla existente. A continuación, puede importar el archivo de

plantilla a una base de datos u hoja de cálculo para imprimirlo o mostrarlo en un

sitio Web. También puede añadir distintos tipos de informes a Dreamweaver a

través del sitio Web Macromedia Exchange for Dreamweaver (consulte “Añadir

extensiones a Dreamweaver” en la página 95).

Para utilizar el comando Informes con el sistema de desprotección y protección y

con Design Notes, consulte “Utilizar informes para mejorar el ﬂujo de trabajo” en

la página 145.

Crear informes

Puede ejecutar varios tipos de informes sobre documentos, carpetas y sitios.

También puede ordenar los resultados y obtener información adicional sobre los

resultados seleccionados.

Para crear un informe:

1 Elija Sitio > Informes.

Aparecerá el cuadro de diálogo Informes.

Comprobar y publicar un sitio 539

Elija una categoría de informe en el menú emergente Informe sobre.

Las opciones disponibles son Documento actual, Todo el sitio local, Archivos

seleccionados del sitio y Carpeta. No se puede ejecutar un informe de Archivos

seleccionados del sitio a menos que se hayan seleccionado previamente los

archivos en la ventana Sitio.

3 Seleccione un tipo de informe haciendo clic en la casilla correspondiente.

Puede seleccionar uno o varios informes que se generarán simultáneamente.

• La opción Etiquetas de fuentes anidadas combinables crea un informe que

incluye todas las etiquetas de fuentes anidadas que se pueden combinar para

limpiar el código. Por ejemplo, <font color="#FF0000"><font size="4">STOP!</

font></font> aparecerá en el informe.

• La opción Texto alternativo que falta crea un informe con todas las etiquetas

img que carecen de texto alternativo. El texto alternativo aparece en lugar de las

imágenes en los navegadores que sólo admiten texto o en aquéllos conﬁgurados

para descargar las imágenes manualmente.

• La opción Etiquetas anidadas repetidas crea un informe en el que se detallan las

etiquetas anidadas que deberían eliminarse. Por ejemplo, <i> La lluvia <i>

en</i> Sevilla es una maravilla</i> aparecería en el informe.

• La opción Etiquetas vacías que pueden borrarse crea un informe en el que se

detallan todas las etiquetas vacías que pueden borrarse para limpiar el código

HTML. Por ejemplo, puede haber borrado un elemento o una imagen en vista

de Código y haber mantenido las etiquetas correspondientes a dicho elemento.

• La opción Documentos sin título crea un informe con todos los documentos

sin título conforme a los parámetros seleccionados. El informe incluye los

documentos con títulos predeterminados o duplicados y sin etiquetas title.

4 Haga clic en Ejecutar para crear el informe.

Dependiendo del tipo de informe elegido, puede que el sistema le pida que

guarde el archivo, deﬁna el sitio o seleccione una carpeta (si aún no lo ha

hecho).

5 La lista de resultados aparecerá en la ventana Resultados.

Para ordenar los resultados, haga clic en el encabezado de columna por el que

desee ordenar la información. Puede ordenar por nombre de archivo, número

de línea o descripción. También puede ejecutar varios informes y mantener

abiertas las distintas ventanas Resultados.

6 Seleccione un resultado para ver una descripción detallada del mismo.

7 Haga clic en Abrir archivo para acceder al elemento seleccionado en la ventana

de documento.

También puede hacer doble clic en un resultado para abrir el archivo

correspondiente en la ventana de documento.

Capítulo 21540

Haga clic en Guardar informe para guardar el informe como archivo XML.

Los informes se guardan como archivos XML y pueden importarse a un archivo

de plantilla existente. A continuación, podrá importar el archivo de plantilla a

una base de datos u hoja de cálculo para imprimirlo o utilizar el archivo para

mostrar el informe en un sitio Web.

Sugerencia: Después de ejecutar los informes HTML, utilice el comando Limpiar HTML

para corregir los errores notificados.

541

CAPÍTULO 22

.............................................................................................................

Personalizar Dreamweaver

Macromedia Dreamweaver puede personalizarse de muchas formas, lo que le

permite trabajar de la forma que le resulte más familiar, cómoda y eﬁcaz.

A continuación se incluyen algunas de las formas en que se puede personalizar

Dreamweaver:

• Establezca las preferencias para todo, desde combinaciones de colores y

resaltado a conﬁguraciones de sitios y navegadores. Consulte “Deﬁnir

preferencias” en la página 89.

• Cambiar los métodos abreviados de teclado. Para cambiar los métodos

abreviados utilizando un interfaz gráﬁco desde Dreamweaver, consulte “Utilizar

el editor de métodos abreviados de teclado” en la página 92. Si preﬁere editar

un archivo de texto para cambiar los métodos abreviados de teclado, consulte

“Cambiar métodos abreviados de teclado” en la página 549.

• Añadir extensiones de terceros. Consulte “Añadir extensiones a Dreamweaver”

en la página 95.

• Cambie la disposición de los objetos del panel Objetos de manera que aquéllos

que usa con más frecuencia queden siempre visibles, cree nuevas categorías para

reorganizar los objetos o añada nuevos objetos. Consulte “Modiﬁcar el panel

Objetos” en la página 543.

• Cambie los nombres de los elementos de menú, añada nuevos comandos a los

menús y elimine comandos existentes. Consulte “Personalizar menús de

Dreamweaver” en la página 545.

• Edite el perﬁl de formato de origen para lograr un control más detallado sobre

el formato del código HTML que crea Dreamweaver. El archivo

SourceFormat.txt incluye, entre otras cosas, toda la conﬁguración de

preferencias de Formato HTML. Consulte “Cambiar el formato HTML

predeterminado” en la página 558.

Capítulo 22542

• Cambie el modo en que las etiquetas de terceros (como las etiquetas ASP y

ColdFusion) aparecen en la vista de Diseño de la ventana de documento.

Consulte “Personalizar la apariencia de etiquetas de terceros” en la página 565.

• Cree sus propios comandos y paneles ﬂotantes mediante JavaScript. Consulte

“Ampliar Dreamweaver: principios básicos” en la página 564.

Cambiar el tipo de archivo predeterminado

De forma predeterminada, Dreamweaver muestra todos los tipos de archivo que

reconoce en el cuadro de diálogo Archivo > Abrir. Puede utilizar el menú

emergente del cuadro de diálogo para que sólo se muestren los archivos de un tipo

determinado. Si la mayor parte de su trabajo implica la utilización de un tipo de

archivo especíﬁco (como archivos ASP, por ejemplo), puede cambiar la

visualización predeterminada. El tipo de archivo que aparece en la primera línea

del archivo Extensions.txt de Dreamweaver se convierte en predeterminado.

Nota: Si desea ver todos los tipos de archivo en el cuadro de diálogo Archivo > Abrir,

incluidos los que Dreamweaver no puede abrir, seleccione Todos los archivos (*.*). Esta

opción difiere de Todos los documentos, que sólo muestra los archivos que Dreamweaver

puede abrir.

Para cambiar el tipo de archivo predeterminado de Archivo > Abrir en

Dreamweaver:

1 Realice una copia de seguridad del archivo Extensions.txt en la carpeta

Conﬁguration.

2 Abra el archivo Extensions.txt en Dreamweaver o un editor de texto.

3 Corte la línea correspondiente al nuevo valor predeterminado y péguela al

principio del archivo de forma que sea la primera línea.

4 Guarde el archivo, salga de Dreamweaver y vuelva a iniciar el programa.

Para ver el nuevo valor predeterminado, seleccione Archivo > Abrir y examine

el menú emergente de tipos de archivo.

Para añadir nuevos tipos de archivos al menú en el cuadro de diálogo Archivo >

Abrir:

1 Realice una copia de seguridad del archivo Extensions.txt en la carpeta

Conﬁguration.

2 Abra el archivo Extensions.txt en Dreamweaver o un editor de texto.

Personalizar Dreamweaver 543

Añada una nueva línea por cada nuevo tipo de archivo. Introduzca en

mayúsculas las extensiones de nombres de archivo que puede tener el nuevo

tipo de archivo, separadas mediante comas; después añada dos puntos y una

breve frase descriptiva que aparecerá en el menú emergente de tipos de archivo

del cuadro de diálogo Archivo > Abrir. Por ejemplo, para archivos JPEG,

introduzca lo siguiente:

JPG,JPEG,JFIF:Archivos de imagen JPEG

Guarde el archivo, salga de Dreamweaver y vuelva a iniciar el programa.

Para ver los cambios, seleccione Archivo > Abrir y haga clic en el menú

emergente de tipos de archivo.

Modificar el panel Objetos

Como opción predeterminada, el panel Objetos está dividido en varias categorías:

Caracteres, Común, Formularios, Marcos, Head, Invisibles y Especial. Para

obtener información sobre los objetos de estas categorías, consulte “Utilizar el

panel Objetos” en la página 80. Las categorías corresponden a carpetas que se

encuentran en la carpeta Conﬁguration/Objects, dentro de la carpeta de la

aplicación Dreamweaver.

Puede mover objetos de una categoría a otra, cambiar el nombre de las categorías y

eliminar objetos del panel. Para que los cambios aparezcan en el panel Objetos,

deberá salir de Dreamweaver e iniciar de nuevo el programa o bien volver a cargar

las extensiones.

Por cada objeto de una categoría del panel Objetos, habrá dos o tres archivos en la

carpeta correspondiente:

• Un archivo GIF que contiene un icono para el objeto.

• Un archivo HTML que contiene el código HTML que debe insertarse en el

archivo o un formulario HTML que le permite especiﬁcar los datos que deben

insertarse (como el texto de un comentario, por ejemplo).

• Un archivo JavaScript (opcional) que genera el código HTML que se insertará

en el archivo.

Para mover un objeto de una categoría del panel Objetos a otra:

Mueva todos los archivos del objeto (el archivo GIF, el archivo HTML y el archivo

JavaScript, en el caso de que exista) de una carpeta a otra dentro de la carpeta

Conﬁguration/Objects.

Para cambiar el nombre de una categoría del panel Objetos:

Cambie el nombre de la carpeta correspondiente en la carpeta Conﬁguration/

Objects.

Capítulo 22544

Para eliminar un objeto del panel Objetos:

Mueva los archivos HTML, GIF y JavaScript del objeto al exterior de la carpeta

Conﬁguration/Objects. Puede borrar estos archivos deﬁnitivamente si está seguro

de querer eliminar el objeto, pero es conveniente mantener una copia de seguridad

por si fuera necesario restaurar el objeto más adelante.

Para volver a cargar extensiones:

1 Presione Control (Windows) u Opción (Macintosh) y haga clic en el menú

emergente de categorías situado en la parte superior del panel Objetos.

2 Elija Volver a cargar extensiones.

Crear un objeto simple

Puede crear sus propios objetos para añadirlos al panel Objetos. Muchos objetos

simples no requieren JavaScript; solamente contienen el código HTML que

se insertará en el documento. Para obtener información básica sobre la creación de

objetos complejos utilizando JavaScript, consulte “Ampliar Dreamweaver:

principios básicos” en la página 564.

Una vez creado el objeto, puede empaquetarlo y distribuirlo en el sitio

Macromedia Exchange si desea que otros usuarios de Dreamweaver lo puedan

utilizar. Para obtener más información, consulte el sitio Macromedia Exchange for

Dreamweaver. Para empaquetar una extensión, descargue previamente el

instalador de Package Manager desde dicho sitio. A continuación, instale Package

Manager con la opción para desarrolladores (developer).

Para crear un objeto simple:

1 Cree un nuevo documento en blanco en un editor de texto (por ejemplo,

BBEdit o HomeSite).

Nota: Cuando se crea un nuevo documento en blanco en Dreamweaver, contiene

varias etiquetas HTML predeterminadas, como

html, head y body. Si desea utilizar

alguno de los editores de código de Dreamweaver (la vista Código de la ventana de

documento o el inspector de código) para crear un objeto simple, deberá comenzar por

borrar todas las etiquetas predeterminadas que aparecen en el editor de código cuando

se crea un nuevo documento.

2 Añada las etiquetas que desee que este objeto inserte en sus documentos.

Escriba, por ejemplo:

<p>

</p>

Personalizar Dreamweaver 545

Guarde el archivo.

Si desea que el nuevo objeto aparezca en una de las categorías existentes del

panel de Objetos, guárdelo en una de las subcarpetas de la carpeta Objects. Si

desea crear una nueva categoría, cree una nueva carpeta en la carpeta

Conﬁguration/Objects y guarde el archivo en ella. Las carpetas adicionales

contenidas en cualquier subcarpeta de una categoría (como las carpetas creadas

dentro de la subcarpeta Caracteres) son ignoradas.

4 En un programa de gráﬁcos o de edición de imágenes (como Macromedia

Fireworks), cree una imagen GIF de 18 x 18 píxeles que sirva de icono del

objeto en el panel Objetos.

Si crea una imagen más grande, Dreamweaver la reducirá automáticamente a

18 x 18 píxeles. Si no crea un icono para el objeto, Dreamweaver lo

representará por medio de un icono de objeto genérico en el panel Objetos.

5 Asigne al icono el mismo nombre que el del archivo del objeto, pero utilice la

extensión .gif, y guarde el icono en el mismo directorio que el archivo del

objeto.

Por ejemplo, si el objeto se denomina Copyright_Z.htm y lo ha guardado en el

directorio Common, asigne al icono el nombre Copyright_Z.gif y guárdelo

también en el directorio Common.

6 Reinicie Dreamweaver, o vuelva a cargar las extensiones, para poder usar el

nuevo objeto.

El objeto aparecerá en la parte inferior del menú Insertar además de en el panel

Objetos. (Para obtener información sobre cómo volver a cargar las extensiones,

consulte “Modiﬁcar el panel Objetos” en la página 543.)

Personalizar menús de Dreamweaver

Dreamweaver crea todos sus menús a partir de la estructura deﬁnida en un archivo

XML denominado menus.xml, situado en la subcarpeta Conﬁguration/Menus de

la carpeta de la aplicación Dreamweaver. Al editar el archivo menus.xml, los

menús de Dreamweaver aparecerán modiﬁcados la siguiente vez que inicie

Dreamweaver. (Para obtener información básica sobre XML, consulte “XML” en

la página 413.)

Mediante la edición del archivo menus.xml, podrá añadir, cambiar y eliminar

métodos abreviados de teclado para los elementos de menú, aunque en muchos

resulta más fácil utilizar para ello el editor de métodos abreviados de teclado.

(Consulte “Utilizar el editor de métodos abreviados de teclado” en la página 92.)

También puede reorganizar, cambiar el nombre y eliminar elementos de los

menús.

Capítulo 22546

Si abre el archivo menus.xml en un editor XML, puede que aparezcan mensajes de

error relacionados con los signos ampersand (&) del archivo. Es preferible editar el

archivo menus.xml en un editor de texto ordinario. (No lo edite en

Dreamweaver.)

Nota: Cree siempre una copia de seguridad del archivo menus.xml o de cualquier otro

archivo de configuración de Dreamweaver antes de modificarlo. No es difícil que se

cometan errores al editar el archivo de configuración de menús y no existe ninguna forma

de recuperar el conjunto de menús anterior, si no es sustituyendo el archivo menus.xml. No

obstante, si olvida realizar una copia, la carpeta Configuration contiene una copia de

seguridad del archivo menus.xml predeterminado, denominada menus.bak; para recuperar

el conjunto de menús predeterminado, reemplace el archivo menus.xml con una copia de

menus.bak.

Modificar el menú Comandos

Puede editar determinados tipos de comandos del menú Comandos, así como

cambiar sus nombres, sin necesidad de editar el archivo menus.xml.

Nota: El término comando tiene dos acepciones en Dreamweaver. En el sentido estricto,

un comando es un tipo concreto de extensión. En algunos contextos, sin embargo,

comando se utiliza indistintamente con el término elemento de menú para referirnos a un

elemento que aparece en un menú de Dreamweaver, independientemente de lo que haga

y de cómo haya sido incorporado a la aplicación.

Para crear nuevos comandos y que se incluyan automáticamente en el menú

Comandos, utilice el panel Historial (consulte “Crear comandos nuevos a partir

del historial” en la página 168). También puede utilizar Package Manager para

instalar nuevas extensiones, incluidos comandos; consulte “Añadir extensiones a

Dreamweaver” en la página 95.

Para reordenar los elementos del menú Comandos, o para pasar los elementos de

un menú a otro, deberá editar el archivo menus.xml.

Para cambiar el nombre de un comando previamente creado:

1 Elija Comandos > Editar lista de comandos.

Aparecerá un cuadro de diálogo con todos los comandos cuyos nombres se

pueden cambiar. (Los comandos del menú Comandos predeterminado no

aparecen en la lista y no se pueden editar mediante este método.)

2 Seleccione el comando cuyo nombre desea cambiar.

3 Introduzca un nuevo nombre.

4 Haga clic en Cerrar.

El comando aparecerá en el menú Comandos con el nuevo nombre.

Personalizar Dreamweaver 547

Para eliminar un comando previamente creado:

1 Elija Comandos > Editar lista de comandos.

Aparecerá un cuadro de diálogo con todos los comandos que se pueden

eliminar. (Los comandos del menú Comandos predeterminado no aparecen en

la lista y no se pueden eliminar mediante este método.)

2 Seleccione el comando que desea eliminar.

3 Haga clic en Eliminar y conﬁrme que desea eliminar el comando.

El comando se elimina. Tenga en cuenta que el archivo que contiene el código

del comando también se borra; la eliminación de un comando no se limita a

retirar el elemento de menú del menú. Asegúrese de que realmente desea

eliminar el comando antes de utilizar este método. Si desea eliminarlo del menú

Comandos sin borrar el archivo, puede mover el archivo desde Conﬁguration/

Commands a otra carpeta.

4 Haga clic en Cerrar.

Reorganizar menús y elementos de menú

Mediante la edición del archivo menus.xml, podrá mover los elementos de menú

dentro de un mismo menú o de un menú a otro, añadir o eliminar separadores en

los menús y mover menús dentro de una misma barra de menús o de una barra a

otra.

Puede mover elementos hacia o desde menús contextuales utilizando el mismo

procedimiento que para los demás menús.

Para obtener información sobre la sintaxis del archivo menus.xml, consulte

“Sintaxis de etiquetas de menus.xml” en la página 550.

Para mover un elemento de menú:

1 Salga de Dreamweaver.

2 Realice una copia de seguridad del archivo menus.xml.

3 Abra el archivo menus.xml en un editor de texto, como por ejemplo BBEdit,

HomeSite o Wordpad. (No lo abra en Dreamweaver.)

4 Corte una etiqueta menuitem completa, desde <menuitem, situada al comienzo,

hasta /> , situada al ﬁnal.

5 Coloque el punto de inserción en la nueva posición del elemento de menú.

(Asegúrese de que se encuentra entre una etiqueta <menu> y su etiqueta </menu>

correspondiente.)

6 Pegue el elemento de menú en la nueva ubicación.

Capítulo 22548

Para crear un submenú mientras se mueve un elemento de menú:

1 Coloque el punto de inserción dentro de un menú (entre una etiqueta <menu> y

la etiqueta

</menu> correspondiente).

2 Inserte un nuevo par <menu></menu> dentro del menú.

3 Añada nuevos elementos de menú al nuevo submenú.

Para insertar un separador entre dos elementos de menú:

Introduzca <separator /> entre las dos etiquetas menuitem.

Para eliminar un separador existente:

Borre la línea <separator /> correspondiente.

Para mover un menú:

1 Salga de Dreamweaver.

2 Realice una copia de seguridad del archivo menus.xml.

3 Abra el archivo menus.xml en un editor de texto, como por ejemplo BBEdit,

HomeSite o Wordpad. (No lo abra en Dreamweaver.)

4 Corte un menú completo con su contenido, desde la etiqueta de apertura

<menu> hasta la etiqueta de cierre </menu>.

5 Coloque el punto de inserción en la nueva posición del menú. (Asegúrese de

que se encuentra entre una etiqueta <menubar> y su etiqueta </menubar>

correspondiente.)

6 Pegue el menú en la nueva ubicación.

Cambiar el nombre de un elemento de menú o un menú

Puede cambiar fácilmente el nombre de cualquier elemento de menú o de un

menú mediante la edición del archivo menus.xml. Para obtener información sobre

la sintaxis del archivo menus.xml, consulte “Sintaxis de etiquetas de menus.xml”

en la página 550.

Para cambiar el nombre de un elemento de menú o un menú:

1 Salga de Dreamweaver.

2 Realice una copia de seguridad del archivo menus.xml.

3 Abra el archivo menus.xml en un editor de texto, como por ejemplo BBEdit,

HomeSite o Wordpad (no lo abra en Dreamweaver).

Personalizar Dreamweaver 549

Si cambia el nombre de un elemento de menú, localice la etiqueta menuitem

correspondiente y modiﬁque el valor de su atributo

name. Si cambia el nombre

de un menú, localice la etiqueta

menu correspondiente y modiﬁque el valor de su

atributo name.

Nota: En ambos casos, evite cambiar el atributo id.

5 Guarde y cierre el archivo menus.xml y vuelva a iniciar Dreamweaver para ver

los cambios.

Cambiar métodos abreviados de teclado

Si los métodos abreviados de teclado predeterminados no le satisfacen, puede

cambiarlos, eliminarlos o añadir otros nuevos. La forma más sencilla consiste en

utilizar el editor de métodos abreviados de teclado (consulte “Utilizar el editor de

métodos abreviados de teclado” en la página 92). También puede modiﬁcar

directamente los métodos abreviados de teclado en el archivo menus.xml, aunque

el riesgo de cometer errores es mayor que si se utiliza el editor de métodos

abreviados de teclado. Para obtener información sobre la sintaxis del archivo

menus.xml, consulte “Sintaxis de etiquetas de menus.xml” en la página 550.

Para cambiar un método abreviado de teclado:

1 Salga de Dreamweaver.

2 Realice una copia de seguridad del archivo menus.xml.

3 Abra el archivo menus.xml en un editor de texto, como por ejemplo BBEdit,

HomeSite o Wordpad. (No lo abra en Dreamweaver.)

4 Consulte la “Matriz de métodos abreviados” en la página 587 y localice un

método abreviado que no esté siendo utilizado o que desee reasignar.

Si reasigna un método abreviado de teclado, táchelo en una copia impresa de la

matriz para futuras consultas.

5 Si va a reasignar un método abreviado de teclado, localice el elemento de menú

al que está asignado el método abreviado y elimine el atributo key="

shortcut

de dicho elemento de menú.

6 Localice el elemento de menú al que desea asignar o reasignar el método

abreviado de teclado.

7 Si el elemento de menú ya dispone de método abreviado, localice el atributo

key en esa línea. Si no dispone de método abreviado, añada key="" en cualquier

lugar entre los atributos de la etiqueta menuitem.

Capítulo 22550

Entre las comillas dobles del atributo key, introduzca el nuevo método

abreviado de teclado.

Utilice un signo más (+) entre las teclas de una combinación de teclas. Para

obtener más información sobre los modiﬁcadores, consulte la descripción de la

etiqueta menuitem en “<menuitem>” en la página 552.

Si el método abreviado de teclado está siendo utilizado en algún otro lugar y no

lo ha eliminado en ese otro lugar, el método abreviado sólo funcionará para el

primer elemento de menú que lo utilice en menus.xml.

Nota: Puede utilizar el mismo método abreviado de teclado para un elemento de menú

para Macintosh sólo y para un elemento de menú para Windows sólo.

9 Escriba el nuevo método abreviado en la ubicación adecuado de la Matriz de

métodos abreviados.

Sintaxis de etiquetas de menus.xml

El archivo menus.xml contiene una lista estructurada de barras de menús, menús,

elementos de menú, separadores, listas de métodos abreviados y métodos

abreviados de teclado. Estos elementos se describen por medio de etiquetas XML

que se pueden editar en un editor de texto.

Nota: Tenga cuidado a la hora de realizar cambios en los menús. Dreamweaver prescinde

de todos los menús o elementos de menú que contengan errores de sintaxis XML.

Una barra de menús (que cuenta con etiquetas inicial y de cierre menubar) es un

menú o conjunto de menús; por ejemplo, existe una barra de menús principal,

una barra de menús independiente para la ventana Sitio (que sólo aparece en

Windows, no en el Macintosh) y una barra de menús para cada menú contextual.

Cada barra de menús contiene uno o varios menús; cada menú está rodeado por

etiquetas menu. Cada menú consta de uno o varios elementos de menú, todos ellos

descritos por su correspondiente etiqueta menuitem y sus atributos. Un menú

también puede contener separadores (descritos por etiquetas separator) y

submenús.)

Además de los métodos abreviados de teclado asociados a los elementos de menú,

Dreamweaver proporciona muchos otros métodos abreviados de teclado, incluidos

los alternativos y los que sólo están disponibles en determinados contextos. Por

ejemplo, Control+Y (Windows) o Comando+Y (Macintosh) es el método

abreviado para Rehacer, pero Control+Mayús+Z o Comando+Mayús+Z es un

método alternativo para realizar la misma acción. Los métodos abreviados

alternativos, y otros que no pueden representarse en las etiquetas de los elementos

de menú, se deﬁnen en listas de métodos abreviados en el archivo menus.xml.

Cada lista de métodos abreviados (descrita por una etiqueta shortcutlist)

contiene uno o varios métodos abreviados, descritos por sus correspondientes

etiquetas shortcut.

Personalizar Dreamweaver 551

Las siguientes secciones describen la sintaxis de las etiquetas de menus.xml. En las

listas de atributos, los atributos opcionales se marcan con llaves (

{}); todos los

atributos que no se muestran entre llaves son obligatorios.

Descripción

Proporciona información sobre una barra de menús de la estructura de menús de

Dreamweaver.

Atributos

name, {app}, id, {platform}

name El nombre de la barra de menús. Aunque name es un atributo obligatorio,

puede asignarle el valor "".

app El nombre de la aplicación en la que está disponible la barra de menús. Los

valores válidos son "dreamweaver" y "ultradev". Si se omite el argumento, la barra

de menús estará disponible tanto en Dreamweaver como en UltraDev.

id El ID de menú de la barra de menús. Cada ID de menú debe ser exclusivo en

el archivo menus.xml.

platform Indica que la barra de menús sólo debe aparecer en la plataforma

indicada. Los valores válidos son "win" y "mac".

Contenido

Esta etiqueta debe contener una o varias etiquetas menu.

Contenedor

Ninguno.

Ejemplo

La barra de menús principal (ventana de documento) utiliza la siguiente etiqueta

menubar:

</menubar>

Capítulo 22552

<menu>

Descripción

Proporciona información sobre un menú o submenú de la estructura de menús de

Dreamweaver.

Atributos

name, {app}, id, {platform}

name El nombre del menú que aparecerá en la barra de menús. Para establecer la

tecla de acceso al menú (letra de selección) en Windows, escriba un guión bajo (_)

antes de la letra correspondiente. El guión bajo se elimina automáticamente en

Macintosh.

app El nombre de la aplicación en la que está disponible el menú. Los valores

válidos son "dreamweaver" y "ultradev". Si se omite el argumento, el menú estará

disponible tanto en Dreamweaver como en UltraDev.

id El ID de menú del menú. Cada ID debe ser exclusivo en el archivo

menus.xml.

platform Indica que el menú sólo debe aparecer en la plataforma indicada. Los

valores válidos son "win" y "mac".

Contenido

Esta etiqueta contiene una o varias etiquetas menuitem y una o varias etiquetas

separator. También puede contener otras etiquetas menu (para crear submenús) y

etiquetas HTML estándar de comentarios.

Contenedor

Esta etiqueta debe estar incluida en una etiqueta menubar.

Ejemplo

</menu>

Descripción

Deﬁne un elemento de menú para un menú de Dreamweaver.

Atributos

name, id, {app}, {key}, {platform}, {enabled}, {arguments}, {command}, {file},

{checked}, {dynamic}

name El nombre del elemento de menú que aparece en el menú. Un guión bajo

indica que la letra que sigue es la tecla de acceso (letra de selección) del comando

(sólo en Windows).

Personalizar Dreamweaver 553

Utilizado por Dreamweaver para identiﬁcar el elemento. El ID debe ser

exclusivo en toda la estructura de menús. Si añade nuevos elementos de menú a

menus.xml, utilice el nombre de su empresa u otra cadena de texto exclusiva como

preﬁjo del ID de cada elemento de menú para asegurarse de que no se repitan.

app El nombre de la aplicación en la que está disponible el elemento de menú.

Los valores válidos son "dreamweaver" y "ultradev". Si se omite el argumento, el

elemento de menú estará disponible tanto en Dreamweaver como en UltraDev.

key El método abreviado de teclado para el comando, caso de tener alguno.

Utilice las siguientes cadenas para especiﬁcar teclas de modiﬁcación:

• Cmd especiﬁca la tecla Control (Windows) o la tecla Comando (Macintosh).

• Alt y Opt Especiﬁcan indistintamente la tecla Alt (Windows) o la tecla

Opción (Macintosh).

• Shift Especiﬁca la tecla Mayús en ambas plataformas.

• Ctrl Especiﬁca la tecla Control en ambas plataformas.

• Las teclas de modiﬁcación van separadas por un signo más (+) si un método

abreviado concreto utiliza varias de ellas. Por ejemplo,

Cmd+Opt+5 en el atributo

key signiﬁca que el menú se ejecuta cuando el usuario presiona Control+Alt+5

(Windows) o Comando+Opción+5 (Macintosh).

• Las teclas especiales se especiﬁcan por su nombre en inglés. F1 a F12, PgDn, PgUp,

Home, End, Ins, Del, Tab, Esc, BkSp y Space. Las teclas de modiﬁcación también

pueden aplicarse a teclas especiales.

platform Indica en qué plataforma aparece el elemento. Los valores válidos son

"win", que signiﬁca sólo Windows, o "mac", que signiﬁca sólo Macintosh. Si no se

especiﬁca el atributo platform , el elemento de menú aparece en ambas

plataformas. Si desea que un elemento de menú tenga distintos comportamientos

en cada plataforma, cree dos elementos de menú con el mismo nombre pero con

distintos ID: uno con platform="win" y el otro con platform="mac".

enabled Código JavaScript (generalmente una llamada de función JavaScript)

que determina si el elemento de menú está actualmente activado. Si la función

devuelve el valor false, el menú se mostrará atenuado. El valor predeterminado es

"true", pero conviene especiﬁcar siempre un valor por razones de claridad, aunque

éste sea "true".

arguments Argumentos que Dreamweaver pasa al código del archivo JavaScript

especiﬁcado por medio del atributo file. Escriba los argumentos entre comillas

simples (') dentro de las comillas dobles que delimitan el valor del atributo.

command Especiﬁca una expresión JavaScript que se ejecuta cuando el usuario

selecciona el elemento del menú. En el caso de código JavaScript complejo, utilice

en su lugar un archivo JavaScript (especiﬁcado mediante el atributo file). Deberá

especiﬁcar file o command por cada elemento del menú.

Capítulo 22554

file

El nombre de un archivo HTML que contiene código JavaScript que

controla el elemento de menú. Especiﬁque la ruta del archivo relativa a la carpeta

Conﬁguration. (Por ejemplo, el elemento de menú Ayuda > Bienvenido especiﬁca

file="Commands/Welcome.htm".) Tenga en cuenta que el atributo file anula los

atributos command, enabled y checked. Deberá especiﬁcar file o command por cada

elemento del menú. Para obtener información sobre la creación de un archivo de

comando mediante el panel Historial, consulte “Crear comandos nuevos a partir

del historial” en la página 168. Para obtener información sobre la escritura de sus

propios comandos JavaScript comenzando desde cero, consulte Ampliación de

Dreamweaver.

checked Una expresión JavaScript que indica si el elemento de menú tiene una

marca de comprobación junto a él en el menú; si la expresión da como resultado el

valor

true, el elemento se mostrará con una marca de comprobación.

dynamic Si está presente este argumento, indica que el elemento de menú debe

determinarse dinámicamente, mediante un archivo HTML que contiene código

JavaScript para deﬁnir el texto y el estado del elemento de menú. Si especiﬁca una

etiqueta como dynamic, también deberá especiﬁcar un atributo file.

isdomrequired Indica si se sincronizarán las vistas de Diseño y de Código antes de

ejecutar el código asociado al elemento de menú. Los valores válidos son "true"

(predeterminado) y "false". Si conﬁgura este atributo como "false", signiﬁca que

los cambios realizados en el archivo por este elemento de menú no utilizan el

DOM de Dreamweaver. (Para obtener más información sobre el DOM, consulte

Ampliación de Dreamweaver.)

Contenido

Ninguno (etiqueta vacía).

Contenedor

Esta etiqueta debe estar incluida en una etiqueta menu.

Ejemplo

<menuitem name="_Nuevo" key="Cmd+N" enabled="true"

command="dw.createDocument()" id="DWMenu_File_New" />

Descripción

Indica que debe mostrarse un separador en la posición correspondiente del menú.

Atributos

{app}

app

El nombre de la aplicación en la que se muestra el separador. Los valores

válidos son "dreamweaver" y "ultradev". Si se omite el argumento, el separador se

mostrará tanto en Dreamweaver como en UltraDev.

Contenido

Ninguno (etiqueta vacía).

Personalizar Dreamweaver 555

Contenedor

Esta etiqueta debe estar incluida en una etiqueta menu.

Ejemplo

Descripción

Especiﬁca una lista de métodos abreviados en el archivo menus.xml.

Atributos

{app}, id, {platform}

app El nombre de la aplicación en la que está disponible la lista de métodos

abreviados. Los valores válidos son "dreamweaver" y "ultradev". Si se omite el

argumento, la lista de métodos abreviados estará disponible tanto en

Dreamweaver como en UltraDev.

id El ID de la lista de métodos abreviados. Debe ser igual al ID de menú de la

barra de menús (o del menú contextual) de Dreamweaver a la que están asociados

los métodos abreviados. Los valores válidos son "DWMainWindow", "DWMainSite",

"DWTimelineContext" y "DWHTMLContext".

platform Indica que la lista de métodos abreviados sólo debe aparecer en la

plataforma indicada. Los valores válidos son "win" y "mac".

Contenido

Esta etiqueta puede contener una o varias etiquetas shortcut. También puede

contener una o varias etiquetas de comentarios (que utilizan la misma sintaxis que

las etiquetas de comentarios HTML).

Contenedor

Ninguno.

Ejemplo

</shortcutlist>

Capítulo 22556

Descripción

Especiﬁca un método abreviado de teclado en el archivo menus.xml.

Atributos

key, {app}, {platform}, {file}, {arguments}, {command}, id, {name}

key La combinación de teclas que activa el método abreviado de teclado. Si desea

más información sobre la sintaxis, consulte “<menuitem>” en la página 552.

app El nombre de la aplicación en la que está disponible el método abreviado.

Los valores válidos son "dreamweaver" y "ultradev". Si se omite el argumento, el

método abreviado estará disponible tanto en Dreamweaver como en UltraDev.

platform Indica que el método abreviado sólo funcionará en la plataforma

indicada. Los valores válidos son "win" y "mac". Si omite este atributo, el método

abreviado funciona en ambas plataformas.

file La ruta de un archivo que contiene el código JavaScript que Dreamweaver

ejecuta cuando se utiliza el método abreviado de teclado. El atributo file anula el

atributo command. Deberá especiﬁcar file o command por cada método abreviado.

arguments Argumentos que Dreamweaver pasa al código del archivo JavaScript

especiﬁcado por medio del atributo file. Escriba los argumentos entre comillas

simples (') dentro de las comillas dobles que delimitan el valor del atributo.

command El código JavaScript que Dreamweaver ejecuta cuando se utiliza el

método abreviado de teclado. Especiﬁque file o command por cada método

abreviado.

id Un identiﬁcador exclusivo de un método abreviado.

name Un nombre para el comando que ejecuta el método abreviado de teclado

(del estilo de un nombre de elemento de menú). Por ejemplo, el atributo name del

método abreviado F12 es "Vista previa en navegador principal".

Contenido

Ninguno (etiqueta vacía).

Contenedor

Esta etiqueta debe estar incluida en una etiqueta shortcutlist.

Ejemplo

<shortcut key="Cmd+Shift+Z" file="Menus/MM/Edit_Clipboard.htm"

arguments="'redo'" id="DWShortcuts_Edit_Redo" />

Personalizar Dreamweaver 557

Personalizar la apariencia de cuadros de

diálogo

El diseño de los cuadros de diálogo para objetos, comandos y comportamientos se

especiﬁca mediante formularios HTML; residen en archivos HTML de la carpeta

Conﬁguration del directorio de la aplicación Dreamweaver. Estos formularios se

editan como cualquier otro formulario de Dreamweaver; consulte “Crear

formularios” en la página 507.)

Para cambiar la apariencia de un cuadro de diálogo:

1 Localice el archivo .htm correspondiente en Conﬁguration/Objects,

Conﬁguration/Commands o Conﬁguration/Behaviors.

2 Cree una copia del archivo en algún lugar situado fuera de la carpeta

Conﬁguration.

3 Abra la copia en Dreamweaver, edite el formulario y guárdelo.

4 Salga de Dreamweaver.

5 Copie el archivo modiﬁcado de nuevo a la carpeta Conﬁguration y reemplace el

original. (Es recomendable crear primero una copia de seguridad del original,

de forma que pueda restaurarlo en el caso de que lo necesite.)

6 Inicie de nuevo Dreamweaver para ver los cambios.

Sólo debe cambiar la apariencia del cuadro de diálogo, no su funcionamiento;

deberá contener los mismos tipos de elementos de formulario, con los mismos

nombres, de manera que la información que Dreamweaver obtiene a través del

cuadro de diálogo pueda seguir utilizándose de la misma forma.

Por ejemplo, el objeto Comentario recibe entradas de texto de un área de texto del

cuadro de diálogo y después utiliza una función JavaScript sencilla para convertir

dicho texto en un comentario HTML e insertarlo en el documento. El formulario

que describe al cuadro de diálogo se encuentra en Conﬁguration/Objects/

Invisibles/Comment.htm. Puede abrir dicho archivo y cambiar el tamaño y otros

atributos del área de texto, pero si elimina la etiqueta textarea completa o si

cambia el valor de su atributo name, el objeto Comentario dejará de funcionar

correctamente.

Capítulo 22558

Cambiar el formato HTML predeterminado

El perﬁl de formato del código Código HTML determina el formato que

Dreamweaver aplica al código HTML en un documento. El perﬁl incluye las

preferencias de formato de código (que se pueden conﬁgurar fácilmente mediante

Edición > Preferencias; consulte “Formato de código, preferencias” en la

página 361 para obtener más información) y otras preferencias para etiquetas

individuales y grupos de etiquetas. La única forma de cambiar las preferencias de

formato que no aparecen en las preferencias de formato de código consiste en

editar el archivo SourceFormat.txt en un editor de texto. Este archivo se encuentra

en la carpeta Conﬁguration/Objects, dentro de la carpeta de la aplicación

Dreamweaver.

Las preferencias de formato de código que se deﬁnen a través del comando

Edición > Preferencias se guardan en SourceFormat.txt al salir de Dreamweaver.

Por tanto, deberá salir de la aplicación antes de editar el perﬁl para evitar

sobrescribir los cambios cuando salga de Dreamweaver.

El perﬁl de formato del código Código HTML sigue un formato especíﬁco, que se

describe en el archivo. Observe las convenciones siguientes:

• Cada sección del perﬁl comienza por una etiqueta de tipo <?

palabra clave

(como <?options>, <?elements> o <?attributes>).

• Los parámetros de cada sección están deﬁnidos en los comentarios HTML

() directamente encima de la sección.

• La línea omit de la sección <?options> está reservada para uso futuro

(actualmente no afecta al formato del código Código HTML).

• Puede marcar una etiqueta individual como perteneciente a un grupo de

sangría (igroup) en la sección <?elements>. De forma predeterminada, el grupo

de sangría 1 contiene ﬁlas y columnas de tabla, mientras que el grupo de

sangría 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, de las preferencias de Formato HTML. Puede desactivar la sangría para

el grupo entero mediante la eliminación de su número del atributo active en la

sección <?options>. También puede añadir otras etiquetas a cualquiera de los

grupos de sangría de modo que pueda controlarlas con las opciones de las

preferencias de Formato HTML.

Los cuatro números del atributo break de cada etiqueta indican, respectivamente,

el número de saltos de línea que se utilizarán antes de abrir la etiqueta,

inmediatamente después de abrirla (antes del contenido de la etiqueta),

inmediatamente después de cerrarla y después de la etiqueta de cierre.

Personalizar Dreamweaver 559

Por ejemplo, la conﬁguración predeterminada para la etiqueta p en el archivo

SourceFormat.txt es

<p break="1,0,0,1" indent>, que da lugar al siguiente

formato:

<p> Un párrafo de texto que está sangrado con respecto al margen izquierdo

(después de la primera

línea) y que tiene un salto de línea antes de la etiqueta p de apertura y

después

de la etiqueta p de cierre, pero ningún salto de línea después de la

etiqueta p de apertura ni antes de la

etiqueta p de cierre.</p>

<p>Párrafo siguiente.</p>

Si cambia la conﬁguración a <p break="1,1,1,2">, la vista de Código y el inspector

de código mostrará párrafos de texto con el siguiente formato:

<p>

Un párrafo de texto que no está sangrado con respecto al margen izquierdo y que

tiene un

salto de línea antes y después de la etiqueta p de apertura, un salto antes de

la etiqueta

p de cierre y dos saltos después de la etiqueta p de cierre.

</p>

<p>

Párrafo siguiente.

</p>

(El número de saltos de línea que siguen a la etiqueta de cierre y que preceden a la

siguiente etiqueta de apertura es el mayor de los dos números especiﬁcados —si

especiﬁca dos saltos de línea antes de una etiqueta y tres después de ella, obtendrá

tres saltos de línea entre las etiquetas de apertura y de cierre.)

Algunas conﬁguraciones de etiquetas y atributos incluyen el término namecase, que

indica que la etiqueta o el atributo debe mostrarse exactamente con las mayúsculas

y minúsculas especiﬁcadas en el valor del atributo namecase. Por ejemplo, la

especiﬁcación de onClick en el archivo SourceFormat.txt es

<onClick namecase="onClick">; por tanto, onClick siempre se muestra con la

combinación de mayúsculas y minúsculas indicada con independencia de las

preferencias de mayúsculas y minúsculas del usuario.

Otro de los términos empleados para especiﬁcar las mayúsculas y minúsculas es

samecase, que indica que el valor de un atributo debe mostrarse con la misma

combinación de mayúsculas y minúsculas que el nombre del atributo. Por

ejemplo, <align samecase> indica que si Dreamweaver genera un atributo align, el

valor del atributo aparecerá con la misma combinación de mayúsculas y

minúsculas de su nombre. El término samecase también se aplica a nombres de

atributos que no incluyen valores, por lo que no deberá borrarlo de ninguna de las

especiﬁcaciones de formato de atributos en las que aparece.

Capítulo 22560

El término noformat asociado a una etiqueta indica que los saltos de línea, la

sangría y las mayúsculas y minúsculas de una instancia existente de la etiqueta no

cambian nunca para utilizar el formato especiﬁcado en SourceFormat.txt. En el

caso de una etiqueta que incluye noformat, el formato especiﬁcado en

SourceFormat.txt se utiliza solamente cuando se crea una nueva instancia de la

etiqueta desde Dreamweaver. Por ejemplo, <pre break="1,0,0,1" noformat>

signiﬁca que si utiliza las herramientas de Dreamweaver para crear una nueva

etiqueta pre, se utilizará la especiﬁcación de saltos de línea "1,0,0,1" para crearla.

Sin embargo, si ya existe una etiqueta pre creada manualmente con otra

conﬁguración de saltos de línea y edita la etiqueta en la vista de Diseño, los saltos

de línea no cambiarán.

Cualquier atributo no especiﬁcado en el archivo SourceFormat.txt utilizará la

conﬁguración de formato predeterminada que especiﬁque en la categoría de

preferencias de Formato HTML.

Trabajar con perfiles de navegador

Los perﬁles de navegadores son los archivos que utiliza Dreamweaver para

comparar los documentos cuando se ejecuta un navegador de destino (consulte

“Comprobar la compatibilidad con los navegadores” en la página 531). Cada

perﬁl contiene información sobre las etiquetas y atributos HTML compatibles

con un navegador determinado. También puede contener advertencias, mensajes

de error y sugerencias para sustituciones de etiquetas.

Los perﬁles de navegadores se almacenan en la carpeta Conﬁguration/

BrowserProﬁles, dentro de la carpeta de la aplicación Dreamweaver. Se pueden

editar los perﬁles existentes o crear otros nuevos con Dreamweaver o un editor de

texto (por ejemplo, BBEdit, HomeSite, Bloc de notas, o SimpleText). No es

necesario salir de Dreamweaver para editar o crear perﬁles de navegador.

Aplicar formato a perfiles de navegador

Los perﬁles de navegador tienen un formato especíﬁco. Para evitar errores de

análisis durante las comprobaciones del navegador de destino, siga estas normas al

crear o editar perﬁles:

• La primera línea está reservada para el nombre del perﬁl. Debe ir seguida de un

solo retorno de carro. El nombre de esta línea aparece en el cuadro de diálogo

Comprobar navegadores de destino y en el informe de comprobación de

destino. El nombre debe ser único.

• La segunda línea se reserva para el designador PROFILE_TYPE=BROWSER_PROFILE.

Dreamweaver usa esta línea para determinar los documentos que son perﬁles de

navegador. No la modiﬁque ni la mueva.

Personalizar Dreamweaver 561

• Dos guiones (--) al principio de una línea indican un comentario (es decir, que

la línea será ignorada durante el proceso de comprobación del destino). Los

comentarios deben comenzar al principio de una línea (no puede escribir dos

guiones a la mitad de una línea).

• Deberá utilizar un espacio en los siguientes lugares: antes del paréntesis angular

de cierre (>) en la línea !ELEMENT, después del paréntesis inicial de la lista de

valores de un atributo, antes del paréntesis de cierre y antes y después de cada

barra vertical (|) de una lista de valores.

• Debe incluir un signo de admiración sin espacio antes de las palabras

siguientes. ELEMENT, ATTLIST, Error, msg y htmlmsg (!ELEMENT, !ATTLIST, !Error,

!msg, !htmlmsg).

• Puede incluir !Error (error) y !Warning (advertencia) dentro de !ELEMENT o del

área !ATTLIST.

• Los mensajes !msg solamente pueden contener texto sin formato. Los mensajes

!htmlmsg pueden contener cualquier código HTML válido, incluidos

hipervínculos.

• Los comentarios HTML () no se pueden enumerar como etiquetas en

los perﬁles de navegador porque interﬁeren con el análisis. Dreamweaver no

informa de errores en los comentarios porque estos son compatibles con todos

los navegadores.

La sintaxis de una entrada de etiqueta es la siguiente:

<!ELEMENT

htmlTag

NAME="

tagName

" >

<!ATTLIST

htmlTag

unsupportedAttribute1

!Error !msg="El atributo

unsupportedAttribute1

de la

etiqueta

htmlTag

no es compatible. Inténtelo con

supportedAttribute1

para

lograr un efecto similar."

supportedAttribute1

supportedAttribute2

(

validValue1

validValue2

validValue3

)

unsupportedAttribute2

!Error !htmlmsg="<b>No utilice nunca el atributo

unsupportedAttribute2

de la etiqueta

htmlTag

!!</b>"

La deﬁnición de estos elementos es la siguiente:

htmlTag es la etiqueta que aparece en un documento HTML.

tagName es un nombre explicativo para la etiqueta (por ejemplo, la etiqueta HR se

denomina "Regla horizontal"). El atributo NAME es opcional. Si se especiﬁca,

tagName

se utiliza en los mensajes de error; si no se proporciona ningún nombre, se

utiliza

htmlTag

unsupportedAttribute es un atributo no admitido. Se considera que todas las

etiquetas o los atributos que no se mencionan especíﬁcamente no son admitidos.

Especiﬁque etiquetas o atributos no admitidos solamente cuando desee crear una

mensaje de error personalizado.

Capítulo 22562

supportedAttribute es un atributo admitido por la etiqueta

htmlTag

. Solamente las

etiquetas que aparecen en la lista sin una designación de

!Error se consideran

admitidas por el navegador.

validValue indica un valor admitido por el atributo.

En el siguiente ejemplo se muestra una entrada para la etiqueta APPLET que podría

ser adecuada para Navigator 3.0:

<!ELEMENT APPLET Name="Java Applet" >

<!ATTLIST APPLET

baseline | texttop )

Alt

Adobe Dreamweaver Manual de usuario

Marca: Adobe

Modelo: Dreamweaver

Categoría: Manuales de software

Tipo: Manual de usuario

Descargar PDF

informe

Adobe Dreamweaver Manual de usuario

Adobe Dreamweaver Manual de usuario

Documentos relacionados

Otros documentos