Adobe Dreamweaver - 8 User Manual [es]

Utilización de Dreamweaver

Marcas comerciales

1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev y WebHelp son marcas comerciales registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en Estados Unidos o en otras jurisdicciones, incluidas las internacionales. 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.

Información de otros proveedores

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.

Copyright © 1997-2005 Macromedia, Inc. Todos los derechos reservados. Este manual no se puede copiar, fotocopiar, reproducir, traducir ni convertir a ningún formato electrónico o legible por máquina, en su parte o en su totalidad, sin el permiso previo y por escrito de Macromedia, Inc. A pesar de lo establecido anteriormente, el propietario o el usuario autorizado de una copia legal del software junto al que se proporciona este manual puede imprimir una copia de la documentación a partir de su versión electrónica con el único fin de aprender a utilizar dicho software, teniendo en cuenta que ninguna parte de este manual se puede imprimir, reproducir, distribuir, revender ni transmitir con otros fines entre los que se incluyen, sin limitarse a ellos, la venta de copias de esta documentación o el ofrecimiento de servicios de soporte no gratuitos.

Agradecimientos

Dirección del proyecto: Charles Nadeau Redacción: Michael Varese Redacción adicional: Jennifer Rowe, Paul Gubbay, Charles Nadeau Edición: Rosana Francescato, Lisa Stanziano, Anne Szabla, Mary Ferguson, Mark Nigara Producción y administración de edición: Patrice O’Neill y Rosana Francescato Producción y diseño multimedia: Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel,

Arena Reed, Mario Reynoso Administración de la localización: Melissa Baerwald Nuestro especial agradecimiento a Sheila McGinn, Paul Gubbay, Vic Mitnick, Jim Doubek, Joaquin Blas, Wenlan Du, Ken

Karleskint, Jennifer Taylor, Jorge Taylor, Nick Halbakken, Scott Richards, Sami Kaied, John Skidgel, Masayo Noda, Kristin Conradi, Yuko Yagi, a los responsables de verificar la versión beta y a los equipos de ingeniería y control de calidad de Dreamweaver.

Primera edición: septiembre de 2005

Macromedia, Inc. 601 Townsend St. San Francisco, CA 94103

Contenido

PARTE 1: ASPECTOS BÁSICOS DE DREAMWEAVER

Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Novedades de Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Por dónde empezar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Flujo de trabajo de Dreamweaver para la creación de sitios Web. . . 28

Utilización de Dreamweaver con otras aplicaciones . . . . . . . . . . . . . . 33

Dreamweaver y accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Guía de recursos de formación de Dreamweaver . . . . . . . . . . . . . . . . . 35

Convenciones tipográficas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

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

Capítulo 1: Exploración del espacio de trabajo . . . . . . . . . . . . . . . 41

Espacio de trabajo de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Utilización de la ventana de documento . . . . . . . . . . . . . . . . . . . . . . . . . 54

Utilización de barras de herramientas, inspectores y menús

contextuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Utilización de paneles y grupos de paneles . . . . . . . . . . . . . . . . . . . . . . 66

Utilización de las funciones de accesibilidad de Dreamweaver . . . . . .70

Optimización del espacio de trabajo para el diseño de páginas

accesibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76

Utilización de guías visuales en Dreamweaver . . . . . . . . . . . . . . . . . . . .78

Aspectos básicos de personalización de Dreamweaver . . . . . . . . . . . .78

Capítulo 2: Configuración de un sitio de Dreamweaver . . . . . . . .87

Acerca de los sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Configuración de un sitio de Dreamweaver nuevo . . . . . . . . . . . . . . . . . 91

Utilización de las opciones avanzadas para configurar un sitio de

Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Edición de la configuración de un sitio de Dreamweaver . . . . . . . . . . .97

Edición de sitios Web existentes con Dreamweaver . . . . . . . . . . . . . . 98

Capítulo 3: Cómo crear y abrir documentos . . . . . . . . . . . . . . . . 101

Creación de documentos nuevos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Cómo guardar un nuevo documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Configuración de un tipo de documento nuevo predeterminado . . . 106 Configuración de la extensión de archivo predeterminada

para nuevos documentos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Cómo abrir documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Limpiar archivos HTML de Microsoft Word . . . . . . . . . . . . . . . . . . . . . 108

PARTE 2: UTILIZACIÓN DE LOS SITIOS DE DREAMWEAVER

Capítulo 4: Administración de archivos . . . . . . . . . . . . . . . . . . . . 113

Administración de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114

Acceso a sitios, a un servidor y a unidades locales . . . . . . . . . . . . . . . .118

Visualización de archivos y carpetas. . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Comparación de archivos para detectar diferencias . . . . . . . . . . . . . . 125

Recuperación de versiones anteriores de archivos (usuarios

de Contribute). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Administración de archivos y carpetas en el panel Archivos . . . . . . . 132

Utilización de un mapa visual del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Importación y exportación de sitios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Eliminación de un sitio de Dreamweaver de la lista de sitios . . . . . . . 149

Desprotección y protección de archivos . . . . . . . . . . . . . . . . . . . . . . . . 149

Obtención y colocación de archivos en el servidor . . . . . . . . . . . . . . . 156

Sincronización de los archivos de los sitios local y remoto . . . . . . . . .161

Identificación y eliminación de archivos no utilizados . . . . . . . . . . . . . 163

Cómo ocultar carpetas y archivos en el sitio . . . . . . . . . . . . . . . . . . . . . 163

Almacenamiento de información sobre archivos en Design

Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Comprobación del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Capítulo 5: Administración de activos y bibliotecas . . . . . . . . . . 179

Elementos de biblioteca. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Utilización de activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Creación y administración de una lista de activos favoritos . . . . . . . . 190

Utilización de los elementos de biblioteca . . . . . . . . . . . . . . . . . . . . . . . 193

Capítulo 6: Administración de sitios de Contribute con

Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Administración de sitios de Contribute. . . . . . . . . . . . . . . . . . . . . . . . . 204

4Contenido

Preparación de un sitio para su uso con Contribute . . . . . . . . . . . . . . .210

Administración de un sitio Contribute con Dreamweaver . . . . . . . . . . 211

Administración de archivos de Contribute con Dreamweaver . . . . . .213

Solución de problemas de un sitio de Contribute . . . . . . . . . . . . . . . . .216

PARTE 3: DISEÑO DE PÁGINAS

Capítulo 7: Diseño de páginas con CSS. . . . . . . . . . . . . . . . . . . . 221

Acerca de las capas en Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . 222

Inserción de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Configuración de preferencias y propiedades de capa . . . . . . . . . . . 227

Administración de capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Manipulación de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Conversión de capas en tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Animación de capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Inserción de etiquetas div para el diseño. . . . . . . . . . . . . . . . . . . . . . . . 248

Utilización de etiquetas div para el diseño . . . . . . . . . . . . . . . . . . . . . . 249

Cambio del color de resaltado de las etiquetas div. . . . . . . . . . . . . . . .251

Utilización de la visualización de diseño CSS . . . . . . . . . . . . . . . . . . . .251

Utilización de reglas, guías y cuadrículas para diseñar páginas . . . . 254

Utilización de una imagen de rastreo . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Capítulo 8: Presentación de contenido en tablas . . . . . . . . . . . . 261

Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

Inserción de una tabla y adición de contenido . . . . . . . . . . . . . . . . . . . 264

Importación y exportación de datos de tabla . . . . . . . . . . . . . . . . . . . . 265

Selección de elementos de una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . 266

Utilización del modo de tablas expandidas para facilitar la

edición de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Aplicación de formato a tablas y celdas . . . . . . . . . . . . . . . . . . . . . . . . . 271

Cambio de tamaño de tablas, columnas y filas . . . . . . . . . . . . . . . . . . 274

Adición y eliminación de filas y columnas . . . . . . . . . . . . . . . . . . . . . . 279

División y combinación de celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281

Cómo copiar, pegar y eliminar celdas . . . . . . . . . . . . . . . . . . . . . . . . . . 283

Anidación de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Ordenación de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Capítulo 9: Diseño de páginas en el modo de diseño . . . . . . . . 287

Modo de diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

Alternancia entre modo estándar y modo de diseño . . . . . . . . . . . . . 292

Contenido 5

Dibujo en el modo de diseño. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293

Adición de contenido a una celda de diseño . . . . . . . . . . . . . . . . . . . . . 297

Cómo borrar los altos de celdas establecidos

automáticamente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Cambio de tamaño y desplazamiento de celdas y tablas de

diseño. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Aplicación de formato a celdas y tablas de diseño . . . . . . . . . . . . . . 302

Establecimiento del ancho de columna . . . . . . . . . . . . . . . . . . . . . . . . 303

Configuración de preferencias para el modo de diseño . . . . . . . . . . .307

Capítulo 10: Utilización de marcos . . . . . . . . . . . . . . . . . . . . . . . 309

Marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

Utilización de conjuntos de marcos en la ventana de

documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

Creación de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . 316

Selección de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . 319

Cómo abrir un documento en un marco . . . . . . . . . . . . . . . . . . . . . . . . .322

Almacenamiento de archivos de marcos y conjuntos de

marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322

Visualización y configuración de las propiedades y los

atributos de los marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324

Visualización y configuración de las propiedades de un

conjunto de marcos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326

Control del contenido de los marcos con vínculos. . . . . . . . . . . . . . . .328

Manipulación de navegadores que no pueden mostrar marcos . . . .329

Utilización de comportamientos JavaScript con marcos . . . . . . . . . 330

Capítulo 11: Administración de plantillas . . . . . . . . . . . . . . . . . . . 331

Plantillas de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332

Creación de una plantilla de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 347

Creación de plantillas para un sitio de Contribute . . . . . . . . . . . . . . . . 351

Creación de regiones editables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .354

Creación de regiones repetidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .357

Utilización de regiones opcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

Definición de atributos de etiqueta editables . . . . . . . . . . . . . . . . . . . .363

Creación de una plantilla anidada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .365

Edición y actualización de plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . .366

Administración de plantillas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .370

Exportación e importación de contenido XML de plantillas. . . . . . . .372

Exportación de un sitio sin formato de plantilla. . . . . . . . . . . . . . . . . . .373

Aplicación o eliminación de una plantilla de un documento

existente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .374

6Contenido

Edición de contenido de un documento basado en plantilla. . . . . . . 376

PARTE 4: ADICIÓN DE CONTENIDO A LAS PÁGINAS

Capítulo 12: Utilización de páginas . . . . . . . . . . . . . . . . . . . . . . . 383

Utilización de páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384

Almacenamiento de páginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Especificación HTML en lugar de CSS. . . . . . . . . . . . . . . . . . . . . . . . . 390

Configuración de propiedades de la página . . . . . . . . . . . . . . . . . . . . . .391

Utilización de colores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394

Selección de elementos en la ventana de documento. . . . . . . . . . . . 396

Utilización de Acercar y Alejar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

Utilización del panel Historial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

Automatización de tareas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401

Utilización de comportamientos de JavaScript para detectar

navegadores y plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

Vista previa y comprobación de páginas en los navegadores . . . . . 409

Configuración de las preferencias de tiempo de descarga y

tamaño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413

Capítulo 13: Inserción y formato de texto. . . . . . . . . . . . . . . . . . . 415

Aplicación de formato a texto en Dreamweaver . . . . . . . . . . . . . . . . . .415

Inserción de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Aplicación de formato a párrafos y a la estructura de la página. . . . 432

Aplicación de formato al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Utilización de hojas de estilos en cascada para aplicar

formato al texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Comprobación de la ortografía . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456

Cómo buscar y reemplazar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457

Capítulo 14: Inserción de imágenes . . . . . . . . . . . . . . . . . . . . . . 459

Imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459

Inserción de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Cambio del tamaño de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

Recorte de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468

Optimización de una imagen mediante Fireworks . . . . . . . . . . . . . . . 469

Ajuste del brillo y del contraste de una imagen . . . . . . . . . . . . . . . . . . 470

Perfilado de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Creación de una imagen de sustitución. . . . . . . . . . . . . . . . . . . . . . . . . . 471

Utilización de un editor de imágenes externo . . . . . . . . . . . . . . . . . . . 472

Aplicación de comportamientos a imágenes . . . . . . . . . . . . . . . . . . . . 473

Contenido 7

Capítulo 15: Establecimiento de vínculos y navegación. . . . . . 475

Aspectos básicos de ubicación y rutas de documentos . . . . . . . . . . .476

Menús de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479

Barras de navegación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480

Mapas de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481

Creación de vínculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .482

Administración de vínculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494

Inserción de menús de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499

Utilización de las barras de navegación . . . . . . . . . . . . . . . . . . . . . . . . . 501

Utilización de los mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . 503

Cómo adjuntar comportamientos JavaScript a vínculos . . . . . . . . . 506

Comprobación de vínculos rotos, externos y huérfanos . . . . . . . . . . 506

Reparación de vínculos rotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

Apertura de documentos vinculados en Dreamweaver . . . . . . . . . . . 510

Capítulo 16: Utilización con otras aplicaciones. . . . . . . . . . . . . . 511

Integración de Fireworks y Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512

Optimización del entorno de trabajo para Fireworks y Flash. . . . . . . 512

Utilización de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513

Utilización de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527

Capítulo 17: Adición de audio, vídeo y elementos

interactivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531

Archivos multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .532

Inserción y edición de objetos multimedia . . . . . . . . . . . . . . . . . . . . . . .535

Inicio de un editor externo de archivos multimedia . . . . . . . . . . . . . . .537

Utilización de Design Notes con objetos multimedia . . . . . . . . . . . . 539

Inserción y modificación de un objeto de botón Flash . . . . . . . . . . . 540

Inserción de un objeto de texto Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 542

Inserción de contenido de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543

Descarga e instalación de elementos Flash . . . . . . . . . . . . . . . . . . . . 544

Inserción de elementos Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545

Edición de atributos de elementos Flash . . . . . . . . . . . . . . . . . . . . . . . 545

Inserción de documentos FlashPaper . . . . . . . . . . . . . . . . . . . . . . . . . .546

Inserción de contenido de Flash Video. . . . . . . . . . . . . . . . . . . . . . . . . .547

Inserción de películas Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551

Adición de vídeo (no Flash). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .552

Adición de sonido a una página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .552

Inserción de contenido de plug-in de Netscape Navigator . . . . . . . 554

Inserción de un control ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556

Inserción de un applet de Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556

8Contenido

Utilización de comportamientos para controlar elementos

multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557

Capítulo 18: Utilización de comportamientos JavaScript . . . . 559

Utilización del panel Comportamientos. . . . . . . . . . . . . . . . . . . . . . . . . 560

Eventos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .561

Aplicación de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562

Cómo adjuntar un comportamiento a un texto. . . . . . . . . . . . . . . . . . . 563

Cambio de un comportamiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564

Actualización de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . 565

Creación de nuevas acciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565

Descarga e instalación de comportamientos de terceros . . . . . . . . . 565

Utilización de las acciones de comportamiento incluidas

con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566

PARTE 5: UTILIZACIÓN DEL CÓDIGO DE LAS PÁGINAS

Capítulo 19: Configuración del entorno de codificación. . . . . . . 601

Visualización del código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .601

Utilización del espacio de trabajo orientado al codificador

