Adobe Dreamweaver User Manual [es]

Manual de Dreamweaver

macromedia

™

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 USURIO DERECHOS LEGALES ESPECÍFICOS. OTROS DERECHOS QUE LE PUEDAN CORRESPONDER VARÍAN DE UN ESTADO A OTRO.

Copyright © 2000 Macromedia, Inc. Reservados todos los derechos. Este manual no se puede copiar, fotocopiar, reproducir, traducir 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

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

Contenido

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

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.

•

Introducción

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.

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

Manual de Dreamweaver

impreso.

Para comenzar

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.

Introducción

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,

estilos

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

capas

Para comenzar

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.

Haga clic aquí para abrir la Ayuda

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

Introducción

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

•

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

•

Manual de Dreamweaver

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.

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.

se divide en amplias secciones que siguen este

Para comenzar

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.

Introducción

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.

Para comenzar

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.

Introducción

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.

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.

Para comenzar

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.

Introducción

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.

Para comenzar 23

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.

Introducción24

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.

Para comenzar 25

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

Introducción26

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.

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:

Barra de herramientas

Ventana de documento

Panel Objetos

Selector de etiquetas

Capítulo 128

Panel flotante

Barra del lanzador Inspector de

propiedades

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

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

Curso práctico de Dreamweaver 29

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.

Capítulo 130

+ 582 hidden pages