(sólo en Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603

Configuración de las preferencias de codificación . . . . . . . . . . . . . . . 604

Personalización de los métodos abreviados de teclado . . . . . . . . . . 608

Cómo abrir archivos en la vista de código de forma

predeterminada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608

Configuración de las preferencias del validador . . . . . . . . . . . . . . . . . 609

Administración de bibliotecas de etiquetas . . . . . . . . . . . . . . . . . . . . . 609

Importación de etiquetas personalizadas a Dreamweaver . . . . . . . . .614

Utilización de un editor de HTML externo con Dreamweaver . . . . . . 617

Capítulo 20: Codificación en Dreamweaver . . . . . . . . . . . . . . . . 621

Codificación en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622

Escritura y edición de código. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .631

Búsqueda y reemplazo de etiquetas y atributos . . . . . . . . . . . . . . . . . 647

Cambios rápidos en una selección de código . . . . . . . . . . . . . . . . . . . 649

Utilización del material de consulta para lenguajes . . . . . . . . . . . . . . 650

Impresión del código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .651

Capítulo 21: Optimización y depuración del código . . . . . . . . . 653

Limpieza del código. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653

Contenido 9

Verificación de que las etiquetas y llaves están equilibradas. . . . . . .654

Comprobación de la compatibilidad con los navegadores. . . . . . . . .655

Validación de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

Creación de páginas compatibles con XHTML . . . . . . . . . . . . . . . . . 660

Utilización del depurador de ColdFusion (sólo Windows) . . . . . . . . . 661

Capítulo 22: Edición de código en la vista Diseño . . . . . . . . . . 663

Edición de código con el inspector de propiedades . . . . . . . . . . . . . .664

Cambio de atributos con el inspector de etiquetas . . . . . . . . . . . . . . .664

Edición de código con Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . .666

Edición de código con el selector de etiquetas. . . . . . . . . . . . . . . . . . .670

Edición de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671

Utilización de server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . .672

Utilización de comportamientos JavaScript . . . . . . . . . . . . . . . . . . . . .674

Visualización y edición del contenido de Head. . . . . . . . . . . . . . . . . . .674

PARTE 6: PREPARACIÓN PARA CREAR SITIOS DINÁMICOS

Capítulo 23: Configuración de una aplicación Web . . . . . . . . . .679

Lo que necesita para crear aplicaciones Web . . . . . . . . . . . . . . . . . . .679

Configuración de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680

Configuración de un servidor de aplicaciones. . . . . . . . . . . . . . . . . . . . 681

Creación de una carpeta raíz para la aplicación . . . . . . . . . . . . . . . . . .685

Definición de un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . .687

Conexión con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691

Capítulo 24: Conexiones de base de datos para

desarrolladores de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . 693

Conexión con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .693

Edición o eliminación de una conexión de base de datos . . . . . . . . .696

Capítulo 25: Conexiones de base de datos para

desarrolladores de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . .697

Conexión con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .697

Edición o eliminación de una conexión de base de datos . . . . . . . . . 701

Capítulo 26: Conexiones de base de datos para

desarrolladores de ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703

Conexiones de base de datos en ASP . . . . . . . . . . . . . . . . . . . . . . . . . .703

Creación de una conexión con DSN . . . . . . . . . . . . . . . . . . . . . . . . . . .706

10 Contenido

Creación de una conexión sin DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . .710

Conexión con una base de datos en un ISP . . . . . . . . . . . . . . . . . . . . . . 711

Edición o eliminación de una conexión de base de datos . . . . . . . . . .715

Capítulo 27: Conexiones de base de datos para

desarrolladores de JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 717

Conexiones de base de datos en JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . 717

Conexión con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .719

Conexión mediante un controlador ODBC. . . . . . . . . . . . . . . . . . . . . . .721

Edición o eliminación de una conexión de base de datos . . . . . . . . . 725

Capítulo 28: Conexiones de base de datos para

desarrolladores de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727

Conexión con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728

Edición o eliminación de una conexión de base de datos . . . . . . . . . 728

Capítulo 29: Solución de problemas de conexiones de

base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731

Solución de problemas relacionados con permisos . . . . . . . . . . . . . . . 731

Solución de problemas relacionados con mensajes de error

de Microsoft. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733

Solución de problemas relacionados con mensajes de error

de MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740

PARTE 7: CREACIÓN DE PÁGINAS DINÁMICAS

Capítulo 30: Optimización del espacio de trabajo para

desarrollo visual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743

Visualización de paneles de desarrollo de aplicaciones Web . . . . . 743

Visualización de la base de datos en Dreamweaver. . . . . . . . . . . . . . 746

Visualización de live data en la vista de Diseño . . . . . . . . . . . . . . . . . 747

Utilización de la vista de Diseño sin datos dinámicos . . . . . . . . . . . . 753

Vista previa de páginas dinámicas en un navegador . . . . . . . . . . . . . 754

Restricción de la información de base de datos que se

muestra en Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 755

Capítulo 31: Flujo de trabajo para el diseño de páginas

dinámicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757

Diseño de la página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757

Creación de una fuente de contenido dinámico . . . . . . . . . . . . . . . . . 758

Contenido 11

Adición de contenido dinámico a una página Web . . . . . . . . . . . . . . .760

Mejora de la funcionalidad de una página dinámica . . . . . . . . . . . . . . 761

Comprobación y depuración de la página . . . . . . . . . . . . . . . . . . . . . . .763

Capítulo 32: Obtención de datos para la página. . . . . . . . . . . . . 767

Utilización de una base de datos para almacenar contenido. . . . . . . 767

Recopilación de los datos enviados por los usuarios . . . . . . . . . . . . .769

Acceso a datos almacenados en variables de sesión . . . . . . . . . . . . . 774

Capítulo 33: Definición de fuentes de contenido dinámico. . . . 781

Fuentes de contenido dinámico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .782

Definición de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787

Definición de parámetros de URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .792

Definición de parámetros de formulario . . . . . . . . . . . . . . . . . . . . . . . . .793

Definición de variables de sesión. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .795

Definición de variables de aplicación para ASP y ColdFusion . . . . . 796

Utilización de una variable como fuente de datos para un

juego de registros ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797

Definición de variables de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . .798

Creación de un caché de las fuentes de contenido . . . . . . . . . . . . . . . 801

Cambio o eliminación de fuentes de contenido . . . . . . . . . . . . . . . . . 802

Copia de un juego de registros de una página a otra. . . . . . . . . . . . . 802

Capítulo 34: Adición de contenido dinámico a páginas

Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805

Adición de contenido dinámico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 806

Conversión de texto en contenido dinámico . . . . . . . . . . . . . . . . . . . . .807

Conversión de imágenes en contenido dinámico . . . . . . . . . . . . . . . 809

Conversión de atributos HTML en contenido dinámico . . . . . . . . . . 810

Conversión de parámetros de ActiveX, Flash y de otros

objetos en contenido dinámico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 813

Edición del contenido dinámico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814

Eliminación de contenido dinámico . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814

Creación de páginas dinámicas en un sitio de Contribute . . . . . . . . . 815

Capítulo 35: Visualización de registros de la base de datos . . . 817

Visualización de registros de la base de datos . . . . . . . . . . . . . . . . . . . 818

Utilización de formatos de datos predefinidos . . . . . . . . . . . . . . . . . . .825

Creación de vínculos de navegación por conjuntos de registros . . .827 Visualización y ocultación de registros según los resultados

del juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 830

12 Contenido

Visualización de varios resultados de juego de registros . . . . . . . . . .831

Creación de una tabla con un comportamiento del servidor

Repetir región . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 832

Creación de un contador de registros . . . . . . . . . . . . . . . . . . . . . . . . . . 834

Capítulo 36: Visualización de datos XML en páginas Web . . . 837

Utilización de XML y XSL en páginas Web . . . . . . . . . . . . . . . . . . . . . 837

Acerca de las transformaciones XSL en el lado del servidor . . . . . . 839

Acerca de las transformaciones XSL en el lado del cliente . . . . . . . 843

Acerca de los datos XML y elementos repetidos . . . . . . . . . . . . . . . . 846

Acerca de la obtención de la vista previa de datos XML. . . . . . . . . . 848

Realización de transformaciones XSL en el servidor. . . . . . . . . . . . . 850

Realización de transformaciones XSL en el cliente . . . . . . . . . . . . . . 866

Aplicación de estilos a fragmentos de XSLT . . . . . . . . . . . . . . . . . . . . 869

Solución de problemas de transformaciones XSL . . . . . . . . . . . . . . . 870

Capítulo 37: Utilización de servicios Web (sólo Windows) . . . . 871

Servicios Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 872

Configuración de generadores proxy para utilizarlos con

Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 877

Adición de un proxy de servicios Web utilizando la

descripción WSDL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 879

Adición de un servicio Web a una página . . . . . . . . . . . . . . . . . . . . . . . .881

Edición de la lista de sitios de servicios Web UDDI . . . . . . . . . . . . . . 883

Capítulo 38: Adición de comportamientos de servidor

personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 885

Comportamientos de servidor personalizados . . . . . . . . . . . . . . . . . . 885

Instalación de comportamientos de servidor de terceros . . . . . . . . . 897

Utilización del Creador de comportamientos de servidor . . . . . . . . . 898

Utilización de parámetros en comportamientos de servidor . . . . . . 902

Colocación de bloques de código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 902

Creación de un cuadro de diálogo para un comportamiento

de servidor personalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904

Edición y modificación de comportamientos de servidor . . . . . . . . . 907

Capítulo 39: Creación de formularios. . . . . . . . . . . . . . . . . . . . . . 911

Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .912

Creación de formularios HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .915

Inserción de objetos de formulario HTML. . . . . . . . . . . . . . . . . . . . . . . .918

Inserción de objetos de formulario HTML dinámicos. . . . . . . . . . . . . 923

Contenido 13

Validación de datos de formulario HTML . . . . . . . . . . . . . . . . . . . . . . .927

Cómo adjuntar comportamientos JavaScript a objetos de

formulario HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 929

Cómo adjuntar scripts personalizados a botones de

formulario HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 929

Creación de formularios HTML accesibles . . . . . . . . . . . . . . . . . . . . . 930

PARTE 8: DESARROLLO RÁPIDO DE APLICACIONES

Capítulo 40: Creación rápida de aplicaciones de

ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935

Desarrollo rápido de aplicaciones (todos los servidores). . . . . . . . . 935

Creación de formularios ColdFusion MX 7 . . . . . . . . . . . . . . . . . . . . . . 941

Creación de páginas maestra-detalle (ColdFusion). . . . . . . . . . . . . . 954

Creación de páginas de búsqueda/resultados (ColdFusion,

ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .963

Creación de una página de inserción de registro (todos los

servidores). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 971

Creación de páginas para actualizar un registro (ColdFusion) . . . . . 974

Creación de páginas para eliminar un registro (ColdFusion) . . . . . . .983

Utilización de procedimientos almacenados para modificar

bases de datos (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 993

Creación de páginas que restrinjan el acceso al sitio

(ColdFusion, ASP, JSP Y PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 995

Protección de una carpeta de su aplicación (ColdFusion) . . . . . . . .1007

Utilización de componentes de ColdFusion . . . . . . . . . . . . . . . . . . . .1008

Capítulo 41: Creación rápida de aplicaciones ASP.NET . . . . . 1017

Creación de formularios ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1017

Creación de controles Web Cuadrícula de datos y Lista de

datos de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1023

Creación de páginas Maestro-Detalle (ASP.NET) . . . . . . . . . . . . . .1028

Creación de una página de búsqueda en la base de datos

(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1036

Creación de una página de inserción de registro (ASP.NET) . . . . .1043

Creación de páginas para actualizar un registro (ASP.NET). . . . . .1044

Creación de páginas para eliminar un registro (ASP.NET) . . . . . . .1054

Utilización de procedimientos almacenados para modificar

bases de datos (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1064

Creación de páginas que restrinjan el acceso al sitio

(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1065

14 Contenido

Capítulo 42: Creación rápida de aplicaciones ASP y JSP . . .1067

Creación de páginas maestra-detalle (ASP y JSP) . . . . . . . . . . . . . 1067

Creación de páginas de búsqueda/resultados (ASP y JSP) . . . . . 1072

Creación de una página de inserción de registro (ASP y JSP) . . . 1072

Creación de páginas para actualizar un registro (ASP y JSP) . . . . 1072

Creación de páginas para eliminar un registro (ASP y JSP) . . . . . 1079

Creación de páginas con objetos de manipulación de datos

avanzados (ASP y JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1084

Creación de páginas que restrinjan el acceso al sitio (ASP y

JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1089

Utilización de JavaBeans (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1090

Capítulo 43: Creación rápida de aplicaciones PHP . . . . . . . . 1093

Creación de páginas maestra-detalle (PHP) . . . . . . . . . . . . . . . . . . . 1093

Creación de páginas de búsqueda/resultados (PHP) . . . . . . . . . . . . 1101

Creación de una página de inserción de registros (PHP) . . . . . . . . . 1101

Creación de páginas para actualizar un registro (PHP) . . . . . . . . . . . 1102

Creación de páginas para eliminar un registro (PHP) . . . . . . . . . . . . 1110

Creación de páginas que restrinjan el acceso al sitio (PHP). . . . . . . 1119

PARTE 9: APÉNDICES

Apéndice A: Guía de bases de datos para principiantes . . . . . 1123

Bases de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1123

Aspectos básicos del diseño de bases de datos. . . . . . . . . . . . . . . . . 1125

Aspectos básicos de las conexiones de bases de datos . . . . . . . . .1132

Apéndice B: Nociones básicas de SQL . . . . . . . . . . . . . . . . . . . 1139

Aspectos básicos de la sintaxis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1139

Definición de las columnas en un juego de registros . . . . . . . . . . . . . 1141

Limitación de los registros en un juego de registros. . . . . . . . . . . . . . 1142

Clasificación de los registros en un juego de registros. . . . . . . . . . . . 1146

Unión de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1146

Índice alfabético. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1149

Contenido 15

16 Contenido

PARTE 1

Aspectos básicos de Dreamweaver

Aprenda a utilizar la documentación y otros recursos de Macromedia Dreamweaver 8 y configure el espacio de trabajo de Dreamweaver de acuerdo con su método de trabajo. Posteriormente, planifique y configure un sitio y comience a crear páginas.

Esta parte contiene los siguientes capítulos:

Introducción. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Capítulo 1: Exploración del espacio de trabajo. . . . . . . . . . . . . . . . . 41

Capítulo 2: Configuración de un sitio de Dreamweaver. . . . . . . . . 87

Capítulo 3: Cómo crear y abrir documentos. . . . . . . . . . . . . . . . . . 101

Introducción

Dreamweaver 8 es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web.

Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, 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. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks o en otra aplicación de gráficos y su posterior importación directa a Dreamweaver, o bien añadir objetos Macromedia Flash.

Dreamweaver también ofrece un entorno de codificación con todas las funciones, que incluye herramientas para la edición de código (tales como coloreado de código y terminación automática de etiquetas) y material de referencia de lenguajes sobre hojas de estilos en cascada (CSS), JavaScript, y ColdFusion Markup Language (CFML), entre otros. La tecnología Roundtrip HTML de Macromedia importa los documentos con código manual HTML sin modificar el formato del código. Posteriormente, si lo desea, puede formatear el código con el estilo que prefiera.

Dreamweaver permite crear aplicaciones Web dinámicas basadas en bases de datos empleando tecnologías de servidor como CFML, ASP.NET, ASP, JSP y PHP.

Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar 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.

Este capítulo contiene las secciones siguientes:

Novedades de Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

Por dónde empezar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Flujo de trabajo de Dreamweaver para la creación de sitios Web. . . . . . . . . . . . . . . 28

Utilización de Dreamweaver con otras aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Dreamweaver y accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Guía de recursos de formación de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Convenciones tipográficas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

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

Novedades de Dreamweaver 8

Dreamweaver 8 incluye una gran variedad de funciones que mejoran el uso y ayudan a crear páginas, tanto si trabaja en el entorno de diseño como si lo hace en el entorno de codificación.

En primer lugar, Dreamweaver 8 ofrece soporte para las prácticas recomendadas y las normas de la industria, incluido el soporte para el uso avanzado de CSS, agregadores XML y RSS, y requisitos de accesibilidad.

Trabajo con las prácticas recomendadas:

Creación visual con datos XML

Nuevo panel CSS unificado El nuevo panel CSS unificado ofrece una ubicación

Acelere los procesos XML gracias a las potentes herramientas visuales que permiten integrar los agregadores en el flujo de trabajo y acabar con el misterio de la transformación de XML en HTML. Integre datos basados en XML, como los agregadores RSS, en páginas Web mediante un sencillo flujo de trabajo basado en arrastrar y soltar. Desplácese a la vista Código para personalizar la transformación gracias a sugerencias de codificación mejoradas para XML y XSLT. Para más información, consulte Capítulo 36, “Visualización de datos

XML en páginas Web”, en la página 837.

centralizada para aprender, conocer y trabajar de forma visual con los estilos CSS aplicados a las páginas. Todas las funciones CSS se consolidan en un solo juego de paneles y se mejoran para facilitar el trabajo con estilos CSS y aumentar su productividad. La nueva interfaz facilita la visualización de la cascada de estilos aplicados a un elemento concreto, de tal forma que la ubicación en la que se definen los atributos resulte fácilmente identificable. Es posible acelerar la edición gracias a una cuadrícula de propiedades. Para más información, consulte

“Utilización del panel Estilos CSS” en la página 445.

20 Introducción

Trabajo con las prácticas recomendadas:

Visualización de diseño CSS

Barra de herramientas Representación de estilos

Mejoras en el proceso CSS Compruebe cómo se representarán los diseños CSS complejos

Accesibilidad: compatibilidad con puntos de comprobación de las directrices del WCAG/W3C (prioridad 2)

WebDAV mejorado Gracias a WebDAV, ahora Dreamweaver 8 admite la

Aplique ayudas visuales en el tiempo de diseño para resaltar los bordes y el color de los diseños CSS. La aplicación de ayudas visuales descubre esquemas complejos de anidación y mejora la selección. Haga clic en el diseño CSS para obtener valiosa información sobre herramientas y poder comprender mejor los elementos que controlan el diseño. Véase Capítulo 7, “Diseño

de páginas con CSS”, en la página 221.

Visualice el contenido del mismo modo que lo verán los usuarios independientemente del mecanismo de publicación gracias a la nueva compatibilidad con tipos de medios CSS. Utilice la barra de herramientas Representación de estilos para cambiar a la vista Diseño y ver el aspecto que tendrá en versión impresa, en un dispositivo de mano o en pantalla. Véase “Barra

de herramientas Representación de estilos” en la página 52.

en la mayoría de los navegadores con mejoras importantes en la precisión de la vista Diseño. Dreamweaver es ahora totalmente compatible con las técnicas CSS más avanzadas, como el desbordamiento, los pseudoelementos y los elementos de formulario.

Además de la herramienta de evaluación de accesibilidad integrada para los puntos de comprobación de las directrices de la Sección 508 y el WCAG (prioridad 1), ahora Dreamweaver admite tanto CSS como accesibilidad con una herramienta de evaluación actualizada que incluye puntos de comprobación del WCAG (prioridad 2).

autenticación de texto implícita y SSL para la transferencia segura de archivos. Además, proporciona una conectividad mejorada con un mayor grupo de servidores. Véase “Utilización

de WebDAV para desproteger y proteger archivos” en la página 151.

Novedades de Dreamweaver 8 21

Consiga más en menos tiempo, optimizando el flujo de trabajo de los usuarios de manera que se reduzca el tiempo necesario para completar tareas comunes. Dreamweaver 8 reduce el tiempo empleado en las rutinas más pequeñas para poder dedicar más tiempo al diseño y al desarrollo de la vinculación entre los sitios Web y las aplicaciones.

Consiga más

Transferencia de archivos en segundo plano

Zoom Disfrute de un mayor control de sus diseños gracias a la

Guías Compare el diseño de las páginas con páginas de muestra (con

Barra de herramientas Codificación

Contraer código Céntrese únicamente en el código que desea visualizar y oculte

Diseños del espacio de trabajo

Continúe trabajando mientras Dreamweaver 8 carga los archivos en el servidor. Para más información, consulte

“Administración de las transferencias de archivos” en la página 160.

herramienta Zoom. Acérquese y analice una imagen o un trabajo con un diseño complejo de tablas anidadas. Aléjese para obtener la vista previa de la apariencia de las páginas. Para más información, consulte “Utilización de Acercar y Alejar” en

la página 398.

precisión de píxeles perfectos) y utilice las guías para realizar mediciones del diseño que tendrán las páginas. La respuesta visual le ayudará a medir las distancias con precisión y a realizar ajustes inteligentes. Para más información, consulte

“Utilización de guías” en la página 255.

La nueva barra de herramientas Codificación proporciona botones para las funciones de codificación más frecuentes en una barra alargada situada en uno de los laterales de la vista Código. Para más información, consulte “Inserción rápida de

código con la barra de herramientas Codificación” en la página 635.

o contraiga los bloques de código. Para más información, consulte “Contracción y ampliación de fragmentos de código”

en la página 641.

Personalice y guarde las configuraciones de su espacio de trabajo. Dreamweaver 8 se suministra con cuatro configuraciones distintas que se ajustan a las necesidades de los diseñadores y codificadores. Asimismo, es posible crear un espacio de trabajo personalizado. Para más información, consulte “Almacenamiento de diseños de espacio de trabajo

personalizados” en la página 81.

22 Introducción

Consiga más

Documentos en fichas para Mac

Nuevas páginas iniciales Los nuevos diseños le permiten crear sitios rápidamente.

Mejoras de sincronización y protección/desprotección de los sitios

Comparación de archivos Compare archivos rápidamente para detectar qué ha cambiado.

Pegado especial Gracias a las nuevas opciones de pegado de Dreamweaver, es

Referencias relativas al sitio Trabaje sin complicaciones con server-side includes en tiempo

Mejoras de edición de código

Las nuevas fichas de documentos de la ayuda de Mac simplifican la interfaz de usuario y facilitan la selección de documentos. Para más información, consulte “Visualización de

documentos en fichas (Macintosh)” en la página 80.

Administre los sitios con mayor fiabilidad y confianza. Las mejoras de sincronización de los sitios contribuyen a garantizar que se utiliza la versión más reciente del archivo. Evite sobrescribir accidentalmente el trabajo de otros usuarios gracias a las mejoras en las funciones de protección y desprotección. Para más información, consulte “Sincronización

de los archivos de los sitios local y remoto” en la página 161.

Puede comparar dos archivos locales, un archivo del equipo local y uno de un equipo remoto, o bien dos archivos de un equipo remoto. Utilice la herramienta de comparación de archivos de Dreamweaver que prefiera tanto en plataformas Macintosh como Windows. Para más información, consulte

“Comparación de archivos para detectar diferencias” en la página 125.

posible conservar todo el formato original creado en Microsoft Word, o bien simplemente pegar el texto. Para más información, consulte “Adición de texto a un documento” en

la página 428.

de diseño y en tiempo de ejecución con la seguridad de que las referencias son relativas a los sitios y no a los archivos locales. Para más información, consulte “Configuración de la ruta

relativa de vínculos nuevos” en la página 488.

Obtenga un mayor control sobre el modo en que Dreamweaver ofrece sugerencias de código y completa las etiquetas para que se ajusten a su estilo de codificación.

Novedades de Dreamweaver 8 23

Dreamweaver 8 apuesta por el aprendizaje y la utilización de las nuevas tecnologías y es compatible con PHP 5, Flash Video, ColdFusion MX 7 y el sistema Web Publishing System de Macromedia.

Integración con las últimas tecnologías y normas

Compatibilidad con ColdFusion MX 7

Compatibilidad con PHP 5 Aproveche la compatibilidad actualizada con PHP 5, que

Flash Video Inserte rápida y fácilmente un archivo de Flash Video en una

Sistema Web Publishing System de Macromedia: notificación y registro de eventos

Material de referencia de O'Reilly actualizado

La compatibilidad actualizada con ColdFusion MX 7 incluye nuevos comportamientos de servidor y sugerencias de código. Para que las sugerencias y la depuración del código coincidan con la versión correcta de ColdFusion, Dreamweaver detecta automáticamente la versión del servidor la primera vez que se conecta al sitio. La estrecha integración entre Dreamweaver y ColdFusion permite añadir y quitar bases de datos directamente desde el panel Bases de datos y visualizar sólo los componentes de ColdFusion definidos en el sitio actual. Para más información, consulte “Activación de las mejoras de

ColdFusion” en la página 942.

incluye comportamientos de servidor y sugerencias de código.

página Web. Para más información, consulte “Inserción de

contenido de Flash Video” en la página 547.

Realice un seguimiento de todo lo que sucede en su sitio. En Dreamweaver, los eventos notifican al servidor del sistema Web Publishing System de Macromedia para que se registren en el sistema WPS todos los cambios realizados en el sitio Web.

Consulte el nuevo contenido de referencia para XML, XSLT y XPath, y el contenido actualizado para ASP y JSP.

Por dónde empezar

La documentación de Dreamweaver contiene información para usuarios de distintos niveles. Para sacarle el máximo provecho a la documentación, comience leyendo las partes más adecuadas para su nivel.

Para más información sobre los recursos de Dreamweaver, consulte “Guía de recursos de

formación de Dreamweaver” en la página 35.

24 Introducción

Principiantes en el diseño Web

Si usted es un principiante en el diseño Web, esta sección le informará de las secciones de la documentación de Dreamweaver más adecuadas para su nivel.

Para principiantes en el diseño Web:

1. Primero lea los tutoriales del manual Primeros pasos con Dreamweaver.

2. En Utilización de Dreamweaver (Ayuda > Utilización de Dreamweaver), consulte Capítulo

1, “Exploración del espacio de trabajo”, en la página 41, Capítulo 2, “Configuración de un sitio de Dreamweaver”, en la página 87, Capítulo 4, “Administración de archivos”, en la página 113 y Capítulo 3, “Cómo crear y abrir documentos”, en la página 101.

3. Para aprender sobre el diseño de las páginas, véase el Capítulo 9, “Diseño de páginas en el

modo de diseño”, en la página 287.

4. Para obtener información sobre la aplicación de formato al texto y la inserción de imágenes

en las páginas, véase el Capítulo 13, “Inserción y formato de texto”, en la página 415 y el

Capítulo 14, “Inserción de imágenes”, en la página 459.

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, podrá continuar con el resto de los capítulos sobre páginas estáticas en el apartado Utilización de Dreamweaver. Es aconsejable que lea los capítulos de páginas dinámicas sólo cuando se haya familiarizado con la creación de páginas Web.

Diseñadores de sitios Web con experiencia

Si usted es un diseñador de sitios Web con experiencia, esta sección le informará de las secciones de la documentación de Dreamweaver más adecuadas para su nivel. Existen dos métodos distintos: uno para diseñadores sin experiencia en Dreamweaver y otro para diseñadores que están familiarizados con Dreamweaver pero que desean obtener más información sobre la creación de páginas dinámicas.

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

1. Primero lea los tutoriales del manual Primeros pasos con Dreamweaver.

2. En Utilización de Dreamweaver, consulte Capítulo 1, “Exploración del espacio de trabajo”,

en la página 41 para más información sobre la interfaz de usuario de Dreamweaver.

Por dónde empezar 25

3. Aunque probablemente ya conoce una buena parte del material del Capítulo 2,

“Configuración de un sitio de Dreamweaver”, en la página 87 y el Capítulo 4, “Administración de archivos”, en la página 113, debería hojear estos capítulos para ver

cómo se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones que tratan sobre la configuración de un sitio de Dreamweaver.

4. Para información útil y detallada sobre el uso de Dreamweaver para crear páginas HTML

básicas, consulte Capítulo 13, “Inserción y formato de texto”, en la página 415 y Capítulo

14, “Inserción de imágenes”, en la página 459.

5. Para información sobre la codificación en Dreamweaver, véase “Configuración del entorno

de codificación” en la página 601, “Codificación en Dreamweaver” en la página 621, “Optimización y depuración del código” en la página 653 y “Edición de código en la vista Diseño” en la página 663.

6. Lea la introducción que aparece al comienzo de los demás capítulos de Utilización de

Dreamweaver para determinar si le interesan los temas que se abordan en ellos.

Para diseñadores de sitios Web con experiencia, familiarizados con Dreamweaver, que deseen obtener información sobre la creación de páginas dinámicas:

1. Primero lea Apéndice A, “Aspectos básicos de las aplicaciones Web” y “Tutorial: Desarrollo

de una aplicación Web” en Primeros pasos con Dreamweaver.

2. En Utilización de Dreamweaver, consulte Capítulo 1, “Exploración del espacio de trabajo”,

en la página 41 para más información sobre la interfaz de usuario de Dreamweaver y, a

continuación, lea el apartado “Optimización del espacio de trabajo para desarrollo visual”

en la página 743.

3. Familiarícese con el flujo de trabajo de Dreamweaver en las páginas dinámicas leyendo

“Flujo de trabajo para el diseño de páginas dinámicas” en la página 757.

4. Configure un servidor Web y un servidor de aplicaciones. (Véase Capítulo 23,

“Configuración de una aplicación Web”, en la página 679.)

5. Conecte con una base de datos. (Véase “Conexión con una base de datos” en

la página 691.)

6. Lea la introducción que aparece al comienzo de cada uno de los capítulos de Utilización de

Dreamweaver para determinar si le interesan los temas que se abordan en ellos.

7. Si está interesado en la personalización manual de Dreamweaver, lea “Personalización de

Dreamweaver” en el Centro de soporte de Macromedia en www.macromedia.com/go/

customizing_dreamweaver_es. Si desea escribir extensiones para Dreamweaver, consulte

Ampliación de Dreamweaver.

26 Introducción

Usuarios con experiencia en codificación manual

Si usted es un usuario con experiencia en codificación manual, esta sección le informará de las secciones de la documentación de Dreamweaver más adecuadas para su nivel.

Para usuarios con experiencia en codificación manual:

1. En Utilización de Dreamweaver, consulte Capítulo 1, “Exploración del espacio de trabajo”,

en la página 41 para más información sobre la interfaz de usuario de Dreamweaver.

2. Aunque probablemente ya conoce una buena parte del material del Capítulo 2,

“Configuración de un sitio de Dreamweaver”, en la página 87 y el Capítulo 4, “Administración de archivos”, en la página 113, puede hojear estos capítulos para ver cómo

se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones sobre la configuración de un sitio de Dreamweaver.

3. Encontrará más información sobre codificación con Dreamweaver en Capítulo 19,

“Configuración del entorno de codificación”, en la página 601, Capítulo 20, “Codificación en Dreamweaver”, en la página 621, Capítulo 21, “Optimización y depuración del código”, en la página 653 y Capítulo 22, “Edición de código en la vista Diseño”, en la página 663.

4. Lea la introducción que aparece al comienzo de cada uno de los capítulos de Utilización de

Dreamweaver para determinar si le interesan los temas que se abordan en ellos.

Diseñadores de aplicaciones Web

Si es un diseñador de aplicaciones Web con experiencia, esta sección le informará de las secciones de la documentación de Dreamweaver más adecuadas para su nivel. Hay dos métodos distintos, dependiendo de si ha usado Dreamweaver con anterioridad.

Para los diseñadores de aplicaciones Web que no hayan utilizado Dreamweaver:

1. Comience con una lectura rápida de Primeros pasos con Dreamweaver para familiarizarse con

los aspectos básicos del uso de Dreamweaver.

2. En Utilización de Dreamweaver, consulte Capítulo 1, “Exploración del espacio de trabajo”,

en la página 41 para más información sobre la interfaz de usuario de Dreamweaver.

3. Aunque probablemente ya conoce una buena parte del material del Capítulo 2,

“Configuración de un sitio de Dreamweaver”, en la página 87 y el Capítulo 4, “Administración de archivos”, en la página 113, puede hojear estos capítulos para ver cómo

se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones sobre la configuración de un sitio de Dreamweaver.

Por dónde empezar 27

4. Configure un servidor Web y un servidor de aplicaciones utilizando Dreamweaver. (Véase

Capítulo 23, “Configuración de una aplicación Web”, en la página 679.)

5. Conecte con una base de datos. (Véase “Conexión con una base de datos” en

la página 691.)

6. Lea la introducción que aparece al comienzo de cada capítulo de Utilización de

Dreamweaver para determinar si le interesan los temas que se abordan en ellos.

Para diseñadores de aplicaciones Web con experiencia que hayan utilizado Dreamweaver:

1. Para empezar, consulte “Novedades de Dreamweaver 8” en la página 20.

2. En Utilización de Dreamweaver, consulte Capítulo 1, “Exploración del espacio de trabajo”,

en la página 41 para más información sobre la interfaz de usuario de Dreamweaver.

3. Si está interesado en la personalización manual de Dreamweaver, lea “Personalización de

Dreamweaver” en el Centro de soporte de Macromedia en www.macromedia.com/go/

customizing_dreamweaver_es. Si desea escribir extensiones para Dreamweaver, consulte

Ampliación de Dreamweaver.

Flujo de trabajo de Dreamweaver para la creación de sitios Web

Existen muchos métodos distintos para crear un sitio Web. El flujo de trabajo que se presenta en esta documentación comienza por la definición de la estrategia o la finalidad de un sitio. Si va a desarrollar aplicaciones Web, deberá configurar los servidores y las bases de datos necesarias. A continuación, debe diseñar el aspecto y el funcionamiento del sitio. Una vez que el diseño esté finalizado, debe crear el sitio y codificar las páginas, añadiendo el contenido y la interactividad; a continuación, vinculará las páginas y comprobará si el sitio funciona y si cumple los objetivos para los que ha sido diseñado. Además, si lo desea, puede incluir páginas dinámicas. Para terminar el ciclo, publicará el sitio en un servidor. Muchos ingenieros de desarrollo también programan operaciones de mantenimiento periódico para asegurarse de que el sitio continúa estando actualizado y operativo.

28 Introducción

Planificación del sitio

Planificar y organizar cuidadosamente el sitio desde el primer momento puede ayudar a ahorrar tiempo más adelante. La organización del sitio no sólo implica la determinación de los archivos que van a incluirse, sino que también requiere un examen de las necesidades del sitio, el perfil de la audiencia y sus objetivos. Además, deben tenerse en cuenta requisitos técnicos tales como el acceso de los usuarios, o limitaciones del navegador, los plug-ins o la descarga de archivos.

Una vez que haya organizado la información y determinado una estructura, podrá comenzar a crear el sitio.

■ Utilice el panel Archivos de Dreamweaver para establecer la estructura organizativa del

sitio. En el panel Archivos puede añadir, borrar y cambiar el nombre de los archivos y carpetas fácilmente con el fin de modificar la organización según resulte necesario. (Véase

Capítulo 2, “Configuración de un sitio de Dreamweaver”, en la página 87 y Capítulo 4, “Administración de archivos”, en la página 113.)

■ Puede empezar por crear páginas simples que más adelante convertirá en diseños más

complejos. Cree páginas vacías nuevas o páginas basadas en diseños predefinidos. (Véase

Capítulo 3, “Cómo crear y abrir documentos”, en la página 101.)

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

■ Configurar un sistema de forma que los miembros del equipo no puedan sobrescribir los

archivos. (Véase “Desprotección y protección de archivos” en la página 149.)

■ Utilizar Design Notes para comunicarse con los miembros del equipo Web. (Véase

“Almacenamiento de información sobre archivos en Design Notes” en la página 169.)

Administración de los archivos del sitio

Los paneles Archivos y Activos de Dreamweaver facilitan la administración de los archivos del sitio.

■ En el panel Archivos de Dreamweaver encontrará numerosas herramientas que le

ayudarán a administrar el sitio, transferir archivos desde y hacia un servidor remoto, configurar un proceso de desprotección/protección que evite que se sobrescriban archivos y sincronizar los archivos de los sitios local y remoto. (Véase “Administración de archivos”

en la página 113.)

■ El panel Activos permite organizar fácilmente los activos de un sitio. A continuación, se

pueden arrastrar directamente desde el panel Activos hasta un documento de Dreamweaver. (Véase Capítulo 5, “Administración de activos y bibliotecas”, en la página

179.)

Flujo de trabajo de Dreamweaver para la creación de sitios Web 29

■ Puede utilizar Dreamweaver para administrar diversos aspectos de sus sitios de Contribute.

(Véase Capítulo 6, “Administración de sitios de Contribute con Dreamweaver”, en

la página 203.)

Diseño de las páginas Web

Dreamweaver le ofrece flexibilidad para crear páginas de muestra y trabajar en el diseño definitivo de sus páginas. Elija el diseño más apropiado, o combine las opciones de diseño de Dreamweaver para definir el aspecto de su sitio.

■ Puede utilizar capas o estilos de posición CSS de Dreamweaver para crear su diseño.

(Véase Capítulo 7, “Diseño de páginas con CSS”, en la página 221.)

■ Las herramientas de tabla y el modo de diseño de Dreamweaver permiten diseñar

rápidamente páginas Web y, posteriormente, reorganizar la estructura de las páginas. (Véase Capítulo 8, “Presentación de contenido en tablas”, en la página 261 y Capítulo 9,

“Diseño de páginas en el modo de diseño”, en la página 287.)

■ Para mostrar varios documentos de forma simultánea en un navegador, pueden utilizarse

marcos para su organización. (Véase Capítulo 10, “Utilización de marcos”, en la página

309.)

■ Las plantillas de Dreamweaver le permiten aplicar fácilmente contenidos y diseños de

página reutilizables a su sitio. Puede crear páginas nuevas basadas en una plantilla de Dreamweaver y actualizar su diseño de forma automática cuando cambie la plantilla. (Véase Capítulo 11, “Administración de plantillas”, en la página 331.)

Adición de contenido a las páginas

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.

■ Las funciones de creación de páginas de Dreamweaver le permiten especificar propiedades

de la página Web tales como títulos de página o imagen y color de fondo. Además, Dreamweaver le proporciona herramientas para optimizar el rendimiento de su sitio Web y probar las páginas, para asegurar la compatibilidad con distintos navegadores Web. (Véase Capítulo 12, “Utilización de páginas”, en la página 383.)

■ 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. También puede crear fácilmente sus propias CSS (Hojas de estilos en cascada, Cascading Style Sheets). (Véase Capítulo 13, “Inserción y formato de texto”, en

la página 415.)

30 Introducción

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

capas de Fireworks, y utilice las herramientas de alineación para situar las imágenes en la página. También puede cambiar el tamaño de las imágenes directamente en Dreamweaver. (Véase Capítulo 14, “Inserción de imágenes”, en la página 459 y Capítulo 16, “Utilización

con otras aplicaciones”, en la página 511.)

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

vínculos de correo electrónico, o establecer sistemas de navegación gráfica, como los menús de salto y las barras de navegación. (Véase Capítulo 15, “Establecimiento de

vínculos y navegación”, en la página 475.)

■ Inserte cualquier otro tipo de elementos multimedia en una página Web, como películas

Flash, Shockwave y QuickTime, sonido y applets. (Véase Capítulo 17, “Adición de audio,

vídeo y elementos interactivos”, en la página 531.)

■ Los comportamientos permiten realizar tareas en respuesta a eventos específicos 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. (Véase Capítulo 18, “Utilización de

comportamientos JavaScript”, en la página 559.)

Codificación manual

La codificación manual de páginas Web es otro método para crear las páginas. Dreamweaver ofrece sencillas herramientas de edición visual, pero también ofrece un entorno de codificación más sofisticado. Puede utilizar el método que prefiera, o una combinación de ambos, para crear y editar sus páginas.

■ Puede trabajar en un entorno de codificación sin herramientas visuales; las herramientas

de codificación le permiten crear y editar código, asignarle un formato y comprobar que se ajusta a determinadas normas. (Véase Capítulo 19, “Configuración del entorno de

codificación”, en la página 601, Capítulo 20, “Codificación en Dreamweaver”, en la página 621 y Capítulo 21, “Optimización y depuración del código”, en la página 653.)

■ También puede utilizar algunas herramientas de codificación de Dreamweaver en la vista

Diseño, el entorno de diseño visual. (Véase Capítulo 22, “Edición de código en la vista

Diseño”, en la página 663.)

Flujo de trabajo de Dreamweaver para la creación de sitios Web 31

Configuración de una aplicación Web

Muchos sitios Web contienen páginas dinámicas que permiten a los visitantes ver información almacenada en bases de datos, y normalmente algunos de ellos pueden añadir nueva información y editar información de estas bases de datos. Para crear este tipo de páginas, primero debe realizar una serie de pasos preliminares.

■ Configure un servidor Web y un servidor de aplicaciones y, a continuación, cree o

modifique un sitio de Dreamweaver. (Véase Capítulo 23, “Configuración de una

aplicación Web”, en la página 679.)

■ Conecte con una base de datos. (Véase “Conexión con una base de datos” en

la página 691).

Creación de páginas dinámicas

En Dreamweaver se pueden definir diversas fuentes de contenido dinámico, incluidos juegos de registros extraídos de bases de datos, parámetros de formularios y componentes JavaBeans. Para añadir el contenido dinámico a una página, basta con arrastrarlo a ella.

Puede definirse que los registros de la página aparezcan de uno en uno o en grupos, mostrar varias páginas de registros, añadir vínculos especiales para pasar de una página de registros a la siguiente (o a la anterior) y crear contadores para que los usuarios puedan llevar un control de los registros.

■ Si no está familiarizado con la creación de aplicaciones Web en Dreamweaver, aprenda

cómo utilizar Dreamweaver para crear páginas dinámicas. (Véase Capítulo 30,

“Optimización del espacio de trabajo para desarrollo visual”, en la página 743 y Capítulo 31, “Flujo de trabajo para el diseño de páginas dinámicas”, en la página 757.)

■ Defina y muestre el contenido dinámico de sus páginas. (Véase Capítulo 32, “Obtención

de datos para la página”, en la página 767, Capítulo 33, “Definición de fuentes de contenido dinámico”, en la página 781, Capítulo 34, “Adición de contenido dinámico a páginas Web”, en la página 805 y Capítulo 35, “Visualización de registros de la base de datos”, en la página 817.)

■ Puede incorporar la lógica de aplicaciones o empresarial mediante tecnologías

innovadoras, como los componentes ColdFusion de Macromedia y los servicios Web. (Véase “Utilización de componentes de ColdFusion” en la página 1008 y Capítulo 37,

“Utilización de servicios Web (sólo Windows)”, en la página 871.)

■ Si necesita más flexibilidad, puede crear sus propios comportamientos de servidor y

formularios interactivos. (Véase Capítulo 38, “Adición de comportamientos de servidor

personalizados”, en la página 885 y Capítulo 39, “Creación de formularios”, en la página

911.)

32 Introducción

Desarrollo rápido de aplicaciones

Dreamweaver ofrece algunas herramientas de desarrollo rápido de aplicaciones (RAD), como comportamientos de servidor y objetos de aplicaciones, que permiten crear sofisticadas aplicaciones Web sin necesidad de escribir el código del lado del servidor.

■ Cree con rapidez páginas que realicen búsquedas y modifiquen bases de datos, y muestren

los resultados. Proporcione seguridad mediante la limitación del acceso a las páginas. (Véase “Creación rápida de aplicaciones de ColdFusion” en la página 935, “Creación

rápida de aplicaciones ASP.NET” en la página 1017, “Creación rápida de aplicaciones ASP y JSP” en la página 1067 y “Creación rápida de aplicaciones PHP” en la página 1093.)

Utilización de Dreamweaver con otras aplicaciones

Dreamweaver facilita el proceso de diseño y desarrollo de páginas Web al permitirle trabajar con otras aplicaciones. Para 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, véanse los temas siguientes:

■ Para información sobre el uso de Dreamweaver con otros editores HTML, como

HomeSite o BBEdit, véase “Utilización de un editor de HTML externo con

Dreamweaver” en la página 617.

■ Puede especificar sus navegadores preferidos para previsualizar el sitio. (Véase “Vista previa

y comprobación de páginas en los navegadores” en la página 409.)

■ Puede iniciar un editor de imágenes externo, como Macromedia Fireworks o Adobe

Photoshop, desde Dreamweaver. (Véase “Utilización de un editor de imágenes externo” en

la página 472.)

■ Puede configurar Dreamweaver para que inicie un editor distinto para cada tipo de

archivo. (Véase “Inicio de un editor externo de archivos multimedia” en la página 537.)

■ Para más información sobre cómo añadir interactividad al sitio mediante películas

Macromedia Flash, véase “Inserción y modificación de un objeto de botón Flash” en

la página 540, “Inserción de un objeto de texto Flash” en la página 542 o “Descarga e instalación de elementos Flash” en la página 544.

■ Para información sobre el uso de ColdFusion, consulte Utilización de ColdFusion (Ayuda >

Utilización de ColdFusion).

Utilización de Dreamweaver con otras aplicaciones 33

Dreamweaver y accesibilidad

La accesibilidad designa la capacidad de crear sitios y productos Web que puedan utilizar aquellas personas con discapacidades visuales, auditivas, motoras u otras. Entre los ejemplos de funciones de accesibilidad para productos de software y sitios Web podemos citar la compatibilidad con lectores de pantalla, los equivalentes textuales para gráficos, los accesos directos del teclado y el uso de colores de pantalla con alto contraste, entre otros.

NOTA

Para más información acerca de dos iniciativas importantes de accesibilidad, consulte la Iniciativa de Accesibilidad para la Web del World Wide Web Consortium (www.w3.org/

wai) y la Sección 508 de la Ley federal de inserción (Federal Rehabilitation Act)

(www.section508.gov).

Dreamweaver contiene herramientas que dotan al producto de accesibilidad y herramientas que le ayudan a crear contenido accesible:

Utilización de las funciones de accesibilidad de Dreamweaver Para diseñadores Web

usuarios de Dreamweaver que necesiten utilizar funciones de accesibilidad, Dreamweaver ofrece lectores de pantalla, navegación mediante el teclado y funciones de accesibilidad del sistema operativo.

Para más información, consulte “Utilización de las funciones de accesibilidad de

Dreamweaver” en la página 70.

Creación de sitios Web accesibles Para diseñadores Web usuarios de Dreamweaver que

necesiten crear contenido accesible, Dreamweaver ayuda a crear páginas accesibles que incluyen contenido útil para lectores de pantalla y que cumplen las directrices gubernamentales.

Dreamweaver proporciona cuadros de diálogo que le permiten introducir atributos de accesibilidad al insertar elementos de página (véase “Optimización del espacio de trabajo para

el diseño de páginas accesibles” en la página 76). Por ejemplo, el cuadro de diálogo para la

accesibilidad de imágenes le recuerda que añada texto equivalente para los gráficos. De esta forma, cuando la imagen aparezca en una página para un usuario con discapacidades visuales, el lector de pantalla leerá la descripción de la imagen.

34 Introducción

Dreamweaver también incluye páginas Web de muestra pensadas con fines de accesibilidad (véase “Creación de un documento basado en un archivo de diseño de Dreamweaver” en

la página 103) y un informe de accesibilidad que puede ejecutar para probar si sus páginas o

sitios siguen las directrices de accesibilidad de la Sección 508 (véase “Comprobación del sitio”

en la página 173).

NOTA

Recuerde que ninguna herramienta de creación puede automatizar el proceso de desarrollo. Para diseñar sitios Web accesibles deberá comprender cuáles son los requisitos de accesibilidad y tomar numerosas decisiones subjetivas sobre cómo los usuarios con discapacidades interactúan con las páginas Web. La mejor forma de garantizar que un sitio Web es accesible consiste en realizar una planificación, un desarrollo, una comprobación y una evaluación deliberadas.

Función de validación de la accesibilidad de Dreamweaver

La función de validación de la accesibilidad de Dreamweaver utiliza tecnología de UsableNet. UsableNet es una empresa líder en el desarrollo de software fácil de utilizar para automatizar la comprobación y la reparación de problemas de usabilidad y accesibilidad. Para obtener más ayuda con la comprobación de la accesibilidad, pruebe LIFT for Macromedia Dreamweaver de UsableNet, una solución completa para desarrollar sitios Web utilizables y accesibles. LIFT for Macromedia Dreamweaver de UsableNet incluye asistentes para tablas, formularios e imágenes complejas, un editor de ALT global, informes personalizables y un nuevo modo de supervisión activo que asegura la accesibilidad al contenido a medida que se escriben las páginas. Solicite una versión de demostración de LIFT for Macromedia Dreamweaver en

www.usablenet.com

Guía de recursos de formación de Dreamweaver

Dreamweaver incluye diversos medios para ayudarle a aprender rápidamente el funcionamiento del programa y a dominar la creación de páginas Web. El sistema de Ayuda de Dreamweaver contiene diversos documentos que le ayudarán a aprender a utilizar Dreamweaver, Dreamweaver Extensibility y ColdFusion. También hay recursos en línea adicionales que puede consultar para crear páginas Web.

Guía de recursos de formación de Dreamweaver 35

Acceso a la documentación de Dreamweaver

En la siguiente tabla se resume la documentación que contiene el sistema de Ayuda de Dreamweaver.

Puede comprar versiones impresas de títulos específicos. Para más información, consulte

www.macromedia.com/go/buy_books (en inglés).

Título Descripción/

Audiencia

Primeros pasos con Dreamweaver

Utilización de Dreamweaver

Ampliación de Dreamweaver

Le ofrece una introducción básica a los conceptos de Dreamweaver y a la interfaz, con detallados tutoriales para principiantes. Dirigido a usuarios principiantes, y también para usuarios con nivel intermedio y avanzado que quieran conocer las nuevas funciones.

Información completa sobre todas las funciones de Dreamweaver. Dirigida a todos los usuarios de Dreamweaver.

Describe el marco de trabajo de Dreamweaver y la interfaz de programación de la aplicación (API). Destinado a usuarios avanzados que quieren crear extensiones o personalizar la interfaz de Dreamweaver.

Dónde encontrarlo

• Ver en Dreamweaver: Seleccione Ayuda > Primeros pasos con Dreamweaver

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_dreamweaver_es/

• Descargar el PDF:

www.macromedia.com/go/ dw_documentation_es

• Ver en Dreamweaver: Seleccione Ayuda > Ayuda de Dreamweaver o Ayuda > Utilización de Dreamweaver

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_dreamweaver_es/

• Descargar el PDF:

www.macromedia.com/go/ dw_documentation_es

• Ver en Dreamweaver: Seleccione Ayuda > Ampliación de Dreamweaver

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_dreamweaver_es/

• Descargar el PDF:

www.macromedia.com/go/ dw_documentation_es

36 Introducción

Título Descripción/

Audiencia

Referencia API de Dreamweaver

Utilización de ColdFusion

Referencia Contiene muchos tipos

Describe la utilidad API y el JavaScript API, que le permiten realizar diversas tareas de apoyo al desarrollar extensiones de Dreamweaver. Destinado a usuarios avanzados que quieren crear extensiones o personalizar la interfaz de Dreamweaver.

Contiene una selección de los libros más importantes con documentación sobre ColdFusion. (La lista completa está disponible en LiveDocs.) Dirigido a todo aquel que esté interesado en ColdFusion, desde principiantes hasta desarrolladores avanzados.

de manual de referencia sobre HTML, modelos de servidores y otros temas, casi todos publicados por O’Reilly. Destinado a todo aquel que necesite más información sobre sintaxis de códigos, conceptos, etc.

Dónde encontrarlo

• Ver en Dreamweaver: Seleccione Ayuda > Referencia API de Dreamweaver

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_dreamweaver_es/

• Descargar el PDF:

www.macromedia.com/go/ dw_documentation_es

• Ver en Dreamweaver: Seleccione Ayuda > Utilización de ColdFusion

• Ver en línea: http://

livedocs.macromedia.com/go/ livedocs_coldfusion/

• Descargar el PDF:

www.macromedia.com/go/ cf_documentation

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

Guía de recursos de formación de Dreamweaver 37

Acceso a recursos en línea adicionales de Dreamweaver

En la siguiente tabla se resumen los recursos en línea adicionales para el aprendizaje de Dreamweaver.

Recurso Descripción/

Audiencia

Centro de soporte de Dreamweaver

Centro de desarrollo de Dreamweaver

Centro de recursos de documentación de Dreamweaver

Foros en línea de Macromedia

Formación de Macromedia

Notas técnicas, soporte e información sobre la resolución de problemas para usuarios de Dreamweaver.

Artículos y tutoriales que le ayudarán a mejorar sus conocimientos y a adquirir otros nuevos.

Manuales del producto en formato PDF, fe de errores, tutoriales y notas de la versión.

Debates e información sobre resolución de problemas proporcionada por usuarios de Dreamweaver, representantes del servicio técnico y el equipo de desarrollo de Dreamweaver.

Cursos que ofrecen ejercicios prácticos y situaciones del mundo real.

Dónde encontrarlo

www.macromedia.com/go/ dreamweaver_support_es

www.macromedia.com/go/ developer_dw_es

www.macromedia.com/go/ dw_documentation_es

www.macromedia.com/go/ dreamweaver_newsgroup

www.macromedia.com/go/ dreamweaver_training_es

Para sacar el máximo provecho de los recursos de Dreamweaver, consulte “Por dónde

empezar” en la página 24.

38 Introducción

Convenciones tipográficas

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

■ Los elementos de los menús se muestran en este formato: nombre del menú > nombre del

elemento del menú. Los elementos de los submenús se muestran en este formato: nombre del menú > nombre del submenú > nombre del elemento del menú.

■ La fuente de código indica nombres de etiquetas y atributos HTML, así como el texto

literal empleado en los ejemplos.

■ La fuente de código en cursiva indica elementos reemplazables (también

denominados metasímbolos) en el código.

■ El texto Roman en negrita permite distinguir el texto que debe introducirse literalmente.

Para una lista completa de recursos de Dreamweaver, véase “Guía de recursos de formación de

Dreamweaver” en la página 35.

Recursos tecnológicos HTML y Web

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

NOTA

Para obtener una lista de recursos de Dreamweaver, véase “Guía de recursos de

formación de Dreamweaver” en la página 35.

La especificación de hojas de estilos en cascada de nivel 1 (CSS1) (www.w3.org/TR/

REC-CSS1) y

especificaciones oficiales para hojas de estilos del World Wide Web Consortium.

La especificación HTML 4.01 (www.w3.org/TR/REC-html40/) es la especificación oficial

de HTML del World Wide Web Consortium.

Index DOT HTML (www.blooberry.com/indexdot/html/) es una amplia lista de etiquetas,

atributos y valores HTML, así como su compatibilidad con distintos navegadores.

La especificación XHTML 1.0 (www.w3.org/TR/xhtml1/) es la especificación oficial para

XHTML (Lenguaje de formato de hipertexto ampliable).

El sitio de O’Reilly XML.com (www.xml.com/) proporciona información, tutoriales y

sugerencias sobre XML (Lenguaje de formato ampliable) y sobre otras tecnologías Web.

El sitio de xFront (www.xfront.com/rescuing-xslt.html) ofrece una introducción a las

transformaciones XSL para nuevos usuarios.

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

dnasp/html/ASPover.asp) proporcionan información sobre Active Server Pages (ASP).

la especificación de nivel 2 (CSS2) (www.w3.org/TR/REC-CSS2/) son las

Recursos tecnológicos HTML y Web 39

La página de Microsoft ASP.NET (http://msdn.microsoft.com/asp.net/) proporciona

información sobre ASP.NET.

La página Sun JSP (http://java.sun.com/products/jsp/) proporciona información sobre

JavaServer Pages (JSP).

El sitio Web de PHP (www.php.net/) proporciona información sobre PHP. El sitio Web de MySQL (www.mysql.com/) proporciona información sobre MySQL. La tabla de entidades (www.bbsinc.com/iso8859.html) ofrece una relación de los nombres

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

La página del producto Macromedia ColdFusion (www.macromedia.com/go/coldfusion/)

proporciona información sobre ColdFusion.

La página del producto Macromedia JRun Server (www.macromedia.com/go/jrun/) ofrece

información sobre el servidor de aplicaciones JRun Java.

Web Services Demystified (www.sitepoint.com/article/692) explica qué son y qué hacen los

servicios Web.

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

el lenguaje JavaScript 1.2.

JavaScript: El manual JavaScript Definitive Guide, escrito por David Flanagan (O’Reilly

& Associates), proporciona información sobre todas las funciones, objetos, métodos, propiedades y manejadores de eventos JavaScript.

El Índice de recursos CGI(www.cgi-resources.com/) es una base de datos sobre todos los

aspectos relativos a CGI, como scripts listos para ser utilizados, documentación, libros e incluso contratación de programadores.

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

introducción a CGI.

40 Introducción

CAPÍTULO 1

Exploración del espacio de trabajo

Para sacar el máximo provecho de Macromedia Dreamweaver 8, 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 establecer las preferencias que mejor se adapten a su forma de trabajar.

Este capítulo contiene las siguientes secciones:

Espacio de trabajo de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Utilización de la ventana de documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Utilización de barras de herramientas, inspectores y menús contextuales . . . . . . . 58

Utilización de paneles y grupos de paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Utilización de las funciones de accesibilidad de Dreamweaver . . . . . . . . . . . . . . . . . 70

Optimización del espacio de trabajo para el diseño de páginas accesibles . . . . . . 76

Utilización de guías visuales en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Aspectos básicos de personalización de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 78

Temas relacionados

■ “Optimización del espacio de trabajo para desarrollo visual” en la página 743

Espacio de trabajo de Dreamweaver

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente.

Diseño del espacio de trabajo

En Windows, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño.

arra Insertar

Barra de herramientas de documento

Ventana de documento

Grupos de paneles

Panel ArchivosInspector de propiedadesSelector de etiquetas

NOTA

El espacio de trabajo de Windows también dispone de la opción Codificador, que acopla los grupos de paneles en la parte izquierda y muestra la ventana de documento en la vista Código de forma predeterminada. Para más información, consulte “Utilización del

espacio de trabajo orientado al codificador (sólo en Windows)” en la página 603. Para

utilizar esta opción, véase “Selección del diseño del espacio de trabajo (sólo en

Windows)” en la página 79.

42 Exploración del espacio de trabajo

En Macintosh, Dreamweaver puede mostrar varios documentos en una sola ventana con fichas que identifican a cada uno de ellos. Dreamweaver también puede mostrar un espacio de trabajo flotante en el que cada documento aparece en su propia ventana individual. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en sus propias ventanas. Las ventanas se ajustan automáticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamaño.

Barra Insertar

Selector de etiquetas

Barra de herramientas de documento

Ventana de documento

Inspector de propiedades

Grupos de paneles

Panel Archivos

Puede alternar entre diferentes diseños tanto en Windows como en Macintosh. Para más información, consulte “Selección del diseño del espacio de trabajo (sólo en Windows)” en

la página 79 y “Visualización de documentos en fichas (Macintosh)” en la página 80.

Espacio de trabajo de Dreamweaver 43

Temas relacionados

■ “Elementos del espacio de trabajo de Dreamweaver” en la página 44

■ “Utilización de barras de herramientas, inspectores y menús contextuales” en la página 58

■ “Utilización de paneles y grupos de paneles” en la página 66.

Elementos del espacio de trabajo de Dreamweaver

En esta sección se describen brevemente algunos elementos del espacio de trabajo de Dreamweaver.

NOTA

Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir paneles, inspectores y ventanas de Dreamweaver, utilice el menú Ventana. Si no encuentra un panel, un inspector o una ventana que haya marcado como abierto, seleccione Ventana > Organizar paneles para disponer ordenadamente todos los paneles abiertos.

página de inicio permite abrir un documento reciente o crear un documento nuevo.

Desde la página de inicio también puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un tutorial del producto.

barra Insertar contiene botones para la inserción de diversos tipos de “objeto”, como

imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la barra Insertar.

barra de herramientas de documento contiene botones que proporcionan opciones para

diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.

La barra de herramientas Estándar (que no aparece en el diseño de espacio de trabajo

predeterminado) contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Estándar.

La barra de herramientas Codificación (se muestra únicamente en la vista Código) contiene

botones con los que es posible realizar muchas operaciones de codificación habituales.

La barra de herramientas Representación de estilos (oculta de manera predeterminada)

contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de soportes si utilizase hojas de estilos dependientes de los medios. También contiene un botón con el que es posible activar o desactivar los estilos CSS.

44 Exploración del espacio de trabajo

La ventana de documento muestra el documento actual mientras lo está creando y editando.

inspector de propiedades le permite ver y cambiar diversas propiedades del objeto o texto

seleccionado. Cada tipo de objeto tiene diferentes propiedades. El inspector de propiedades no está ampliado de forma predeterminada en el diseño del espacio de trabajo del codificador.

selector de etiquetas, que aparece en la barra de estado en la parte inferior de la ventana

de documento, muestra la jerarquía de etiquetas que rodean a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.

Los

grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado

común. Para ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrastre el punto de sujeción situado en el borde izquierdo de la barra de título del grupo.

panel de archivos permite gestionar los archivos y las carpetas, tanto si forman parte de un

sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel de archivos también proporciona una vista de todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows) o en el Finder (Macintosh).

Temas relacionados

■ “Utilización de la ventana de documento” en la página 54

■ “Utilización de barras de herramientas, inspectores y menús contextuales” en la página 58

■ “Utilización de paneles y grupos de paneles” en la página 66

■ “Administración de archivos y carpetas en el panel Archivos” en la página 132

Ventana de documento

La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes:

vista Diseño es un entorno de diseño para el diseño visual de la página, la edición visual y

el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador. Puede configurar la vista de diseño para que muestre el contenido dinámico mientras trabaja en el documento (véase “Visualización de live data en la vista de Diseño” en la página 747).

vista Código es un entorno de codificación manual para escribir y editar código HTML,

JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código. Para más información, consulte Capítulo 20,

“Codificación en Dreamweaver”, en la página 621.

Es posible ver el mismo documento en las dos vistas, documento.

Código y Diseño, en una sola ventana de

Espacio de trabajo de Dreamweaver 45

Cuando la ventana de documento tiene una barra de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios que aún no se han guardado, después del nombre del archivo Dreamweaver incluye un asterisco.

Cuando se maximiza la ventana de documento en el diseño integrado de espacio de trabajo (sólo Windows), no aparece la barra de título; en este caso, el título de la página y el nombre y la ruta del archivo aparecen en la barra de título de la ventana principal del espacio de trabajo.

Cuando una ventana de documento está maximizada, aparecen fichas en la parte superior de la misma con los nombres de archivo de todos los documentos abiertos. Para cambiar a un documento, haga clic en su ficha.

Temas relacionados

■ “Utilización de la ventana de documento” en la página 54

Barra de herramientas Documento

La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño.

La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.

Mostrar vista de código

Mostrar vistas de código y diseño

Mostrar vista de diseño

Depuración del servidor

Título del documento

46 Exploración del espacio de trabajo

No hay errores de comprobación de navegador

Validar formato

Administración de archivos

Ayudas visuales

Ver opciones

Actualizar vista de diseño

Vista previa/Depurar en explorador

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

Mostrar vista de código sólo muestra la vista Código en la ventana de documento. Mostrar vistas de código y diseño muestra la vista Código en una parte de la ventana de

documento y la vista Diseño en la otra parte. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.

Mostrar vista de diseño sólo muestra la vista Diseño en la ventana de documento. Depuración del servidor muestra un informe que le ayudará a depurar la página de

ColdFusion actual. El informe contiene los errores de la página, si los hay.

Título del documento permite introducir un título para el documento, que aparecerá en la

barra de título del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo.

No hay errores de comprobación de navegador permite comprobar la compatibilidad con

distintos navegadores.

Validar formato permite validar el documento actual o una etiqueta seleccionada. Administración de archivos muestra el menú emergente Administración de archivos. Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo

en un navegador. Seleccione un navegador en el menú emergente.

Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios en la vista Código.

Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.

Ver opciones permite definir las opciones de las vistas Código y Diseño, y establecer qué vista

va a aparecer en la parte superior de la ventana. Las opciones del menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas. Para información sobre las opciones de la vista Código, véase “Configuración de las preferencias de codificación” en la página 604. Para información sobre las opciones de la vista de diseño, véase “Selección de elementos en la

ventana de documento” en la página 396, “Visualización y edición del contenido de Head” en la página 674 y “Utilización de guías visuales en Dreamweaver” en la página 78.

Ayudas visuales permite utilizar distintas ayudas visuales para el diseño de las páginas.

Temas relacionados

■ “Visualización de barras de herramientas” en la página 58

Espacio de trabajo de Dreamweaver 47

Barra de herramientas Estándar

La barra de herramientas Estándar contiene botones para las operaciones más habituales de los menús Archivo y Edición. Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se utilizan del mismo modo que los comandos de menú equivalentes.

Para más información sobre operaciones como Abrir y Guardar, consulte Capítulo 3, “Cómo

crear y abrir documentos”, en la página 101.

Temas relacionados

■ “Visualización de barras de herramientas” en la página 58

Barra de estado

La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.

Tamaño del documento y tiempo de descarga estimado

Selector de etiquetas

Zoom, herramienta

Mano, herramienta

Herramienta Seleccionar

Menú emergente Tamaño de ventana

Establecer nivel de aumento

El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga

<body> para seleccionar todo el cuerpo del documento. Para definir los atributos

clic en

class o id para una etiqueta en el selector de etiquetas, haga clic con el botón de derecho del

ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase o un ID del menú contextual.

La herramienta Mano permite hacer clic en el documento y arrastrarlo hasta la ventana de documento. Haga clic en la herramienta Seleccionar para desactivar la herramienta Mano.

La herramienta Zoom y el menú emergente Establecer nivel de aumento permiten establecer el nivel de ampliación del documento. Para más información, consulte “Utilización de Acercar

y Alejar” en la página 398.

48 Exploración del espacio de trabajo

El menú emergente Tamaño de ventana (que sólo aparece en la vista Diseño) permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. Para más información, consulte “Cambio del tamaño de la ventana de

documento” en la página 56.

A la derecha del menú emergente Tamaño de ventana aparecen 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. Para más información, consulte “Configuración

de las preferencias de tiempo de descarga y tamaño” en la página 413.

Temas relacionados

■ “Configuración de las preferencias de la barra de estado” en la página 57

Barra Insertar

La barra Insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre del botón.

Los botones están organizados en categorías, a las que puede cambiar en la parte izquierda de la barra Insertar. Si el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también otras categorías. Cuando se inicia Dreamweaver, se abre la última categoría con la que ha trabajado.

NOTA

Si prefiere ver las categorías como fichas en la parte superior de la barra Insertar, puede cambiar el diseño de dicha barra (véase “Configuración de las preferencias de fuentes

para la visualización de Dreamweaver” en la página 83).

Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de imagen en el menú emergente del botón Imagen, la siguiente vez que haga clic en el botón Imagen, Dreamweaver insertará un marcador de posición de imagen. Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón.

La barra Insertar está organizada en las categorías siguientes: La

categoría Común permite crear e insertar los objetos que se utilizan con más frecuencia,

como las imágenes y las tablas.

Espacio de trabajo de Dreamweaver 49

La categoría Diseño permite insertar tablas, etiquetas div, capas y marcos. También puede elegir entre las tres vistas de las tablas: Estándar (valor predeterminado), Tablas expandidas y Diseño. Si se selecciona el modo de diseño, se pueden utilizar las herramientas de diseño de Dreamweaver: Dibujar celda de diseño y Dibujar tabla de diseño.

categoría Formularios contiene botones que permiten crear formularios e insertar

elementos de formulario. La

categoría Texto permite insertar diversas etiquetas de formato de texto y listas, como b,

em, p, h1 y ul.

categoría HTML permite insertar etiquetas HTML para las reglas horizontales, el

contenido de la sección head, las tablas, los marcos y los scripts. Las

categorías de código de servidor sólo están disponibles para las páginas que emplean un

lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada una de estas categorías contiene objetos de código de servidor que pueden insertarse en la vista Código.

categoría Aplicación permite insertar elementos dinámicos como juegos de registros,

regiones repetidas y grabar formularios de inserción y actualización.

La categoría Elementos Flash permite insertar elementos de Macromedia Flash.

categoría Favoritos le permite agrupar y organizar los botones de la barra Insertar que

utiliza con más frecuencia en un lugar común. Se puede modificar cualquier objeto de la barra Insertar o crear objetos nuevos (véase

“Personalización de Dreamweaver” en el Centro de soporte de Macromedia Dreamweaver en

www.macromedia.com/go/customizing_dreamweaver_es).

Temas relacionados

■ “Utilización de la barra Insertar” en la página 59

50 Exploración del espacio de trabajo

Barra de herramientas Codificación

La barra de herramientas Codificación contiene botones que le permiten realizar numerosas operaciones de codificación estándar, como ampliar y contraer las selecciones de código, resaltar código no válido, insertar o eliminar comentarios, aplicar sangría al código e insertar fragmentos de código utilizados recientemente. La barra de herramientas Codificación sólo está visible en la vista Código y aparece verticalmente en el lado izquierdo de la ventana de documento.

No puede desacoplar ni mover la barra de herramientas Codificación, pero sí puede ocultarla. Para más información, consulte “Visualización de barras de herramientas” en la página 58.

También puede modificar la barra de herramientas Codificación para que muestre más botones (como Ajustar texto, Caracteres ocultos y Sangría automática) u ocultar botones que no desea utilizar. Para ello, no obstante, deberá editar el archivo XML que genera la barra de herramientas. Para más información, consulte Ampliación de Dreamweaver.

Temas relacionados

■ “Inserción rápida de código con la barra de herramientas Codificación” en la página 635

■ “Visualización de barras de herramientas” en la página 58

Espacio de trabajo de Dreamweaver 51

Barra de herramientas Representación de estilos

La barra de herramientas Representación de estilos (oculta de manera predeterminada) contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de soportes si utilizase hojas de estilos dependientes de los medios. También contiene un botón con el que es posible activar o desactivar los estilos CSS. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Representación de estilos.

Esta barra de herramientas sólo funciona si los documentos utilizan hojas de estilos dependientes de los medios. Por ejemplo, su hoja de estilos puede especificar una regla para imprimir y otra regla distinta para los dispositivos de mano. Para obtener más información acerca de la creación de hojas de estilos dependientes de los medios, consulte el sitio Web de World Wide Web Consortium en www.w3.org/TR/CSS21/media.html.

De manera predeterminada, Dreamweaver muestra el diseño para una pantalla (que muestra cómo se representa una página en la pantalla del equipo). Puede ver las representaciones para los diferentes soportes haciendo clic en los correspondientes botones de la barra de herramientas Representación de estilos.

Representar tipo de medio Screen muestra cómo aparece la página en la pantalla de un

equipo.

Representar tipo de medio Print muestra cómo aparece la página en una hoja de papel

impresa.

Representar tipo de medio Handheld muestra cómo aparece la página en un dispositivo de

mano, como un teléfono móvil o un dispositivo BlackBerry.

Representar tipo de medio Projection muestra cómo aparece la página en la pantalla de un

dispositivo de proyección.

Representar tipo de medio TTY muestra cómo aparece la página en la pantalla de una

máquina de teletipos.

Representar tipo de medio TV muestra cómo aparece la página en la pantalla de una pantalla

de televisión.

Alternar visualización de estilos CSS permite activar o desactivar los estilos CSS. Este botón

funciona de manera independiente a los demás botones de medios.

Temas relacionados

■ “Visualización de barras de herramientas” en la página 58

52 Exploración del espacio de trabajo

Informes en Dreamweaver

En Dreamweaver puede ejecutar informes para buscar contenido, solucionar problemas o probar el contenido. Puede generar los siguientes tipos de informes:

Buscar permite buscar etiquetas, atributos y texto específico en las etiquetas. Para buscar su

código, véase “Búsqueda y reemplazo de etiquetas y atributos” en la página 647.

Validación permite comprobar si existen errores de código o de sintaxis. Para validar su

código, véase “Validación de etiquetas” en la página 659.

Revisión del navegador de destino permite probar el código HTML en los documentos

para comprobar si hay alguna etiqueta o atributo que sean incompatibles con los navegadores de destino. Para ejecutar una revisión del navegador de destino, véase “Comprobación de la

compatibilidad con los navegadores” en la página 655.

Verificador de vínculos permite encontrar y arreglar vínculos rotos, externos y huérfanos.

Para ejecutar el verificador de vínculos, véase “Comprobación de vínculos rotos, externos y

huérfanos” en la página 506.

Informes de sitios permite mejorar el flujo de trabajo y probar los atributos HTML del sitio.

Los informes de flujo de trabajo incluyen información sobre protección, sobre documentos modificados recientemente sobre Design Notes; los informes HTML incluyen etiquetas de fuentes anidadas combinables, la opción de accesibilidad, texto alternativo que falta, etiquetas anidadas repetidas, etiquetas vacías eliminables y documentos sin título. Para ejecutar informes de sitios, véase “Comprobación del sitio” en la página 173.

Registro FTP permite ver toda la actividad de transferencia de archivos mediante FTP. Para

ver el registro FTP, véase “Obtención de archivos de un servidor remoto” en la página 156 o

“Colocación de archivos en un servidor remoto” en la página 158.

Depuración del servidor permite ver información para depurar una aplicación ColdFusion.

Para ver información de depuración, véase “Utilización del depurador de ColdFusion (sólo

Windows)” en la página 661.

Espacio de trabajo de Dreamweaver 53

Personalización de Dreamweaver en sistemas multiusuario

Puede personalizar Dreamweaver para que se ajuste a sus necesidades, incluso en un sistema operativo multiusuario como Windows XP o Mac OS X.

Dreamweaver impide que la configuración personalizada de un usuario afecte a la configuración personalizada de otro usuario. Para lograr este objetivo, la primera vez que ejecute Dreamweaver en uno de los sistemas operativos multiusuario que reconoce, la aplicación creará para usted copias de diversos archivos de configuración. Estos archivos de configuración se almacenan en una carpeta de su propiedad.

Por ejemplo, en Windows XP se almacenan en C:\Documents and Settings\nombre del usuario\Application Data\Macromedia\Dreamweaver 8\Configuration (que puede estar dentro de una carpeta oculta).

En Mac OS X se almacenan en la carpeta inicial del usuario; concretamente en Users/nombre del usuario/Library/Application Support/Macromedia/Dreamweaver 8/Configuration.

Si reinstala o actualiza Dreamweaver, Dreamweaver creará automáticamente copias de seguridad de los archivos de configuración de usuario existentes para que, en el caso de que haya personalizado dichos archivos manualmente, continúe teniendo acceso a los cambios realizados.

Temas relacionados

■ “Aspectos básicos de personalización de Dreamweaver”

Utilización de la ventana de documento

La ventana de documento muestra el documento actual. Puede ver un documento en la vista Diseño, la vista Código o las vistas Código y Diseño. La barra de estado de la ventana de documento proporciona información sobre el documento actual.

Temas relacionados

■ “Ventana de documento” en la página 45

■ “Barra de estado” en la página 48

Cambio de vista en la ventana de documento

Puede ver un documento en la ventana de documento con la vista Código, con la vista Diseño o con ambas.

54 Exploración del espacio de trabajo

Para pasar de una vista a otra en la ventana de documento, siga uno de estos procedimientos:

■ Utilice el menú Ver:

■ Seleccione Ver > Código.

■ Seleccione Ver > Diseño.

■ Seleccione Ver > Código y diseño.

■ Utilice la barra de herramientas Documento:

■ Haga clic en el botón Mostrar vista de código.

■ Haga clic en el botón Mostrar vistas de código y diseño.

■ Haga clic en el botón Mostrar vista de diseño.

Para pasar de la vista Código a la vista Diseño y viceversa:

■ Presione Control+guión (-) (Windows) o Comando+comilla simple (‘) (Macintosh).

NOTA

Si aparecen ambas vistas en la ventana de documento, este método abreviado de teclado permite pasar de una vista a otra.

Temas relacionados

■ “Ventana de documento” en la página 45

Organización de las ventanas de documentos en cascada o en mosaico

Si tiene varios documentos abiertos a la vez, puede organizarlos en cascada o en mosaico.

Para organizar las ventanas de documentos en cascada realice lo siguiente:

■ Seleccione Ventana > Cascada.

Para organizar las ventanas de documentos en mosaico, siga uno de estos procedimientos:

■ En Windows, seleccione Ventana > Mosaico horizontal o Ventana > Mosaico vertical.

■ En Macintosh, Seleccione Ventana > Mosaico.

Temas relacionados

■ “Selección del diseño del espacio de trabajo (sólo en Windows)” en la página 79

Utilización de la ventana de documento 55

■ “Visualización de documentos en fichas (Macintosh)” en la página 80

■ “Almacenamiento de diseños de espacio de trabajo personalizados” en la página 81

Cambio del tamaño de la ventana de documento

La barra de estado muestra las dimensiones actuales de la ventana de documento (en píxeles). Para diseñar una página cuyo mejor aspecto se logra con un tamaño específico, puede ajustar la ventana de documento con cualquiera de los tamaños predeterminados, editar dichos tamaños predeterminados o crear nuevos tamaños.

Para establecer un tamaño predeterminado para la ventana de documento:

■ Elija uno de los tamaños del menú emergente Tamaño de ventana situado en la parte

inferior de la ventana de documento.

NOTA

En Windows, se puede maximizar la ventana de documento de forma que ocupe completamente la zona del documento en la ventana integrada. Cuando una ventana de documento está maximizada, no puede cambiarse su tamaño.

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.

SUGERENCIA

Si no desea asignar un tamaño tan preciso, utilice los métodos estándar de su sistema operativo, como arrastrar la esquina inferior derecha de una ventana.

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.

56 Exploración del espacio de trabajo

2. Haga clic en cualquiera de los valores de ancho o altura 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ífico (sin modificar

la altura), seleccione un valor de altura y elimínelo.

3. Haga clic en el cuadro de texto Descripción para introducir texto descriptivo sobre un

tamaño específico.

4. Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento.

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

Para establecer sólo el Ancho o la Altura, sencillamente deje un campo vacío.

4. Haga clic en el campo Descripción para introducir el texto descriptivo sobre el tamaño

añadido.

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 correspondiente a un monitor de 832 x 624 píxeles. La mayoría de los monitores se pueden ajustar a varias dimensiones de píxeles.

Configuración de las preferencias de la barra de estado

Establezca las preferencias de la barra de estado utilizando el cuadro de diálogo Preferencias.

Para establecer las preferencias para la barra de estado:

1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias

(Macintosh). Aparece el cuadro de diálogo Preferencias.

2. Seleccione Barra de estado en la lista Categoría de la izquierda.

3. Establezca las opciones de preferencias

Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

4. Haga clic en Aceptar.

Utilización de la ventana de documento 57

Temas relacionados

■ “Barra de estado” en la página 48

Utilización de barras de herramientas, inspectores y menús contextuales

Dreamweaver contiene varias herramientas que permiten realizar cambios rápidamente mientras se crea o edita un documento.

Las barras de herramientas Documento, Estándar y Codificación sirven para editar y trabajar con el documento actual. La barra Insertar contiene botones para crear e insertar objetos como por ejemplo tablas, capas e imágenes, mientras que el inspector de propiedades permite editar las propiedades de dichos objetos.

NOTA

También puede utilizar el inspector de etiquetas para ver y editar las propiedades (véase

“Cambio de atributos con el inspector de etiquetas” en la página 664). El inspector de

etiquetas permite ver y editar todos los atributos asociados con una etiqueta determinada, mientras que el inspector de propiedades sólo muestra los atributos más habituales.

Los menús contextuales constituyen un método alternativo a la utilización de la barra Insertar y el inspector de propiedades en la creación y edición de objetos.

Visualización de barras de herramientas

Utilice las barras de herramientas Documento y Estándar para realizar operaciones relacionadas con documentos y de edición estándar, la barra de herramientas Codificación para insertar código rápidamente y la barra de herramientas Representación de estilos para mostrar la página tal y como aparecería en diferentes tipos de soportes. Si lo desea, puede seleccionar la opción de mostrar u ocultar las barras de herramientas.

58 Exploración del espacio de trabajo

Para mostrar u ocultar una barra de herramientas, siga uno de estos procedimientos:

■ Seleccione Ver > Barras de herramientas y, después, seleccione la barra de herramientas que

desee.

■ Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla

Control y haga clic (Macintosh) en cualquiera de las barras de herramientas en el menú contextual.

NOTA

Para mostrar u ocultar la barra de herramientas Codificación en el inspector de código (Ventana > Inspector de código), debe seleccionar la barra de herramientas Codificación del menú emergente Ver opciones situado en la parte superior del inspector.

Temas relacionados

■ “Barra de herramientas Documento” en la página 46

■ “Barra de herramientas Estándar” en la página 48

■ “Barra de herramientas Codificación” en la página 51

■ “Barra de herramientas Representación de estilos” en la página 52

Utilización de la barra Insertar

La barra Insertar contiene botones para crear e insertar objetos tales como tablas e imágenes. Los botones están organizados en categorías. Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre del botón.

Temas relacionados

■ “Barra Insertar” en la página 49

Visualización de la barra Insertar y sus categorías y menús correspondientes

Si lo desea, puede ocultar o mostrar y contraer o ampliar la barra Insertar. También puede mostrar las distintas categorías de la barra Insertar. Algunas categorías de la barra Insertar tienen botones que constan de menús con comandos comunes.

Si prefiere ver las categorías como fichas en la parte superior de la barra Insertar, puede cambiar el diseño de dicha barra.

Utilización de barras de herramientas, inspectores y menús contextuales 59

Para ocultar o mostrar la barra Insertar, siga uno de estos procedimientos:

■ Seleccione Ventana > Insertar.

■ Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la tecla

Control (Macintosh) en la barra Insertar o en la barra de herramientas Documento, Estándar o Codificación y, a continuación, seleccione Barra Insertar.

Para mostrar los botones de una categoría determinada:

■ Haga clic en la flecha del menú desplegable situada junto al nombre de la categoría, en el

extremo izquierdo de la barra Insertar y, a continuación, seleccione otra categoría en el menú emergente.

Para mostrar el menú emergente de un botón:

■ Haga clic en la flecha abajo, situada junto al icono del botón.

Para mostrar las categorías de la barra Insertar en forma de fichas:

■ Haga clic en la flecha situada junto al nombre de categoría en el extremo izquierdo de la

barra Insertar y, a continuación, seleccione Mostrar como fichas.

La barra Insertar muestra las categorías como fichas en la parte superior.

NOTA

Es posible que tenga que hacer clic en la barra de título de la barra Insertar para volver a abrirla.

60 Exploración del espacio de trabajo

Para mostrar las categorías de la barra Insertar en forma de menú:

■ Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la tecla

Control (Macintosh) en la barra Insertar y, a continuación, seleccione Mostrar como menús.

La barra Insertar muestra las categorías en un menú en lugar de mostrarlas en forma de fichas.

Temas relacionados

■ “Personalización y utilización de la categoría Favoritos en la barra Insertar” en la página 63

Utilización de la barra Insertar para insertar objetos

La barra Insertar constituye un método práctico para crear e insertar objetos.

Para insertar un objeto:

1. Seleccione la categoría adecuada en el lado izquierdo de la barra Insertar.

2. Siga uno de estos procedimientos:

■ Haga clic en un botón de objeto o arrastre el icono correspondiente hasta la ventana de

documento.

■ Haga clic en la flecha de un botón y seleccione una opción del menú.

Dependiendo del objeto que se trate, aparecerá un cuadro de diálogo de inserción de objeto, que solicitará que se busque un archivo o se especifiquen los parámetros del objeto. O bien, Dreamweaver puede insertar código en el documento o abrir un panel o un Quick tag editor (véase “Edición de etiquetas mediante editores de etiquetas” en la página 639) para especificar información antes de insertar el código.

Para algunos objetos, no aparece ningún cuadro de diálogo si se inserta el objeto en vista Diseño, pero aparece un Quick tag editor si se utiliza la vista Código. Con algunos objetos, al insertar el objeto en vista Diseño, Dreamweaver cambia a la vista Código antes de insertar el objeto.

NOTA

Algunos objetos, como anclajes con nombre, no aparecen cuando se abre la página en la ventana de un navegador. Para mostrar iconos en la vista de diseño que marquen las ubicaciones de dichos objetos invisibles, véase “Visualización y ocultación de elementos

invisibles” en la página 397.

Para omitir el cuadro de diálogo de inserción de objetos e insertar un objeto marcador de posición vacío:

■ Haga clic mientras presiona la tecla Control (Windows) u Opción (Macintosh) en el

botón del objeto.

Utilización de barras de herramientas, inspectores y menús contextuales 61

Por ejemplo, para insertar un marcador de posición para una imagen sin especificar un archivo de imagen, haga clic en el botón Imagen mientras presiona la tecla Control u Opción.

NOTA

Este procedimiento no permite omitir todos los cuadros de diálogo de inserción de objetos. Muchos objetos, incluidas barras de navegación, capas, botones Flash y conjuntos de marcos, no permiten insertar marcadores de posición ni objetos con valores predeterminados.

Para modificar las preferencias de la barra Insertar:

1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias

(Macintosh). El cuadro de diálogo Preferencias aparece y muestra la categoría de preferencias General.

2. Desactive Mostrar diálogo al insertar objetos para suprimir cuadros de diálogo al insertar

objetos tales como imágenes, tablas, scripts y elementos de encabezado, o mantenga presionada la tecla Control (Windows) o la tecla Opción (Macintosh) mientras esté creando el objeto.

SUGERENCIA

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.

3. Haga clic en Aceptar.

Temas relacionados

■ “Visualización de la barra Insertar y sus categorías y menús correspondientes” en

la página 59

62 Exploración del espacio de trabajo

Personalización y utilización de la categoría Favoritos en la barra Insertar

La categoría Favoritos de la barra Insertar permite agrupar y organizar los botones más utilizados de la barra Insertar. Puede añadir, administrar y eliminar botones de la categoría Favoritos.

Para añadir, eliminar o administrar elementos de la categoría Favoritos:

1. Seleccione una categoría en la barra Insertar.

2. Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la tecla

Control (Macintosh) en el área donde aparecen los botones (no en el nombre de la categoría) y, a continuación, seleccione Personalizar objetos.

Aparece el cuadro de diálogo Personalizar objetos favoritos.

3. Realice los cambios necesarios.

Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

4. Haga clic en Aceptar.

La categoría Favoritos refleja los cambios realizados.

SUGERENCIA

Si no se encuentra en la categoría Favoritos, selecciónela para ver los cambios que haya realizado.

Para insertar objetos mediante los botones de la categoría Favoritos:

■ Seleccione la categoría Favoritos en el lado izquierdo de la barra Insertar y, a continuación,

haga clic en el botón correspondiente a un objeto que haya añadido a Favoritos.

NOTA

La categoría Favoritos no contiene ningún botón hasta que se personaliza y se añaden objetos.

Temas relacionados

■ “Visualización de la barra Insertar y sus categorías y menús correspondientes” en

la página 59

■ “Utilización de la barra Insertar para insertar objetos” en la página 61

Utilización de barras de herramientas, inspectores y menús contextuales 63

Utilización del inspector de propiedades

El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en función del elemento seleccionado.

NOTA

Utilice el inspector de etiquetas para ver y editar todos los atributos asociados con una propiedad de etiqueta determinada (véase “Cambio de atributos con el inspector de

etiquetas” en la página 664).

SUGERENCIA

El inspector de propiedades se encuentra en la parte inferior del espacio de trabajo de forma predeterminada, pero puede colocarlo en la parte superior si lo desea. También puede convertirlo en un panel flotante en el espacio de trabajo. Para más información sobre el desplazamiento del inspector de propiedades, consulte “Acoplamiento y

desacoplamiento de paneles y grupos de paneles” en la página 68.

Para mostrar u ocultar el inspector de propiedades:

■ Seleccione Ventana > Propiedades

Para ampliar o contraer el inspector de propiedades:

■ Haga clic en la flecha de ampliación, situada en la esquina inferior derecha del inspector

de propiedades.

Para ver las propiedades de un elemento de página:

■ Seleccione el elemento de página en la ventana de documento.

NOTA

Es posible que deba ampliar el inspector de propiedades para ver todas las propiedades del elemento seleccionado.

64 Exploración del espacio de trabajo

Para cambiar las propiedades de un elemento de página:

1. Seleccione el elemento de página en la ventana de documento.

2. Cambie las propiedades que desee en el inspector de propiedades.

NOTA

Para información sobre propiedades específicas, seleccione un elemento en la ventana de documento y, a continuación, haga clic en el icono de ayuda, situado en la esquina superior derecha del inspector de propiedades.

La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato en la ventana de documento.

3. Si los cambios realizados no se aplican inmediatamente, siga uno de estos procedimientos:

■ Haga clic fuera de los campos de texto de edición de propiedades.

■ Presione Intro (Windows) o Retorno (Macintosh).

■ Presione el tabulador para cambiar a otra propiedad.

Utilización de menús contextuales

Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan acceso rápido 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.

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.

Utilización de barras de herramientas, inspectores y menús contextuales 65

2. Seleccione un comando en el menú contextual.

Utilización de paneles y grupos de paneles

En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de paneles aparece como una ficha. Cada grupo de paneles puede ampliarse o contraerse y

acoplarse o desacoplarse con otros grupos de paneles. Los grupos de paneles también se pueden acoplar a la ventana de aplicación integrada (sólo en

Windows). Esto facilita el acceso a los paneles sin saturar el espacio de trabajo.

NOTA

Cuando un grupo de paneles está flotando (desacoplado), aparece una barra en blanco estrecha en la parte superior del mismo. En esta documentación, el término, “barra de título del grupo de paneles” hace referencia al área en la que aparece el nombre del grupo de paneles y no a esta barra en blanco estrecha.

66 Exploración del espacio de trabajo

Visualización de paneles y grupos de paneles

Si lo desea, puede mostrar u ocultar grupos de paneles y paneles en el espacio de trabajo.

Para ampliar o contraer un grupo de paneles, siga uno de estos procedimientos:

■ Haga clic en la flecha de ampliación, situada en el lado izquierdo de la barra de título del

grupo de paneles.

■ Haga clic en el título del grupo de paneles.

Para cerrar un grupo de paneles a fin de que no aparezca en la pantalla:

■ Seleccione Cerrar grupo de paneles en el menú Opciones de la barra de título del grupo de

paneles. El grupo de paneles desaparece de la pantalla.

Para abrir un grupo de paneles o un panel que no se vea en la pantalla:

■ Seleccione el menú Ventana y, a continuación, elija un nombre de panel en el menú.

Una marca de verificació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.

SUGERENCIA

Si no encuentra un panel, un inspector o una ventana que haya marcado como abierto, seleccione Ventana > Organizar paneles para disponer ordenadamente todos los paneles abiertos.

Para seleccionar un panel de un grupo de paneles ampliado:

■ Haga clic en el nombre del panel.

Para ver el menú Opciones de un grupo de paneles:

■ Amplíe el grupo de paneles haciendo clic en el nombre o en la flecha de ampliación.

El menú Opciones sólo está visible cuando el grupo de paneles está ampliado.

SUGERENCIA

Algunas opciones están disponibles en el menú contextual del grupo de paneles incluso si el grupo está ampliado; haga clic con el botón derecho del ratón (Windows) o mientras pulsa la tecla Control (Macintosh) en la barra de título del grupo de paneles para ver el menú contextual.

Utilización de paneles y grupos de paneles 67

Acoplamiento y desacoplamiento de paneles y grupos de paneles

Puede mover paneles y grupos de paneles como desee, y organizarlos para que floten en el espacio de trabajo o se acoplen en él.

La mayoría de los paneles sólo pueden acoplarse a la derecha o a la izquierda del área de la ventana de documento del espacio de trabajo integrado, mientras que otros (como el inspector de propiedades y la barra Insertar), sólo pueden acoplarse a la parte superior o inferior de la ventana integrada.

Para desacoplar un grupo de paneles:

■ Arrástrelo por los puntos de sujeción (situados en el borde izquierdo de la barra de título

del grupo de paneles) hasta que el contorno indique que ya no está acoplado.

Para acoplar un grupo de paneles a otro grupo de paneles (espacio de trabajo flotante) o a la ventana integrada (sólo en Windows):

■ Arrástrelo por los puntos hasta que su contorno indique que está acoplado.

Para desacoplar un panel de un grupo:

■ Seleccione Agrupar con > Nuevo grupo de paneles en el menú Opciones de la barra de

título del grupo de paneles. (El nombre del comando Agrupar con cambia en función del nombre del panel activo.)

El panel aparece en un nuevo grupo de paneles propio.

Para acoplar un panel de un grupo:

■ Seleccione el nombre de un grupo de paneles en el submenú Agrupar con del menú

Opciones del grupo de paneles. (El nombre del comando Agrupar con cambia en función del nombre del panel activo.)

Para arrastrar un grupo de paneles flotante (desacoplado) sin acoplarlo:

■ Arrastre el grupo de paneles por la barra situada encima de su barra de título. El grupo de

paneles no se acopla mientras no se arrastre por sus puntos de sujeción.

68 Exploración del espacio de trabajo

Cambio de tamaño y de nombre de los grupos de paneles

Puede cambiar el tamaño y el nombre de los grupos de paneles en función de sus necesidades.

Para cambiar el tamaño de los grupos de paneles:

■ Para los paneles flotantes, arrastre el conjunto de grupos de paneles para ajustar su tamaño

de la misma manera que lo haría con una ventana del sistema operativo. Por ejemplo, puede arrastrar el área de ajuste de tamaño de la esquina inferior derecha del

conjunto de grupos de paneles.

■ Para los paneles acoplados, arrastre la barra de separación que hay entre los paneles y la

ventana de documento.

Para maximizar un grupo de paneles, siga uno de estos procedimientos:

■ Seleccione Maximizar grupo de paneles en el menú Opciones de la barra de título del

grupo de paneles.

■ Haga doble clic en cualquier lugar de la barra de título del grupo de paneles.

El grupo de paneles crece verticalmente hasta ocupar todo el espacio vertical disponible.

Para cambiar el nombre de un grupo de paneles:

1. Seleccione Cambiar nombre de grupo de paneles en el menú Opciones de la barra de título

del grupo de paneles.

2. Introduzca un nuevo nombre y haga clic en Aceptar.

Almacenamiento de grupos de paneles

Dreamweaver le permite guardar y restaurar diferentes grupos de paneles, lo que le permite personalizar el espacio de trabajo para diversas actividades. Al guardar un diseño de espacio de trabajo, Dreamweaver recuerda los paneles con el diseño especificado, así como otros atributos, como las posiciones y tamaños de los paneles, su estado contraído o ampliado, la posición y el tamaño de la ventana de la aplicación y la posición y el tamaño de la ventana de documento.

Para más información, consulte “Almacenamiento de diseños de espacio de trabajo

personalizados” en la página 81.

Utilización de paneles y grupos de paneles 69

Configuración de las preferencias de los paneles

Puede establecer preferencias para especificar qué paneles e inspectores deben aparecer siempre sobre la ventana de documento y cuáles pueden quedar ocultos por dicha ventana.

Para establecer preferencias para los paneles:

1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias

(Macintosh). Aparece el cuadro de diálogo Preferencias.

2. Seleccione Paneles en la lista Categoría de la izquierda.

3. Seleccione las opciones.

Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

4. Haga clic en Aceptar.

Utilización de las funciones de accesibilidad de Dreamweaver

Dreamweaver ofrece funciones que lo hacen accesible a los usuarios con discapacidades. En concreto, Dreamweaver es compatible con lectores de pantallas, con las funciones de accesibilidad del sistema operativo y con la navegación mediante el teclado.

Temas relacionados

■ “Dreamweaver y accesibilidad” en la página 34

Utilización de lectores de pantalla con Dreamweaver

Un lector de pantalla recita el texto que aparece en la pantalla del equipo. También lee información no textual, como los rótulos de los botones o las descripciones de las imágenes de la aplicación que se suministran en etiquetas o atributos de accesibilidad durante el proceso de creación.

Como usuario de Dreamweaver, puede utilizar un lector de pantalla como ayuda para crear sus páginas Web. El lector de pantalla comienza a leer por la esquina superior izquierda de la ventana de documento.

Dreamweaver es compatible con JAWS for Windows, de Freedom Scientific (www.freedomscientific.com) y con los lectores de pantalla Windows-Eyes, de GW Micro (www.gwmicro.com).

70 Exploración del espacio de trabajo

Temas relacionados

■ “Utilización del teclado para desplazarse por Dreamweaver” en la página 72

Compatibilidad con las funciones de accesibilidad del sistema operativo

Dreamweaver es compatible con las funciones de accesibilidad de los sistemas operativos de Windows y de Macintosh. Por ejemplo, en Macintosh se configuran las preferencias visuales en el cuadro de diálogo Panel de preferencias de Acceso Universal (Apple > Preferencias del Sistema). La configuración se refleja en el espacio de trabajo de Dreamweaver.

Dreamweaver también es compatible con la configuración de alto contraste del sistema operativo Windows. Esta opción se activa a través del Panel de control de Windows. Cuando el alto contraste está activado, afecta a Dreamweaver de la siguiente manera:

■ Los cuadros de diálogo y los paneles utilizan la configuración de color del sistema.

Por ejemplo, si establece el color como Blanco sobre negro, todos los cuadros de diálogo y los paneles de Dreamweaver se mostrarán con el blanco como color de primer plano y el negro como color de fondo.

■ La aplicación de color a la sintaxis de la vista Código está desactivada.

La vista Código utiliza el color de ventana y de texto del sistema y omite la configuración de color establecida en Preferencias. Por ejemplo, si define el color del sistema como Blanco sobre negro y, a continuación, cambia los colores del texto en Preferencias > Colores de código, Dreamweaver omite los colores establecidos en Preferencias y muestra el texto del código con el blanco como color de primer plano y el negro como color de fondo.

■ La vista Diseño utiliza los colores de fondo y de texto establecidos en Modificar >

Propiedades de la página. Así, las páginas que diseña presentan los colores como lo hará el navegador.

Temas relacionados

■ “Utilización de lectores de pantalla con Dreamweaver” en la página 70

Utilización de las funciones de accesibilidad de Dreamweaver 71

Utilización del teclado para desplazarse por Dreamweaver

Puede utilizar el teclado para navegar por los paneles, los inspectores, los cuadros de diálogo, los marcos y las tablas de Dreamweaver sin necesidad de utilizar el ratón.

Temas relacionados

■ “Utilización de lectores de pantalla con Dreamweaver” en la página 70

■ “Compatibilidad con las funciones de accesibilidad del sistema operativo” en la página 71

Desplazamiento por los paneles

Puede desplazarse por los paneles mediante el teclado.

NOTA

El uso de la tecla de tabulación y las teclas de flecha sólo es compatible con Windows.

Para desplazarse por los paneles:

1. En la ventana de documento, presione Control+Alt+Tab para entrar en un panel.

Un contorno blanco alrededor de la barra de título del panel indica el panel en el que ha entrado. El lector de pantalla lee la barra de título del panel en el que ha entrado.

2. Presione de nuevo la combinación de teclas Control+Alt+Tab para entrar en el siguiente

panel. Siga haciéndolo hasta que alcance el panel en el que desea trabajar.

3. Presione la combinación de teclas Control+Alt+Mayús+Tab para regresar al panel previo,

si fuese necesario.

4. Si el panel en el que quiere trabajar no está abierto, utilice los métodos abreviados de teclado

listados en el menú Ventana para mostrar el panel apropiado y, a continuación, presione Control+Alt+Tab para entrar en dicho panel.

Si el panel en el que desea trabajar está abierto pero no ampliado, desplácese hasta la barra de título de dicho panel y presione la barra espaciadora. Si desea contraer el panel, vuelva a presionar la barra espaciadora.

5. Una vez en el panel, presione la tecla Tab para desplazarse a través de las opciones.

Un contorno punteado alrededor de la opción indica la opción a la que ha accedido.

72 Exploración del espacio de trabajo

6. Utilice las teclas de flecha como convenga:

■ Si una opción tiene varias opciones, utilice las teclas de flecha para desplazarse por las

opciones y, a continuación, presione la barra espaciadora para seleccionar una.

■ Si en el grupo de paneles hay fichas que dan acceso a otros paneles, sitúese en la ficha

abierta y, a continuación, utilice las teclas de flecha izquierda o derecha para abrir otras fichas. Una vez haya abierto una nueva ficha, presione la tecla Tab para desplazarse a través de las opciones de dicho panel.

Temas relacionados

■ “Desplazamiento por los cuadros de diálogo” en la página 74

■ “Desplazamiento por los marcos” en la página 74

■ “Desplazamiento por las tablas” en la página 75

Desplazamiento por el inspector de propiedades

Puede utilizar el teclado para desplazarse por el inspector de propiedades y modificar el documento.

NOTA

El uso de las teclas de flecha sólo es compatible con Windows.

Para desplazarse por el inspector de propiedades:

1. Presione la tecla Control+F3 (Windows) o la tecla Comando+F3 (Macintosh) para mostrar

el inspector de propiedades, si no está visible.

2. (Windows) Presione Control+Alt+Tab hasta que haya entrado en el inspector de

propiedades.

3. Presione la tecla Tab para desplazarse a través de las opciones del inspector de propiedades.

4. (Windows) Utilice las teclas de flecha como convenga para desplazarse por las distintas

opciones.

5. Si lo desea, presione Control+Tab (Windows) u Opción+Tab (Macintosh) para abrir y

cerrar la sección ampliada del inspector de propiedades o sitúese en la flecha de ampliación, situada en la esquina inferior derecha, y presione la barra espaciadora.

Temas relacionados

■ “Desplazamiento por los paneles” en la página 72

■ “Desplazamiento por los marcos” en la página 74

■ “Desplazamiento por las tablas” en la página 75

Utilización de las funciones de accesibilidad de Dreamweaver 73

Desplazamiento por los cuadros de diálogo

Puede utilizar el teclado para desplazarse por los cuadros de diálogo.

NOTA

El uso de las teclas de flecha sólo es compatible con Windows.

Para desplazarse por un cuadro de diálogo:

1. Para desplazarse a través de las opciones de un cuadro de diálogo, presione la tecla Tab.

2. (Windows) Utilice las teclas de flecha para desplazarse a través de los valores de cada opción.

Por ejemplo, si una opción tiene un menú emergente, acceda a dicha opción y, a continuación, utilice la flecha abajo para desplazarse por sus valores.

3. Si el cuadro de diálogo tiene una lista Categoría, presione Control+Tab (Windows) u

Opción+Tab (Macintosh) para entrar en dicha lista de categorías y, a continuación, utilice las teclas de flecha para desplazarse hacia arriba o hacia abajo en la lista.

4. Vuelva a presionar Control+Tab (Windows) u Opción+Tab (Macintosh) para cambiar a

las opciones de una categoría.

5. Para salir del cuadro de diálogo presione Intro (Windows) o Retorno (Macintosh).

Temas relacionados

■ “Desplazamiento por los paneles” en la página 72

■ “Desplazamiento por el inspector de propiedades” en la página 73

■ “Desplazamiento por las tablas” en la página 75

Desplazamiento por los marcos

Si el documento contiene marcos, puede utilizar las teclas de flechas para entrar en un marco.

NOTA

El uso de las teclas de flecha sólo es compatible con Windows.

74 Exploración del espacio de trabajo

Para seleccionar un marco:

1. Sitúe el punto de inserción en la ventana de documento.

2. Presione Alt+Flecha arriba para seleccionar el marco en el que se encuentra en este

momento. Una línea punteada indica el marco en el que se encuentra.

3. Siga presionando Alt+Flecha arriba para entrar en el conjunto de marcos y, a continuación,

en el conjunto de marcos padre, si existen conjuntos de marcos anidados.

4. Presione Alt+Flecha abajo para entrar en un conjunto de marcos hijo o en un marco

individual del conjunto de marcos.

5. Una vez haya entrado en un marco individual, presione Alt+Flecha izquierda o derecha

para desplazarse por los marcos.

6. Presione Alt+Flecha abajo para colocar el punto de inserción en la ventana de documento.

Temas relacionados

■ “Desplazamiento por los paneles” en la página 72

■ “Desplazamiento por el inspector de propiedades” en la página 73

■ “Desplazamiento por los cuadros de diálogo” en la página 74

Desplazamiento por las tablas

Tras seleccionar una tabla, puede utilizar el teclado para desplazarse por ella.

Para desplazarse por una tabla:

1. Utilice las teclas de flecha o presione Tab para desplazarse a otras celdas de la tabla, según

sea necesario.

SUGERENCIA

Al presionar la tecla Tab mientras se está en una celda de la derecha, se añade otra fila a la tabla.

2. Para seleccionar una celda, coloque el punto de inserción en dicha celda y presione

Control+A (Windows) o Comando+A (Macintosh).

3. Para seleccionar una tabla, presione dos veces las teclas Control+A (Windows) o

Comando+A (Macintosh) si el punto de inserción se encuentra en una celda, o presione una sola vez si hay una celda seleccionada.

Utilización de las funciones de accesibilidad de Dreamweaver 75

4. Para salir de la tabla presione las teclas Control+A (Windows) o Comando+A (Macintosh)

tres veces si el punto de inserción se encuentra en una celda, dos veces si la celda está seleccionada o una sola vez si la tabla está seleccionada. Después, presione las teclas de flecha arriba, abajo, derecha o izquierda.

Temas relacionados

■ “Desplazamiento por los paneles” en la página 72

■ “Desplazamiento por el inspector de propiedades” en la página 73

■ “Desplazamiento por los cuadros de diálogo” en la página 74

■ “Desplazamiento por los marcos” en la página 74

Optimización del espacio de trabajo para el diseño de páginas accesibles

Al crear páginas accesibles, debe asociar información en forma de rótulos y descripciones a los objetos de su página para que el contenido sea accesible a todos los usuarios.

Para ello, active el cuadro de diálogo Accesibilidad de cada objeto para que Dreamweaver solicite la información de accesibilidad al insertar objetos. Puede activar el cuadro de diálogo correspondiente a cualquiera de los objetos de la categoría Accesibilidad en Preferencias.

Para activar los cuadros de diálogo de accesibilidad:

1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias

(Macintosh). Aparece el cuadro de diálogo Preferencias.

2. Seleccione Accesibilidad en la lista Categoría de la izquierda.

76 Exploración del espacio de trabajo

El cuadro de diálogo Preferencias muestra las opciones de accesibilidad.

3. Seleccione los objetos para los que desee activar los cuadros de diálogo Accesibilidad.

Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

NOTA

Al insertar una nueva tabla, los atributos de accesibilidad aparecen automáticamente en el cuadro de diálogo Insertar tabla.

4. Haga clic en Aceptar.

Cada vez que seleccione un objeto, un cuadro de diálogo Accesibilidad le solicitará que introduzca etiquetas y atributos de accesibilidad al insertar dicho objeto en un documento.

Temas relacionados

■ “Dreamweaver y accesibilidad” en la página 34

■ “Inserción de una imagen” en la página 462

■ “Validación de datos de formulario HTML” en la página 927

■ “Creación de marcos y conjuntos de marcos” en la página 316

■ “Inserción y edición de objetos multimedia” en la página 535

■ “Inserción de una tabla y adición de contenido” en la página 264

Optimización del espacio de trabajo para el diseño de páginas accesibles 77

Utilización de guías visuales en Dreamweaver

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 seguir uno de estos procedimientos:

■ Ajustar instantáneamente el tamaño deseado para una ventana de documento y

comprobar si caben los elementos en la página. (Véase “Cambio del tamaño de la ventana

de documento” en la página 56.)

■ 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. (Véase “Utilización de una imagen de rastreo” en la página 258.)

■ Utilice las reglas y guías para proporcionar una pista visual que permita colocar y cambiar

el tamaño de los elementos de página con precisión. (Véase “Utilización de reglas, guías y

cuadrículas para diseñar páginas” en la página 254.)

■ Utilizar la cuadrícula para lograr una mayor precisión en la colocación y ajuste del tamaño

de las capas. (Véase “Utilización de la cuadrícula” en la página 257.) 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.

Aspectos básicos de personalización de Dreamweaver

Existen algunas técnicas básicas que permiten personalizar Dreamweaver para que se ajuste a sus necesidades sin necesidad de conocer código complejo o editar archivos de texto. Por ejemplo, puede cambiar el diseño del espacio de trabajo, ocultar o mostrar la página de inicio, establecer las preferencias, crear sus propios métodos abreviados de teclado y añadir extensiones a Dreamweaver.

78 Exploración del espacio de trabajo

Para información sobre la personalización del diseño de los paneles en el espacio de trabajo, véase “Utilización de paneles y grupos de paneles” en la página 66.

NOTA

Para información sobre cómo personalizar manualmente los archivos de configuración, véase “Personalización de Dreamweaver” en el Centro de soporte de Macromedia en

www.macromedia.com/go/customizing_dreamweaver_es.

En esta sección se describen sólo las opciones de las preferencias que se utilizan con mayor frecuencia. Para información sobre una opción de preferencias específica que no esté incluida en esta sección, busque el tema correspondiente en Utilización de Dreamweaver.

Temas relacionados

■ “Personalización de Dreamweaver en sistemas multiusuario”

■ Ampliación de Dreamweaver

Selección del diseño del espacio de trabajo (sólo en Windows)

En Windows, puede escoger el diseño del espacio de trabajo del codificador o el del diseñador. La primera vez que se inicia Dreamweaver, un cuadro de diálogo le permite elegir un diseño para el espacio de trabajo. Puede pasar de un espacio de trabajo a otro en cualquier momento.

Para elegir un diseño del espacio de trabajo la primera vez que se inicia Dreamweaver:

1. Seleccione uno de los diseños siguientes: Diseñador es un espacio de trabajo integrado que utiliza MDI (Interfaz para Múltiples

Documentos, Multiple Document Interface) en el que todas las ventanas de documentos y todos los paneles están integrados en una ventana de aplicación más grande, con los grupos de paneles apilados a la derecha.

Codificador es el mismo espacio de trabajo integrado, pero con los grupos de paneles

apilados a la izquierda; es un diseño similar al que utiliza Macromedia HomeSite y Macromedia ColdFusion Studio, en el que las ventanas de documentos muestran de forma predeterminada la vista de código.

NOTA

Puede acoplar los grupos de paneles a ambos lados del espacio de trabajo en cualquiera de los diseños del espacio de trabajo.

2. Haga clic en Aceptar.

Aspectos básicos de personalización de Dreamweaver 79

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

■ Seleccione Ventana > Diseño del espacio de trabajo y seleccione el diseño del espacio de

trabajo que prefiera.

Además de seleccionar Codificador y Diseñador, puede seleccionar Pantalla doble derecha o Pantalla doble izquierda. Si dispone de un monitor secundario situado a la derecha del monitor principal, la opción Pantalla doble derecha coloca todos los paneles en el monitor de la derecha y conserva la ventana de documento en el monitor principal. Por el contrario, si dispone de un monitor secundario situado a la izquierda del monitor principal, la opción Pantalla doble izquierda coloca todos los paneles en el monitor de la derecha izquierda conserva la ventana de documento en el monitor principal.

Temas relacionados

■ “Diseño del espacio de trabajo” en la página 42

■ “Almacenamiento de diseños de espacio de trabajo personalizados” en la página 81

■ “Organización de las ventanas de documentos en cascada o en mosaico” en la página 55

Visualización de documentos en fichas (Macintosh)

En Macintosh, Dreamweaver puede mostrar varios documentos en una sola ventana de documento mediante las fichas que identifican a cada uno de ellos. Dreamweaver también puede mostrarlos como parte de un espacio de trabajo flotante en el que cada documento aparece en su propia ventana.

Para abrir un documento que se encuentra en una ficha en una ventana independiente:

■ Haga clic en la ficha con el botón derecho del ratón o haga clic mientras presiona la tecla

Control y seleccione Mover a nueva ventana en el menú contextual.

Para combinar documentos independientes en ventanas con fichas:

■ Seleccione Ventana > Combinar como fichas.

Para cambiar la configuración predeterminada de documento en ficha:

1. Seleccione Dreamweaver > Preferencias y, posteriormente, seleccione la categoría General.

2. Seleccione o anule la selección de Abrir documentos en fichas y haga clic en Aceptar.

NOTA

Dreamweaver no modifica la visualización de documentos que están actualmente abiertos al cambiar las preferencias. No obstante, los documentos que se abran después de seleccionar una nueva preferencia se mostrarán conforme a la preferencia seleccionada.

80 Exploración del espacio de trabajo

Temas relacionados

■ “Diseño del espacio de trabajo” en la página 42

■ “Organización de las ventanas de documentos en cascada o en mosaico” en la página 55

Almacenamiento de diseños de espacio de trabajo personalizados

Dreamweaver le permite guardar y restaurar diferentes conjuntos de paneles, lo que le permite personalizar el espacio de trabajo para diversas actividades. Al guardar un diseño de espacio de trabajo, Dreamweaver recuerda los paneles con el diseño especificado, así como otros atributos, como las posiciones y tamaños de los paneles, su estado contraído o ampliado, la posición y el tamaño de la ventana de la aplicación.

Para guardar un diseño de espacio de trabajo personalizado:

1. Ordene los paneles del modo que desee.

2. Seleccione Ventana > Diseño del espacio de trabajo > Guardar disposición de paneles.

3. Introduzca un nombre para el diseño y haga clic en Aceptar.

Para cambiar a otro diseño de espacio de trabajo personalizado:

■ Seleccione Ventana > Diseño del espacio de trabajo y seleccione el diseño personalizado.

Para cambiar el nombre o eliminar un diseño de espacio de trabajo personalizado:

1. Seleccione Ventana > Diseño del espacio de trabajo > Administrar.

2. Seleccione un diseño y siga uno de estos procedimientos:

■ Para cambiar el nombre de un diseño, haga clic en el botón Cambiar nombre,

introduzca un nuevo nombre para el diseño y haga clic en Aceptar.

■ Para eliminar un diseño, haga clic en el botón Eliminar.

3. Haga clic en Aceptar.

Temas relacionados

■ “Utilización de paneles y grupos de paneles” en la página 66

■ “Selección del diseño del espacio de trabajo (sólo en Windows)” en la página 79

■ “Visualización de documentos en fichas (Macintosh)” en la página 80

Aspectos básicos de personalización de Dreamweaver 81

Cómo ocultar y mostrar la página de inicio

La página de inicio de Dreamweaver aparece al iniciar Dreamweaver y siempre que no se tiene abierto ningún documento. Puede optar por ocultar la página de inicio y volver a mostrarla posteriormente. Cuando la página de inicio está oculta y no se tienen documentos abiertos, la ventana de documento está en blanco.

NOTA

Puede optar por hacer que Dreamweaver abra el último documento con el que estaba trabajando cada vez que inicie el programa. Para más información, consulte

“Configuración de las preferencias generales para Dreamweaver” en la página 82.

Para ocultar la página de inicio:

■ Seleccione en la página de inicio la casilla de verificación No volver a mostrar.

La página de inicio no aparecerá al iniciar Dreamweaver ni después de abrir y cerrar un documento.

Para mostrar la página de inicio:

1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias

(Macintosh). El cuadro de diálogo Preferencias aparece y muestra la categoría de preferencias General.

2. Seleccione la casilla de verificación Mostrar página de inicio.

La página de inicio aparece al iniciar Dreamweaver o después de abrir y cerrar un documento.

Configuración de las preferencias generales para Dreamweaver

Las preferencias generales controlan el aspecto global de Dreamweaver.

Para cambiar las preferencias generales:

1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias

(Macintosh). El cuadro de diálogo Preferencias aparece y muestra la categoría de preferencias General.

2. Establezca las opciones de preferencias

Para más información, haga clic en Ayuda.

3. Haga clic en Aceptar.

82 Exploración del espacio de trabajo

Configuración de las preferencias de fuentes para la visualización de Dreamweaver

La codificación de un documento determina la manera en que se va a mostrar el documento en un navegador. Las preferencias de fuente de Dreamweaver permiten ver una codificación determinada con la fuente y el tamaño que se prefiera sin que ello afecte el aspecto del documento en un navegador para otros usuarios.

Para definir las fuentes que desea utilizar en Dreamweaver para cada tipo de codificación:

1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias

(Macintosh). Aparece el cuadro de diálogo Preferencias.

2. Seleccione Fuentes en la lista Categoría de la izquierda.

3. Seleccione un tipo de codificación (por ejemplo, Occidental (Latin1) o Japonés) en la lista

de configuración de fuentes y, a continuación, elija las fuentes que desea utilizar en Dreamweaver para esa codificación en los menús emergentes situados debajo de la lista de configuración de fuentes.

Para más información, haga clic en Ayuda.

NOTA

Las fuentes que elija no afectan al aspecto que tendrá el documento cuando se muestre en un navegador.

4. Haga clic en Aceptar.

Temas relacionados

■ “Aspectos básicos de la codificación del documento” en la página 388

Personalización de los métodos abreviados de teclado

Utilice el editor de métodos abreviados de teclado para crear sus propias teclas de método abreviado, incluidos los métodos abreviados de teclado para los fragmentos de código. En el editor de métodos abreviados de teclado también puede quitar métodos abreviados, editar métodos abreviados existentes y seleccionar un conjunto predefinido de métodos abreviados.

NOTA

Encontrará un gráfico que describe los métodos abreviados de teclado en la configuración predeterminada de Dreamweaver en el sitio Web de Macromedia en

www.macromedia.com/go/dw_documentation_es.

Aspectos básicos de personalización de Dreamweaver 83

Para personalizar los métodos abreviados de teclado:

1. Seleccione Edición > Métodos abreviados de teclado (Windows) o Dreamweaver >

Métodos abreviados de teclado (Macintosh). Aparece el cuadro de diálogo Métodos abreviados de teclado.

Botón Juego repetido Botón Eliminar el juego

Botón Exportar conjunto como HTML Botón Cambiar nombre del conjunto

2. Añada, elimine o edite los métodos abreviados de teclado.

Para más información, haga clic en Ayuda.

3. Haga clic en Aceptar.

Adición de extensiones a Dreamweaver

Las extensiones son funciones nuevas que se pueden añadir fácilmente a Dreamweaver. Se pueden utilizar muchos tipos de extensiones; por ejemplo, hay extensiones que permiten cambiar el formato de las tablas, conectar con bases de datos back-end o que ayudan a escribir scripts para navegadores.

NOTA

Para instalar extensiones a las que puedan acceder todos los usuarios en un sistema operativo multiusuario, debe conectarse como Administrador (Windows) o usuario raíz (Mac OS X). Para más información sobre sistemas multiusuario, consulte

“Personalización de Dreamweaver en sistemas multiusuario” en la página 54.

Para obtener las últimas extensiones para Dreamweaver, utilice el sitio Web de Macromedia Exchange en www.macromedia.com/go/dreamweaver_exchange_es/. Una vez allí, podrá conectar y descargar extensiones (muchas de ellas gratuitas), incorporarse a grupos de debate, ver calificaciones y comentarios de los usuarios e instalar y utilizar Extension Manager. Debe instalar Extension Manager para poder instalar extensiones.

84 Exploración del espacio de trabajo

Extension Manager es una aplicación independiente que permite instalar y administrar extensiones en aplicaciones de Macromedia. Inicie Extension Manager desde Dreamweaver; para ello seleccione Comandos > Administrar extensiones.

Para instalar y administrar extensiones:

1. En el sitio Web de Macromedia Exchange, haga clic en el vínculo de descarga de una

extensión. Es posible que el navegador le permita elegir entre abrirla e instalarla directamente desde el

sitio o guardarla en disco.

■ Si abre la extensión directamente desde el sitio, Extension Manager controla la

instalación de forma automática.

■ Si guarda la extensión en el disco, un lugar adecuado para guardar el archivo de

paquete de extensión (.mxp) es la carpeta Downloaded Extensions dentro de la carpeta de la aplicación Dreamweaver en su equipo.

2. Haga doble clic en el archivo de paquete de extensión o abra Extension Manager y

seleccione Archivo > Instalar extensión. La extensión ya está instalada 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.

NOTA

Utilice Extension Manager para eliminar extensiones o para consultar más información sobre la extensión.

Aspectos básicos de personalización de Dreamweaver 85

86 Exploración del espacio de trabajo

CAPÍTULO 2

Configuración de un sitio de Dreamweaver

Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos, como temas relacionados, un diseño similar o un objetivo común. Macromedia Dreamweaver 8 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 por separado.

El primer paso al crear un sitio Web consiste en planificarlo. Para obtener resultados óptimos, diseñe y planifique la estructura del sitio Web antes de crear las páginas que va a contener.

El siguiente paso consiste en configurar Dreamweaver para poder trabajar con la estructura básica del sitio. Si ya dispone de un sitio en un servidor Web, puede utilizar Dreamweaver para modificarlo.

SUGERENCIA

A medida que desarrolle el contenido del sitio, plantéese basar las páginas en plantillas de Dreamweaver. Véase “Plantillas de Dreamweaver” en la página 332 y “Creación de

una plantilla de Dreamweaver” en la página 347.

Este capítulo incluye las siguientes secciones:

Acerca de los sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Configuración de un sitio de Dreamweaver nuevo . . . . . . . . . . . . . . . . . . . . . . . 91

Utilización de las opciones avanzadas para configurar un sitio de

Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Edición de la configuración de un sitio de Dreamweaver . . . . . . . . . . . . . . . . . 97

Edición de sitios Web existentes con Dreamweaver . . . . . . . . . . . . . . . . . . . . . 98

Acerca de los sitios de Dreamweaver

Un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio Web. La organización de los archivos en un sitio permite utilizar Dreamweaver para cargar el sitio en el servidor Web, controlar y mantener los vínculos de forma automática, administrar y compartir archivos. Para aprovechar al máximo las funciones de Dreamweaver, debe definir un sitio.

Un sitio de Dreamweaver consta de un máximo de tres partes o carpetas, según el entorno de desarrollo y el tipo de sitio Web que se desarrolle:

La carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como

“sitio local”. Esta carpeta puede colocarse en el equipo local o en un servidor de red. En ella se almacenan los archivos con los que está trabajando en un sitio de Dreamweaver.

Para definir un sitio de Dreamweaver, sólo tiene que configurar una carpeta local. Sin embargo, para transferir archivos a un servidor Web o desarrollar aplicaciones Web, también necesita añadir datos para un sitio remoto y un servidor de prueba.

la carpeta remota se almacenan los archivos, según el entorno de desarrollo, para fines de

prueba, producción, colaboración, etcétera. En Dreamweaver esta carpeta se conoce como “sitio remoto” en el panel Archivos. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web.

Las carpetas de datos locales y remotos permiten transferir archivos entre el disco local y el servidor Web, lo cual facilita la administración de los archivos en los sitios de Dreamweaver.

la carpeta del servidor de prueba, Dreamweaver procesa páginas dinámicas. Para más

información, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en

la página 690.

Temas relacionados

■ “Configuración de un sitio de Dreamweaver nuevo” en la página 91

88 Capítulo 2: Configuración de un sitio de Dreamweaver

Aspectos básicos de la estructura de carpetas locales y remotas

Cuando configure el acceso a la carpeta remota del sitio de Dreamweaver (véase

“Configuración de una carpeta remota” en la página 95), debe determinar el directorio de

servidor de la carpeta remota. El directorio de servidor especificado debe corresponder a la carpeta raíz de la carpeta local. El siguiente diagrama muestra un ejemplo de una carpeta local a la izquierda y de una carpeta remota a la derecha.

directorio de inicio de sesión

(no debe ser el directorio host en este caso)

public_html

(directorio host)

Assets

(no debe ser el directorio host)

HTML

sitio local

(carpeta raíz)

Assets

HTML

sí

Si la estructura de la carpeta remota no coincide con la de la carpeta local, Dreamweaver cargará los archivos 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 un directorio raíz para la carpeta remota, cree uno o pida al administrador del servidor que le cree uno.

Aunque sólo desee 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.

Acerca de los sitios de Dreamweaver 89

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.

SITIO REMOTO

public_html

Project 1

Assets

HTML

Project 2

Assets

HTML

SITIO LOCAL

carpeta raíz local

(asigne a public.html, no a Project1 o Project/HTML)

Temas relacionados

■ “Acerca de los sitios de Dreamweaver” en la página 88

■ “Configuración de una carpeta remota” en la página 95

Project 1

(debe estar en sitio local; corresponde a Project1 en sitio remoto)

HTML

(debe estar en sitio local; corresponde a Project1/HTML en sitio remoto)

90 Capítulo 2: Configuración de un sitio de Dreamweaver

Configuración de un sitio de Dreamweaver nuevo

Después de planificar la estructura del sitio, o si ya posee un sitio, debe definir un sitio en Dreamweaver antes de iniciar el desarrollo. Configurar un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio Web. Para más información, consulte

“Acerca de los sitios de Dreamweaver” en la página 88.

NOTA

También puede editar archivos sin configurar un sitio de Dreamweaver. Para más información, consulte “Acceso a sitios, a un servidor y a unidades locales” en

la página 118.

Después de configurar un sitio de Dreamweaver, es recomendable exportar el sitio para disponer de una copia de seguridad local. Para más información, consulte “Importación y

exportación de sitios” en la página 147.

Para definir un sitio de Dreamweaver:

1. Seleccione Sitio > Administrar sitios.

Aparece el cuadro de diálogo Administrar sitios.

NOTA

Si no tiene ningún sitio de Dreamweaver definido, aparecerá el cuadro de diálogo Definición del sitio y podrá omitir este paso y continuar con el siguiente.

2. Haga clic en el botón Nuevo.

Aparecerá el cuadro de diálogo Definición del sitio.

3. Siga uno de estos procedimientos:

■ Haga clic en la ficha Básicas para utilizar el asistente para la Definición del sitio, que le

guiará a través del proceso de configuración.

NOTA

Se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente para la Definición del sitio. Es probable que los usuarios que tengan más experiencia con Dreamweaver prefieran las opciones avanzadas.

■ Haga clic en la ficha Avanzadas para utilizar las opciones avanzadas, que le permiten

configurar carpetas locales, remotas y de prueba por separado según convenga.

NOTA

Para empezar, puede configurar un sitio de Dreamweaver completo, o simplemente realizar el primer paso, la configuración de la carpeta local.

Configuración de un sitio de Dreamweaver nuevo 91

4. Realice el proceso de definición del sitio de Dreamweaver:

■ En el asistente para la Definición del sitio, responda a las preguntas de cada pantalla y,

a continuación, haga clic en Siguiente para avanzar en el proceso de configuración o haga clic en Atrás para regresar a una pantalla anterior.

■ Como opciones avanzadas, complete las categorías Datos locales, Datos remotos y

Servidor de prueba según convenga (véase “Utilización de las opciones avanzadas para

configurar un sitio de Dreamweaver” en la página 92).

SUGERENCIA

Después de configurar un sitio de Dreamweaver, es recomendable exportar el sitio para disponer de una copia de seguridad local. Para más información, consulte “Importación y exportación de sitios” en la página 147.

Si está configurando un sitio de Dreamweaver para una aplicación Web, véase Capítulo 23,

“Configuración de una aplicación Web”, en la página 679.

Utilización de las opciones avanzadas para configurar un sitio de Dreamweaver

Puede utilizar las opciones avanzadas del cuadro de diálogo Definición del sitio para configurar un sitio de Dreamweaver. Las opciones avanzadas permiten configurar las carpetas locales, remotas y de prueba (para procesar páginas dinámicas) por separado según convenga. Se recomienda este método para usuarios con experiencia en el uso de Dreamweaver.

NOTA

Para empezar rápidamente, puede empezar simplemente con el primer paso de configuración de un sitio de Dreamweaver, configurar la carpeta local. A continuación, puede añadir datos remotos y de prueba. Para poder empezar a trabajar con Dreamweaver, como mínimo, es necesario configurar una carpeta local.

Si no tiene experiencia en Dreamweaver, puede utilizar el asistente para la Definición del sitio para que le guíe por el proceso de configuración. (Véase “Configuración de un sitio de

Dreamweaver nuevo” en la página 91.)

92 Capítulo 2: Configuración de un sitio de Dreamweaver

Si está configurando un sitio de Dreamweaver para una aplicación Web, sáltese esta sección y vea Capítulo 23, “Configuración de una aplicación Web”, en la página 679.

SUGERENCIA

Después de configurar un sitio de Dreamweaver, es recomendable exportar el sitio para disponer de una copia de seguridad local. Para más información, consulte “Importación

y exportación de sitios” en la página 147.

Temas relacionados

■ “Acerca de los sitios de Dreamweaver” en la página 88

■ “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 690

Configuración de una carpeta local

La carpeta local es el directorio de trabajo del sitio de Dreamweaver. Esta carpeta puede colocarse en el equipo local o en un servidor de red.

Para configurar una carpeta local:

1. Seleccione Sitio > Administrar sitios.

Aparece el cuadro de diálogo Administrar sitios.

NOTA

Si no tiene ningún sitio de Dreamweaver definido, aparecerá el cuadro de diálogo Definición del sitio y podrá omitir este paso y continuar con el siguiente.

2. Haga clic en Nuevo.

Aparecerá el cuadro de diálogo Definición del sitio.

3. Haga clic en el botón Avanzadas, si las opciones avanzadas no están visibles.

Utilización de las opciones avanzadas para configurar un sitio de Dreamweaver 93

La ficha Avanzadas del cuadro de diálogo Definición del sitio muestra las opciones de la categoría Datos locales.

4. Introduzca las opciones de Datos locales.

Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

5. (Opcional) Si ya está listo para configurar el servidor remoto, omita el paso restante;

seleccione la categoría Datos remotos de la izquierda y complete el cuadro de diálogo. Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

6. Haga clic en Aceptar.

Dreamweaver crea la caché inicial del sitio y el nuevo sitio de Dreamweaver aparece en el panel Archivos.

Después de configurar una carpeta local, también puede añadir carpetas de datos remotos y de prueba (véase “Configuración de una carpeta remota” en la página 95 y “Especificación de

dónde pueden procesarse las páginas dinámicas” en la página 690).

Temas relacionados

■ “Acerca de los sitios de Dreamweaver” en la página 88

■ “Administración de archivos” en la página 113

94 Capítulo 2: Configuración de un sitio de Dreamweaver

Configuración de una carpeta remota

Tras definir una carpeta local para un sitio Dreamweaver (véase “Configuración de una

carpeta local” en la página 93), puede configurar una carpeta remota. En función del entorno

de desarrollo, la carpeta remota es el lugar en el que se almacenan los archivos para fines de prueba, colaboración, producción, implementación, etc.

NOTA

No es necesario especificar una carpeta remota si la carpeta que ha especificado como carpeta local es la misma que la que ha creado para los archivos del sitio en el sistema que ejecuta el servidor Web. Esto implica que el servidor Web se ejecuta en el equipo local.

Determine cómo accederá a la carpeta remota y anote la información de conexión. En esta sección se describe cómo configurar una carpeta remota y conectarse a ella.

Para configurar una carpeta remota:

1. Seleccione Sitio > Administrar sitios.

Aparece el cuadro de diálogo Administrar sitios.

2. Seleccione un sitio de Dreamweaver existente.

Si no ha definido ningún sitio de Dreamweaver, cree una carpeta local antes de continuar (véase “Configuración de una carpeta local” en la página 93).

3. Haga clic en Editar.

Aparecerá el cuadro de diálogo Definición del sitio.

4. Haga clic en el botón Avanzadas, si las opciones avanzadas no están visibles.

5. Seleccione Datos remotos en la lista Categoría que aparece en la parte izquierda.

6. Seleccione una opción de acceso.

Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

7. Haga clic en Aceptar.

Dreamweaver crea una conexión con la carpeta remota. Si está desarrollando un sitio dinámico, puede añadir una carpeta de servidor de prueba para procesar páginas dinámicas (véase “Especificación de dónde pueden procesarse las páginas dinámicas” en

la página 690).

Para conectarse a una carpeta remota con acceso FTP:

■ En el panel Archivos, haga clic en el botón Conectar al servidor remoto en la barra de

herramientas.

Para desconectarse de una carpeta remota con acceso FTP:

■ En el panel Archivos, haga clic en el botón Desconectar en la barra de herramientas.

Utilización de las opciones avanzadas para configurar un sitio de Dreamweaver 95

Para conectarse o desconectarse de una carpeta remota con acceso de red:

■ No es necesario conectarse a la carpeta remota; estará siempre conectado. Haga clic en el

botón Actualizar para ver los archivos remotos.

Temas relacionados

■ “Acerca de los sitios de Dreamweaver” en la página 88

■ “Aspectos básicos de la estructura de carpetas locales y remotas” en la página 89

■ “Solución de problemas de configuración de carpetas remotas” en la página 96

Solución de problemas de configuración de carpetas remotas

Un servidor Web se puede configurar de varias formas. En la siguiente lista se ofrece información sobre algunos problemas habituales que pueden surgir al configurar una carpeta remota (véase “Configuración de una carpeta remota” en la página 95) y cómo solucionarlos:

■ Es posible que la implementación FTP de Dreamweaver no funcione correctamente con

algunos servidores proxy, servidores de seguridad multinivel y otras formas de acceso indirecto al servidor.

Si surgen problemas con el acceso FTP, solicite ayuda al administrador del sistema local.

■ Para la implementación FTP de Dreamweaver, debe conectar con la carpeta raíz del

sistema remoto. (En muchas aplicaciones, puede conectar con cualquier directorio remoto y luego navegar por el sistema de archivos remoto para localizar el directorio deseado.)

Asegúrese de indicar la carpeta raíz del sistema remoto como el directorio del servidor. Si tiene algún problema para conectar y ha especificado el directorio del servidor

utilizando una sola barra inclinada (/), es posible que tenga que especificar una ruta relativa desde el directorio con el que está conectando y la carpeta raíz remota.

Por ejemplo, si la carpeta raíz remota es un nivel de directorio superior, puede que tenga que especificar ../../ para el directorio del servidor.

■ Los nombres de archivo y carpeta que contienen espacios y caracteres especiales suelen

ocasionar problemas al transferirse a sitios remotos. Utilice caracteres de subrayado en lugar de espacios y evite los caracteres especiales en los

nombres de archivo y carpeta siempre que pueda. En concreto, algunos caracteres que pueden causar problemas en los nombres de archivo son los dos puntos, las barras, el punto y el apóstrofo. Los caracteres especiales en los nombres de archivo o carpeta también pueden impedir que Dreamweaver cree un mapa del sitio.

■ Si experimenta problemas con nombres de archivo largos, acórtelos. En Macintosh, los

nombres de archivo no pueden tener más de 31 caracteres.

96 Capítulo 2: Configuración de un sitio de Dreamweaver

■ 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, estos alias no tienen ninguna repercusión sobre la capacidad de establecer conexión con la carpeta o el directorio correspondientes, pero si consigue conectar con una parte del servidor y no con otra, es posible que haya una discrepancia de alias.

■ Si aparece un mensaje de error del tipo “no se puede colocar el archivo”, es posible que la

carpeta remota se haya quedado sin espacio. Para más información, consulte el registro FTP.

NOTA

En general, cuando tenga un problema con una transferencia FTP, examine el registro FTP; para ello, seleccione Ventana > Resultados (Windows) o Sitio > Registro FTP (Macintosh) y, a continuación, haga clic en la etiqueta Registro FTP.

Edición de la configuración de un sitio de Dreamweaver

En el cuadro de diálogo Definición del sitio, utilice las opciones de la ficha Avanzadas para editar los sitios Dreamweaver.

Para editar la configuración de un sitio de Dreamweaver, siga uno de estos procedimientos:

■ Seleccione Sitio > Administrar sitios, seleccione un sitio en el cuadro de diálogo

Administrar sitios y haga clic en Editar.

■ En el panel Archivos, seleccione Administrar sitios en el menú emergente en el que aparece

el sitio, el servidor o la unidad actuales; seleccione un sitio en el cuadro de diálogo Administrar sitios y haga clic en Editar.

Temas relacionados

■ “Configuración de un sitio de Dreamweaver nuevo” en la página 91

Edición de la configuración de un sitio de Dreamweaver 97

Edición de sitios Web existentes con Dreamweaver

Puede usar Dreamweaver para editar sitios existentes aunque no lo haya utilizado Dreamweaver para crear el sitio original. Es posible editar sitios existentes ubicados en el sistema local o en un sistema remoto.

Edición de un sitio Web local con Dreamweaver

Puede usar Dreamweaver para editar un sitio Web de su disco local, aunque no lo haya creado con Dreamweaver.

NOTA

En esta sección, se configura un sitio de Dreamweaver para editar un sitio Web local existente. También puede editar el sitio existente sin crear un sitio de Dreamweaver. Para más información, consulte “Acceso a sitios, a un servidor y a unidades locales” en

la página 118.

Para editar un sitio Web local:

1. Seleccione Sitio > Administrar sitios.

Aparece el cuadro de diálogo Administrar sitios.

2. Haga clic en Nuevo.

Aparecerá el cuadro de diálogo Definición del sitio.

3. Haga clic en el botón Avanzadas, si las opciones avanzadas no están visibles.

La ficha Avanzadas del cuadro de diálogo Definición del sitio muestra las opciones de la categoría Datos locales.

4. Complete este cuadro de diálogo.

Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

5. Haga clic en Aceptar.

98 Capítulo 2: Configuración de un sitio de Dreamweaver

Edición de un sitio Web remoto con Dreamweaver

Puede utilizar Dreamweaver para copiar un sitio remoto (o una de sus ramas) en el disco local y editarlo, aunque no lo haya creado con Dreamweaver.

NOTA

En esta sección se configura un sitio de Dreamweaver para editar un sitio Web remoto existente. También puede editar el sitio existente sin crear un sitio de Dreamweaver. Para más información, consulte “Acceso a sitios, a un servidor y a unidades locales” en

la página 118.

Para editar un sitio remoto existente:

1. Cree una carpeta local que contenga el sitio y configúrela como carpeta local del sitio (véase

“Configuración de una carpeta local” en la página 93).

NOTA

Debe duplicar localmente toda la estructura de la rama correspondiente del sitio remoto existente. Para más información, consulte “Aspectos básicos de la

estructura de carpetas locales y remotas” en la página 89.

2. Configure una carpeta remota (véase “Configuración de una carpeta remota” en

la página 95) con la información del sitio existente.

Asegúrese de elegir la carpeta raíz correcta para el sitio remoto.

3. En el panel Archivos (Ventana > Archivos), haga clic en el botón Conectar al servidor

remoto (para el acceso a través de FTP) o en el botón Actualizar (para el acceso a través de la red) de la barra de herramientas para ver el sitio remoto.

4. Según la parte del sitio remoto que desee editar, siga uno de estos procedimientos:

■ Si desea trabajar con el sitio completo, seleccione la carpeta raíz del sitio remoto en el

panel Archivos y, a continuación, haga clic en Obtener en la barra de herramientas para descargar todo el sitio en el disco local.

■ Si desea trabajar sólo con uno de los archivos o carpetas del sitio, localícelo en la vista

remota del panel Archivos y haga clic en Obtener archivo en la barra de herramientas para descargarlo en el disco duro.

Dreamweaver duplica automáticamente la parte de la estructura del sitio remoto que sea necesaria para situar el archivo descargado en el lugar adecuado dentro de la jerarquía del sitio. Para editar únicamente una parte de un sitio, generalmente debe incluir los archivos dependientes.

5. Utilice Dreamweaver para trabajar en su sitio.

Temas relacionados

■ “Edición de un sitio Web local con Dreamweaver” en la página 98

Edición de sitios Web existentes con Dreamweaver 99

100 Capítulo 2: Configuración de un sitio de Dreamweaver

Adobe Dreamweaver - 8 User Manual [es]

Specifications and Main Features

Frequently Asked Questions

User Manual

Contenido

Aspectos básicos de Dreamweaver

Introducción

Novedades de Dreamweaver 8

Por dónde empezar

Principiantes en el diseño Web

Diseñadores de sitios Web con experiencia

Usuarios con experiencia en codificación manual

Diseñadores de aplicaciones Web

Flujo de trabajo de Dreamweaver para la creación de sitios Web

Planificación del sitio

Administración de los archivos del sitio

Diseño de las páginas Web

Adición de contenido a las páginas

Codificación manual

Configuración de una aplicación Web

Creación de páginas dinámicas

Desarrollo rápido de aplicaciones

Utilización de Dreamweaver con otras aplicaciones

Dreamweaver y accesibilidad

Función de validación de la accesibilidad de Dreamweaver

Guía de recursos de formación de Dreamweaver

Acceso a la documentación de Dreamweaver

Acceso a recursos en línea adicionales de Dreamweaver

Convenciones tipográficas

Recursos tecnológicos HTML y Web

Exploración del espacio de trabajo

Espacio de trabajo de Dreamweaver

Diseño del espacio de trabajo

Elementos del espacio de trabajo de Dreamweaver

Ventana de documento

Barra de herramientas Documento

Barra de herramientas Estándar

Barra de estado

Barra Insertar

Barra de herramientas Codificación

Barra de herramientas Representación de estilos

Informes en Dreamweaver

Personalización de Dreamweaver en sistemas multiusuario

Utilización de la ventana de documento

Cambio de vista en la ventana de documento

Organización de las ventanas de documentos en cascada o en mosaico

Cambio del tamaño de la ventana de documento

Configuración de las preferencias de la barra de estado

Utilización de barras de herramientas, inspectores y menús contextuales

Visualización de barras de herramientas

Utilización de la barra Insertar

Visualización de la barra Insertar y sus categorías y menús correspondientes

Utilización de la barra Insertar para insertar objetos

Personalización y utilización de la categoría Favoritos en la barra Insertar

Utilización del inspector de propiedades

Utilización de menús contextuales

Utilización de paneles y grupos de paneles

Visualización de paneles y grupos de paneles

Acoplamiento y desacoplamiento de paneles y grupos de paneles

Cambio de tamaño y de nombre de los grupos de paneles

Almacenamiento de grupos de paneles

Configuración de las preferencias de los paneles

Utilización de las funciones de accesibilidad de Dreamweaver

Utilización de lectores de pantalla con Dreamweaver

Compatibilidad con las funciones de accesibilidad del sistema operativo

Utilización del teclado para desplazarse por Dreamweaver

Desplazamiento por los paneles

Desplazamiento por el inspector de propiedades

Desplazamiento por los cuadros de diálogo

Desplazamiento por los marcos

Desplazamiento por las tablas

Optimización del espacio de trabajo para el diseño de páginas accesibles

Utilización de guías visuales en Dreamweaver

Aspectos básicos de personalización de Dreamweaver

Selección del diseño del espacio de trabajo (sólo en Windows)

Visualización de documentos en fichas (Macintosh)

Almacenamiento de diseños de espacio de trabajo personalizados

Cómo ocultar y mostrar la página de inicio

Configuración de las preferencias generales para Dreamweaver

Configuración de las preferencias de fuentes para la visualización de Dreamweaver